@ixfx/components 0.2.4 → 0.2.6

package/dist/narrowed-text.js

@@ -0,0 +1,571 @@
+import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-CAjwQ4GE.js";
+import { n as tickledStyles, r as TickledController, t as tickledItemStyles } from "./tickled-styles-Bg3QbcrD.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import "./interaction-CQDQJf2Q.js";
+import { r as createIncrSearch } from "./incr-search-BZawvrfl.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+//#region src/narrowed-text/narrowed-text.ts
+const HIGHLIGHT_KEY = `narrowed-text-highlight`;
+let NarrowedTextElement = class NarrowedTextElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.selectionMode = `single`;
+		this.requiredSelection = false;
+		this.orientation = `horizontal`;
+		this.nowrap = false;
+		this.separator = ` `;
+		this.preserveFilter = false;
+		this.value = ``;
+		this._query = ``;
+		this._computedItems = [];
+		this._filteredItems = [];
+		this._isFocused = false;
+		this._selectedValues = /* @__PURE__ */ new Set();
+		this._search = createIncrSearch({ selector: (item) => item.label ?? item.value });
+		this.tickled = new TickledController(this, {
+			getItems: () => {
+				return this._filteredItems.map((_, i) => ({
+					id: i,
+					enabled: true
+				}));
+			},
+			onTickle: (id) => {
+				if (id === void 0 || !this.shadowRoot) return;
+				const itemsContainer = this.shadowRoot.querySelector(`.items`);
+				if (!itemsContainer) return;
+				const itemEl = itemsContainer.querySelectorAll(`.item`)[id];
+				if (itemEl) itemEl.scrollIntoView({
+					block: `nearest`,
+					inline: `nearest`
+				});
+			}
+		});
+		this.#handleSlotChange = () => {
+			this._updateComputedItems();
+		};
+		this.#onInput = (e) => {
+			const input = e.target;
+			this._query = input.value;
+			if (this._query.trim() && this._filteredItems.length > 0) this.tickled.setTickled(0);
+			else this.tickled.clearTickled();
+			this._updateFilteredItems();
+		};
+		this.#onKeyDown = (e) => {
+			if (this._filteredItems.length === 0) return;
+			switch (e.key) {
+				case `Tab`:
+					if (e.shiftKey) {
+						e.preventDefault();
+						this.dispatchEvent(new CustomEvent(`narrowed-text-shift-tab`, {
+							bubbles: true,
+							composed: true
+						}));
+					}
+					return;
+				case `ArrowRight`: {
+					if (this.orientation !== `horizontal`) return;
+					const currentTickled = this.tickled.tickledId;
+					const lastIndex = this._filteredItems.length - 1;
+					if (currentTickled !== void 0 && currentTickled >= lastIndex) return;
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`next`);
+					break;
+				}
+				case `ArrowLeft`: {
+					if (this.orientation !== `horizontal`) return;
+					const currentTickled = this.tickled.tickledId;
+					if (currentTickled !== void 0 && currentTickled <= 0) return;
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`previous`);
+					break;
+				}
+				case `ArrowDown`: {
+					if (this.orientation !== `vertical`) return;
+					const currentTickled = this.tickled.tickledId;
+					const lastIndex = this._filteredItems.length - 1;
+					if (currentTickled !== void 0 && currentTickled >= lastIndex) return;
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`next`);
+					break;
+				}
+				case `ArrowUp`: {
+					if (this.orientation !== `vertical`) return;
+					const currentTickled = this.tickled.tickledId;
+					if (currentTickled !== void 0 && currentTickled <= 0) return;
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`previous`);
+					break;
+				}
+				case `Enter`: {
+					e.preventDefault();
+					this._filteredItems[this.tickled.tickledId ?? -1];
+					if (this.orientation !== `horizontal`) return;
+					const currentTickled = this.tickled.tickledId;
+					const lastIndex = this._filteredItems.length - 1;
+					if (currentTickled !== void 0 && currentTickled >= lastIndex) return;
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`next`);
+					break;
+				}
+				case `ArrowLeft`: {
+					if (this.orientation !== `horizontal`) return;
+					const currentTickled = this.tickled.tickledId;
+					if (currentTickled !== void 0 && currentTickled <= 0) return;
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`previous`);
+					break;
+				}
+				case `ArrowDown`: {
+					if (this.orientation !== `vertical`) return;
+					const currentTickled = this.tickled.tickledId;
+					const lastIndex = this._filteredItems.length - 1;
+					if (currentTickled !== void 0 && currentTickled >= lastIndex) return;
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`next`);
+					break;
+				}
+				case `ArrowUp`: {
+					if (this.orientation !== `vertical`) return;
+					const currentTickled = this.tickled.tickledId;
+					if (currentTickled !== void 0 && currentTickled <= 0) return;
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`previous`);
+					break;
+				}
+				case `Enter`: {
+					e.preventDefault();
+					const tickledItem = this._filteredItems[this.tickled.tickledId ?? -1];
+					if (tickledItem) {
+						this._selectItem(tickledItem, false);
+						this._query = ``;
+						this._updateFilteredItems();
+					}
+					break;
+				}
+				case ` `:
+					e.preventDefault();
+					if (this.tickled.tickledId !== void 0 && this._filteredItems[this.tickled.tickledId]) this._selectItem(this._filteredItems[this.tickled.tickledId], false);
+					break;
+				case `Escape`:
+					e.preventDefault();
+					this._query = ``;
+					this.tickled.clearTickled();
+					this._updateFilteredItems();
+					break;
+			}
+		};
+		this.#onFocus = () => {
+			this._isFocused = true;
+			if (this._query.trim() && this._filteredItems.length > 0) this.tickled.setTickled(0);
+		};
+		this.#onNarrowedTextInit = () => {
+			const input = this.shadowRoot?.querySelector(`.search-input`);
+			if (input) requestAnimationFrame(() => {
+				input.focus();
+			});
+		};
+		this.#onBlur = () => {
+			this._isFocused = false;
+			this.tickled.clearTickled();
+			this.dispatchEvent(new CustomEvent(`narrowed-text-blur`, {
+				bubbles: true,
+				composed: true
+			}));
+		};
+		this.#onFocusTriggerClick = () => {
+			(this.shadowRoot?.querySelector(`.search-input`))?.focus();
+		};
+		this.#onContainerClick = (e) => {
+			const target = e.target;
+			if (target.classList.contains(`item`) || target.closest(`.item`)) return;
+			(this.shadowRoot?.querySelector(`.search-input`))?.focus();
+		};
+	}
+	get selected() {
+		if (this.selectionMode === `single`) return this._selectedValues.values().next().value ?? ``;
+		else return [...this._selectedValues];
+	}
+	set selected(value) {
+		if (this.selectionMode === `single`) {
+			this._selectedValues.clear();
+			if (value) this._selectedValues.add(value);
+		} else {
+			this._selectedValues.clear();
+			if (Array.isArray(value)) value.forEach((v) => this._selectedValues.add(v));
+		}
+		this._updateFilteredItems();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._unsubSearch = this._search.onChange((state) => {
+			const results = state.results.map((r) => r.item);
+			for (const item of this._computedItems) if (this._selectedValues.has(item.value) && !results.includes(item)) results.push(item);
+			this._filteredItems = results;
+			this._searchState = state;
+			this.requestUpdate();
+		});
+		this.addEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._unsubSearch?.();
+		this._search.dispose();
+		clearHighlights({ key: HIGHLIGHT_KEY });
+		this.removeEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());
+	}
+	firstUpdated() {
+		this._updateComputedItems();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has(`value`)) this._updateSelectedFromValue();
+		this._applyHighlights();
+	}
+	#handleSlotChange;
+	_updateComputedItems() {
+		const slottedElements = this.querySelectorAll(`[data-value]`);
+		const items = [];
+		slottedElements.forEach((el) => {
+			const value = el.getAttribute(`data-value`) ?? ``;
+			const label = el.getAttribute(`data-label`) ?? el.textContent?.trim() ?? value;
+			const description = el.getAttribute(`data-description`) ?? void 0;
+			const iconName = el.getAttribute(`data-icon-name`) ?? void 0;
+			items.push({
+				value,
+				label,
+				description,
+				iconName
+			});
+		});
+		this._computedItems = items;
+		this._search.setItems(items);
+	}
+	_updateSelectedFromValue() {
+		if (this.selectionMode === `single`) {
+			this._selectedValues.clear();
+			if (this.value) this._selectedValues.add(this.value);
+		} else {
+			const values = this.value.split(`,`).filter((v) => v.trim());
+			this._selectedValues.clear();
+			values.forEach((v) => this._selectedValues.add(v.trim()));
+		}
+		this._updateFilteredItems();
+	}
+	_updateFilteredItems() {
+		this._search.setQuery(this._query);
+	}
+	_applyHighlights() {
+		if (!this._query.trim() || !this._searchState || !this.shadowRoot) {
+			clearHighlights({ key: HIGHLIGHT_KEY });
+			return;
+		}
+		applyHighlights(buildHighlightTargets(this.shadowRoot, `.item-label`, this._searchState.positionsByItem, (el) => {
+			const v = el.getAttribute(`data-item-value`);
+			return this._computedItems.find((i) => i.value === v);
+		}, (el) => {
+			const v = el.getAttribute(`data-item-value`);
+			const i = this._computedItems.find((x) => x.value === v);
+			return i?.label ?? i?.value ?? ``;
+		}), { key: HIGHLIGHT_KEY });
+	}
+	#onInput;
+	#onKeyDown;
+	#onFocus;
+	#onNarrowedTextInit;
+	focus() {
+		const input = this.shadowRoot?.querySelector(`.search-input`);
+		if (input) input.focus();
+		else super.focus();
+	}
+	blur() {
+		const input = this.shadowRoot?.querySelector(`.search-input`);
+		if (input) input.blur();
+		else super.blur();
+	}
+	#onBlur;
+	#onFocusTriggerClick;
+	#onContainerClick;
+	#onItemClick(item) {
+		this._selectItem(item);
+		const clickedIndex = this._filteredItems.findIndex((i) => i.value === item.value);
+		if (clickedIndex >= 0) this.tickled.handlePointerEnter(clickedIndex);
+		(this.shadowRoot?.querySelector(`.search-input`))?.focus();
+	}
+	_selectItem(item, clearFilter = true) {
+		if (this.selectionMode === `single`) if (this._selectedValues.has(item.value) && !this.requiredSelection) this._selectedValues.clear();
+		else {
+			this._selectedValues.clear();
+			this._selectedValues.add(item.value);
+		}
+		else if (this._selectedValues.has(item.value)) {
+			if (!this.requiredSelection || this._selectedValues.size > 1) this._selectedValues.delete(item.value);
+		} else this._selectedValues.add(item.value);
+		this._updateValueFromSelected();
+		this._updateFilteredItems();
+		const selectedItems = this._computedItems.filter((i) => this._selectedValues.has(i.value));
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail: {
+				item,
+				query: this._query,
+				selected: selectedItems
+			},
+			bubbles: true,
+			composed: true
+		}));
+		if (clearFilter && !this.preserveFilter && this._query) {
+			this._query = ``;
+			this._updateFilteredItems();
+		}
+	}
+	_updateValueFromSelected() {
+		if (this.selectionMode === `single`) this.value = [...this._selectedValues][0] ?? ``;
+		else this.value = [...this._selectedValues].join(`,`);
+	}
+	#renderItem(item, index) {
+		const isTickled = this.tickled.isTickled(index);
+		const isSelected = this._selectedValues.has(item.value);
+		const label = item.label ?? item.value;
+		return html`
+      <div
+        class="item ${isTickled ? `tickled` : ``} ${isSelected ? `selected` : ``}"
+        part="item"
+        role="option"
+        aria-selected=${isSelected}
+        @click=${() => this.#onItemClick(item)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(index)}
+      >
+        ${item.iconName ? html`<ixfx-icon class="item-icon" name=${item.iconName}></ixfx-icon>` : nothing}
+        <span class="item-label" part="label" data-item-value=${item.value}>${label}</span>
+      </div>
+    `;
+	}
+	render() {
+		const isScrollable = this.width !== void 0 || this.height !== void 0;
+		return html`
+      <slot @slotchange=${this.#handleSlotChange} style="display: none;"></slot>
+      <div
+        class="container ${this.orientation} ${isScrollable ? `scrollable` : ``} ${this._isFocused ? `focused` : ``}"
+        part="container"
+        style=${this._getContainerStyle()}
+        data-input-mode=${this.tickled.inputMode}
+        @click=${this.#onContainerClick}
+      >
+        <input
+          type="text"
+          class="search-input"
+          .value=${this._query}
+          autocomplete="off"
+          spellcheck="false"
+          aria-label="Search items"
+          @input=${this.#onInput}
+          @keydown=${this.#onKeyDown}
+          @focus=${this.#onFocus}
+          @blur=${this.#onBlur}
+        >
+        <div class="focus-trigger" @click=${this.#onFocusTriggerClick}></div>
+        <div 
+          class="items" 
+          part="items" 
+          role="listbox"
+          @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
+        >
+          ${this._filteredItems.map((item, i) => this.#renderItem(item, i))}
+        </div>
+      </div>
+    `;
+	}
+	_getContainerStyle() {
+		const styles = [];
+		if (this.width) styles.push(`width: ${this.width}`);
+		if (this.height) styles.push(`height: ${this.height}`);
+		return styles.join(`; `);
+	}
+	static {
+		this.styles = [
+			tickledStyles,
+			tickledItemStyles,
+			css`
+    :host {
+      display: inline-block;
+      position: relative;
+      font-family: var(--font-family, system-ui, sans-serif);
+      font-size: var(--text-m, 12px);
+      color: var(--surface-2-text);
+      --item-padding: var(--space-xs, 3px) var(--space-m, 8px);
+      --item-border-radius: var(--radius-s, 3px);
+      --item-icon-spacing: var(--space-xs, 3px);
+    }
+
+    .container {
+      display: flex;
+      position: relative;
+      min-width: min-content;
+      min-height: min-content;
+    }
+
+    .container.horizontal {
+      flex-direction: row;
+      align-items: stretch;
+    }
+
+    .container.vertical {
+      flex-direction: column;
+    }
+
+    .container.scrollable {
+      scrollbar-width: none;
+      overflow-x: auto;
+      overflow-y: hidden;
+      .vertical {
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+    }
+
+    .container.focused {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    .search-input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: text;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    .search-input:focus {
+      outline: none;
+    }
+
+    .focus-trigger {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+      cursor: text;
+    }
+
+    .items {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--item-spacing, var(--space-xs, 3px));
+      align-items: center;
+      width: 100%;
+      height: 100%;
+      min-height: var(--item-height, 28px);
+      position: relative;
+      z-index: 2;
+      pointer-events: auto;
+    }
+
+    .container.horizontal .items {
+      flex-direction: row;
+    }
+
+    .container.vertical .items {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    :host([nowrap]) .items {
+      flex-wrap: nowrap;
+    }
+
+    .item-icon {
+      flex-shrink: 0;
+      width: 1em;
+      height: 1em;
+    }
+
+    .item-label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: var(--item-label-color, var(--item-text, inherit));
+      font-style: var(--item-label-font-style, var(--item-label-font-style-default, normal));
+      text-decoration: var(--item-label-text-decoration, var(--item-label-text-decoration-default, none));
+      text-underline-offset: var(--item-label-text-underline-offset, auto);
+    }
+
+    .item.selected .item-label {
+      --item-label-color: var(--item-text-selected);
+      --item-label-font-style: var(--item-label-font-style-selected, italic);
+    }
+
+    .item.tickled .item-label {
+      --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);
+      --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);
+    }
+
+    .item.active .item-label {
+      --item-label-color: var(--item-text-selected);
+    }
+
+    .item.selected.tickled .item-label {
+      --item-label-color: var(--item-text-selected);
+      --item-label-font-style: var(--item-label-font-style-selected, italic);
+      --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);
+      --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);
+    }
+
+    ::highlight(narrowed-text-highlight) {
+      background: var(--highlight-background, var(--accent));
+      color: var(--highlight-color, var(--accent-text, #fff));
+      border-radius: 2px;
+      padding: 0 1px;
+    }
+  `
+		];
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], NarrowedTextElement.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `required-selection`
+})], NarrowedTextElement.prototype, "requiredSelection", void 0);
+__decorate([property({
+	type: String,
+	attribute: `orientation`
+})], NarrowedTextElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `nowrap`
+})], NarrowedTextElement.prototype, "nowrap", void 0);
+__decorate([property({
+	type: String,
+	attribute: `separator`
+})], NarrowedTextElement.prototype, "separator", void 0);
+__decorate([property({
+	type: String,
+	attribute: `width`
+})], NarrowedTextElement.prototype, "width", void 0);
+__decorate([property({
+	type: String,
+	attribute: `height`
+})], NarrowedTextElement.prototype, "height", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `preserve-filter`
+})], NarrowedTextElement.prototype, "preserveFilter", void 0);
+__decorate([property({ type: String })], NarrowedTextElement.prototype, "value", void 0);
+__decorate([state()], NarrowedTextElement.prototype, "_query", void 0);
+__decorate([state()], NarrowedTextElement.prototype, "_computedItems", void 0);
+__decorate([state()], NarrowedTextElement.prototype, "_filteredItems", void 0);
+__decorate([state()], NarrowedTextElement.prototype, "_isFocused", void 0);
+__decorate([query(`slot`)], NarrowedTextElement.prototype, "_slot", void 0);
+NarrowedTextElement = __decorate([safeCustomElement(`ixfx-narrowed-text`)], NarrowedTextElement);
+//#endregion
+export { NarrowedTextElement };
+
+//# sourceMappingURL=narrowed-text.js.map

