@ixfx/components 0.5.16 → 0.5.18

package/bundle/index.js

@@ -3843,6 +3843,7 @@ let MenuTrigger = class MenuTrigger extends i {
 		this.mode = `trigger`;
 		this.label = `⋮`;
 		this.placement = `bottom-start`;
+		this.tabStop = true;
 		this._isOpen = false;
 		this._hasMenu = false;
 		this._hasTriggerSlot = false;
@@ -4105,7 +4106,7 @@ let MenuTrigger = class MenuTrigger extends i {
         @click=${this._handleTriggerClick}
         @contextmenu=${this._handleContextMenu}
       >
-        ${showButton ? b`<button class="trigger-btn" part="base">${this.label}</button>` : null}
+        ${showButton ? b`<button class="trigger-btn" part="base" tabindex=${this.tabStop ? `0` : `-1`}>${this.label}</button>` : null}
         <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}></slot>
       </div>
       <div
@@ -4123,6 +4124,10 @@ __decorate([property({ type: String })], MenuTrigger.prototype, "label", void 0)
 __decorate([property({ attribute: false })], MenuTrigger.prototype, "registry", void 0);
 __decorate([property({ attribute: false })], MenuTrigger.prototype, "keyboardManager", void 0);
 __decorate([property({ type: String })], MenuTrigger.prototype, "placement", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `tab-stop`
+})], MenuTrigger.prototype, "tabStop", void 0);
 __decorate([state()], MenuTrigger.prototype, "_isOpen", void 0);
 __decorate([state()], MenuTrigger.prototype, "_hasMenu", void 0);
 __decorate([state()], MenuTrigger.prototype, "_hasTriggerSlot", void 0);
@@ -6409,6 +6414,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 {
@@ -7025,6 +7096,7 @@ 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 = ``;
@@ -7042,15 +7114,21 @@ 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.focus();
+			this.#getHostContainer()?.focus();
 		};
 		this.#onMenuTriggerClose = () => {
 			document.removeEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
 			this.#currentOpenTrigger = null;
 			this.#menuOpenedByKeyboard = false;
 			requestAnimationFrame(() => {
-				this.focus();
+				this.#getHostContainer()?.focus();
 			});
 		};
 		this.#onMenuKeyNav = (e) => {
@@ -7064,7 +7142,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 					const r = this.root;
 					const sel = this.selectedNode;
 					if (!r || !sel) break;
-					const totalItems = (this.#findPath(r, sel) ?? [r]).length + (this.#hasChildOptions() ? 1 : 0);
+					const totalItems = this.#getTickledItems().length;
 					const currentTickled = this.tickled.tickledId ?? -1;
 					if (e.key === `ArrowLeft`) {
 						if (currentTickled > 0) this.tickled.handleKeyboardNavigation(`previous`);
@@ -7073,18 +7151,17 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 				}
 			}
 		};
-		this.#onKeyDown = (event) => {
-			const e = event;
+		this.#onKeyDown = (e) => {
 			const r = this.root;
 			const sel = this.selectedNode;
 			if (!r || !sel) return;
-			const totalItems = (this.#findPath(r, sel) ?? [r]).length + (this.#hasChildOptions() ? 1 : 0);
+			const totalItems = this.#getTickledItems().length;
 			const currentTickled = this.tickled.tickledId ?? -1;
 			switch (e.key) {
 				case `ArrowRight`:
 					e.preventDefault();
 					if (currentTickled < totalItems - 1) this.tickled.handleKeyboardNavigation(`next`);
-					else if (currentTickled === totalItems - 1) this.#shiftFocusToNarrowedText();
+					else if (currentTickled === totalItems - 1 && this.#canFocusSuggestions()) this.#shiftFocusToNarrowedText();
 					break;
 				case `ArrowLeft`:
 					e.preventDefault();
@@ -7104,8 +7181,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 					}
 					break;
 				case `Enter`:
+				case ` `:
 					e.preventDefault();
-					this.#handleEnter();
+					this.#activateTickled();
 					break;
 				case `Escape`:
 					e.preventDefault();
@@ -7113,16 +7191,12 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 					this.tickled.clearTickled();
 					this.blur();
 					break;
-				case `Tab`: if (e.shiftKey) {
-					e.preventDefault();
-					this.#shiftFocusToPath();
-				} else if (currentTickled === totalItems - 1) {
-					e.preventDefault();
-					this._menuOpen = false;
-					this._focusOnNarrowedText = true;
-					const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);
-					if (narrowedText) narrowedText.focus();
-				}
+				case `Tab`:
+					if (e.shiftKey) break;
+					if (currentTickled === totalItems - 1 && this.#canFocusSuggestions()) {
+						e.preventDefault();
+						this.#shiftFocusToNarrowedText();
+					}
 			}
 		};
 		this.#onNarrowedTextBlur = () => {
