@ixfx/components 0.5.15 → 0.5.17

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;
@@ -6358,6 +6409,72 @@ var TreeDataModel = class {
 	}
 };
 //#endregion
+//#region src/styles/scroll-fade.ts
+/**
+* Zero-JS scroll edge fade.
+*
+* A CSS alpha mask driven by a scroll-linked animation (`scroll-timeline`),
+* rather than a JS scroll/resize listener - so it can never go stale after
+* a resize (widening a scroller so content fully fits clears the fade
+* immediately, with no JS involved), and it fades the whole element
+* including its children, not just a background layer that an opaque
+* item background would hide.
+*
+* Apply the returned `.scroll-fade-x` / `.scroll-fade-y` class to
+* whichever element actually has `overflow` scrolling on that axis.
+*
+* CSS variables:
+* - `--scroll-fade-width` (default `30px`): how far the fade extends from each edge.
+*
+* ```ts
+* import { scrollFadeStyles } from '../styles/scroll-fade.js';
+*
+* static styles = [scrollFadeStyles(`x`), css`...`];
+* ```
+* ```html
+* <div class="scroll-fade-x" style="overflow-x: scroll">...</div>
+* ```
+*/
+function scrollFadeStyles(axis) {
+	const className = `scroll-fade-${axis}`;
+	const start = `--${className}-start`;
+	const end = `--${className}-end`;
+	const timeline = `--${className}-timeline`;
+	const keyframesName = `${className}-fade`;
+	const gradientDirection = axis === `x` ? `to right` : `to bottom`;
+	return i$3`
+    @property ${r$2(start)} {
+      syntax: '<length>';
+      inherits: false;
+      initial-value: 0px;
+    }
+
+    @property ${r$2(end)} {
+      syntax: '<length>';
+      inherits: false;
+      initial-value: 0px;
+    }
+
+    @keyframes ${r$2(keyframesName)} {
+      0% { ${r$2(start)}: 0px; }
+      10%, 100% { ${r$2(start)}: var(--scroll-fade-width, 30px); }
+      0%, 90% { ${r$2(end)}: var(--scroll-fade-width, 30px); }
+      100% { ${r$2(end)}: 0px; }
+    }
+
+    .${r$2(className)} {
+      scroll-timeline: ${r$2(timeline)} ${r$2(axis)};
+      animation: ${r$2(keyframesName)};
+      animation-timeline: ${r$2(timeline)};
+      mask-image: linear-gradient(${r$2(gradientDirection)},
+        transparent,
+        black var(${r$2(start)}, 0px) calc(100% - var(${r$2(end)}, 0px)),
+        transparent
+      );
+    }
+  `;
+}
+//#endregion
 //#region src/narrowed-text/narrowed-text.ts
 const HIGHLIGHT_KEY = `narrowed-text-highlight`;
 let NarrowedTextElement = class NarrowedTextElement extends i {
@@ -6978,6 +7095,11 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		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;
@@ -6994,14 +7116,14 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			this._isFocused = false;
 		};
 		this.#onHostClick = () => {
-			this.shadowRoot?.querySelector(`.host-container`)?.focus();
+			this.#getHostContainer()?.focus();
 		};
 		this.#onMenuTriggerClose = () => {
 			document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
 			this.#currentOpenTrigger = null;
 			this.#menuOpenedByKeyboard = false;
 			requestAnimationFrame(() => {
-				this.shadowRoot?.querySelector(`.host-container`)?.focus();
+				this.#getHostContainer()?.focus();
 			});
 		};
 		this.#onMenuKeyNav = (e) => {
@@ -7083,6 +7205,24 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			this._focusOnNarrowedText = false;
 			this.#shiftFocusToPath();
 		};
+		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();
+				}
+				const hostContainer = this.#getHostContainer();
+				if (hostContainer) hostContainer.scrollLeft += wheelEvent.deltaX + wheelEvent.deltaY;
+				clearTimeout(this.#wheelScrollTimeout);
+				this.#wheelScrollTimeout = setTimeout(() => {
+					this.#isWheelScrolling = false;
+				}, 150);
+			}
+		};
+		this.#currentLeadingSiblings = void 0;
 	}
 	get selectedNodes() {
 		return this._selectedNodes;
@@ -7099,26 +7239,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) {
@@ -7143,6 +7298,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	}
 	#onFocus;
 	#onBlur;
+	#getHostContainer() {
+		return this.shadowRoot?.querySelector(`.host-container`) ?? null;
+	}
 	#onHostClick;
 	#handleOpenCaretMenu() {
 		const currentTickled = this.tickled.tickledId;
