@ixfx/components 0.5.17 → 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);
@@ -7137,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`);
@@ -7150,13 +7155,13 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 			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();
@@ -7176,8 +7181,9 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 					}
 					break;
 				case `Enter`:
+				case ` `:
 					e.preventDefault();
-					this.#handleEnter();
+					this.#activateTickled();
 					break;
 				case `Escape`:
 					e.preventDefault();
@@ -7185,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 = () => {
@@ -7246,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
 			});
@@ -7282,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`,
@@ -7296,6 +7298,10 @@ 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() {
@@ -7308,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() {
@@ -7340,40 +7338,24 @@ 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();
 		}
@@ -7508,7 +7490,7 @@ 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) {
+		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;
@@ -7529,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,
@@ -7720,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>
@@ -7732,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>
@@ -7754,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>
@@ -7789,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>
@@ -7897,7 +7879,7 @@ 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(--item-padding, var(--space-xs));
+      --crumb-item-padding: var(--space-s, 2px);
       --crumb-item-border-radius: var(--item-border-radius);
       --crumb-item-gap: var(--item-gap, var(--space-xs));
       --crumb-separator: var(--surface-muted-text);
@@ -7906,11 +7888,10 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
       width: 100%;
     }
 
-    :host(.focused) {
-      outline: none;
-    }
-
-    :host(:focus-within) .host-container {
+    /* 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;
     }
@@ -7944,6 +7925,7 @@ 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 {
@@ -7972,6 +7954,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
     }
 
     .label {
+      padding: var(--crumb-item-padding);
       cursor: pointer;
       white-space: nowrap;
       color: inherit;
@@ -7992,15 +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;
-      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;
@@ -8027,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;
@@ -21661,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) {
@@ -28401,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