@ixfx/components 0.5.15 → 0.5.16

package/bundle/index.js

@@ -1119,6 +1119,56 @@ const themeFallbacks = i$3`
     inherits: true;
     initial-value: 0.1;
   }
+  @property --crumb-item-bg {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: transparent;
+  }
+  @property --crumb-item-bg-tickled {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: var(--surface-5);
+  }
+  @property --crumb-item-text-tickled {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: inherit;
+  }
+  @property --crumb-item-border {
+    syntax: '*';
+    inherits: true;
+    initial-value: 1px solid transparent;
+  }
+  @property --crumb-item-border-tickled {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: var(--accent);
+  }
+  @property --crumb-item-padding {
+    syntax: '*';
+    inherits: true;
+    initial-value: var(--space-xs);
+  }
+  @property --crumb-item-border-radius {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: var(--radius-m);
+  }
+  @property --crumb-item-gap {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: var(--space-xs);
+  }
+  @property --crumb-separator {
+    syntax: '<color>';
+    inherits: true;
+    initial-value: var(--surface-muted-text);
+  }
+  @property --crumb-truncate-min-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 5ch;
+  }
 `;
 //#endregion
 //#region src/styles/popup.ts
@@ -3985,6 +4035,7 @@ let MenuTrigger = class MenuTrigger extends i {
     :host {
       display: inline-block;
       position: relative;
+      --ixfx-button-padding: var(--ixfx-button-padding, var(--space-s) var(--space-m));
     }
 
     .trigger-area {
@@ -3998,7 +4049,7 @@ let MenuTrigger = class MenuTrigger extends i {
       border: none;
       color: var(--surface-3-text);
       cursor: pointer;
-      padding: var(--space-s) var(--space-m);
+      padding: var(--ixfx-button-padding);
       font-family: var(--font-family, inherit);
       font-size: var(--text-m);
       font-weight: 600;
@@ -6974,10 +7025,14 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		this.exclusivity = `none`;
 		this.selectionFilter = `leaf`;
 		this._openIdx = -1;
-		this._isFocused = false;
 		this._menuOpen = false;
 		this._focusOnNarrowedText = false;
 		this.inputMode = ``;
+		this.noTruncate = false;
+		this.showSuggestions = false;
+		this.leadingCaret = false;
+		this.caretEmbedded = true;
+		this.hideRoot = false;
 		this.#previousSelectionKey = ``;
 		this.#menuOpenedByKeyboard = false;
 		this.#currentOpenTrigger = null;
@@ -6987,21 +7042,15 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 				if (index !== void 0) this.#onTickled(index);
 			}
 		});
-		this.#onFocus = () => {
-			this._isFocused = true;
-		};
-		this.#onBlur = () => {
-			this._isFocused = false;
-		};
 		this.#onHostClick = () => {
-			this.shadowRoot?.querySelector(`.host-container`)?.focus();
+			this.focus();
 		};
 		this.#onMenuTriggerClose = () => {
 			document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
 			this.#currentOpenTrigger = null;
 			this.#menuOpenedByKeyboard = false;
 			requestAnimationFrame(() => {
-				this.shadowRoot?.querySelector(`.host-container`)?.focus();
+				this.focus();
 			});
 		};
 		this.#onMenuKeyNav = (e) => {
@@ -7024,7 +7073,8 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 				}
 			}
 		};
-		this.#onKeyDown = (e) => {
+		this.#onKeyDown = (event) => {
+			const e = event;
 			const r = this.root;
 			const sel = this.selectedNode;
 			if (!r || !sel) return;
@@ -7083,6 +7133,29 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			this._focusOnNarrowedText = false;
 			this.#shiftFocusToPath();
 		};