@@ -7133,9 +7207,6 @@ 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;
@@ -7145,16 +7216,14 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 					this.#isWheelScrolling = true;
 					this.tickled.clearTickled();
 				}
-				this.scrollLeft += wheelEvent.deltaX + wheelEvent.deltaY;
+				const hostContainer = this.#getHostContainer();
+				if (hostContainer) hostContainer.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() {
@@ -7179,7 +7248,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 					enabled: true
 				});
 			});
-			if (this.#hasChildOptions()) items.push({
+			if (this.#canFocusSuggestions()) items.push({
 				id: pathNodes.length,
 				enabled: true
 			});
@@ -7215,8 +7284,8 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		if (!r || !sel) return;
 		const pathNodes = this.#findPath(r, sel) ?? [r];
 		let el = null;
-		if (index < pathNodes.length) el = this.shadowRoot?.querySelectorAll(`.crumb-segment`)[index] ?? null;
-		else if (index === pathNodes.length) el = this.shadowRoot?.querySelector(`#child-options-trigger`) ?? null;
+		if (this.caretEmbedded && this.#canFocusSuggestions() && index === pathNodes.length) el = this.shadowRoot?.querySelector(`ixfx-narrowed-text`) ?? null;
+		else el = this.shadowRoot?.querySelectorAll(`.crumb-segment`)[index] ?? null;
 		el?.scrollIntoView({
 			inline: `nearest`,
 			block: `nearest`,
@@ -7229,6 +7298,15 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		const isPending = this.#pendingNode === s;
 		return (s.children ?? []).length > 0 || isPending;
 	}
+	/** True when the suggestions (narrowed-text) sub-part is renderable and focusable. */
+	#canFocusSuggestions() {
+		return this.showSuggestions && this.#hasChildOptions();
+	}
+	#onFocus;
+	#onBlur;
+	#getHostContainer() {
+		return this.shadowRoot?.querySelector(`.host-container`) ?? null;
+	}
 	#onHostClick;
 	#handleOpenCaretMenu() {
 		const currentTickled = this.tickled.tickledId;
@@ -7236,26 +7314,18 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		const r = this.root;
 		const sel = this.selectedNode;
 		if (!r || !sel) return;