@@ -7222,7 +7380,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	}
 	#shiftFocusToPath() {
 		this._focusOnNarrowedText = false;
-		const hostContainer = this.shadowRoot?.querySelector(`.host-container`);
+		const hostContainer = this.#getHostContainer();
 		if (hostContainer) hostContainer.focus();
 	}
 	#onNarrowedTextBlur;
@@ -7271,15 +7429,24 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener(`click`, this.#onHostClick);
+		this.addEventListener(`wheel`, this.#onWheel, { passive: false });
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener(`click`, this.#onHostClick);
+		this.removeEventListener(`wheel`, this.#onWheel);
 		this.#modelUnsubscribe?.();
 		this.#modelUnsubscribe = void 0;
 		document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
 		this.#currentOpenTrigger = null;
 	}
+	firstUpdated() {
+		const hostContainer = this.#getHostContainer();
+		if (hostContainer) hostContainer.scrollLeft = hostContainer.scrollWidth - hostContainer.clientWidth;
+	}
+	#isWheelScrolling;
+	#onWheel;
+	#wheelScrollTimeout;
 	#runLayoutUpdate(_changedProperties) {
 		if (!this.shadowRoot) return;
 		const hsiElement = this.shadowRoot.querySelector(`.horiz-select-items`);
@@ -7327,6 +7494,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 +7508,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.leadingCaret && 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 +7529,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 +7585,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,86 +7687,156 @@ 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` : ``} ${isLast ? `last-label` : ``}" 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` : ``} ${isLast ? `last-label` : ``}" 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"
+        class="host-container scroll-fade-x"
         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)}
+        @mouseout=${(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 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}
       </div>
     `;
 	}
@@ -7592,19 +7889,21 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			themeFallbacks,
 			tickledStyles,
 			tickledItemStyles,
+			scrollFadeStyles(`x`),
 			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(--item-padding, var(--space-xs));
+      --crumb-item-border-radius: var(--item-border-radius);
+      --crumb-item-gap: var(--item-gap, var(--space-xs));
+      --crumb-separator: var(--surface-muted-text);
+      --crumb-truncate-min-width: 10ch;
       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) {
@@ -7616,14 +7915,20 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       outline-offset: 2px;
     }
 
+    /* Edge fade (shows/hides based on scroll position) comes from the
+     * shared .scroll-fade-x class - see ../styles/scroll-fade.ts */
     .host-container {
       display: flex;
       width: 100%;
       outline: none;
+      overflow: scroll;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
     }
 
     .parts {
       display: flex;
+      gap: var(--space-s);
     }
 
     .trailing {
@@ -7635,21 +7940,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.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.last-label .label {
+      color: var(--crumb-last-label-color, inherit);
+      font-style: var(--crumb-last-label-font-style, inherit);
+      font-weight: var(--crumb-last-label-font-weight, inherit);
+      text-decoration: var(--crumb-last-label-text-decoration, inherit);
+      text-underline-offset: var(--crumb-last-label-text-underline-offset, auto);
+    }
+
+    .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);
+      padding: var(--crumb-item-padding);
+      margin-left: var(--crumb-item-gap);
+      margin-right: var(--crumb-item-gap);
+      color: var(--crumb-separator);
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -7687,15 +8039,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 +8055,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;
@@ -7775,6 +8127,31 @@ __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: `hide-root`
+})], CrumbNavigationElement.prototype, "hideRoot", void 0);
 CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
 //#endregion
 //#region src/crumbs/crumb-path-controller.ts
@@ -8255,7 +8632,7 @@ let CrumbPathElement = class CrumbPathElement extends i {
         ${this.separator}
       </div>` : A;
 		return b`
-      <div class="crumbs" tabindex="0" @keydown=${this.#onHostKeyDown}>
+      <div class="crumbs scroll-fade-x" tabindex="0" @keydown=${this.#onHostKeyDown}>
         ${rootSegments.length > 0 ? rootSegments.map((label, i) => this.#renderRootSegment(label, i)) : A}
         ${leadingCaret}
         ${segments.map((label, i) => this.#renderSegment(label, i, i === segments.length - 1))}
@@ -8276,6 +8653,7 @@ let CrumbPathElement = class CrumbPathElement extends i {
 			prominenceStyles,
 			themeFallbacks,
 			popupSurfaceStyles,
+			scrollFadeStyles(`x`),
 			i$3`
     :host {
       --text-highlight: var(--accent);
@@ -12350,6 +12728,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 +12765,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 +24672,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 +24683,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;