From 32586a7908d53ff43b6279aaf4dc2d38968a86d1 Mon Sep 17 00:00:00 2001
From: mJarsater <62651103+mJarsater@users.noreply.github.com>
Date: Tue, 24 Oct 2023 08:51:58 +0200
Subject: [PATCH] fix(breadcrumb): correct focus state (#366)

* fix(breadcrumb): correct focus state

* fix(breadcrumb): set after on wrapping element over host, use js to mark last breadcrumb
---
 .../components/breadcrumbs/breadcrumb/breadcrumb.scss | 11 +++++++----
 .../core/src/components/breadcrumbs/breadcrumbs.tsx   |  3 ++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/breadcrumbs/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumbs/breadcrumb/breadcrumb.scss
index a49688d7a..85c712792 100644
--- a/packages/core/src/components/breadcrumbs/breadcrumb/breadcrumb.scss
+++ b/packages/core/src/components/breadcrumbs/breadcrumb/breadcrumb.scss
@@ -13,8 +13,11 @@
     }
   }
 
-  &:focus-visible {
+  ::slotted(*:focus-visible) {
     @include tds-focus-state;
+
+    // Overrides the offset of the tds-focus-state to align with design.
+    outline-offset: -0;
   }
 
   &.current,
@@ -33,7 +36,7 @@
     }
   }
 
-  ::slotted(*)::after {
+  &::after {
     content: '\203A';
     color: var(--tds-breadcrumb-separator-color);
     margin-right: 4px;
@@ -44,8 +47,8 @@
   }
 }
 
-:host(:last-of-type) {
-  ::slotted(*)::after {
+:host(.last) [role='listitem'] {
+  &::after {
     display: none;
   }
 }
diff --git a/packages/core/src/components/breadcrumbs/breadcrumbs.tsx b/packages/core/src/components/breadcrumbs/breadcrumbs.tsx
index 01c39abd9..783017b15 100644
--- a/packages/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/packages/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -9,9 +9,10 @@ import { Component, h, Element } from '@stencil/core';
   shadow: true,
 })
 export class TdsBreadcrumbs {
-  @Element() el: HTMLElement;
+  @Element() host: HTMLElement;
 
   render() {
+    this.host.children[this.host.children.length - 1]?.classList.add('last');
     return (
       <nav>
         <div role="list" class={'tds-breadcrumb'}>