-		if (currentTickled < (this.#findPath(r, sel) ?? [r]).length - 1) {
-			const trigger = (this.shadowRoot?.querySelectorAll(`.crumb-segment`))?.[currentTickled]?.querySelector(`.caret ixfx-menu-trigger`);
-			if (trigger) {
-				this.#menuOpenedByKeyboard = true;
-				this.#currentOpenTrigger = trigger;
-				document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
-				trigger.openMenu();
-				this.#propagateInputModeToMenu();
-				return;
-			}
+		const pathNodes = this.#findPath(r, sel) ?? [r];
+		if (this.caretEmbedded && this.#canFocusSuggestions() && currentTickled === pathNodes.length) {
+			this.#shiftFocusToNarrowedText();
+			return;
 		}
-		if (this.#hasChildOptions()) {
-			const trigger = this.shadowRoot?.querySelector(`#child-options-trigger`);
-			if (trigger) {
-				this.#menuOpenedByKeyboard = true;
-				this.#currentOpenTrigger = trigger;
-				document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
-				trigger.openMenu();
-				this.#propagateInputModeToMenu();
-			}
+		const trigger = (this.shadowRoot?.querySelectorAll(`.crumb-segment`))?.[currentTickled]?.querySelector(`.caret ixfx-menu-trigger`);
+		if (trigger) {
+			this.#menuOpenedByKeyboard = true;
+			this.#currentOpenTrigger = trigger;
+			document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
+			trigger.openMenu();
+			this.#propagateInputModeToMenu();
 		}
 	}
 	#propagateInputModeToMenu() {
@@ -7268,47 +7338,32 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	#onMenuTriggerClose;
 	#onMenuKeyNav;
 	#onKeyDown;
-	#handleEnter() {
+	/** Activates the currently tickled item, as if it had been clicked. */
+	#activateTickled() {
+		const currentTickled = this.tickled.tickledId;
+		if (currentTickled === void 0) return;
 		const r = this.root;
 		const sel = this.selectedNode;
 		if (!r || !sel) return;
 		const pathNodes = this.#findPath(r, sel) ?? [r];
-		const hasChildOptions = this.#hasChildOptions();
-		const currentTickled = this.tickled.tickledId ?? -1;
-		if (currentTickled < pathNodes.length) {
-			const node = pathNodes[currentTickled];
-			this.#setSelected(node);
-			this._menuOpen = false;
-			this.dispatchEvent(new CustomEvent(`item-click`, {
-				detail: {
-					node,
-					depth: currentTickled
-				},
-				bubbles: true,
-				composed: true
-			}));
-		} else if (hasChildOptions && currentTickled === pathNodes.length) {
-			this._menuOpen = true;
-			this.#menuOpenedByKeyboard = true;
-			const trigger = this.shadowRoot?.querySelector(`#child-options-trigger`);
-			if (trigger) {
-				this.#currentOpenTrigger = trigger;
-				document.addEventListener(`keydown`, this.#onMenuKeyNav, { capture: true });
-				trigger.openMenu();
-				this.#propagateInputModeToMenu();
-			}
+		if (this.caretEmbedded && this.#canFocusSuggestions() && currentTickled === pathNodes.length) {
+			this.#shiftFocusToNarrowedText();
+			return;
 		}
+		(this.shadowRoot?.querySelector(`.crumb-segment[data-segment-id="${currentTickled}"]`))?.click();
 	}
 	#shiftFocusToNarrowedText() {
 		const narrowedText = this.shadowRoot?.querySelector(`ixfx-narrowed-text`);
 		if (narrowedText) {
+			this._menuOpen = false;
 			this._focusOnNarrowedText = true;
 			narrowedText.focus();
 		}
 	}
 	#shiftFocusToPath() {
 		this._focusOnNarrowedText = false;
-		this.focus();
+		const hostContainer = this.#getHostContainer();
+		if (hostContainer) hostContainer.focus();
 	}
 	#onNarrowedTextBlur;
 	#onNarrowedTextShiftTab;
@@ -7355,42 +7410,25 @@ 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();
+		const hostContainer = this.#getHostContainer();
+		if (hostContainer) hostContainer.scrollLeft = hostContainer.scrollWidth - hostContainer.clientWidth;
 	}
-	#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`);
@@ -7473,7 +7511,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 	#onLabelClick(node, depth) {
 		this._openIdx = -1;
 		this.#setSelected(node);
-		if (this.leadingCaret) this.#scrollSegmentIntoView(depth);
+		this.#scrollSegmentIntoView(depth);
 		this.dispatchEvent(new CustomEvent(`item-click`, {
 			detail: {
 				node,
@@ -7655,7 +7693,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			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}"
+          <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);
@@ -7664,7 +7702,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends 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-trigger mode="trigger" label="›" .tabStop=${false} @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
                     <ixfx-menu-container slot="menu">
                       ${siblingMenuItems}
                     </ixfx-menu-container>
@@ -7676,7 +7714,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
             ${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-trigger mode="trigger" label="›" .tabStop=${false} placement="right-start" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
                     <ixfx-menu-container slot="menu">
                       ${childMenuItems}
                     </ixfx-menu-container>
@@ -7698,7 +7736,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
             >
               <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-trigger mode="trigger" label="›" .tabStop=${false} placement="right-start" @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
                     <ixfx-menu-container slot="menu">
                       ${siblingMenuItems}
                     </ixfx-menu-container>
@@ -7712,7 +7750,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 				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}"
+          <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);
@@ -7733,7 +7771,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
             >
               <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-trigger mode="trigger" label="›" .tabStop=${false} @menu-command=${(e) => this.#onSegmentMenuCommand(e, node, i)}>
                     <ixfx-menu-container slot="menu">
                       ${childMenuItems}
                     </ixfx-menu-container>
@@ -7747,8 +7785,18 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			}
 		});
 		return b`
-      <div class="parts"
-        @mouseover=${(e) => {
+      <div
+        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}
+        @mouseout=${(e) => this.tickled.handlePointerLeave(e)}
+      >
+        <div class="parts"
+          @mouseover=${(e) => {
 			if (this.#isWheelScrolling) return;
 			const target = e.target;
 			if (!(target instanceof HTMLElement)) return;
@@ -7769,8 +7817,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 				composed: true
 			}));
 		}}
-      >${parts}<div class="trailing"></div></div>
-      ${this.showSuggestions ? this.#renderChildOptions() : A}
+        >${parts}<div class="trailing"></div></div>
+        ${this.showSuggestions ? this.#renderChildOptions() : A}
+      </div>
     `;
 	}
 	#renderChildOptions() {
