Polish Breadcrumbs styles

Author: bendera

src/vscode-breadcrumb-item/vscode-breadcrumb-item.styles.ts

@@ -5,19 +5,17 @@ const styles: CSSResultGroup = [
   defaultStyles,
   css`
     :host {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      color: var(--vscode-breadcrumb-foreground, inherit);
-      outline: none;
-      cursor: default;
+      display: inline-block;
     }
 
     :host(:focus) {
-      color: var(
-        --vscode-breadcrumb-focusForeground,
-        var(--vscode-breadcrumb-foreground, inherit)
-      );
+      outline: none;
+    }
+
+    :host(:focus) .root {
+      color: var(--vscode-breadcrumb-focusForeground, #e0e0e0);
+      outline: 1px solid var(--vscode-focusBorder, #0078d4);
+      text-decoration: underline;
     }
 
     :host(.selected) {
@@ -27,21 +25,45 @@ const styles: CSSResultGroup = [
       );
     }
 
+    .root {
+      display: flex;
+      align-items: center;
+      color: var(--vscode-breadcrumb-foreground, inherit);
+      outline: none;
+      cursor: pointer;
+    }
+
+    :host(:hover) .root {
+      color: var(--vscode-breadcrumb-focusForeground, #e0e0e0);
+    }
+
+    .icon {
+      height: 16px;
+      width: 16px;
+    }
+
+    .icon.has-icon {
+      margin-right: 6px;
+    }
+
     .separator {
       user-select: none;
       color: var(--vscode-breadcrumb-foreground, inherit);
+      height: 16px;
       opacity: 0.7;
+      width: 16px;
     }
 
     :host(:first-child) .separator {
       display: none;
     }
 
-    .icon::slotted(*) {
-      display: inline-flex;
-      align-items: center;
-      font-size: 12px;
-      line-height: 1;
+    :host(:first-child) .root {
+      margin-left: 16px;
+    }
+
+    :host(:last-child) .root {
+      margin-right: 8px;
     }
   `,
 ];

src/vscode-breadcrumb-item/vscode-breadcrumb-item.ts

@@ -1,6 +1,9 @@
 import {TemplateResult, html} from 'lit';
 import {customElement, VscElement} from '../includes/VscElement.js';
 import styles from './vscode-breadcrumb-item.styles.js';
+import {chevronRightIcon} from '../includes/icons.js';
+import {state} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
 
 /**
  * @tag vscode-breadcrumb-item
@@ -23,12 +26,30 @@ export class VscodeBreadcrumbItem extends VscElement {
     this.setAttribute('role', 'listitem');
   }
 
+  @state()
+  _hasIcon = false;
+
+  private _handleSlotChange(ev: Event) {
+    const slot = ev.target as HTMLSlotElement;
+
+    this._hasIcon = slot.assignedElements().length > 0;
+  }
+
   override render(): TemplateResult {
-    return html`<span class="separator" aria-hidden="true" part="separator"
-        >›</span
-      >
-      <span class="icon" part="icon"><slot name="icon"></slot></span>
-      <span class="content" part="content"><slot></slot></span>`;
+    return html`
+      <div class="root">
+        <div class="separator" aria-hidden="true" part="separator">
+          <slot name="icon-separator">${chevronRightIcon}</slot>
+        </div>
+        <div
+          class=${classMap({icon: true, 'has-icon': this._hasIcon})}
+          part="icon"
+        >
+          <slot name="icon" @slotchange=${this._handleSlotChange}></slot>
+        </div>
+        <div class="content" part="content"><slot></slot></div>
+      </div>
+    `;
   }
 }
 

src/vscode-breadcrumbs/vscode-breadcrumbs.styles.ts

@@ -11,15 +11,15 @@ const styles: CSSResultGroup = [
     }
 
     .container {
-      position: relative;
-      display: flex;
+      -ms-overflow-style: none; /* IE 10+ */
       align-items: center;
-      gap: 6px;
+      background: var(--vscode-breadcrumb-background, transparent);
+      display: flex;
+      height: 22px;
       overflow-x: auto;
       overflow-y: hidden;
+      position: relative;
       scrollbar-width: none; /* Firefox */
-      -ms-overflow-style: none; /* IE 10+ */
-      background: var(--vscode-breadcrumb-background, transparent);
     }
 
     .container::-webkit-scrollbar {