package/dist/narrowed-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"narrowed-text.js","names":["#onNarrowedTextInit","#onItemClick","#handleSlotChange","#onContainerClick","#onInput","#onKeyDown","#onFocus","#onBlur","#onFocusTriggerClick","#renderItem","customElement"],"sources":["../src/narrowed-text/narrowed-text.ts"],"sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { IncrSearch, IncrSearchState } from '../incr-search/index.js';\nimport type {\n  NarrowedTextChangeDetail,\n  NarrowedTextItem,\n  Orientation,\n  SelectionMode,\n} from './types.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport {\n  applyHighlights,\n  buildHighlightTargets,\n  clearHighlights,\n  createIncrSearch,\n} from '../incr-search/index.js';\nimport { TickledController, tickledItemStyles, tickledStyles } from '../interaction/index.js';\n\nconst HIGHLIGHT_KEY = `narrowed-text-highlight`;\n\n@customElement(`ixfx-narrowed-text`)\nexport class NarrowedTextElement extends LitElement {\n  @property({ type: String, attribute: `selection-mode` }) selectionMode: SelectionMode = `single`;\n  @property({ type: Boolean, attribute: `required-selection` }) requiredSelection = false;\n  @property({ type: String, attribute: `orientation` }) orientation: Orientation = `horizontal`;\n  @property({ type: Boolean, attribute: `nowrap` }) nowrap = false;\n  @property({ type: String, attribute: `separator` }) separator = ` `;\n  @property({ type: String, attribute: `width` }) width: string | undefined;\n  @property({ type: String, attribute: `height` }) height: string | undefined;\n  @property({ type: Boolean, attribute: `preserve-filter` }) preserveFilter = false;\n  @property({ type: String }) value = ``;\n\n  @state() private _query = ``;\n  @state() private _computedItems: NarrowedTextItem[] = [];\n  @state() private _filteredItems: NarrowedTextItem[] = [];\n  @state() private _isFocused = false;\n  @query(`slot`) private _slot!: HTMLSlotElement;\n\n  private _selectedValues: Set<string> = new Set();\n  private _search: IncrSearch<NarrowedTextItem> = createIncrSearch<NarrowedTextItem>({\n    selector: item => item.label ?? item.value,\n  });\n\n  private _searchState: IncrSearchState<NarrowedTextItem> | undefined;\n  private _unsubSearch: (() => void) | undefined;\n\n  // TickledController manages hover and keyboard focus\n  private tickled = new TickledController<number>(this, {\n    getItems: () => {\n      return this._filteredItems.map((_, i) => ({\n        id: i,\n        enabled: true,\n      }));\n    },\n    onTickle: (id) => {\n      if (id === undefined || !this.shadowRoot)\n        return;\n      const itemsContainer = this.shadowRoot.querySelector(`.items`);\n      if (!itemsContainer)\n        return;\n      const itemEls = itemsContainer.querySelectorAll(`.item`);\n      const itemEl = itemEls[id];\n      if (itemEl) {\n        itemEl.scrollIntoView({ block: `nearest`, inline: `nearest` });\n      }\n    },\n  });\n\n  get selected(): string | string[] {\n    if (this.selectionMode === `single`) {\n      return this._selectedValues.values().next().value ?? ``;\n    } else {\n      return [...this._selectedValues];\n    }\n  }\n\n  set selected(value: string | string[]) {\n    if (this.selectionMode === `single`) {\n      this._selectedValues.clear();\n      if (value) {\n        this._selectedValues.add(value as string);\n      }\n    } else {\n      this._selectedValues.clear();\n      if (Array.isArray(value)) {\n        value.forEach(v => this._selectedValues.add(v));\n      }\n    }\n\n    this._updateFilteredItems();\n  }\n\noverride connectedCallback(): void {\n    super.connectedCallback();\n    this._unsubSearch = this._search.onChange((state) => {\n      const results = state.results.map(r => r.item);\n      for (const item of this._computedItems) {\n        if (this._selectedValues.has(item.value) && !results.includes(item)) {\n          results.push(item);\n        }\n      }\nthis._filteredItems = results;\n      this._searchState = state;\n      this.requestUpdate();\n    });\n    this.addEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._unsubSearch?.();\n    this._search.dispose();\n    clearHighlights({ key: HIGHLIGHT_KEY });\n    this.removeEventListener(`narrowed-text-init`, () => this.#onNarrowedTextInit());\n  }\n\n  protected override firstUpdated(): void {\n    this._updateComputedItems();\n  }\n\n  protected override updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has(`value`)) {\n      this._updateSelectedFromValue();\n    }\n    this._applyHighlights();\n  }\n\n  #handleSlotChange = (): void => {\n    this._updateComputedItems();\n  };\n\n  private _updateComputedItems(): void {\n    const slottedElements = this.querySelectorAll(`[data-value]`);\n    const items: NarrowedTextItem[] = [];\n\n    slottedElements.forEach((el) => {\n      const value = el.getAttribute(`data-value`) ?? ``;\n      const label = el.getAttribute(`data-label`) ?? el.textContent?.trim() ?? value;\n      const description = el.getAttribute(`data-description`) ?? undefined;\n      const iconName = el.getAttribute(`data-icon-name`) ?? undefined;\n\n      items.push({ value, label, description, iconName });\n    });\n\n    this._computedItems = items;\n    void this._search.setItems(items);\n  }\n\n  private _updateSelectedFromValue(): void {\n    if (this.selectionMode === `single`) {\n      this._selectedValues.clear();\n      if (this.value) {\n        this._selectedValues.add(this.value);\n      }\n    } else {\n      const values = this.value.split(`,`).filter(v => v.trim());\n      this._selectedValues.clear();\n      values.forEach(v => this._selectedValues.add(v.trim()));\n    }\n\n    this._updateFilteredItems();\n  }\n\n  private _updateFilteredItems(): void {\n    void this._search.setQuery(this._query);\n  }\n\n  private _applyHighlights(): void {\n    if (!this._query.trim() || !this._searchState || !this.shadowRoot) {\n      clearHighlights({ key: HIGHLIGHT_KEY });\n      return;\n    }\n\n    const targets = buildHighlightTargets(\n      this.shadowRoot,\n      `.item-label`,\n      this._searchState.positionsByItem,\n      (el) => {\n        const v = el.getAttribute(`data-item-value`);\n        return this._computedItems.find(i => i.value === v);\n      },\n      (el) => {\n        const v = el.getAttribute(`data-item-value`);\n        const i = this._computedItems.find(x => x.value === v);\n        return i?.label ?? i?.value ?? ``;\n      },\n    );\n    applyHighlights(targets, { key: HIGHLIGHT_KEY });\n  }\n\n  #onInput = (e: Event): void => {\n    const input = e.target as HTMLInputElement;\n    this._query = input.value;\n    // Reset tickled to first item when query changes\n    if (this._query.trim() && this._filteredItems.length > 0) {\n      this.tickled.setTickled(0);\n    } else {\n      this.tickled.clearTickled();\n    }\n    this._updateFilteredItems();\n  };\n\n#onKeyDown = (e: KeyboardEvent): void => {\n    if (this._filteredItems.length === 0) {\n      return;\n    }\n\n    switch (e.key) {\n      case `Tab`: {\n        if (e.shiftKey) {\n          e.preventDefault();\n          this.dispatchEvent(new CustomEvent(`narrowed-text-shift-tab`, {\n            bubbles: true,\n            composed: true,\n          }));\n        }\n        return;\n      }\n      case `ArrowRight`: {\n        if (this.orientation !== `horizontal`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        const lastIndex = this._filteredItems.length - 1;\n        if (currentTickled !== undefined && currentTickled >= lastIndex) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`next`);\n        break;\n      }\n      case `ArrowLeft`: {\n        if (this.orientation !== `horizontal`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        if (currentTickled !== undefined && currentTickled <= 0) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`previous`);\n        break;\n      }\n      case `ArrowDown`: {\n        if (this.orientation !== `vertical`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        const lastIndex = this._filteredItems.length - 1;\n        if (currentTickled !== undefined && currentTickled >= lastIndex) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`next`);\n        break;\n      }\n      case `ArrowUp`: {\n        if (this.orientation !== `vertical`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        if (currentTickled !== undefined && currentTickled <= 0) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`previous`);\n        break;\n      }\n      case `Enter`: {\n        e.preventDefault();\n        const tickledItem = this._filteredItems[this.tickled.tickledId ?? -1];\n        if (this.orientation !== `horizontal`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        const lastIndex = this._filteredItems.length - 1;\n        if (currentTickled !== undefined && currentTickled >= lastIndex) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`next`);\n        break;\n      }\n      case `ArrowLeft`: {\n        if (this.orientation !== `horizontal`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        if (currentTickled !== undefined && currentTickled <= 0) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`previous`);\n        break;\n      }\n      case `ArrowDown`: {\n        if (this.orientation !== `vertical`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        const lastIndex = this._filteredItems.length - 1;\n        if (currentTickled !== undefined && currentTickled >= lastIndex) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`next`);\n        break;\n      }\n      case `ArrowUp`: {\n        if (this.orientation !== `vertical`) {\n          return;\n        }\n        const currentTickled = this.tickled.tickledId;\n        if (currentTickled !== undefined && currentTickled <= 0) {\n          return;\n        }\n        e.preventDefault();\n        this.tickled.handleKeyboardNavigation(`previous`);\n        break;\n      }\n      case `Enter`: {\n        e.preventDefault();\n        const tickledItem = this._filteredItems[this.tickled.tickledId ?? -1];\n        if (tickledItem) {\n          this._selectItem(tickledItem, false);\n          // Enter always clears filter regardless of preserveFilter\n          this._query = ``;\n          this._updateFilteredItems();\n        }\n        break;\n      }\n      case ` `: {\n        e.preventDefault();\n        if (this.tickled.tickledId !== undefined && this._filteredItems[this.tickled.tickledId]) {\n          this._selectItem(this._filteredItems[this.tickled.tickledId], false);\n        }\n        break;\n      }\n      case `Escape`: {\n        e.preventDefault();\n        this._query = ``;\n        this.tickled.clearTickled();\n        this._updateFilteredItems();\n        break;\n      }\n    }\n  };\n\n  #onFocus = (): void => {\n    this._isFocused = true;\n    if (this._query.trim() && this._filteredItems.length > 0) {\n      this.tickled.setTickled(0);\n    }\n  };\n\n  #onNarrowedTextInit = (): void => {\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    if (input) {\n      requestAnimationFrame(() => {\n        input.focus();\n      });\n    }\n  };\n\n  focus(): void {\n    // Override focus to focus internal input\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    if (input) {\n      input.focus();\n    } else {\n      super.focus();\n    }\n  }\n\n  blur(): void {\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    if (input) {\n      input.blur();\n    } else {\n      super.blur();\n    }\n  };\n\n  #onBlur = (): void => {\n    this._isFocused = false;\n    this.tickled.clearTickled();\n    this.dispatchEvent(new CustomEvent(`narrowed-text-blur`, { bubbles: true, composed: true }));\n  };\n\n  #onFocusTriggerClick = (): void => {\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    input?.focus();\n  };\n\n  #onContainerClick = (e: MouseEvent): void => {\n    const target = e.target as HTMLElement;\n    if (target.classList.contains(`item`) || target.closest(`.item`)) {\n      return;\n    }\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    input?.focus();\n  };\n\n  #onItemClick(item: NarrowedTextItem): void {\n    this._selectItem(item);\n    const clickedIndex = this._filteredItems.findIndex(i => i.value === item.value);\n    if (clickedIndex >= 0) {\n      this.tickled.handlePointerEnter(clickedIndex);\n    }\n    const input = this.shadowRoot?.querySelector(`.search-input`) as HTMLInputElement | null;\n    input?.focus();\n  }\n\n  private _selectItem(item: NarrowedTextItem, clearFilter = true): void {\n    if (this.selectionMode === `single`) {\n      if (this._selectedValues.has(item.value) && !this.requiredSelection) {\n        this._selectedValues.clear();\n      } else {\n        this._selectedValues.clear();\n        this._selectedValues.add(item.value);\n      }\n    } else {\n      if (this._selectedValues.has(item.value)) {\n        if (!this.requiredSelection || this._selectedValues.size > 1) {\n          this._selectedValues.delete(item.value);\n        }\n      } else {\n        this._selectedValues.add(item.value);\n      }\n    }\n\n    this._updateValueFromSelected();\n    this._updateFilteredItems();\n\n    const selectedItems = this._computedItems.filter(i => this._selectedValues.has(i.value));\n\n    this.dispatchEvent(new CustomEvent<NarrowedTextChangeDetail>(`change`, {\n      detail: { item, query: this._query, selected: selectedItems },\n      bubbles: true,\n      composed: true,\n    }));\n\n    if (clearFilter && !this.preserveFilter && this._query) {\n      this._query = ``;\n      this._updateFilteredItems();\n    }\n  }\n\n  private _updateValueFromSelected(): void {\n    if (this.selectionMode === `single`) {\n      this.value = [...this._selectedValues][0] ?? ``;\n    } else {\n      this.value = [...this._selectedValues].join(`,`);\n    }\n  }\n\n  #renderItem(item: NarrowedTextItem, index: number) {\n    const isTickled = this.tickled.isTickled(index);\n    const isSelected = this._selectedValues.has(item.value);\n    const label = item.label ?? item.value;\n\n    return html`\n      <div\n        class=\"item ${isTickled ? `tickled` : ``} ${isSelected ? `selected` : ``}\"\n        part=\"item\"\n        role=\"option\"\n        aria-selected=${isSelected}\n        @click=${() => this.#onItemClick(item)}\n        @pointerenter=${() => this.tickled.handlePointerEnter(index)}\n      >\n        ${item.iconName ? html`<ixfx-icon class=\"item-icon\" name=${item.iconName}></ixfx-icon>` : nothing}\n        <span class=\"item-label\" part=\"label\" data-item-value=${item.value}>${label}</span>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const isScrollable = this.width !== undefined || this.height !== undefined;\n\n    return html`\n      <slot @slotchange=${this.#handleSlotChange} style=\"display: none;\"></slot>\n      <div\n        class=\"container ${this.orientation} ${isScrollable ? `scrollable` : ``} ${this._isFocused ? `focused` : ``}\"\n        part=\"container\"\n        style=${this._getContainerStyle()}\n        data-input-mode=${this.tickled.inputMode}\n        @click=${this.#onContainerClick}\n      >\n        <input\n          type=\"text\"\n          class=\"search-input\"\n          .value=${this._query}\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          aria-label=\"Search items\"\n          @input=${this.#onInput}\n          @keydown=${this.#onKeyDown}\n          @focus=${this.#onFocus}\n          @blur=${this.#onBlur}\n        >\n        <div class=\"focus-trigger\" @click=${this.#onFocusTriggerClick}></div>\n        <div \n          class=\"items\" \n          part=\"items\" \n          role=\"listbox\"\n          @pointerleave=${(e: PointerEvent) => this.tickled.handlePointerLeave(e)}\n        >\n          ${this._filteredItems.map((item, i) => this.#renderItem(item, i))}\n        </div>\n      </div>\n    `;\n  }\n\n  private _getContainerStyle(): string {\n    const styles: string[] = [];\n    if (this.width) {\n      styles.push(`width: ${this.width}`);\n    }\n    if (this.height) {\n      styles.push(`height: ${this.height}`);\n    }\n    return styles.join(`; `);\n  }\n\n  static override styles = [tickledStyles, tickledItemStyles, css`\n    :host {\n      display: inline-block;\n      position: relative;\n      font-family: var(--font-family, system-ui, sans-serif);\n      font-size: var(--text-m, 12px);\n      color: var(--surface-2-text);\n      --item-padding: var(--space-xs, 3px) var(--space-m, 8px);\n      --item-border-radius: var(--radius-s, 3px);\n      --item-icon-spacing: var(--space-xs, 3px);\n    }\n\n    .container {\n      display: flex;\n      position: relative;\n      min-width: min-content;\n      min-height: min-content;\n    }\n\n    .container.horizontal {\n      flex-direction: row;\n      align-items: stretch;\n    }\n\n    .container.vertical {\n      flex-direction: column;\n    }\n\n    .container.scrollable {\n      scrollbar-width: none;\n      overflow-x: auto;\n      overflow-y: hidden;\n      .vertical {\n        overflow-x: hidden;\n        overflow-y: auto;\n      }\n    }\n\n    .container.focused {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n\n    .search-input {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      opacity: 0;\n      cursor: text;\n      z-index: 1;\n      pointer-events: none;\n    }\n\n    .search-input:focus {\n      outline: none;\n    }\n\n    .focus-trigger {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 0;\n      cursor: text;\n    }\n\n    .items {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--item-spacing, var(--space-xs, 3px));\n      align-items: center;\n      width: 100%;\n      height: 100%;\n      min-height: var(--item-height, 28px);\n      position: relative;\n      z-index: 2;\n      pointer-events: auto;\n    }\n\n    .container.horizontal .items {\n      flex-direction: row;\n    }\n\n    .container.vertical .items {\n      flex-direction: column;\n      align-items: stretch;\n    }\n\n    :host([nowrap]) .items {\n      flex-wrap: nowrap;\n    }\n\n    .item-icon {\n      flex-shrink: 0;\n      width: 1em;\n      height: 1em;\n    }\n\n    .item-label {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      color: var(--item-label-color, var(--item-text, inherit));\n      font-style: var(--item-label-font-style, var(--item-label-font-style-default, normal));\n      text-decoration: var(--item-label-text-decoration, var(--item-label-text-decoration-default, none));\n      text-underline-offset: var(--item-label-text-underline-offset, auto);\n    }\n\n    .item.selected .item-label {\n      --item-label-color: var(--item-text-selected);\n      --item-label-font-style: var(--item-label-font-style-selected, italic);\n    }\n\n    .item.tickled .item-label {\n      --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);\n      --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);\n    }\n\n    .item.active .item-label {\n      --item-label-color: var(--item-text-selected);\n    }\n\n    .item.selected.tickled .item-label {\n      --item-label-color: var(--item-text-selected);\n      --item-label-font-style: var(--item-label-font-style-selected, italic);\n      --item-label-text-decoration: var(--item-label-text-decoration-tickled, underline dotted);\n      --item-label-text-underline-offset: var(--item-label-text-underline-offset-tickled, 3px);\n    }\n\n    ::highlight(narrowed-text-highlight) {\n      background: var(--highlight-background, var(--accent));\n      color: var(--highlight-color, var(--accent-text, #fff));\n      border-radius: 2px;\n      padding: 0 1px;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-narrowed-text': NarrowedTextElement;\n  }\n}\n"],"mappings":"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"}