@@ -7822,6 +7871,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			themeFallbacks,
 			tickledStyles,
 			tickledItemStyles,
+			scrollFadeStyles(`x`),
 			i$3`
     :host {
       --crumb-item-bg: var(--item-bg, transparent);
@@ -7829,56 +7879,32 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       --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-padding: var(--space-s, 2px);
       --crumb-item-border-radius: var(--item-border-radius);
-      --crumb-item-gap: var(--space-xs);
+      --crumb-item-gap: var(--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;
     }
 
-    :host(:focus) {
-      outline: none;
-    }
-
-    :host(:focus) .parts {
+    /* Outline goes on :host, not .host-container: .host-container carries the
+     * scroll-fade mask-image, and CSS masks clip everything painted outside
+     * the masked box - including an outline, which paints outside the border edge. */
+    :host(:focus-within) {
       outline: 2px solid var(--accent);
       outline-offset: 2px;
     }
 
-    :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;
+    /* 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 {
@@ -7899,22 +7925,13 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       background: var(--crumb-item-bg);
       border: var(--crumb-item-border);
       border-radius: var(--crumb-item-border-radius);
+      padding:0;
     }
 
     .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);
@@ -7937,11 +7954,20 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     }
 
     .label {
+      padding: var(--crumb-item-padding);
       cursor: pointer;
       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;
@@ -7949,13 +7975,12 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     }
 
     .crumb-segment ixfx-menu-trigger {
-      --ixfx-button-padding: var(--space-xs) 8px;
+      --ixfx-button-padding: var(--space-s, 2px);
     }
 
     .caret {
       position: relative;
-      cursor: pointer; 
-      
+      cursor: pointer;
       color: var(--crumb-separator);
       display: inline-flex;
       align-items: center;
@@ -7982,7 +8007,6 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       background: none;
       border: none;
       color: inherit;
-      padding: 0;
       cursor: pointer;
       font-size: inherit;
       line-height: 1;
@@ -8075,6 +8099,7 @@ __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({
@@ -8104,7 +8129,7 @@ __decorate([property({
 __decorate([property({
 	type: Boolean,
 	reflect: true,
-	attribute: `hideroot`
+	attribute: `hide-root`
 })], CrumbNavigationElement.prototype, "hideRoot", void 0);
 CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
 //#endregion
@@ -8586,7 +8611,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))}
@@ -8607,6 +8632,7 @@ let CrumbPathElement = class CrumbPathElement extends i {
 			prominenceStyles,
 			themeFallbacks,
 			popupSurfaceStyles,
+			scrollFadeStyles(`x`),
 			i$3`
     :host {
       --text-highlight: var(--accent);
@@ -21614,6 +21640,258 @@ __decorate([property({ type: Number })], RangeElement.prototype, "value", null);
 __decorate([property({ type: Number })], RangeElement.prototype, "step", void 0);
 RangeElement = __decorate([safeCustomElement(`ixfx-range`)], RangeElement);
 //#endregion
+//#region src/select-horiz/select-horiz.ts
+let SelectHorizElement = class SelectHorizElement extends WheelNudgeMixin(i) {
+	constructor(..._args) {
+		super(..._args);
+		this._selectedIndex = -1;
+		this._slottedItems = [];
+		this.tickled = new TickledController(this, {
+			getItems: () => this._slottedItems.map((_, i) => ({
+				id: i,
+				enabled: true
+			})),
+			onStateChange: () => this._syncTickled()
+		});
+		this._onSlotChange = () => {
+			this._slottedItems = Array.from(this.shadowRoot?.querySelector(`slot`)?.assignedElements() ?? []);
+			const declaredIndex = this._slottedItems.findIndex((item) => item.hasAttribute(`selected`));
+			let resolvedIndex = declaredIndex >= 0 ? declaredIndex : this._selectedIndex;
+			if (resolvedIndex >= this._slottedItems.length) resolvedIndex = this._slottedItems.length - 1;
+			if (resolvedIndex < 0 && this._slottedItems.length > 0) resolvedIndex = 0;
+			this.selectedIndex = resolvedIndex;
+		};
+		this._syncTickled = () => {
+			this._slottedItems.forEach((item, i) => {
+				const isTickled = this.tickled.isTickled(i);
+				item.classList.toggle(`tickled`, isTickled);
+				item.tabIndex = isTickled && this.tickled.inputMode === `keyboard` ? 0 : -1;
+			});
+		};
+		this._findSlottedItem = (target) => {
+			let el = target instanceof Element ? target : null;
+			while (el) {
+				if (this._slottedItems.includes(el)) return el;
+				el = el.parentElement;
+			}
+		};
+		this._handlePointerOver = (e) => {
+			const item = this._findSlottedItem(e.target);
+			if (item) this.tickled.handlePointerEnter(this._slottedItems.indexOf(item));
+		};
+		this._handleKeyDown = (e) => {
+			if (e.key === `ArrowLeft`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`previous`);
+				this._applyTickledSelection();
+			} else if (e.key === `ArrowRight`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`next`);
+				this._applyTickledSelection();
+			} else if (e.key === `Home`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`first`);
+				this._applyTickledSelection();
+			} else if (e.key === `End`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`last`);
+				this._applyTickledSelection();
+			}
+		};
+		this._applyTickledSelection = () => {
+			const id = this.tickled.tickledId;
+			if (id !== void 0 && id !== this._selectedIndex) this.selectedIndex = id;
+		};
+		this._wheelCooldown = false;
+		this._handleClick = (e) => {
+			e.currentTarget.focus();
+			const item = this._findSlottedItem(e.target);
+			const index = item ? this._slottedItems.indexOf(item) : -1;
+			if (index >= 0 && index !== this._selectedIndex) this.selectedIndex = index;
+		};
+		this._updateSelectedAttribute = () => {
+			this._slottedItems.forEach((item, i) => {
+				if (i === this._selectedIndex) item.setAttribute(`selected`, ``);
+				else item.removeAttribute(`selected`);
+			});
+		};
+		this._scrollSelectedIntoView = () => {
+			const item = this._slottedItems[this._selectedIndex];
+			if (item) item.scrollIntoView({
+				inline: `center`,
+				behavior: `smooth`
+			});
+		};
+		this._emitChange = () => {
+			this.dispatchEvent(new CustomEvent(`change`, {
+				detail: {
+					selectedIndex: this._selectedIndex,
+					selectedItem: this.selectedItem,
+					selectedValue: this.selectedValue
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			scrollFadeStyles(`x`),
+			i$3`
+      :host {
+        --select-horiz-item-width: 80%;
+        --select-horiz-gap: var(--space-s);
+        --select-horiz-bg: var(--surface-3);
+        --select-horiz-border: var(--border);
+        --select-horiz-radius: var(--radius-l);
+        display: flex;
+        width: 100%;
+              background: var(--select-horiz-bg);
+        border: var(--select-horiz-border);
+        border-radius: var(--select-horiz-radius);
+      }
+
+      /* Edge fade (the scroll-fade-x class, see ../styles/scroll-fade.ts) must sit on
+       * the element that actually scrolls - its mask is sized to this element's own
+       * box, and content overflowing a *different*, non-scrolling ancestor gets the
+       * mask tiled across it instead of fading correctly. */
+      .items {
+        display: flex;
+        align-items: center;
+        gap: var(--select-horiz-gap);
+        padding: var(--space-xs) var(--scroll-fade-width, 30px);
+        width: 100%;
+        min-height: 48px;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        scroll-snap-type: x mandatory;
+        -webkit-overflow-scrolling: touch;
+        cursor: grab;
+  
+        box-sizing: border-box;
+      }
+
+      .items:focus-within {
+        cursor: default;
+      }
+
+      .spacer {
+        flex: 0 0 var(--select-horiz-spacer-width, 10%);
+        pointer-events: none;
+        user-select: none;
+      }
+
+      ::slotted(*) {
+        flex: 0 0 var(--select-horiz-item-width);
+        scroll-snap-align: center;
+        user-select: none;
+        min-height: 100%;
+        box-sizing: border-box;
+        transition: opacity var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
+        background: var(--item-bg);
+        border: var(--item-border);
+        border-radius: var(--item-border-radius);
+        padding: var(--item-padding);
+        display: grid;
+        align-content: center;
+        justify-content: center;
+      }
+
+      ::slotted(.tickled) {
+        background: var(--item-bg-tickled);
+        border-color: var(--item-border-tickled);
+        color: var(--item-text-tickled);
+      }
+
+      ::slotted([selected]) {
+        background: var(--item-bg-selected);
+        border-color: var(--item-border-selected);
+        color: var(--item-text-selected);
+      }
+
+      ::slotted([selected].tickled) {
+        background: var(--item-bg-selected-tickled);
+        outline: 2px dashed var(--surface-3);
+        outline-offset: -2px;
+      }
+
+      ::-webkit-scrollbar {
+        display: none;
+      }
+    `
+		];
+	}
+	get selectedIndex() {
+		return this._selectedIndex;
+	}
+	set selectedIndex(value) {
+		const oldValue = this._selectedIndex;
+		if (value < -1 || this._slottedItems.length > 0 && value >= this._slottedItems.length) return;
+		this._selectedIndex = value;
+		this._updateSelectedAttribute();
+		this._scrollSelectedIntoView();
+		this.tickled.setTickled(value === -1 ? void 0 : value);
+		if (oldValue !== value) this._emitChange();
+	}
+	get selectedValue() {
+		return this._slottedItems[this._selectedIndex]?.getAttribute(`value`) ?? null;
+	}
+	set selectedValue(value) {
+		if (value === null) return;
+		const index = this._slottedItems.findIndex((item) => item.getAttribute(`value`) === value);
+		if (index >= 0) this.selectedIndex = index;
+	}
+	get selectedItem() {
+		return this._slottedItems[this._selectedIndex] ?? null;
+	}
+	get items() {
+		return this._slottedItems;
+	}
+	render() {
+		return b`
+      <div
+        class="items scroll-fade-x"
+        tabindex="0"
+        data-input-mode=${this.tickled.inputMode}
+        @pointerover=${this._handlePointerOver}
+        @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
+        @keydown=${this._handleKeyDown}
+        @click=${this._handleClick}
+      >
+        <div class="spacer"></div>
+        <slot @slotchange=${this._onSlotChange}></slot>
+        <div class="spacer"></div>
+      </div>
+    `;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+	}
+	_applyWheelDelta(direction, _event) {
+		if (this._wheelCooldown) return;
+		this._wheelCooldown = true;
+		this.tickled.handleKeyboardNavigation(direction === 1 ? `next` : `previous`);
+		this._applyTickledSelection();
+		setTimeout(() => {
+			this._wheelCooldown = false;
+		}, 250);
+	}
+};
+__decorate([state()], SelectHorizElement.prototype, "_selectedIndex", void 0);
+__decorate([state()], SelectHorizElement.prototype, "_slottedItems", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true,
+	attribute: `selected-index`
+})], SelectHorizElement.prototype, "selectedIndex", null);
+__decorate([property({ type: String })], SelectHorizElement.prototype, "selectedValue", null);
+SelectHorizElement = __decorate([safeCustomElement(`ixfx-select-horiz`)], SelectHorizElement);
+//#endregion
 //#region src/selecthorizontal.ts
 let SelectHorizontalElement = class SelectHorizontalElement extends i {
 	constructor(..._args) {
@@ -28354,6 +28632,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SliderInputElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizElement, SelectHorizontalElement, SliderInputElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, collectDataResult, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, createPillRenderer, createTreeListAdapter, createVerticalListAdapter, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map