+		this.#onMouseOut = (e) => {
+			this.tickled.handlePointerLeave(e);
+		};
+		this.#isWheelScrolling = false;
+		this.#onWheel = (e) => {
+			const wheelEvent = e;
+			if (wheelEvent.deltaX !== 0 || wheelEvent.deltaY !== 0) {
+				e.preventDefault();
+				if (!this.#isWheelScrolling) {
+					this.#isWheelScrolling = true;
+					this.tickled.clearTickled();
+				}
+				this.scrollLeft += wheelEvent.deltaX + wheelEvent.deltaY;
+				clearTimeout(this.#wheelScrollTimeout);
+				this.#wheelScrollTimeout = setTimeout(() => {
+					this.#isWheelScrolling = false;
+				}, 150);
+			}
+		};
+		this.#onScroll = () => {
+			this.#updateFade();
+		};
+		this.#currentLeadingSiblings = void 0;
 	}
 	get selectedNodes() {
 		return this._selectedNodes;
@@ -7099,26 +7172,41 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		if (!r || !sel) return [];
 		const pathNodes = this.#findPath(r, sel) ?? [r];
 		const items = [];
-		pathNodes.forEach((_node, i) => {
-			items.push({
-				id: i,
+		if (this.caretEmbedded) {
+			pathNodes.forEach((_node, i) => {
+				items.push({
+					id: i,
+					enabled: true
+				});
+			});
+			if (this.#hasChildOptions()) items.push({
+				id: pathNodes.length,
 				enabled: true
 			});
-		});
-		if (this.#hasChildOptions()) items.push({
-			id: pathNodes.length,
-			enabled: true
-		});
+		} else {
+			let segmentId = 0;
+			pathNodes.forEach((node, i) => {
+				const isLast = i === pathNodes.length - 1;
+				const hasChildren = node.item.isLeaf !== true && (node.children === void 0 || node.children.length > 0);
+				const showLeadingCaret = this.leadingCaret && (i > 0 || this.hideRoot) && hasChildren;
+				const showTrailingCaret = !this.leadingCaret && hasChildren || this.leadingCaret && isLast && hasChildren;
+				if (showLeadingCaret) items.push({
+					id: segmentId++,
+					enabled: true
+				});
+				items.push({
+					id: segmentId++,
+					enabled: true
+				});
+				if (showTrailingCaret) items.push({
+					id: segmentId++,
+					enabled: true
+				});
+			});
+		}
 		return items;
 	}
 	#onTickled(index) {
-		const r = this.root;
-		const sel = this.selectedNode;
-		if (!r || !sel) return;
-		const pathNodes = this.#findPath(r, sel) ?? [r];
-		const hasChildOptions = this.#hasChildOptions();
-		if (index < pathNodes.length) this._openIdx = index;
-		else if (hasChildOptions && index === pathNodes.length) this._openIdx = pathNodes.length - 1;
 		if (this.tickled.inputMode === `keyboard`) this.#scrollTickledIntoView(index);
 	}
 	#scrollTickledIntoView(index) {
@@ -7141,8 +7229,6 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		const isPending = this.#pendingNode === s;
 		return (s.children ?? []).length > 0 || isPending;
 	}
-	#onFocus;
-	#onBlur;
 	#onHostClick;
 	#handleOpenCaretMenu() {
 		const currentTickled = this.tickled.tickledId;
@@ -7222,8 +7308,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	}
 	#shiftFocusToPath() {
 		this._focusOnNarrowedText = false;
-		const hostContainer = this.shadowRoot?.querySelector(`.host-container`);
-		if (hostContainer) hostContainer.focus();
+		this.focus();
 	}
 	#onNarrowedTextBlur;
 	#onNarrowedTextShiftTab;