package/dist/panel.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from "lit";
+
+//#region src/panel/panel.d.ts
+type PanelOrientation = `horizontal` | `vertical`;
+type PanelVariant = `titlebar` | `midline`;
+type PanelToggleInteraction = `implicit` | `explicit` | `disabled`;
+interface PanelToggleDetail {
+  readonly collapsed: boolean;
+}
+type PanelToggleEvent = CustomEvent<PanelToggleDetail>;
+type PanelCloseEvent = CustomEvent<void>;
+interface PanelElementEventMap {
+  toggle: PanelToggleEvent;
+  close: PanelCloseEvent;
+}
+declare class PanelElement extends LitElement {
+  collapsed: boolean;
+  orientation: PanelOrientation;
+  closable: boolean;
+  title: string;
+  iconName: string;
+  toggleInteraction: PanelToggleInteraction;
+  variant: PanelVariant;
+  private _isVertical;
+  private _onToggleClick;
+  private _onCloseClick;
+  private _getCaretIcon;
+  protected updated(changed: Map<string, unknown>): void;
+  protected render(): import("lit").TemplateResult<1>;
+  static styles: import("lit").CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-panel': PanelElement;
+  }
+}
+interface PanelElement {
+  addEventListener: (<K extends keyof PanelElementEventMap>(type: K, listener: (this: PanelElement, event: PanelElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+export { PanelCloseEvent, PanelElement, PanelElementEventMap, PanelOrientation, PanelToggleDetail, PanelToggleEvent, PanelToggleInteraction, PanelVariant };
+//# sourceMappingURL=panel.d.ts.map

package/dist/panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.d.ts","names":[],"sources":["../src/panel/panel.ts"],"mappings":";;;KAKY,gBAAA;AAAA,KACA,YAAA;AAAA,KACA,sBAAA;AAAA,UAEK,iBAAA;EAAA,SACN,SAAS;AAAA;AAAA,KAGR,gBAAA,GAAmB,WAAW,CAAC,iBAAA;AAAA,KAC/B,eAAA,GAAkB,WAAW;AAAA,UAExB,oBAAA;EACf,MAAA,EAAQ,gBAAA;EACR,KAAA,EAAO,eAAe;AAAA;AAAA,cAIX,YAAA,SAAqB,UAAA;EACY,SAAA;EACyB,WAAA,EAAa,gBAAA;EACrD,QAAA;EACD,KAAA;EACwB,QAAA;EACS,iBAAA,EAAmB,sBAAA;EACf,OAAA,EAAS,YAAA;EAAA,QAEzD,WAAA;EAAA,QAET,cAAA;EAAA,QAWA,aAAA;EAAA,QAUA,aAAA;EAAA,UAIW,OAAA,CAAQ,OAAA,EAAS,GAAA;EAAA,UAOjB,MAAA,CAAA,iBAAM,cAAA;EAAA,OAyDT,MAAA,gBAAM,SAAA;AAAA;AAAA,QAkShB,MAAA;EAAA,UACI,qBAAA;IACR,YAAA,EAAc,YAAY;EAAA;AAAA;AAAA,UAIb,YAAA;EACf,gBAAA,oBAAoC,oBAAA,EAClC,IAAA,EAAM,CAAA,EACN,QAAA,GAAW,IAAA,EAAM,YAAA,EAAc,KAAA,EAAO,oBAAA,CAAqB,CAAA,YAC3D,OAAA,aAAoB,uBAAA,eAEpB,IAAA,UACA,QAAA,EAAU,kCAAA,EACV,OAAA,aAAoB,uBAAA;AAAA"}