@@ -7270,16 +7355,42 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		this.tabIndex = 0;
 		this.addEventListener(`click`, this.#onHostClick);
+		this.addEventListener(`wheel`, this.#onWheel, { passive: false });
+		this.addEventListener(`scroll`, this.#onScroll);
+		this.addEventListener(`keydown`, this.#onKeyDown);
+		this.addEventListener(`menu-trigger-close`, this.#onMenuTriggerClose);
+		this.addEventListener(`mouseout`, this.#onMouseOut);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener(`click`, this.#onHostClick);
+		this.removeEventListener(`wheel`, this.#onWheel);
+		this.removeEventListener(`scroll`, this.#onScroll);
+		this.removeEventListener(`keydown`, this.#onKeyDown);
+		this.removeEventListener(`menu-trigger-close`, this.#onMenuTriggerClose);
+		this.removeEventListener(`mouseout`, this.#onMouseOut);
 		this.#modelUnsubscribe?.();
 		this.#modelUnsubscribe = void 0;
 		document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
 		this.#currentOpenTrigger = null;
 	}
+	firstUpdated() {
+		this.scrollLeft = this.scrollWidth - this.clientWidth;
+		this.#updateFade();
+	}
+	#onMouseOut;
+	#isWheelScrolling;
+	#onWheel;
+	#wheelScrollTimeout;
+	#onScroll;
+	#updateFade() {
+		const hasLeftFade = this.scrollLeft > 0;
+		const hasRightFade = this.scrollLeft < this.scrollWidth - this.clientWidth - 1;
+		this.classList.toggle(`has-left-fade`, hasLeftFade);
+		this.classList.toggle(`has-right-fade`, hasRightFade);
+	}
 	#runLayoutUpdate(_changedProperties) {
 		if (!this.shadowRoot) return;
 		const hsiElement = this.shadowRoot.querySelector(`.horiz-select-items`);
@@ -7327,6 +7438,13 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			if (result) return result;
 		}
 	}
+	#scrollSegmentIntoView(depth) {
+		if (!this.shadowRoot) return;
+		this.shadowRoot.querySelectorAll(`.crumb-segment`)[depth]?.scrollIntoView({
+			block: `nearest`,
+			inline: `start`
+		});
+	}
 	#setSelected(node) {
 		const previous = this.selectedNode;
 		if (previous) this.#previousSelectionKey = previous.item?.key ?? ``;
@@ -7334,6 +7452,15 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		const previousSet = previous ? /* @__PURE__ */ new Set([previous]) : /* @__PURE__ */ new Set();
 		this.selectedNode = node;
 		this._selectedNodes = /* @__PURE__ */ new Set([node]);
+		if (this.root) {
+			const path = this.#findPath(this.root, node);
+			if (path) {
+				const depth = this.hideRoot && path.length > 1 ? path.length - 2 : path.length - 1;
+				requestAnimationFrame(() => {
+					this.#scrollSegmentIntoView(depth);
+				});
+			}
+		}
 		this.dispatchEvent(new CustomEvent(`select`, {
 			detail: {
 				selected: /* @__PURE__ */ new Set([node]),
@@ -7346,6 +7473,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	#onLabelClick(node, depth) {
 		this._openIdx = -1;
 		this.#setSelected(node);
+		if (this.leadingCaret) this.#scrollSegmentIntoView(depth);
 		this.dispatchEvent(new CustomEvent(`item-click`, {
 			detail: {
 				node,
@@ -7401,9 +7529,52 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	}
 	#onSegmentMenuCommand(e, node, depth) {
 		const key = e.detail.command;
+		if (this.leadingCaret) {
+			const child = node.children?.find((c) => c.item.key === key);
+			if (child) {
+				this.#onChildClick(child, depth + 1);
+				return;
+			}
+			if (this.#currentLeadingSiblings) {
+				const sibling = this.#currentLeadingSiblings.find((c) => c.item.key === key);
+				if (sibling) this.#onChildClick(sibling, depth);
+				this.#currentLeadingSiblings = void 0;
+				return;
+			}
+		}
 		const child = node.children?.find((c) => c.item.key === key);
 		if (child) this.#onChildClick(child, depth + 1);
 	}
+	#currentLeadingSiblings;
+	#getSiblingMenuItems(pathNodes, index) {
+		if (index === 0) {
+			if (!this.hideRoot || !this.root) return [];
+			const siblings = [...this.root.children ?? []].sort((a, b) => (a.item.label ?? ``).localeCompare(b.item.label ?? ``));
+			this.#currentLeadingSiblings = siblings;
+			return siblings.map((sibling) => b`
+        <ixfx-menu-item
+          label="${sibling.item.label}"
+          command="${sibling.item.key}"
+          icon-name="${sibling.item.icon ?? A}"
+          @click=${() => {
+				this.#onChildClick(sibling, index);
+			}}
+        ></ixfx-menu-item>
+      `);
+		}
+		const siblings = [...pathNodes[index - 1].children ?? []].sort((a, b) => (a.item.label ?? ``).localeCompare(b.item.label ?? ``));
+		this.#currentLeadingSiblings = siblings;
+		return siblings.map((sibling) => b`
+      <ixfx-menu-item
+        label="${sibling.item.label}"
+        command="${sibling.item.key}"
+        icon-name="${sibling.item.icon ?? A}"
+        @click=${() => {
+			this.#onChildClick(sibling, index);
+		}}
+      ></ixfx-menu-item>
+    `);
+	}
 	#onChildClick(node, depth) {
 		this._openIdx = -1;
 		this.#setSelected(node);
@@ -7460,87 +7631,146 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		const sel = this.selectedNode;
 		if (!r || !sel) return b``;
 		this.inputMode = this.tickled.inputMode;
-		const pathNodes = this.#findPath(r, sel) ?? [r];
+		let pathNodes = this.#findPath(r, sel) ?? [r];
+		if (this.hideRoot && pathNodes.length > 1) pathNodes = pathNodes.slice(1);
 		this.#hasChildOptions();
-		const parts = pathNodes.map((node, i) => {
+		const parts = [];
+		let segmentId = 0;
+		pathNodes.forEach((node, i) => {
 			const isLast = i === pathNodes.length - 1;
 			const isPending = this.#pendingNode === node;
 			const isOpen = this._openIdx === i;
 			const hasChildren = node.item.isLeaf !== true && (node.children === void 0 || node.children.length > 0);
-			const showCaret = !isLast && hasChildren;
 			const isTickled = this.tickled.isTickled(i);
-			const menuItems = (node.children ?? []).map((c) => b`
-        <ixfx-menu-item 
-          label="${c.item.label}" 
+			const showLeadingCaret = this.leadingCaret && (i > 0 || this.hideRoot) && hasChildren;
+			const showTrailingCaret = !this.leadingCaret && hasChildren || this.leadingCaret && isLast && hasChildren;
+			const siblingMenuItems = showLeadingCaret ? this.#getSiblingMenuItems(pathNodes, i) : [];
+			const childMenuItems = (node.children ?? []).map((c) => b`
+        <ixfx-menu-item
+          label="${c.item.label}"
           command="${c.item.key}"
           icon-name="${c.item.icon ?? A}"
         ></ixfx-menu-item>
       `);
-			return b`
-        <div class="item crumb-segment ${isTickled ? `tickled` : ``}"
-          @pointerenter=${() => {
-				this.tickled.handlePointerEnter(i);
-				this.dispatchEvent(new CustomEvent(`tickle`, {
-					detail: {
-						node,
-						depth: i
-					},
-					bubbles: true,
-					composed: true
-				}));
-			}}
-        >
-          <span class="label" @click=${() => this.#onLabelClick(node, i)}>${node.item.label}</span>
-          ${showCaret ? b`
-            <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
-              ${isPending ? b`<span class="loading-spinner"></span>` : b`
-                <ixfx-menu-trigger mode="trigger" label="›" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
-                  <ixfx-menu-container slot="menu">
-                    ${menuItems}
-                  </ixfx-menu-container>
-                </ixfx-menu-trigger>
-                `}
-            </span>
-            ` : A}
-        </div>
-      `;
+			if (this.caretEmbedded) {
+				const canTruncate = !this.noTruncate && !isLast && !isTickled;
+				parts.push(b`
+          <div class="item crumb-segment ${isTickled ? `tickled` : ``} ${canTruncate ? `truncatable` : ``} ${this.leadingCaret ? `leading-caret` : ``}" data-segment-id="${i}" data-path-index="${i}"
+            @click=${(e) => {
+					if (e.target.closest(`.caret`)) return;
+					this.#onLabelClick(node, i);
+				}}
+          >
+            ${showLeadingCaret ? b`
+              <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
+                ${isPending ? b`<span class="loading-spinner"></span>` : b`
+                  <ixfx-menu-trigger mode="trigger" label="›" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                    <ixfx-menu-container slot="menu">
+                      ${siblingMenuItems}
+                    </ixfx-menu-container>
+                  </ixfx-menu-trigger>
+                  `}
+              </span>
+              ` : A}
+            <span class="label">${node.item.label}</span>
+            ${showTrailingCaret ? b`
+              <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
+                ${isPending ? b`<span class="loading-spinner"></span>` : b`
+                  <ixfx-menu-trigger mode="trigger" label="›" placement="right-start" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                    <ixfx-menu-container slot="menu">
+                      ${childMenuItems}
+                    </ixfx-menu-container>
+                  </ixfx-menu-trigger>
+                  `}
+              </span>
+              ` : A}
+          </div>
+        `);
+			} else {
+				const leadingCaretTickled = showLeadingCaret ? this.tickled.isTickled(segmentId) : false;
+				if (showLeadingCaret) {
+					parts.push(b`
+            <div class="item crumb-segment ${leadingCaretTickled ? `tickled` : ``}" data-segment-id="${segmentId}" data-path-index="${i}"
+              @click=${(e) => {
+						const trigger = e.target.closest(`.crumb-segment`)?.querySelector(`ixfx-menu-trigger`);
+						if (trigger) trigger.openMenu();
+					}}
+            >
+              <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
+                ${isPending ? b`<span class="loading-spinner"></span>` : b`
+                  <ixfx-menu-trigger mode="trigger" label="›" placement="right-start" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                    <ixfx-menu-container slot="menu">
+                      ${siblingMenuItems}
+                    </ixfx-menu-container>
+                  </ixfx-menu-trigger>
+                  `}
+              </span>
+            </div>
+          `);
+					segmentId++;
+				}
+				const labelTickled = this.tickled.isTickled(segmentId);
+				const canTruncate = !this.noTruncate && !isLast && !labelTickled;
+				parts.push(b`
+          <div class="item crumb-segment ${labelTickled ? `tickled` : ``} ${canTruncate ? `truncatable` : ``}" data-segment-id="${segmentId}" data-path-index="${i}"
+            @click=${(e) => {
+					if (e.target.closest(`.caret`)) return;
+					this.#onLabelClick(node, i);
+				}}
+          >
+            <span class="label">${node.item.label}</span>
+          </div>
+        `);
+				segmentId++;
+				if (showTrailingCaret) {
+					const trailingCaretTickled = this.tickled.isTickled(segmentId);
+					parts.push(b`
+            <div class="item crumb-segment ${trailingCaretTickled ? `tickled` : ``}" data-segment-id="${segmentId}" data-path-index="${i}"
+              @click=${(e) => {
+						const trigger = e.target.closest(`.crumb-segment`)?.querySelector(`ixfx-menu-trigger`);
+						if (trigger) trigger.openMenu();
+					}}
+            >
+              <span class="caret ${isOpen ? `open` : ``} ${isPending ? `pending` : ``}">
+                ${isPending ? b`<span class="loading-spinner"></span>` : b`
+                  <ixfx-menu-trigger mode="trigger" label="›" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
+                    <ixfx-menu-container slot="menu">
+                      ${childMenuItems}
+                    </ixfx-menu-container>
+                  </ixfx-menu-trigger>
+                  `}
+              </span>
+            </div>
+          `);
+					segmentId++;
+				}
+			}
 		});
-		const childOptions = this.#renderChildOptions();
-		const isLastItemTickled = this.tickled.isTickled(pathNodes.length);
 		return b`
-      <div
-        class="host-container"
-        tabindex="0"
-        @focus=${this.#onFocus}
-        @blur=${this.#onBlur}
-        @keydown=${this.#onKeyDown}
-        @click=${this.#onHostClick}
-        @menu-trigger-close=${this.#onMenuTriggerClose}
-        @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
-      >
-        <div class="parts">${parts}<div class="trailing"></div></div>
-        ${childOptions ? b`
-          <ixfx-menu-trigger
-            id="child-options-trigger"
-            class="item separator-trigger ${isLastItemTickled ? `tickled` : ``}"
-            mode="trigger"
-            label="›"
-            @menu-command=${this.#onMenuCommand}
-            @pointerenter=${() => this.tickled.handlePointerEnter(pathNodes.length)}
-          >
-            <ixfx-menu-container slot="menu">
-              ${(this.selectedNode?.children ?? []).map((c) => b`
-                <ixfx-menu-item 
-                  label="${c.item.label}" 
-                  command="${c.item.key}"
-                  icon-name="${c.item.icon ?? A}"
-                ></ixfx-menu-item>
-              `)}
-            </ixfx-menu-container>
-          </ixfx-menu-trigger>
-        ` : A}
-        ${childOptions}
-      </div>
+      <div class="parts"
+        @mouseover=${(e) => {
+			if (this.#isWheelScrolling) return;
+			const target = e.target;
+			if (!(target instanceof HTMLElement)) return;
+			const segment = target.closest(`.crumb-segment`);
+			if (!segment) return;
+			const segmentId = parseInt(segment.dataset.segmentId ?? ``, 10);
+			if (Number.isNaN(segmentId)) return;
+			const pathIndex = parseInt(segment.dataset.pathIndex ?? ``, 10);
+			const node = pathNodes[pathIndex];
+			if (!node) return;
+			this.tickled.handlePointerEnter(segmentId);
+			this.dispatchEvent(new CustomEvent(`tickle`, {
+				detail: {
+					node,
+					depth: pathIndex
+				},
+				bubbles: true,
+				composed: true
+			}));
+		}}
+      >${parts}<div class="trailing"></div></div>
+      ${this.showSuggestions ? this.#renderChildOptions() : A}
     `;
 	}
 	#renderChildOptions() {
@@ -7594,36 +7824,66 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			tickledItemStyles,
 			i$3`
     :host {
-      --text-highlight: var(--accent);
-      --separator: var(--surface-muted-text);
-      --padding-s: var(--space-xs);
+      --crumb-item-bg: var(--item-bg, transparent);
+      --crumb-item-bg-tickled: var(--item-bg-tickled);
+      --crumb-item-text-tickled: var(--item-text-tickled);
+      --crumb-item-border: var(--item-border);
+      --crumb-item-border-tickled: var(--item-border-tickled);
+      --crumb-item-padding: var(--space-xs);
+      --crumb-item-border-radius: var(--item-border-radius);
+      --crumb-item-gap: var(--space-xs);
+      --crumb-separator: var(--surface-muted-text);
+      --crumb-truncate-min-width: 10ch;
+      --crumb-fade-width: 30px;
+      --crumb-fade-color: var(--surface-3);
+      position: relative;
       display: flex;
       overflow: scroll;
       width: 100%;
       scroll-snap-type: x mandatory;
       scrollbar-width: none;
-
-      /* Breadcrumb tickled overrides — no layout shift: keep transparent border at rest */
-      --item-padding: 0;
     }
 
-    :host(.focused) {
+    :host(:focus) {
       outline: none;
     }
 
-    :host(:focus-within) .host-container {
+    :host(:focus) .parts {
       outline: 2px solid var(--accent);
       outline-offset: 2px;
     }
 
-    .host-container {
-      display: flex;
-      width: 100%;
-      outline: none;
+    :host::before,
+    :host::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: var(--crumb-fade-width);
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      z-index: 1;
+    }
+
+    :host::before {
+      left: 0;
+      background: linear-gradient(to right, var(--crumb-fade-color), transparent);
+    }
+
+    :host::after {
+      right: 0;
+      background: linear-gradient(to left, var(--crumb-fade-color), transparent);
+    }
+
+    :host(.has-left-fade)::before,
+    :host(.has-right-fade)::after {
+      opacity: 1;
     }
 
     .parts {
       display: flex;
+      gap: var(--space-s);
     }
 
     .trailing {
@@ -7635,21 +7895,68 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     .crumb-segment {
       display: flex;
       align-items: center;
+      flex-shrink: 0;
+      background: var(--crumb-item-bg);
+      border: var(--crumb-item-border);
+      border-radius: var(--crumb-item-border-radius);
+    }
+
+    .crumb-segment.leading-caret {
+      flex-direction: row;
+    }
+
+    .crumb-segment.leading-caret-only {
+      flex-direction: row;
+      padding: var(--crumb-item-padding);
+    }
+
+    .crumb-segment.trailing-caret-only {
+      flex-direction: row;
+      padding: var(--crumb-item-padding);
+    }
+
+    .crumb-segment.tickled {
+      background: var(--crumb-item-bg-tickled);
+      border-color: var(--crumb-item-border-tickled);
+      color: var(--crumb-item-text-tickled);
+      flex-shrink: 0;
+      min-width: auto;
+    }
+
+    .crumb-segment.truncatable {
+      flex-shrink: 1;
+      min-width: min(var(--crumb-truncate-min-width), auto);
+      overflow: hidden;
+    }
+
+    .crumb-segment.truncatable .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
     }
 
     .label {
       cursor: pointer;
-      margin-right: var(--padding-s);
       white-space: nowrap;
+      color: inherit;
+    }
+
+    .crumb-segment.tickled .label {
+      color: var(--crumb-item-text-tickled);
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    .crumb-segment ixfx-menu-trigger {
+      --ixfx-button-padding: var(--space-xs) 8px;
     }
 
     .caret {
       position: relative;
-      cursor: pointer;
-      padding: var(--padding-m);
-      margin-left: var(--padding-s);
-      margin-right: var(--padding-s);
-      color: var(--separator);
+      cursor: pointer; 
+      
+      color: var(--crumb-separator);
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -7687,15 +7994,15 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     }
 
     .separator {
-      margin-left: var(--padding-s);
-      margin-right: var(--padding-s);
-      color: var(--separator);
+      margin-left: var(--crumb-item-gap);
+      margin-right: var(--crumb-item-gap);
+      color: var(--crumb-separator);
     }
 
     .separator-trigger {
       display: inline-flex;
-      margin-left: var(--padding-s);
-      margin-right: var(--padding-s);
+      margin-left: var(--crumb-item-gap);
+      margin-right: var(--crumb-item-gap);
       --_trigger-hover-bg: transparent;
       --_trigger-hover-opacity: 0.6;
     }
@@ -7703,7 +8010,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     .separator-trigger::part(base) {
       background: none;
       border: none;
-      color: var(--separator);
+      color: var(--crumb-separator);
       padding: 0;
       cursor: pointer;
       font-size: inherit;
@@ -7768,13 +8075,37 @@ __decorate([property({
 	attribute: `selection-filter`
 })], CrumbNavigationElement.prototype, "selectionFilter", void 0);
 __decorate([state()], CrumbNavigationElement.prototype, "_openIdx", void 0);
-__decorate([state()], CrumbNavigationElement.prototype, "_isFocused", void 0);
 __decorate([state()], CrumbNavigationElement.prototype, "_menuOpen", void 0);
 __decorate([state()], CrumbNavigationElement.prototype, "_focusOnNarrowedText", void 0);
 __decorate([property({
 	reflect: true,
 	attribute: `input-mode`
 })], CrumbNavigationElement.prototype, "inputMode", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `no-truncate`
+})], CrumbNavigationElement.prototype, "noTruncate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `show-suggestions`
+})], CrumbNavigationElement.prototype, "showSuggestions", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `leading-caret`
+})], CrumbNavigationElement.prototype, "leadingCaret", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `caret-embedded`
+})], CrumbNavigationElement.prototype, "caretEmbedded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `hideroot`
+})], CrumbNavigationElement.prototype, "hideRoot", void 0);
 CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
 //#endregion
 //#region src/crumbs/crumb-path-controller.ts
@@ -12350,6 +12681,7 @@ let VerticalListElement = class VerticalListElement extends i {
       overflow: hidden;
       box-sizing: border-box;
       outline: none;
+      --ixfx-list-item-padding: var(--ixfx-list-item-padding, var(--list-item-padding, 4px var(--space-m, 8px)));
     }
 
     :host(:focus-visible) {
@@ -12386,7 +12718,7 @@ let VerticalListElement = class VerticalListElement extends i {
     ::slotted(li) {
       display: flex;
       align-items: center;
-      padding: var(--list-item-padding, 4px var(--space-m, 8px));
+      padding: var(--ixfx-list-item-padding);
       min-height: var(--list-item-height, 28px);
       cursor: pointer;
       user-select: none;
@@ -24293,7 +24625,7 @@ let TabListItemElement = class TabListItemElement extends i {
         --selected-tab-border-width: var(--ixfx-selected-tab-border-width, 1px);
         --selected-tab-weight: var(--ixfx-selected-tab-weight, bold);
         --selected-background: var(--ixfx-tab-selected-background, var(--surface-5));
-        --padding: var(--space-m);
+        --tab-padding: var(--ixfx-tab-padding, var(--space-m));
         display: inline-flex;
         min-width: 0;
         user-select: none;
@@ -24304,7 +24636,7 @@ let TabListItemElement = class TabListItemElement extends i {
         display: flex;
         align-items: center;
         gap: var(--space-s, 4px);
-        padding: var(--padding) calc(2 * var(--padding));
+        padding: var(--tab-padding) calc(2 * var(--tab-padding));
         min-width: 0;
         width: 100%;
         font-weight: 500;