@ixfx/components 0.4.3 → 0.5.0

package/bundle/style.css

@@ -14,7 +14,7 @@
   --surface-muted-text: oklch(55% .02 240);
   --content: oklch(10% .01 240);
   --content-text: #fff;
-  --accent: oklch(60% .15 140);
+  --accent: oklch(from AccentColor .6 c h);
   --accent-text: #fff;
   --plot-color: var(--accent);
   --error: oklch(60% .15 20);

package/dist/ac-text.d.ts

@@ -1,13 +1,15 @@
+import "./icon-DpA9x2Ve.js";
 import { LitElement, PropertyValues } from "lit";
-
 //#region src/ac-text/ac-text.d.ts
 type AcTextItem = {
   readonly label: string;
   readonly subLabel?: string;
   readonly icon?: string;
   readonly key?: string;
-  readonly data?: unknown; /** When true, Tab-accept will not append `tabSuffix`. */
-  readonly isLeaf?: boolean; /** Character positions within label that matched the query, used for CSS highlight rendering. */
+  readonly data?: unknown;
+  /** When true, Tab-accept will not append `tabSuffix`. */
+  readonly isLeaf?: boolean;
+  /** Character positions within label that matched the query, used for CSS highlight rendering. */
   readonly positions?: ReadonlySet<number>;
 };
 type AcTextSelectDetail = {
@@ -20,13 +22,16 @@ type AcTextSelectEvent = CustomEvent<AcTextSelectDetail>;
  *  or by selecting an item from the autocomplete popup (keyboard or click).
  */
 type AcTextChangeDetail = {
-  /** The committed text value (typed text, or the selected item's label). */readonly value: string;
+  /** The committed text value (typed text, or the selected item's label). */
+  readonly value: string;
   /**
    * The item key. For autocomplete items: `item.key ?? item.label`.
    *  For plain typed text: the text itself.
    */
-  readonly key: string; /** The item's `data` payload. Only present for autocomplete selections. */
-  readonly data?: unknown; /** Whether the commit came from plain typed text or an autocomplete selection. */
+  readonly key: string;
+  /** The item's `data` payload. Only present for autocomplete selections. */
+  readonly data?: unknown;
+  /** Whether the commit came from plain typed text or an autocomplete selection. */
   readonly source: `text` | `autocomplete`;
 };
 type AcTextChangeEvent = CustomEvent<AcTextChangeDetail>;
@@ -90,7 +95,7 @@ declare global {
   interface HTMLElementTagNameMap {
     'ixfx-ac-text': AcTextElement;
   }
-} //# sourceMappingURL=ac-text.d.ts.map
+}
 //#endregion
 export { AcTextChangeDetail, AcTextChangeEvent, AcTextCompletionProvider, AcTextElement, AcTextItem, AcTextSelectDetail, AcTextSelectEvent };
 //# sourceMappingURL=ac-text.d.ts.map

package/dist/ac-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ac-text.d.ts","names":[],"sources":["../src/ac-text/ac-text.ts"],"mappings":";;;KAeY,UAAA;EAAA,SACD,KAAA;EAAA,SACA,QAAA;EAAA,SACA,IAAA;EAAA,SACA,GAAA;EAAA,SACA,IAAA,YAHA;EAAA,SAKA,MAAA,YAHA;EAAA,SAKA,SAAA,GAAY,WAAW;AAAA;AAAA,KAGtB,kBAAA;EAAA,SACD,IAAA,EAAM,UAAU;EAAA,SAChB,KAAA;AAAA;AAAA,KAGC,iBAAA,GAAoB,WAAW,CAAC,kBAAA;;;;;KAMhC,kBAAA;EATD,oFAWA,KAAA;EAXK;AAGhB;;;EAHgB,SAgBL,GAAA,UAbmD;EAAA,SAenD,IAAA,YATmB;EAAA,SAWnB,MAAA;AAAA;AAAA,KAGC,iBAAA,GAAoB,WAAW,CAAC,kBAAA;AAAA,KAEhC,wBAAA,IACP,KAAA,UAAe,MAAA,EAAQ,WAAA,KAAgB,OAAA,CAAQ,UAAA,MAAgB,UAAA;;;;AANnD;AAGjB;;;;AAA8D;AAE9D;;;;;;;;;;;;cAoDa,aAAA,SAAsB,UAAA;EAAA;EAnDiC;EAsDlE,kBAAA,EAAoB,wBAAA;EAtDwD;EA0D5E,WAAA;EAPyB;EAWzB,SAAA;EARoB;EAYpB,UAAA;EAyEyB;;;;EAlEzB,KAAA;;;;;EAOA,SAAA;EAAA,QAEiB,MAAA;EAAA,QACA,QAAA;EAAA,QACA,OAAA;EAAA,QACA,UAAA;EAAA,QAET,OAAA;;EAaC,oBAAA;EAAA,UAMU,OAAA,CAAQ,YAAA,EAAc,cAAA;EAiChC,KAAA,CAAM,OAAA,GAAU,YAAA,EAAc,cAAA,WAAyB,YAAA;EAWhE,cAAA,CAAe,KAAA,UAAe,cAAA,WAAyB,YAAA;EAavD,WAAA,CAAY,KAAA,UAAe,GAAA;EAAA,UAmPR,MAAA,kBAAM,cAAA;EAAA,OA6BT,MAAA,gBAAM,SAAA;AAAA;AAAA,QAiJhB,MAAA;EAAA,UACI,qBAAA;IACR,cAAA,EAAgB,aAAa;EAAA;AAAA"}
+{"version":3,"file":"ac-text.d.ts","names":[],"sources":["../src/ac-text/ac-text.ts"],"mappings":";;;KAeY;WACD;WACA;WACA;WACA;WACA;;WAEA;;WAEA,YAAY;;KAGX;WACD,MAAM;WACN;;KAGC,oBAAoB,YAAY;;;;;KAMhC;;WAED;;;;;WAKA;;WAEA;;WAEA;;KAGC,oBAAoB,YAAY;KAEhC,4BACP,eAAe,QAAQ,gBAAgB,QAAQ,gBAAgB;;;;;;;;;;;;;;;;;;;;;;cAmDvD,sBAAsB;;;EAGjC,oBAAoB;;EAIpB;;EAIA;;EAIA;;;;;EAOA;;;;;EAOA;UAEiB;UACA;UACA;UACA;UAET;;EAaC;YAMU,QAAQ,cAAc;EAiChC,MAAM,UAAU,cAAc,yBAAyB;EAWhE,eAAe,eAAe,yBAAyB;EAavD,YAAY,eAAe;YAmPR,wBAAM;SA6BT,sBAAM;;QAiJhB;YACI;IACR,gBAAgB"}

package/dist/ac-text.js

@@ -1,8 +1,8 @@
 import { r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
 import { n as tickledStyles, r as TickledController } from "./tickled-styles-fNDdqf6l.js";
 import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
-import "./icon-Ndo40kNO.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import "./icon-B22XVlCt.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/ac-text/ac-text.ts
@@ -107,7 +107,6 @@ let AcTextElement = class AcTextElement extends LitElement {
 					if (!this._isOpen) return;
 					e.preventDefault();
 					this.#closePopup();
-					break;
 			}
 		};
 		this.#onItemPointerDown = (e, item) => {

package/dist/ac-text.js.map

@@ -1 +1 @@
-{"version":3,"file":"ac-text.js","names":["#triggerQuery","#cancelPending","#debounceTimer","#scrollActiveIntoView","#selectItem","#commitText","#closePopup","#cache","#applyHighlights","#abortController","#onItemPointerDown","#renderItem","#onInput","#onKeyDown","#onFocus","#onBlur","#renderPopup","customElement"],"sources":["../src/ac-text/ac-text.ts"],"sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { HighlightTarget } from '../incr-search/types.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { applyHighlights, clearHighlights } from '../incr-search/highlight.js';\nimport { TickledController } from '../interaction/tickled-controller.js';\nimport { tickledStyles } from '../interaction/tickled-styles.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nconst HIGHLIGHT_KEY = `ac-text-highlight`;\n\n// ---- Public types ----\n\nexport type AcTextItem = {\n  readonly label: string;\n  readonly subLabel?: string;\n  readonly icon?: string;\n  readonly key?: string;\n  readonly data?: unknown;\n  /** When true, Tab-accept will not append `tabSuffix`. */\n  readonly isLeaf?: boolean;\n  /** Character positions within label that matched the query, used for CSS highlight rendering. */\n  readonly positions?: ReadonlySet<number>;\n};\n\nexport type AcTextSelectDetail = {\n  readonly item: AcTextItem;\n  readonly query: string;\n};\n\nexport type AcTextSelectEvent = CustomEvent<AcTextSelectDetail>;\n\n/**\n * Fired when the user commits a value — either by pressing Enter on typed text\n *  or by selecting an item from the autocomplete popup (keyboard or click).\n */\nexport type AcTextChangeDetail = {\n  /** The committed text value (typed text, or the selected item's label). */\n  readonly value: string;\n  /**\n   * The item key. For autocomplete items: `item.key ?? item.label`.\n   *  For plain typed text: the text itself.\n   */\n  readonly key: string;\n  /** The item's `data` payload. Only present for autocomplete selections. */\n  readonly data?: unknown;\n  /** Whether the commit came from plain typed text or an autocomplete selection. */\n  readonly source: `text` | `autocomplete`;\n};\n\nexport type AcTextChangeEvent = CustomEvent<AcTextChangeDetail>;\n\nexport type AcTextCompletionProvider\n  = (query: string, signal: AbortSignal) => Promise<AcTextItem[]> | AcTextItem[];\n\n// ---- LRU cache ----\n\ntype LruCache<K, V> = {\n  get: (key: K) => V | undefined;\n  set: (key: K, value: V) => void;\n  has: (key: K) => boolean;\n  clear: () => void;\n};\n\nfunction makeLruCache<K, V>(maxSize: number): LruCache<K, V> {\n  const map = new Map<K, V>();\n  return {\n    get: (key: K) => map.get(key),\n    set: (key: K, value: V) => {\n      if (map.has(key))\n        map.delete(key);\n      map.set(key, value);\n      if (map.size > maxSize)\n        map.delete(map.keys().next().value!);\n    },\n    has: (key: K) => map.has(key),\n    clear: () => map.clear(),\n  };\n}\n\n// ---- Component ----\n\n/**\n * VS Code command-palette style autocomplete text input.\n *\n * Set `completionProvider` to a function that returns matching items for a\n * given query string. Results are shown in a popup that only exists in the\n * DOM while the input has focus.\n *\n * @fires {AcTextSelectEvent} ac-select — when an autocomplete item is selected\n * @fires {AcTextChangeEvent} change — when the user commits a value (Enter on typed text or autocomplete selection)\n *\n * @example\n * ```html\n * <ixfx-ac-text placeholder=\"Search commands…\"></ixfx-ac-text>\n * ```\n * ```ts\n * el.completionProvider = async (query) => commands.filter(c =>\n *   c.label.toLowerCase().includes(query.toLowerCase())\n * );\n * el.addEventListener('change', e => console.log(e.detail));\n * ```\n */\n@customElement(`ixfx-ac-text`)\nexport class AcTextElement extends LitElement {\n  /** Provides completion results for a query string. */\n  @property({ type: Object })\n  completionProvider: AcTextCompletionProvider | undefined;\n\n  /** Placeholder text for the input. */\n  @property({ type: String })\n  placeholder = ``;\n\n  /** Maximum number of query results to cache (LRU). */\n  @property({ type: Number, attribute: `cache-size` })\n  cacheSize = 20;\n\n  /** Debounce delay in ms before invoking the provider after keystroke. */\n  @property({ type: Number, attribute: `debounce-ms` })\n  debounceMs = 150;\n\n  /**\n   * Pre-populate the input with this value. Updated externally after construction is ignored\n   *  unless the input is not currently focused.\n   */\n  @property({ type: String })\n  value = ``;\n\n  /**\n   * String appended to the label when Tab is used to accept a suggestion.\n   *  Useful for path-style inputs where Tab-accepting a segment should add the separator.\n   */\n  @property({ type: String, attribute: `tab-suffix` })\n  tabSuffix = ``;\n\n  @state() private _query = ``;\n  @state() private _results: AcTextItem[] = [];\n  @state() private _isOpen = false;\n  @state() private _isLoading = false;\n\n  private tickled = new TickledController<number>(this, {\n    getItems: () => this._results.map((_, i) => ({ id: i, enabled: true })),\n  });\n\n  #cache: LruCache<string, AcTextItem[]> = makeLruCache(20);\n  #debounceTimer: ReturnType<typeof setTimeout> | undefined;\n  #abortController: AbortController | undefined;\n\n  constructor() {\n    super();\n    this.#cache = makeLruCache(this.cacheSize);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cancelPending();\n    clearHighlights({ key: HIGHLIGHT_KEY });\n  }\n\n  protected override updated(changedProps: PropertyValues): void {\n    if (changedProps.has(`completionProvider`)) {\n      this.#cache.clear();\n    }\n    if (changedProps.has(`cacheSize`)) {\n      this.#cache = makeLruCache(this.cacheSize);\n    }\n    if (changedProps.has(`value`)) {\n      // Only sync when the input isn't focused (avoid clobbering user typing)\n      const input = this.shadowRoot?.querySelector(`input`);\n      if (!input || document.activeElement !== input) {\n        this._query = this.value;\n      }\n    }\n    this.#applyHighlights();\n  }\n\n  #applyHighlights(): void {\n    if (!this._isOpen || !this.shadowRoot) {\n      clearHighlights({ key: HIGHLIGHT_KEY });\n      return;\n    }\n    const labelEls = this.shadowRoot.querySelectorAll(`.item-label`);\n    const targets: HighlightTarget[] = [];\n    labelEls.forEach((el, index) => {\n      const positions = this._results[index]?.positions;\n      if (!positions?.size)\n        return;\n      targets.push({ element: el, text: this._results[index].label, positions });\n    });\n    applyHighlights(targets, { key: HIGHLIGHT_KEY });\n  }\n\n  override focus(options?: FocusOptions, selectionStart?: number, selectionEnd?: number): void {\n    const input = this.shadowRoot?.querySelector(`input`) as HTMLInputElement | null;\n    if (!input)\n      return;\n    input.focus(options);\n    const start = selectionStart ?? input.value.length;\n    const end = selectionEnd ?? input.value.length;\n    input.setSelectionRange(start, end);\n    input.scrollLeft = input.scrollWidth;\n  }\n\n  focusWithValue(value: string, selectionStart?: number, selectionEnd?: number): void {\n    this._query = value;\n    this.updateComplete.then(() => {\n      const input = this.shadowRoot?.querySelector(`input`) as HTMLInputElement | null;\n      if (!input)\n        return;\n      input.focus();\n      const start = selectionStart ?? input.value.length;\n      const end = selectionEnd ?? input.value.length;\n      input.setSelectionRange(start, end);\n    });\n  }\n\n  selectRange(start: number, end?: number): void {\n    const input = this.shadowRoot?.querySelector(`input`) as HTMLInputElement | null;\n    if (!input)\n      return;\n    const endPos = end ?? input.value.length;\n    input.setSelectionRange(start, endPos);\n  }\n\n  // ---- Handlers ----\n\n  #onFocus = (): void => {\n    this._isOpen = true;\n    if (this._query.trim()) {\n      this.#triggerQuery(this._query);\n    }\n  };\n\n  #onBlur = (): void => {\n    this.#cancelPending();\n    this._isOpen = false;\n    this.tickled.clearTickled();\n  };\n\n  #onInput = (e: Event): void => {\n    const input = e.target as HTMLInputElement;\n    this._query = input.value;\n\n    if (this.#debounceTimer !== undefined) {\n      clearTimeout(this.#debounceTimer);\n    }\n\n    if (!this._query.trim()) {\n      this._results = [];\n      this.tickled.clearTickled();\n      this._isLoading = false;\n      this._isOpen = false;\n      return;\n    }\n\n    this._isOpen = true;\n    this.#debounceTimer = setTimeout(() => {\n      this.#triggerQuery(this._query);\n    }, this.debounceMs);\n  };\n\n  #onKeyDown = (e: KeyboardEvent): void => {\n    switch (e.key) {\n      case `ArrowDown`: {\n        if (!this._isOpen)\n          return;\n        e.preventDefault();\n        if (this._results.length === 0)\n          return;\n        this.tickled.handleKeyboardNavigation(`next`);\n        this.#scrollActiveIntoView();\n        break;\n      }\n      case `ArrowUp`: {\n        if (!this._isOpen)\n          return;\n        e.preventDefault();\n        if (this._results.length === 0)\n          return;\n        this.tickled.handleKeyboardNavigation(`previous`);\n        this.#scrollActiveIntoView();\n        break;\n      }\n      case `Enter`: {\n        const tickledIndex = this.tickled.tickledId ?? -1;\n        if (this._isOpen && tickledIndex >= 0 && this._results[tickledIndex]) {\n          // Autocomplete selection via keyboard\n          e.preventDefault();\n          this.#selectItem(this._results[tickledIndex]);\n        } else if (this._query.trim()) {\n          // Plain text commit\n          e.preventDefault();\n          this.#commitText(this._query);\n        }\n        break;\n      }\n      case `Tab`: {\n        const tickledIndex = this.tickled.tickledId ?? -1;\n        if (this._isOpen && tickledIndex >= 0 && this._results[tickledIndex]) {\n          e.preventDefault();\n          const tabItem = this._results[tickledIndex];\n          this._query = tabItem.label + (tabItem.isLeaf ? `` : this.tabSuffix);\n          this.tickled.clearTickled();\n          this.#triggerQuery(this._query);\n        }\n        break;\n      }\n      case `Escape`: {\n        if (!this._isOpen)\n          return;\n        e.preventDefault();\n        this.#closePopup();\n        break;\n      }\n    }\n  };\n\n  /** pointerdown beats blur — prevents popup vanishing before click registers */\n  #onItemPointerDown = (e: PointerEvent, item: AcTextItem): void => {\n    e.preventDefault();\n    this.#selectItem(item);\n  };\n\n  // ---- Internal logic ----\n\n  #triggerQuery(query: string): void {\n    if (!this.completionProvider)\n      return;\n\n    const cached = this.#cache.get(query);\n    if (cached !== undefined) {\n      this._results = cached;\n      this.tickled.clearTickled();\n      this._isLoading = false;\n      return;\n    }\n\n    // Cancel any in-flight request\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n    const { signal } = this.#abortController;\n\n    this._isLoading = true;\n\n    Promise.resolve(this.completionProvider(query, signal))\n      .then((results) => {\n        if (signal.aborted)\n          return;\n        this.#cache.set(query, results);\n        this._results = results;\n        this.tickled.clearTickled();\n        this._isLoading = false;\n      })\n      .catch((err) => {\n        if (signal.aborted)\n          return;\n        console.error(`[ixfx-ac-text] completionProvider error:`, err);\n        this._results = [];\n        this._isLoading = false;\n      });\n  }\n\n  #selectItem(item: AcTextItem): void {\n    this.dispatchEvent(new CustomEvent<AcTextSelectDetail>(`ac-select`, {\n      detail: { item, query: this._query },\n      bubbles: true,\n      composed: true,\n    }));\n    this.dispatchEvent(new CustomEvent<AcTextChangeDetail>(`change`, {\n      detail: {\n        value: item.label,\n        key: item.key ?? item.label,\n        data: item.data,\n        source: `autocomplete`,\n      },\n      bubbles: true,\n      composed: true,\n    }));\n    this._query = item.label;\n    this._isOpen = false;\n    this.tickled.clearTickled();\n  }\n\n  #commitText(text: string): void {\n    this.dispatchEvent(new CustomEvent<AcTextChangeDetail>(`change`, {\n      detail: {\n        value: text,\n        key: text,\n        source: `text`,\n      },\n      bubbles: true,\n      composed: true,\n    }));\n    this._isOpen = false;\n    this.tickled.clearTickled();\n  }\n\n  #closePopup(): void {\n    this._isOpen = false;\n    this.tickled.clearTickled();\n    clearHighlights({ key: HIGHLIGHT_KEY });\n  }\n\n  #cancelPending(): void {\n    if (this.#debounceTimer !== undefined) {\n      clearTimeout(this.#debounceTimer);\n      this.#debounceTimer = undefined;\n    }\n    this.#abortController?.abort();\n    this.#abortController = undefined;\n    this._isLoading = false;\n  }\n\n  #scrollActiveIntoView(): void {\n    // After Lit renders the new tickled item, scroll it into view\n    this.updateComplete.then(() => {\n      const item = this.shadowRoot?.querySelector(`.item.tickled`);\n      item?.scrollIntoView({ block: `nearest` });\n    });\n  }\n\n  // ---- Render helpers ----\n\n  #renderItem(item: AcTextItem, index: number) {\n    const isTickled = this.tickled.isTickled(index);\n    return html`\n      <div\n        class=\"item ${isTickled ? `tickled` : ``}\"\n        role=\"option\"\n        id=\"ac-item-${index}\"\n        aria-selected=${isTickled}\n        @pointerenter=${() => this.tickled.handlePointerEnter(index)}\n        @pointerdown=${(e: PointerEvent) => this.#onItemPointerDown(e, item)}\n      >\n        ${item.icon ? html`<ixfx-icon class=\"item-icon\" name=${item.icon}></ixfx-icon>` : nothing}\n        <span class=\"item-label\">${item.label}</span>\n        ${item.subLabel ? html`<span class=\"item-sublabel\">${item.subLabel}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  #renderPopup() {\n    const showEmpty = !this._isLoading && this._results.length === 0;\n    return html`\n      <div\n        class=\"popup\"\n        role=\"listbox\"\n        aria-label=\"Suggestions\"\n        data-input-mode=${this.tickled.inputMode}\n        @pointerleave=${(e: PointerEvent) => this.tickled.handlePointerLeave(e)}\n      >\n        ${showEmpty\n            ? html`<div class=\"no-results\">No matching results</div>`\n            : this._results.map((item, i) => this.#renderItem(item, i))\n        }\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const tickledIndex = this.tickled.tickledId ?? -1;\n    const activeDescendant = tickledIndex >= 0 ? `ac-item-${tickledIndex}` : undefined;\n    return html`\n      <div class=\"input-wrapper\">\n        <input\n          type=\"text\"\n          .value=${this._query}\n          placeholder=${this.placeholder || nothing}\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded=${this._isOpen}\n          aria-activedescendant=${activeDescendant ?? nothing}\n          @input=${this.#onInput}\n          @keydown=${this.#onKeyDown}\n          @focus=${this.#onFocus}\n          @blur=${this.#onBlur}\n        >\n        ${this._isLoading\n            ? html`<span class=\"spinner\" aria-hidden=\"true\"></span>`\n            : nothing\n        }\n      </div>\n      ${this._isOpen ? this.#renderPopup() : nothing}\n    `;\n  }\n\n  static override styles = [\n    themeFallbacks,\n    tickledStyles,\n    css`\n    :host {\n      display: 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    }\n\n    /* ---- Input ---- */\n\n    .input-wrapper {\n      display: flex;\n      align-items: center;\n      position: relative;\n    }\n\n    input {\n      appearance: none;\n      width: 100%;\n      box-sizing: border-box;\n      padding: var(--ac-input-padding, var(--space-m, 8px) var(--space-l, 12px));\n      background: var(--ac-input-background, var(--surface-3, var(--surface-2)));\n      color: var(--surface-2-text);\n      border: var(--ac-input-border, var(--border));\n      border-radius: var(--ac-input-border-radius, var(--radius-m, 4px));\n      font: inherit;\n      caret-color: var(--accent);\n      outline: none;\n      transition: border-color var(--transition, 0.15s ease-out);\n    }\n\n    input:focus {\n      border-color: var(--accent);\n    }\n\n    input::placeholder {\n      color: var(--surface-muted-text);\n    }\n\n    /* ---- Spinner ---- */\n\n    .spinner {\n      position: absolute;\n      right: var(--space-m, 8px);\n      width: 12px;\n      height: 12px;\n      border: 2px solid var(--surface-5);\n      border-top-color: var(--accent);\n      border-radius: 50%;\n      animation: ac-spin 0.7s linear infinite;\n      flex-shrink: 0;\n      pointer-events: none;\n    }\n\n    @keyframes ac-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* ---- Popup ---- */\n\n    .popup {\n      position: absolute;\n      top: calc(100% + 2px);\n      left: 0;\n      right: 0;\n      z-index: 100;\n      background: var(--surface-3, var(--surface-2));\n      border: var(--border);\n      border-radius: var(--radius-m, 4px);\n      box-shadow: var(--shadow-l, 0 4px 24px rgba(0, 0, 0, 0.5));\n      padding: var(--space-xs, 3px) 0;\n      max-height: 280px;\n      overflow-y: auto;\n      font-size: var(--ac-popup-font-size, var(--text-s, 11px));\n    }\n\n    /* ---- Items ---- */\n\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-m, 8px);\n      padding: var(--space-xs, 3px) var(--space-l, 12px);\n      cursor: pointer;\n      border-radius: var(--radius-s, 3px);\n      margin: 0 var(--space-xs, 3px);\n      transition: background var(--transition, 0.1s ease-out);\n      user-select: none;\n      white-space: nowrap;\n      min-height: 28px;\n    }\n\n    \n\n    .item.tickled {\n      background: var(--_item-focused-bg, var(--accent));\n      color: var(--accent-text, #fff);\n    }\n\n    .item.tickled .item-sublabel {\n      color: color-mix(in srgb, var(--accent-text, #fff) 70%, transparent);\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    }\n\n    .item-sublabel {\n      flex-shrink: 0;\n      margin-left: auto;\n      color: var(--surface-muted-text);\n      font-size: var(--text-s, 11px);\n    }\n\n    ::highlight(ac-text-highlight) {\n      background: var(--ac-highlight-background, var(--accent));\n      color: var(--ac-highlight-color, var(--accent-text, #fff));\n      border-radius: 2px;\n      padding: 0 1px;\n    }\n\n    /* ---- Empty state ---- */\n\n    .no-results {\n      padding: var(--space-m, 8px) var(--space-l, 12px);\n      color: var(--surface-muted-text);\n      font-style: italic;\n      font-size: var(--text-s, 11px);\n    }\n  `,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-ac-text': AcTextElement;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"ac-text.js","names":["#triggerQuery","#cancelPending","#debounceTimer","#scrollActiveIntoView","#selectItem","#commitText","#closePopup","#cache","#applyHighlights","#abortController","#onItemPointerDown","#renderItem","#onInput","#onKeyDown","#onFocus","#onBlur","#renderPopup","customElement"],"sources":["../src/ac-text/ac-text.ts"],"sourcesContent":["import type { PropertyValues } from 'lit';\nimport type { HighlightTarget } from '../incr-search/types.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { applyHighlights, clearHighlights } from '../incr-search/highlight.js';\nimport { TickledController } from '../interaction/tickled-controller.js';\nimport { tickledStyles } from '../interaction/tickled-styles.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport '../icons/icon.js';\n\nconst HIGHLIGHT_KEY = `ac-text-highlight`;\n\n// ---- Public types ----\n\nexport type AcTextItem = {\n  readonly label: string;\n  readonly subLabel?: string;\n  readonly icon?: string;\n  readonly key?: string;\n  readonly data?: unknown;\n  /** When true, Tab-accept will not append `tabSuffix`. */\n  readonly isLeaf?: boolean;\n  /** Character positions within label that matched the query, used for CSS highlight rendering. */\n  readonly positions?: ReadonlySet<number>;\n};\n\nexport type AcTextSelectDetail = {\n  readonly item: AcTextItem;\n  readonly query: string;\n};\n\nexport type AcTextSelectEvent = CustomEvent<AcTextSelectDetail>;\n\n/**\n * Fired when the user commits a value — either by pressing Enter on typed text\n *  or by selecting an item from the autocomplete popup (keyboard or click).\n */\nexport type AcTextChangeDetail = {\n  /** The committed text value (typed text, or the selected item's label). */\n  readonly value: string;\n  /**\n   * The item key. For autocomplete items: `item.key ?? item.label`.\n   *  For plain typed text: the text itself.\n   */\n  readonly key: string;\n  /** The item's `data` payload. Only present for autocomplete selections. */\n  readonly data?: unknown;\n  /** Whether the commit came from plain typed text or an autocomplete selection. */\n  readonly source: `text` | `autocomplete`;\n};\n\nexport type AcTextChangeEvent = CustomEvent<AcTextChangeDetail>;\n\nexport type AcTextCompletionProvider\n  = (query: string, signal: AbortSignal) => Promise<AcTextItem[]> | AcTextItem[];\n\n// ---- LRU cache ----\n\ntype LruCache<K, V> = {\n  get: (key: K) => V | undefined;\n  set: (key: K, value: V) => void;\n  has: (key: K) => boolean;\n  clear: () => void;\n};\n\nfunction makeLruCache<K, V>(maxSize: number): LruCache<K, V> {\n  const map = new Map<K, V>();\n  return {\n    get: (key: K) => map.get(key),\n    set: (key: K, value: V) => {\n      if (map.has(key))\n        map.delete(key);\n      map.set(key, value);\n      if (map.size > maxSize)\n        map.delete(map.keys().next().value!);\n    },\n    has: (key: K) => map.has(key),\n    clear: () => map.clear(),\n  };\n}\n\n// ---- Component ----\n\n/**\n * VS Code command-palette style autocomplete text input.\n *\n * Set `completionProvider` to a function that returns matching items for a\n * given query string. Results are shown in a popup that only exists in the\n * DOM while the input has focus.\n *\n * @fires {AcTextSelectEvent} ac-select — when an autocomplete item is selected\n * @fires {AcTextChangeEvent} change — when the user commits a value (Enter on typed text or autocomplete selection)\n *\n * @example\n * ```html\n * <ixfx-ac-text placeholder=\"Search commands…\"></ixfx-ac-text>\n * ```\n * ```ts\n * el.completionProvider = async (query) => commands.filter(c =>\n *   c.label.toLowerCase().includes(query.toLowerCase())\n * );\n * el.addEventListener('change', e => console.log(e.detail));\n * ```\n */\n@customElement(`ixfx-ac-text`)\nexport class AcTextElement extends LitElement {\n  /** Provides completion results for a query string. */\n  @property({ type: Object })\n  completionProvider: AcTextCompletionProvider | undefined;\n\n  /** Placeholder text for the input. */\n  @property({ type: String })\n  placeholder = ``;\n\n  /** Maximum number of query results to cache (LRU). */\n  @property({ type: Number, attribute: `cache-size` })\n  cacheSize = 20;\n\n  /** Debounce delay in ms before invoking the provider after keystroke. */\n  @property({ type: Number, attribute: `debounce-ms` })\n  debounceMs = 150;\n\n  /**\n   * Pre-populate the input with this value. Updated externally after construction is ignored\n   *  unless the input is not currently focused.\n   */\n  @property({ type: String })\n  value = ``;\n\n  /**\n   * String appended to the label when Tab is used to accept a suggestion.\n   *  Useful for path-style inputs where Tab-accepting a segment should add the separator.\n   */\n  @property({ type: String, attribute: `tab-suffix` })\n  tabSuffix = ``;\n\n  @state() private _query = ``;\n  @state() private _results: AcTextItem[] = [];\n  @state() private _isOpen = false;\n  @state() private _isLoading = false;\n\n  private tickled = new TickledController<number>(this, {\n    getItems: () => this._results.map((_, i) => ({ id: i, enabled: true })),\n  });\n\n  #cache: LruCache<string, AcTextItem[]> = makeLruCache(20);\n  #debounceTimer: ReturnType<typeof setTimeout> | undefined;\n  #abortController: AbortController | undefined;\n\n  constructor() {\n    super();\n    this.#cache = makeLruCache(this.cacheSize);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cancelPending();\n    clearHighlights({ key: HIGHLIGHT_KEY });\n  }\n\n  protected override updated(changedProps: PropertyValues): void {\n    if (changedProps.has(`completionProvider`)) {\n      this.#cache.clear();\n    }\n    if (changedProps.has(`cacheSize`)) {\n      this.#cache = makeLruCache(this.cacheSize);\n    }\n    if (changedProps.has(`value`)) {\n      // Only sync when the input isn't focused (avoid clobbering user typing)\n      const input = this.shadowRoot?.querySelector(`input`);\n      if (!input || document.activeElement !== input) {\n        this._query = this.value;\n      }\n    }\n    this.#applyHighlights();\n  }\n\n  #applyHighlights(): void {\n    if (!this._isOpen || !this.shadowRoot) {\n      clearHighlights({ key: HIGHLIGHT_KEY });\n      return;\n    }\n    const labelEls = this.shadowRoot.querySelectorAll(`.item-label`);\n    const targets: HighlightTarget[] = [];\n    labelEls.forEach((el, index) => {\n      const positions = this._results[index]?.positions;\n      if (!positions?.size)\n        return;\n      targets.push({ element: el, text: this._results[index].label, positions });\n    });\n    applyHighlights(targets, { key: HIGHLIGHT_KEY });\n  }\n\n  override focus(options?: FocusOptions, selectionStart?: number, selectionEnd?: number): void {\n    const input = this.shadowRoot?.querySelector(`input`) as HTMLInputElement | null;\n    if (!input)\n      return;\n    input.focus(options);\n    const start = selectionStart ?? input.value.length;\n    const end = selectionEnd ?? input.value.length;\n    input.setSelectionRange(start, end);\n    input.scrollLeft = input.scrollWidth;\n  }\n\n  focusWithValue(value: string, selectionStart?: number, selectionEnd?: number): void {\n    this._query = value;\n    this.updateComplete.then(() => {\n      const input = this.shadowRoot?.querySelector(`input`) as HTMLInputElement | null;\n      if (!input)\n        return;\n      input.focus();\n      const start = selectionStart ?? input.value.length;\n      const end = selectionEnd ?? input.value.length;\n      input.setSelectionRange(start, end);\n    });\n  }\n\n  selectRange(start: number, end?: number): void {\n    const input = this.shadowRoot?.querySelector(`input`) as HTMLInputElement | null;\n    if (!input)\n      return;\n    const endPos = end ?? input.value.length;\n    input.setSelectionRange(start, endPos);\n  }\n\n  // ---- Handlers ----\n\n  #onFocus = (): void => {\n    this._isOpen = true;\n    if (this._query.trim()) {\n      this.#triggerQuery(this._query);\n    }\n  };\n\n  #onBlur = (): void => {\n    this.#cancelPending();\n    this._isOpen = false;\n    this.tickled.clearTickled();\n  };\n\n  #onInput = (e: Event): void => {\n    const input = e.target as HTMLInputElement;\n    this._query = input.value;\n\n    if (this.#debounceTimer !== undefined) {\n      clearTimeout(this.#debounceTimer);\n    }\n\n    if (!this._query.trim()) {\n      this._results = [];\n      this.tickled.clearTickled();\n      this._isLoading = false;\n      this._isOpen = false;\n      return;\n    }\n\n    this._isOpen = true;\n    this.#debounceTimer = setTimeout(() => {\n      this.#triggerQuery(this._query);\n    }, this.debounceMs);\n  };\n\n  #onKeyDown = (e: KeyboardEvent): void => {\n    switch (e.key) {\n      case `ArrowDown`: {\n        if (!this._isOpen)\n          return;\n        e.preventDefault();\n        if (this._results.length === 0)\n          return;\n        this.tickled.handleKeyboardNavigation(`next`);\n        this.#scrollActiveIntoView();\n        break;\n      }\n      case `ArrowUp`: {\n        if (!this._isOpen)\n          return;\n        e.preventDefault();\n        if (this._results.length === 0)\n          return;\n        this.tickled.handleKeyboardNavigation(`previous`);\n        this.#scrollActiveIntoView();\n        break;\n      }\n      case `Enter`: {\n        const tickledIndex = this.tickled.tickledId ?? -1;\n        if (this._isOpen && tickledIndex >= 0 && this._results[tickledIndex]) {\n          // Autocomplete selection via keyboard\n          e.preventDefault();\n          this.#selectItem(this._results[tickledIndex]);\n        } else if (this._query.trim()) {\n          // Plain text commit\n          e.preventDefault();\n          this.#commitText(this._query);\n        }\n        break;\n      }\n      case `Tab`: {\n        const tickledIndex = this.tickled.tickledId ?? -1;\n        if (this._isOpen && tickledIndex >= 0 && this._results[tickledIndex]) {\n          e.preventDefault();\n          const tabItem = this._results[tickledIndex];\n          this._query = tabItem.label + (tabItem.isLeaf ? `` : this.tabSuffix);\n          this.tickled.clearTickled();\n          this.#triggerQuery(this._query);\n        }\n        break;\n      }\n      case `Escape`: {\n        if (!this._isOpen)\n          return;\n        e.preventDefault();\n        this.#closePopup();\n        break;\n      }\n    }\n  };\n\n  /** pointerdown beats blur — prevents popup vanishing before click registers */\n  #onItemPointerDown = (e: PointerEvent, item: AcTextItem): void => {\n    e.preventDefault();\n    this.#selectItem(item);\n  };\n\n  // ---- Internal logic ----\n\n  #triggerQuery(query: string): void {\n    if (!this.completionProvider)\n      return;\n\n    const cached = this.#cache.get(query);\n    if (cached !== undefined) {\n      this._results = cached;\n      this.tickled.clearTickled();\n      this._isLoading = false;\n      return;\n    }\n\n    // Cancel any in-flight request\n    this.#abortController?.abort();\n    this.#abortController = new AbortController();\n    const { signal } = this.#abortController;\n\n    this._isLoading = true;\n\n    Promise.resolve(this.completionProvider(query, signal))\n      .then((results) => {\n        if (signal.aborted)\n          return;\n        this.#cache.set(query, results);\n        this._results = results;\n        this.tickled.clearTickled();\n        this._isLoading = false;\n      })\n      .catch((err) => {\n        if (signal.aborted)\n          return;\n        console.error(`[ixfx-ac-text] completionProvider error:`, err);\n        this._results = [];\n        this._isLoading = false;\n      });\n  }\n\n  #selectItem(item: AcTextItem): void {\n    this.dispatchEvent(new CustomEvent<AcTextSelectDetail>(`ac-select`, {\n      detail: { item, query: this._query },\n      bubbles: true,\n      composed: true,\n    }));\n    this.dispatchEvent(new CustomEvent<AcTextChangeDetail>(`change`, {\n      detail: {\n        value: item.label,\n        key: item.key ?? item.label,\n        data: item.data,\n        source: `autocomplete`,\n      },\n      bubbles: true,\n      composed: true,\n    }));\n    this._query = item.label;\n    this._isOpen = false;\n    this.tickled.clearTickled();\n  }\n\n  #commitText(text: string): void {\n    this.dispatchEvent(new CustomEvent<AcTextChangeDetail>(`change`, {\n      detail: {\n        value: text,\n        key: text,\n        source: `text`,\n      },\n      bubbles: true,\n      composed: true,\n    }));\n    this._isOpen = false;\n    this.tickled.clearTickled();\n  }\n\n  #closePopup(): void {\n    this._isOpen = false;\n    this.tickled.clearTickled();\n    clearHighlights({ key: HIGHLIGHT_KEY });\n  }\n\n  #cancelPending(): void {\n    if (this.#debounceTimer !== undefined) {\n      clearTimeout(this.#debounceTimer);\n      this.#debounceTimer = undefined;\n    }\n    this.#abortController?.abort();\n    this.#abortController = undefined;\n    this._isLoading = false;\n  }\n\n  #scrollActiveIntoView(): void {\n    // After Lit renders the new tickled item, scroll it into view\n    this.updateComplete.then(() => {\n      const item = this.shadowRoot?.querySelector(`.item.tickled`);\n      item?.scrollIntoView({ block: `nearest` });\n    });\n  }\n\n  // ---- Render helpers ----\n\n  #renderItem(item: AcTextItem, index: number) {\n    const isTickled = this.tickled.isTickled(index);\n    return html`\n      <div\n        class=\"item ${isTickled ? `tickled` : ``}\"\n        role=\"option\"\n        id=\"ac-item-${index}\"\n        aria-selected=${isTickled}\n        @pointerenter=${() => this.tickled.handlePointerEnter(index)}\n        @pointerdown=${(e: PointerEvent) => this.#onItemPointerDown(e, item)}\n      >\n        ${item.icon ? html`<ixfx-icon class=\"item-icon\" name=${item.icon}></ixfx-icon>` : nothing}\n        <span class=\"item-label\">${item.label}</span>\n        ${item.subLabel ? html`<span class=\"item-sublabel\">${item.subLabel}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  #renderPopup() {\n    const showEmpty = !this._isLoading && this._results.length === 0;\n    return html`\n      <div\n        class=\"popup\"\n        role=\"listbox\"\n        aria-label=\"Suggestions\"\n        data-input-mode=${this.tickled.inputMode}\n        @pointerleave=${(e: PointerEvent) => this.tickled.handlePointerLeave(e)}\n      >\n        ${showEmpty\n            ? html`<div class=\"no-results\">No matching results</div>`\n            : this._results.map((item, i) => this.#renderItem(item, i))\n        }\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const tickledIndex = this.tickled.tickledId ?? -1;\n    const activeDescendant = tickledIndex >= 0 ? `ac-item-${tickledIndex}` : undefined;\n    return html`\n      <div class=\"input-wrapper\">\n        <input\n          type=\"text\"\n          .value=${this._query}\n          placeholder=${this.placeholder || nothing}\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded=${this._isOpen}\n          aria-activedescendant=${activeDescendant ?? nothing}\n          @input=${this.#onInput}\n          @keydown=${this.#onKeyDown}\n          @focus=${this.#onFocus}\n          @blur=${this.#onBlur}\n        >\n        ${this._isLoading\n            ? html`<span class=\"spinner\" aria-hidden=\"true\"></span>`\n            : nothing\n        }\n      </div>\n      ${this._isOpen ? this.#renderPopup() : nothing}\n    `;\n  }\n\n  static override styles = [\n    themeFallbacks,\n    tickledStyles,\n    css`\n    :host {\n      display: 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    }\n\n    /* ---- Input ---- */\n\n    .input-wrapper {\n      display: flex;\n      align-items: center;\n      position: relative;\n    }\n\n    input {\n      appearance: none;\n      width: 100%;\n      box-sizing: border-box;\n      padding: var(--ac-input-padding, var(--space-m, 8px) var(--space-l, 12px));\n      background: var(--ac-input-background, var(--surface-3, var(--surface-2)));\n      color: var(--surface-2-text);\n      border: var(--ac-input-border, var(--border));\n      border-radius: var(--ac-input-border-radius, var(--radius-m, 4px));\n      font: inherit;\n      caret-color: var(--accent);\n      outline: none;\n      transition: border-color var(--transition, 0.15s ease-out);\n    }\n\n    input:focus {\n      border-color: var(--accent);\n    }\n\n    input::placeholder {\n      color: var(--surface-muted-text);\n    }\n\n    /* ---- Spinner ---- */\n\n    .spinner {\n      position: absolute;\n      right: var(--space-m, 8px);\n      width: 12px;\n      height: 12px;\n      border: 2px solid var(--surface-5);\n      border-top-color: var(--accent);\n      border-radius: 50%;\n      animation: ac-spin 0.7s linear infinite;\n      flex-shrink: 0;\n      pointer-events: none;\n    }\n\n    @keyframes ac-spin {\n      to { transform: rotate(360deg); }\n    }\n\n    /* ---- Popup ---- */\n\n    .popup {\n      position: absolute;\n      top: calc(100% + 2px);\n      left: 0;\n      right: 0;\n      z-index: 100;\n      background: var(--surface-3, var(--surface-2));\n      border: var(--border);\n      border-radius: var(--radius-m, 4px);\n      box-shadow: var(--shadow-l, 0 4px 24px rgba(0, 0, 0, 0.5));\n      padding: var(--space-xs, 3px) 0;\n      max-height: 280px;\n      overflow-y: auto;\n      font-size: var(--ac-popup-font-size, var(--text-s, 11px));\n    }\n\n    /* ---- Items ---- */\n\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--space-m, 8px);\n      padding: var(--space-xs, 3px) var(--space-l, 12px);\n      cursor: pointer;\n      border-radius: var(--radius-s, 3px);\n      margin: 0 var(--space-xs, 3px);\n      transition: background var(--transition, 0.1s ease-out);\n      user-select: none;\n      white-space: nowrap;\n      min-height: 28px;\n    }\n\n    \n\n    .item.tickled {\n      background: var(--_item-focused-bg, var(--accent));\n      color: var(--accent-text, #fff);\n    }\n\n    .item.tickled .item-sublabel {\n      color: color-mix(in srgb, var(--accent-text, #fff) 70%, transparent);\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    }\n\n    .item-sublabel {\n      flex-shrink: 0;\n      margin-left: auto;\n      color: var(--surface-muted-text);\n      font-size: var(--text-s, 11px);\n    }\n\n    ::highlight(ac-text-highlight) {\n      background: var(--ac-highlight-background, var(--accent));\n      color: var(--ac-highlight-color, var(--accent-text, #fff));\n      border-radius: 2px;\n      padding: 0 1px;\n    }\n\n    /* ---- Empty state ---- */\n\n    .no-results {\n      padding: var(--space-m, 8px) var(--space-l, 12px);\n      color: var(--surface-muted-text);\n      font-style: italic;\n      font-size: var(--text-s, 11px);\n    }\n  `,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-ac-text': AcTextElement;\n  }\n}\n"],"mappings":"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"}

package/dist/{button-C3fLMKUv.js → button-DxYee1ZH.js}

@@ -1,4 +1,4 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { t as getIcon } from "./registry-CkW7q09Q.js";
 import "./icons.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
@@ -118,4 +118,4 @@ ButtonElement = __decorate([safeCustomElement(`ixfx-button`)], ButtonElement);
 //#endregion
 export { buttonStyles as n, ButtonElement as t };
 
-//# sourceMappingURL=button-C3fLMKUv.js.map
+//# sourceMappingURL=button-DxYee1ZH.js.map

package/dist/{button-C3fLMKUv.js.map → button-DxYee1ZH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-C3fLMKUv.js","names":["customElement"],"sources":["../src/button/button-styles.ts","../src/button/button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = css`\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n    vertical-align: middle;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  button {\n    cursor: pointer;\n    appearance: none;\n    background: var(--surface-4, #ccc);\n    color: var(--surface-3-text, #000);\n    border: var(--border, 1px solid #999);\n    border-radius: var(--radius-xl, 8px);\n    corner-shape: superellipse(1);\n    padding: var(--space-m, 8px) var(--space-l, 12px);\n    font-family: var(--font-family, inherit);\n    font-size: var(--text-m, 14px);\n    margin: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5em;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    box-shadow: \n      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-4) 30%, transparent), inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 20%, transparent),\n      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);\n    transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s);\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  button:hover:not(:disabled) {\n    background: color-mix(in oklch, var(--surface-4) 80%, transparent);\n    border-color: var(--accent, #666);\n    box-shadow: \n      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-5) 70%, transparent), \n      inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 60%, transparent),\n      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 90%, transparent);\n  }\n\n  button:active:not(:disabled) {\n    background: var(--surface-2, #aaa);\n    transform: translateY(1px);\n    box-shadow: inset 1px 1px 0px 0.5px color-mix(in oklch,var(--surface-1),transparent);\n  }\n\n  .button-icon {\n    display: var(--ixfx-button-hide-icon, inline-flex);\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .button-label {\n    white-space: nowrap;\n    display: var(--ixfx-button-hide-label, inline);\n  }\n\n  :host([hide-label]) .button-label {\n    display: none;\n  }\n\n  :host([hide-icon]) .button-icon {\n    display: none;\n  }\n`;\n","import { html, LitElement, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { getIcon } from \"../icons/index.js\";\nimport { prominenceStyles } from \"../styles/prominence.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\nimport { buttonStyles } from \"./button-styles.js\";\n\n@customElement(`ixfx-button`)\nexport class ButtonElement extends LitElement {\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  icon?: string;\n\n  @property({ type: Boolean, attribute: `hide-icon`, reflect: true })\n  hideIcon = false;\n\n  @property({ type: Boolean, attribute: `hide-label`, reflect: true })\n  hideLabel = false;\n\n  protected _renderIcon() {\n    if (this.hideIcon || !this.icon)\n      return nothing;\n\n    if (this.icon.startsWith(`<svg`)) {\n      return html`<span class=\"button-icon\">${unsafeHTML(this.icon)}</span>`;\n    }\n\n    const svg = getIcon(this.icon);\n\n    if (!svg)\n      return nothing;\n\n    return html`<ixfx-icon class=\"button-icon\" name=\"${this.icon}\"></ixfx-icon>`;\n  }\n\n  protected render() {\n    const label = this.hideLabel\n      ? nothing\n      : html`<span class=\"button-label\"><slot></slot></span>`;\n    return html`<button ?disabled=${this.disabled}>${this._renderIcon()}${label}</button>`;\n  }\n\n  static styles = [\n    prominenceStyles,\n    buttonStyles,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-button\": ButtonElement;\n  }\n}\n"],"mappings":";;;;;;;;AAEA,MAAa,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACOxB,IAAA,gBAAA,MAAM,sBAAsB,WAAW;;;kBAEjC;kBAMA;mBAGC;;CAEZ,cAAwB;EACtB,IAAI,KAAK,YAAY,CAAC,KAAK,MACzB,OAAO;EAET,IAAI,KAAK,KAAK,WAAW,MAAM,GAC7B,OAAO,IAAI,6BAA6B,WAAW,KAAK,IAAI,EAAE;EAKhE,IAAI,CAFQ,QAAQ,KAAK,IAElB,GACL,OAAO;EAET,OAAO,IAAI,wCAAwC,KAAK,KAAK;CAC/D;CAEA,SAAmB;EACjB,MAAM,QAAQ,KAAK,YACf,UACA,IAAI;EACR,OAAO,IAAI,qBAAqB,KAAK,SAAS,GAAG,KAAK,YAAY,IAAI,MAAM;CAC9E;;gBAEgB,CACd,kBACA,YACF;;AACF;YAvCG,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;YAG1B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,QAAA,KAAA,CAAA;YAGzB,SAAS;CAAE,MAAM;CAAS,WAAW;CAAa,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;YAGjE,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,aAAA,KAAA,CAAA;4BAXpEA,kBAAc,aAAa,CAAA,GAAA,aAAA"}
+{"version":3,"file":"button-DxYee1ZH.js","names":["customElement"],"sources":["../src/button/button-styles.ts","../src/button/button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = css`\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n    vertical-align: middle;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  button {\n    cursor: pointer;\n    appearance: none;\n    background: var(--surface-4, #ccc);\n    color: var(--surface-3-text, #000);\n    border: var(--border, 1px solid #999);\n    border-radius: var(--radius-xl, 8px);\n    corner-shape: superellipse(1);\n    padding: var(--space-m, 8px) var(--space-l, 12px);\n    font-family: var(--font-family, inherit);\n    font-size: var(--text-m, 14px);\n    margin: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5em;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    box-shadow: \n      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-4) 30%, transparent), inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 20%, transparent),\n      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 30%, transparent);\n    transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s);\n  }\n\n  button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  button:hover:not(:disabled) {\n    background: color-mix(in oklch, var(--surface-4) 80%, transparent);\n    border-color: var(--accent, #666);\n    box-shadow: \n      inset 1px 1px 1px 1px color-mix(in oklch, var(--surface-5) 70%, transparent), \n      inset -1px -1px 1px 1px color-mix(in oklch, var(--surface-2) 60%, transparent),\n      2px 2px 1px 0px color-mix(in oklch, var(--surface-2) 90%, transparent);\n  }\n\n  button:active:not(:disabled) {\n    background: var(--surface-2, #aaa);\n    transform: translateY(1px);\n    box-shadow: inset 1px 1px 0px 0.5px color-mix(in oklch,var(--surface-1),transparent);\n  }\n\n  .button-icon {\n    display: var(--ixfx-button-hide-icon, inline-flex);\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .button-label {\n    white-space: nowrap;\n    display: var(--ixfx-button-hide-label, inline);\n  }\n\n  :host([hide-label]) .button-label {\n    display: none;\n  }\n\n  :host([hide-icon]) .button-icon {\n    display: none;\n  }\n`;\n","import { html, LitElement, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\";\nimport { getIcon } from \"../icons/index.js\";\nimport { prominenceStyles } from \"../styles/prominence.js\";\nimport { safeCustomElement as customElement } from \"../util/custom-elements.js\";\nimport { buttonStyles } from \"./button-styles.js\";\n\n@customElement(`ixfx-button`)\nexport class ButtonElement extends LitElement {\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: String })\n  icon?: string;\n\n  @property({ type: Boolean, attribute: `hide-icon`, reflect: true })\n  hideIcon = false;\n\n  @property({ type: Boolean, attribute: `hide-label`, reflect: true })\n  hideLabel = false;\n\n  protected _renderIcon() {\n    if (this.hideIcon || !this.icon)\n      return nothing;\n\n    if (this.icon.startsWith(`<svg`)) {\n      return html`<span class=\"button-icon\">${unsafeHTML(this.icon)}</span>`;\n    }\n\n    const svg = getIcon(this.icon);\n\n    if (!svg)\n      return nothing;\n\n    return html`<ixfx-icon class=\"button-icon\" name=\"${this.icon}\"></ixfx-icon>`;\n  }\n\n  protected render() {\n    const label = this.hideLabel\n      ? nothing\n      : html`<span class=\"button-label\"><slot></slot></span>`;\n    return html`<button ?disabled=${this.disabled}>${this._renderIcon()}${label}</button>`;\n  }\n\n  static styles = [\n    prominenceStyles,\n    buttonStyles,\n  ];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-button\": ButtonElement;\n  }\n}\n"],"mappings":";;;;;;;;AAEA,MAAa,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACOxB,IAAM,gBAAN,MAAM,sBAAsB,WAAW;;;EAEjC,KAAA,WAAA;EAMA,KAAA,WAAA;EAGC,KAAA,YAAA;;CAEZ,cAAwB;EACtB,IAAI,KAAK,YAAY,CAAC,KAAK,MACzB,OAAO;EAET,IAAI,KAAK,KAAK,WAAW,MAAM,GAC7B,OAAO,IAAI,6BAA6B,WAAW,KAAK,IAAI,EAAE;EAKhE,IAAI,CAFQ,QAAQ,KAAK,IAElB,GACL,OAAO;EAET,OAAO,IAAI,wCAAwC,KAAK,KAAK;CAC/D;CAEA,SAAmB;EACjB,MAAM,QAAQ,KAAK,YACf,UACA,IAAI;EACR,OAAO,IAAI,qBAAqB,KAAK,SAAS,GAAG,KAAK,YAAY,IAAI,MAAM;CAC9E;;EAEgB,KAAA,SAAA,CACd,kBACA,YACF;;AACF;AAvCG,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;AAG1B,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,QAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAa,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;AAGjE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,aAAA,KAAA,CAAA;AAXpEA,gBAAAA,WAAAA,CAAAA,kBAAc,aAAa,CAAA,GAAA,aAAA"}

package/dist/button.d.ts

@@ -1,5 +1,4 @@
 import { LitElement, nothing } from "lit";
-
 //#region src/button/button.d.ts
 declare class ButtonElement extends LitElement {
   disabled: boolean;
@@ -14,7 +13,7 @@ declare global {
   interface HTMLElementTagNameMap {
     "ixfx-button": ButtonElement;
   }
-} //# sourceMappingURL=button.d.ts.map
+}
 //#endregion
 export { ButtonElement };
 //# sourceMappingURL=button.d.ts.map

package/dist/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../src/button/button.ts"],"mappings":";;;cASa,aAAA,SAAsB,UAAU;EAE3C,QAAA;EAGA,IAAA;EAGA,QAAA;EAGA,SAAA;EAAA,UAEU,WAAA,WAAW,OAAA,iBAAA,cAAA;EAAA,UAgBX,MAAA,kBAAM,cAAA;EAAA,OAOT,MAAA,gBAAM,SAAA;AAAA;AAAA,QAMP,MAAA;EAAA,UACI,qBAAA;IACR,aAAA,EAAe,aAAa;EAAA;AAAA"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../src/button/button.ts"],"mappings":";;cASa,sBAAsB;EAEjC;EAGA;EAGA;EAGA;YAEU,sBAAW,wBAAA;YAgBX,wBAAM;SAOT,sBAAM;;QAMP;YACI;IACR,eAAe"}

package/dist/button.js

@@ -1,3 +1,2 @@
-import "./icons.js";
-import { t as ButtonElement } from "./button-C3fLMKUv.js";
+import { t as ButtonElement } from "./button-DxYee1ZH.js";
 export { ButtonElement };

package/dist/checkbox.d.ts

@@ -1,5 +1,4 @@
 import { LitElement, html } from "lit";
-
 //#region src/checkbox/checkbox.d.ts
 declare class Checkbox extends LitElement {
   #private;

package/dist/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../src/checkbox/checkbox.ts"],"mappings":";;;cA2Ca,QAAA,SAAiB,UAAA;EAAA;SACrB,MAAA,gBAAM,SAAA;EAiKgB,OAAA;EACA,QAAA;EACA,aAAA;EACD,KAAA;EACA,IAAA;EACA,KAAA;EAanB,MAAA,IAAU,UAAA,QAAkB,IAAA;AAAA;AAAA,KAoB3B,oBAAA;EAAA,SACD,OAAO;AAAA;AAAA,KAGN,mBAAA,GAAsB,WAAW,CAAC,oBAAA;AAAA,QAEtC,MAAA;EAAA,UACI,qBAAA;IACR,eAAA,EAAiB,QAAQ;EAAA;AAAA;AAAA,UAIZ,gBAAA;EACf,MAAA,EAAQ,mBAAmB;AAAA;AAAA,UAGZ,QAAA;EACf,gBAAA,oBAAoC,gBAAA,EAClC,IAAA,EAAM,CAAA,EACN,QAAA,GAAW,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,gBAAA,CAAiB,CAAA,YACnD,OAAA,aAAoB,uBAAA,eAEpB,IAAA,UACA,QAAA,EAAU,kCAAA,EACV,OAAA,aAAoB,uBAAA;AAAA"}
+{"version":3,"file":"checkbox.d.ts","names":[],"sources":["../src/checkbox/checkbox.ts"],"mappings":";;cA2Ca,iBAAiB;;SACrB,sBAAM;EAiKgB;EACA;EACA;EACD;EACA;EACA;EAanB,UAAU,kBAAkB;;KAoB3B;WACD;;KAGC,sBAAsB,YAAY;QAEtC;YACI;IACR,iBAAiB;;;UAIJ;EACf,QAAQ;;UAGO;EACf,oBAAoB,gBAAgB,kBAClC,MAAM,GACN,WAAW,MAAM,UAAU,OAAO,iBAAiB,aACnD,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/checkbox.js

@@ -1,5 +1,5 @@
 import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";

package/dist/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["#handleChange","customElement"],"sources":["../src/checkbox/checkbox.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\n/**\n * <x-checkbox> — Custom checkbox with diagonal line indicator.\n *\n * A brutalist checkbox component featuring a thick diagonal line\n * (top-left to bottom-right) when checked. Uses shadow DOM with\n * CSS variables for appearance customization.\n *\n * Properties\n *   checked   – checkbox state (default: false)\n *   disabled  – disabled state (default: false)\n *   label     – label text\n *   name      – form field name\n *   value     – form field value\n *\n * Events\n *   change – CustomEvent { detail: { checked: boolean } }, bubbles + composed\n *\n * CSS Variables\n *   --box-size               – box size (default: 18px)\n *   --box-border-width       – border width (default: 2px)\n *   --box-border-color       – border color\n *   --box-bg-unchecked       – background when unchecked\n *   --box-bg-checked         – background when checked\n *   --check-line-color         – diagonal line color\n *   --check-line-width         – diagonal line thickness (default: 6px)\n *   --box-opacity-unchecked  – opacity when unchecked (default: 0.5)\n *   --box-opacity-checked    – opacity when checked (default: 1)\n *   --box-opacity-hover      – opacity on hover (default: 1)\n *   --box-opacity-disabled   – opacity when disabled (default: 0.3)\n *   --box-label-gap          – gap between box and label (default: 8px)\n *   --label-font-size    – label font size (default: 14px)\n *   --label-opacity      – label opacity (default: 1)\n *   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)\n *   --transition-duration – animation duration (default: 0.2s)\n */\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { prominenceStyles } from '../styles/prominence.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-checkbox`)\nexport class Checkbox extends LitElement {\n  static styles = [prominenceStyles, themeFallbacks, css`\n    :host {\n      /* Box */\n      --box-size: 18px;\n      --box-border-color: var(--surface-4);\n      --box-bg-unchecked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));\n      --box-bg-checked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));\n      --box-opacity-checked: 1;\n      --box-opacity-hover: var(--prominence-tickled-opacity);\n      --box-opacity-disabled: var(--prominence-disabled-opacity);\n      --box-border-width: 2px;\n      \n      /* Check */\n      --check-line-width: 6px;\n      --check-line-color: var(--accent);\n\n      /* Spacing & borders */\n      --label-gap: var(--space-m);\n\n      /* Label */\n      --label-opacity: 1;\n      --label-opacity-unchecked: var(--label-opacity);\n      --label-fg: var(--surface-3-text);\n      --label-active: var(--surface-2-text);\n      --label-hover: var(--surface-2-text);\n\n      /* Animation */\n      --transition-duration: var(--transition);\n\n      display: inline-flex;\n      user-select: none;\n    }\n\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--label-gap);\n      cursor: pointer;\n      position: relative;\n      opacity: var(--box-opacity-unchecked);\n      transition: opacity var(--transition-duration);\n    }\n\n    label:hover {\n      opacity: var(--box-opacity-hover);\n    }\n\n    label:has(input:checked) {\n      opacity: var(--box-opacity-checked);\n    }\n\n    input {\n      position: absolute;\n      opacity: 0;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      clip: rect(0, 0, 0, 0);\n    }\n\n    .box {\n      position: relative;\n      width: var(--box-size);\n      height: var(--box-size);\n      border: var(--border, 1px solid #999);\n      background: var(--box-bg-unchecked);\n      flex-shrink: 0;\n      transition: background var(--transition-duration);\n      overflow: hidden;\n      box-shadow: inset 1px 1px 0px 1px color-mix(in oklch, var(--surface-2) 60%, transparent);\n    }\n    label:has(input:not(:disabled)) {\n      .box:hover {\n        background: color-mix(in oklch, var(--surface-4) 80%, transparent);\n        border-color: var(--accent, #666);\n        box-shadow: unset;\n      }\n    }\n\n    input:checked ~ .box {\n      background: var(--box-bg-checked);\n    }\n\n    /* Diagonal line from top-left to bottom-right */\n    .box::after {\n      content: '';\n      position: absolute;\n      width: 141.4%; /* sqrt(2) × 100% to span corner-to-corner */\n      height: var(--check-line-width);\n      background: var(--check-line-color);\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%) rotate(45deg);\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n    }\n\n    input:checked ~ .box::after {\n      opacity: 1;\n    }\n\n    /* Horizontal line for indeterminate state */\n    .box::before {\n      content: '';\n      position: absolute;\n      width: 60%;\n      height: var(--check-line-width);\n      background: var(--check-line-color);\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n    }\n\n    input:indeterminate ~ .box::before {\n      opacity: 1;\n    }\n\n    /* Hide diagonal checkmark when indeterminate (must come after checked rule) */\n    input:indeterminate ~ .box::after {\n      opacity: 0;\n    }\n\n    /* Focus state */\n    input:focus-visible ~ .box {\n      outline: 2px solid var(--check-line-color);\n      outline-offset: 2px;\n    }\n\n    /* Disabled state */\n    label:has(input:disabled) {\n      opacity: var(--box-opacity-disabled);\n      cursor: not-allowed;\n      .box {\n        box-shadow: unset;\n      }    \n    }\n\n    .label {\n      color: var(--label-fg);\n      opacity: var(--label-opacity);\n      transition: opacity var(--transition-duration);\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    .label:hover {\n      color: var(--label-hover);\n    }\n    .label:has(+ :hover) {\n      color: var(--label-hover);\n    }\n    .label:has(+ :active) {\n      color: var(--label-active);\n    }\n    input:not(:checked) ~ .label {\n      opacity: var(--label-opacity-unchecked);\n    }\n  `];\n\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean }) indeterminate = false;\n  @property({ type: String }) label = ``;\n  @property({ type: String }) name = ``;\n  @property({ type: String }) value = ``;\n\n  #handleChange = (e: Event): void => {\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.dispatchEvent(new CustomEvent<CheckboxChangeDetail>(`change`, {\n      detail: { checked: this.checked },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <label>\n        <input\n          name=\"checkbox\"\n          type=\"checkbox\"\n          .checked=${this.checked}\n          .disabled=${this.disabled}\n          .indeterminate=${this.indeterminate}\n          .name=${this.name}\n          .value=${this.value}\n          @change=${this.#handleChange}\n        />\n        <span class=\"box\"></span>\n        ${this.label ? html`<span class=\"label\">${this.label}</span>` : ``}\n      </label>\n    `;\n  }\n}\n\nexport type CheckboxChangeDetail = {\n  readonly checked: boolean;\n};\n\nexport type CheckboxChangeEvent = CustomEvent<CheckboxChangeDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-checkbox': Checkbox;\n  }\n}\n\nexport interface CheckboxEventMap {\n  change: CheckboxChangeEvent;\n}\n\nexport interface Checkbox {\n  addEventListener: (<K extends keyof CheckboxEventMap>(\n    type: K,\n    listener: (this: Checkbox, event: CheckboxEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,IAAA,WAAA,MAAM,iBAAiB,WAAW;;;iBAkKA;kBACC;uBACK;eACT;cACD;eACC;wBAEnB,MAAmB;GAClC,MAAM,SAAS,EAAE;GACjB,KAAK,UAAU,OAAO;GAEtB,KAAK,cAAc,IAAI,YAAkC,UAAU;IACjE,QAAQ,EAAE,SAAS,KAAK,QAAQ;IAChC,SAAS;IACT,UAAU;GACZ,CAAC,CAAC;EACJ;;;gBAjLgB;GAAC;GAAkB;GAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+JrD;;CASD;CAWA,SAA2C;EACzC,OAAO,IAAI;;;;;qBAKM,KAAK,QAAQ;sBACZ,KAAK,SAAS;2BACT,KAAK,cAAc;kBAC5B,KAAK,KAAK;mBACT,KAAK,MAAM;oBACV,KAAKA,cAAc;;;UAG7B,KAAK,QAAQ,IAAI,uBAAuB,KAAK,MAAM,WAAW,GAAG;;;CAGzE;AACF;YApCG,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,WAAA,KAAA,CAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,YAAA,KAAA,CAAA;YAC1B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,iBAAA,KAAA,CAAA;YAC1B,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,SAAA,KAAA,CAAA;YACzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,QAAA,KAAA,CAAA;YACzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,SAAA,KAAA,CAAA;uBAxK3BC,kBAAc,eAAe,CAAA,GAAA,QAAA"}
+{"version":3,"file":"checkbox.js","names":["#handleChange","customElement"],"sources":["../src/checkbox/checkbox.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\n/**\n * <x-checkbox> — Custom checkbox with diagonal line indicator.\n *\n * A brutalist checkbox component featuring a thick diagonal line\n * (top-left to bottom-right) when checked. Uses shadow DOM with\n * CSS variables for appearance customization.\n *\n * Properties\n *   checked   – checkbox state (default: false)\n *   disabled  – disabled state (default: false)\n *   label     – label text\n *   name      – form field name\n *   value     – form field value\n *\n * Events\n *   change – CustomEvent { detail: { checked: boolean } }, bubbles + composed\n *\n * CSS Variables\n *   --box-size               – box size (default: 18px)\n *   --box-border-width       – border width (default: 2px)\n *   --box-border-color       – border color\n *   --box-bg-unchecked       – background when unchecked\n *   --box-bg-checked         – background when checked\n *   --check-line-color         – diagonal line color\n *   --check-line-width         – diagonal line thickness (default: 6px)\n *   --box-opacity-unchecked  – opacity when unchecked (default: 0.5)\n *   --box-opacity-checked    – opacity when checked (default: 1)\n *   --box-opacity-hover      – opacity on hover (default: 1)\n *   --box-opacity-disabled   – opacity when disabled (default: 0.3)\n *   --box-label-gap          – gap between box and label (default: 8px)\n *   --label-font-size    – label font size (default: 14px)\n *   --label-opacity      – label opacity (default: 1)\n *   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)\n *   --transition-duration – animation duration (default: 0.2s)\n */\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { prominenceStyles } from '../styles/prominence.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n@customElement(`ixfx-checkbox`)\nexport class Checkbox extends LitElement {\n  static styles = [prominenceStyles, themeFallbacks, css`\n    :host {\n      /* Box */\n      --box-size: 18px;\n      --box-border-color: var(--surface-4);\n      --box-bg-unchecked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));\n      --box-bg-checked: color-mix(in oklch, var(--surface-3) 50%, var(--surface-2));\n      --box-opacity-checked: 1;\n      --box-opacity-hover: var(--prominence-tickled-opacity);\n      --box-opacity-disabled: var(--prominence-disabled-opacity);\n      --box-border-width: 2px;\n      \n      /* Check */\n      --check-line-width: 6px;\n      --check-line-color: var(--accent);\n\n      /* Spacing & borders */\n      --label-gap: var(--space-m);\n\n      /* Label */\n      --label-opacity: 1;\n      --label-opacity-unchecked: var(--label-opacity);\n      --label-fg: var(--surface-3-text);\n      --label-active: var(--surface-2-text);\n      --label-hover: var(--surface-2-text);\n\n      /* Animation */\n      --transition-duration: var(--transition);\n\n      display: inline-flex;\n      user-select: none;\n    }\n\n    label {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--label-gap);\n      cursor: pointer;\n      position: relative;\n      opacity: var(--box-opacity-unchecked);\n      transition: opacity var(--transition-duration);\n    }\n\n    label:hover {\n      opacity: var(--box-opacity-hover);\n    }\n\n    label:has(input:checked) {\n      opacity: var(--box-opacity-checked);\n    }\n\n    input {\n      position: absolute;\n      opacity: 0;\n      width: 1px;\n      height: 1px;\n      margin: -1px;\n      clip: rect(0, 0, 0, 0);\n    }\n\n    .box {\n      position: relative;\n      width: var(--box-size);\n      height: var(--box-size);\n      border: var(--border, 1px solid #999);\n      background: var(--box-bg-unchecked);\n      flex-shrink: 0;\n      transition: background var(--transition-duration);\n      overflow: hidden;\n      box-shadow: inset 1px 1px 0px 1px color-mix(in oklch, var(--surface-2) 60%, transparent);\n    }\n    label:has(input:not(:disabled)) {\n      .box:hover {\n        background: color-mix(in oklch, var(--surface-4) 80%, transparent);\n        border-color: var(--accent, #666);\n        box-shadow: unset;\n      }\n    }\n\n    input:checked ~ .box {\n      background: var(--box-bg-checked);\n    }\n\n    /* Diagonal line from top-left to bottom-right */\n    .box::after {\n      content: '';\n      position: absolute;\n      width: 141.4%; /* sqrt(2) × 100% to span corner-to-corner */\n      height: var(--check-line-width);\n      background: var(--check-line-color);\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%) rotate(45deg);\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n    }\n\n    input:checked ~ .box::after {\n      opacity: 1;\n    }\n\n    /* Horizontal line for indeterminate state */\n    .box::before {\n      content: '';\n      position: absolute;\n      width: 60%;\n      height: var(--check-line-width);\n      background: var(--check-line-color);\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      opacity: 0;\n      transition: opacity var(--transition-duration);\n    }\n\n    input:indeterminate ~ .box::before {\n      opacity: 1;\n    }\n\n    /* Hide diagonal checkmark when indeterminate (must come after checked rule) */\n    input:indeterminate ~ .box::after {\n      opacity: 0;\n    }\n\n    /* Focus state */\n    input:focus-visible ~ .box {\n      outline: 2px solid var(--check-line-color);\n      outline-offset: 2px;\n    }\n\n    /* Disabled state */\n    label:has(input:disabled) {\n      opacity: var(--box-opacity-disabled);\n      cursor: not-allowed;\n      .box {\n        box-shadow: unset;\n      }    \n    }\n\n    .label {\n      color: var(--label-fg);\n      opacity: var(--label-opacity);\n      transition: opacity var(--transition-duration);\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    .label:hover {\n      color: var(--label-hover);\n    }\n    .label:has(+ :hover) {\n      color: var(--label-hover);\n    }\n    .label:has(+ :active) {\n      color: var(--label-active);\n    }\n    input:not(:checked) ~ .label {\n      opacity: var(--label-opacity-unchecked);\n    }\n  `];\n\n  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean }) indeterminate = false;\n  @property({ type: String }) label = ``;\n  @property({ type: String }) name = ``;\n  @property({ type: String }) value = ``;\n\n  #handleChange = (e: Event): void => {\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.dispatchEvent(new CustomEvent<CheckboxChangeDetail>(`change`, {\n      detail: { checked: this.checked },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <label>\n        <input\n          name=\"checkbox\"\n          type=\"checkbox\"\n          .checked=${this.checked}\n          .disabled=${this.disabled}\n          .indeterminate=${this.indeterminate}\n          .name=${this.name}\n          .value=${this.value}\n          @change=${this.#handleChange}\n        />\n        <span class=\"box\"></span>\n        ${this.label ? html`<span class=\"label\">${this.label}</span>` : ``}\n      </label>\n    `;\n  }\n}\n\nexport type CheckboxChangeDetail = {\n  readonly checked: boolean;\n};\n\nexport type CheckboxChangeEvent = CustomEvent<CheckboxChangeDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-checkbox': Checkbox;\n  }\n}\n\nexport interface CheckboxEventMap {\n  change: CheckboxChangeEvent;\n}\n\nexport interface Checkbox {\n  addEventListener: (<K extends keyof CheckboxEventMap>(\n    type: K,\n    listener: (this: Checkbox, event: CheckboxEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CO,IAAM,WAAN,MAAM,iBAAiB,WAAW;;;EAkKA,KAAA,UAAA;EACC,KAAA,WAAA;EACK,KAAA,gBAAA;EACT,KAAA,QAAA;EACD,KAAA,OAAA;EACC,KAAA,QAAA;EAEnB,KAAA,iBAAA,MAAmB;GAClC,MAAM,SAAS,EAAE;GACjB,KAAK,UAAU,OAAO;GAEtB,KAAK,cAAc,IAAI,YAAkC,UAAU;IACjE,QAAQ,EAAE,SAAS,KAAK,QAAQ;IAChC,SAAS;IACT,UAAU;GACZ,CAAC,CAAC;EACJ;;;EAjLgB,KAAA,SAAA;GAAC;GAAkB;GAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+JrD;;CASD;CAWA,SAA2C;EACzC,OAAO,IAAI;;;;;qBAKM,KAAK,QAAQ;sBACZ,KAAK,SAAS;2BACT,KAAK,cAAc;kBAC5B,KAAK,KAAK;mBACT,KAAK,MAAM;oBACV,KAAKA,cAAc;;;UAG7B,KAAK,QAAQ,IAAI,uBAAuB,KAAK,MAAM,WAAW,GAAG;;;CAGzE;AACF;AApCG,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,WAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,YAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,SAAA,WAAA,iBAAA,KAAA,CAAA;AAC1B,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,SAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,QAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,SAAA,WAAA,SAAA,KAAA,CAAA;AAxK3BC,WAAAA,WAAAA,CAAAA,kBAAc,eAAe,CAAA,GAAA,QAAA"}

package/dist/{colour-picker-0sgAha1T.js → colour-picker-C3Ag4uh-.js}

@@ -1,12 +1,12 @@
 import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
-import { n as ICON_CHECK } from "./defaults-C3b9OWJD.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { n as ICON_CHECK } from "./defaults-DcE8RQJc.js";
 import { t as popupSurfaceStyles } from "./popup-DiWMxsWj.js";
-import { t as colour_exports } from "./colour-C3MQIjFJ-vRCdr8W-.js";
 import "./labelled-range-input.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { Colour } from "@ixfx/visual";
 const RANGE_LIMITS = {
 	l: [0, 1],
 	c: [0, .4],
@@ -80,9 +80,7 @@ let ColourPicker = class ColourPicker extends LitElement {
 				case `h`:
 					this.h = value;
 					break;
-				case `a`:
-					this.a = value;
-					break;
+				case `a`: this.a = value;
 			}
 			e.stopPropagation();
 			this.requestUpdate();
@@ -93,7 +91,7 @@ let ColourPicker = class ColourPicker extends LitElement {
 		return oklchToCss(this.l, this.c, this.h, this.a);
 	}
 	set value(colourString) {
-		const c = colour_exports.convert(colourString, `oklch-absolute`);
+		const c = Colour.convert(colourString, `oklch-absolute`);
 		this.l = c.l;
 		this.c = c.c;
 		this.h = c.h;
@@ -106,7 +104,7 @@ let ColourPicker = class ColourPicker extends LitElement {
 	* sliders.
 	*/
 	setColour(colour) {
-		const c = colour_exports.convert(colour, `oklch-absolute`);
+		const c = Colour.convert(colour, `oklch-absolute`);
 		this.l = c.l;
 		this.c = c.c;
 		this.h = c.h;
@@ -192,9 +190,7 @@ let ColourPicker = class ColourPicker extends LitElement {
 			case `h`:
 				this.h = this._clampToRange(`h`, this.h);
 				break;
-			case `a`:
-				this.a = this._clampToRange(`a`, this.a);
-				break;
+			case `a`: this.a = this._clampToRange(`a`, this.a);
 		}
 		this.requestUpdate();
 	}
@@ -306,16 +302,18 @@ let ColourPicker = class ColourPicker extends LitElement {
 			for (const v of trackBgVars) el.style.setProperty(v, grad);
 			for (const v of trackValueVars) el.style.setProperty(v, `transparent`);
 		}
-		if (this._previewEl) if (this.a < 1) {
-			const previewBg = `
+		if (this._previewEl) {
+			if (this.a < 1) {
+				const previewBg = `
           linear-gradient(oklch(${l} ${c} ${h} / ${a}), oklch(${l} ${c} ${h} / ${a})),
           repeating-conic-gradient(
             var(--surface-2) 0% 25%,
             var(--surface-4) 0% 50%
           ) 50% / 16px 16px
         `;
-			this._previewEl.style.background = previewBg;
-		} else this._previewEl.style.background = this.value;
+				this._previewEl.style.background = previewBg;
+			} else this._previewEl.style.background = this.value;
+		}
 	}
 	_dispatchInput() {
 		const detail = {
@@ -685,7 +683,7 @@ let ColourPickerPopup = class ColourPickerPopup extends LitElement {
 		return PICKER_SIZES[this.size] ?? PICKER_SIZES.medium;
 	}
 	setColour(colour) {
-		const c = colour_exports.convert(colour, `oklch-absolute`);
+		const c = Colour.convert(colour, `oklch-absolute`);
 		this.l = c.l;
 		this.c = c.c;
 		this.h = c.h;
@@ -924,4 +922,4 @@ ColourPickerPopup = __decorate([safeCustomElement(`ixfx-colour-picker-popup`)],
 //#endregion
 export { ColourPicker as n, ColourPickerPopup as t };
 
-//# sourceMappingURL=colour-picker-0sgAha1T.js.map
+//# sourceMappingURL=colour-picker-C3Ag4uh-.js.map

package/dist/colour-picker-C3Ag4uh-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colour-picker-C3Ag4uh-.js","names":["customElement","customElement"],"sources":["../src/colour-picker/util.ts","../src/colour-picker/colour-picker.ts","../src/colour-picker/colour-picker-popup.ts"],"sourcesContent":["import type { Range, SliderType } from \"./types\";\n\nexport const MAX_CHROMA = 0.4;\nexport const RANGE_LIMITS: Record<SliderType, Range> = {\n  l: [0, 1],\n  c: [0, MAX_CHROMA],\n  h: [0, 360],\n  a: [0, 1],\n} as const;\nexport const DEFAULT_RANGES: Record<SliderType, Range> = {\n  l: RANGE_LIMITS.l,\n  c: RANGE_LIMITS.c,\n  h: RANGE_LIMITS.h,\n  a: RANGE_LIMITS.a,\n} as const;\n\nexport function rangeSpan([min, max]: Range): number {\n  return Math.max(max - min, 0);\n}\n\nexport function cloneRange(range: Range): Range {\n  return [range[0], range[1]] as Range;\n}\n\n/**\n * Convert OKLCH to a CSS string\n */\nexport function oklchToCss(l: number, c: number, h: number, a: number = 1): string {\n  if (a < 1) {\n    return `oklch(${l} ${c} ${h} / ${a})`;\n  }\n  return `oklch(${l} ${c} ${h})`;\n}\n\n/**\n * Clamp a value between min and max\n */\nexport function clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n","/**\n * <ixfx-colour-picker> — OKLCH colour picker using CSS-gradient-rendered sliders.\n *\n * Properties:\n *   l — lightness 0..1\n *   c — chroma 0..0.4\n *   h — hue 0..360\n *\n * Getters:\n *   value — current color as CSS string e.g. \"oklch(0.7 0.15 180)\"\n *\n * Methods:\n *   setColour(colour: Colour.Colourish) — programmatically set colour from any\n *     ixfx-compatible format; also resets double-click defaults for all sliders.\n *\n * Events:\n *   input — CustomEvent { detail: { l, c, h } }\n *\n * Double-click any slider label to reset that channel to the last\n * programmatically set value (not the user-dialled value).\n */\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport type { ColourPickerEventDetail, Range, RangeInput } from './types.js';\nimport { Colour } from '@ixfx/visual';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport { DEFAULT_RANGES, oklchToCss } from './util.js';\nimport '../labelled-range-input/index.js';\n\ntype ChannelSlider = `l` | `c` | `h` | `a`;\n\n@customElement(`ixfx-colour-picker`)\nexport class ColourPicker extends LitElement {\n  @property({ type: Number }) l = 0.7;\n  @property({ type: Number }) c = 0.15;\n  @property({ type: Number }) h = 180;\n  @property({ type: Number }) a = 1;\n\n  @property({ type: Boolean, attribute: `hide-preview`, reflect: true }) hidePreview = false;\n  @property({ type: Boolean, attribute: `hide-h`, reflect: true }) hideH = false;\n  @property({ type: Boolean, attribute: `hide-l`, reflect: true }) hideL = false;\n  @property({ type: Boolean, attribute: `hide-c`, reflect: true }) hideC = false;\n  @property({ type: Boolean, attribute: `show-a` }) showA = false;\n  @property({ type: Boolean, attribute: `horizontal`, reflect: true }) horizontal = false;\n  @property({ type: Boolean, attribute: `sliders-vertical`, reflect: true }) slidersVertical = false;\n  @property({ type: Boolean, attribute: `hide-tooltips`, reflect: true }) hideTooltips = false;\n\n  @property({ type: String, attribute: `value` })\n  private _valueAttr: string | null = null;\n\n  @property({ type: String, attribute: `range-l` }) rangeLAttr: string | null = null;\n  @property({ type: String, attribute: `range-c` }) rangeCAttr: string | null = null;\n  @property({ type: String, attribute: `range-h` }) rangeHAttr: string | null = null;\n  @property({ type: String, attribute: `range-a` }) rangeAAttr: string | null = null;\n\n  private _ranges: Record<ChannelSlider, Range> = {\n    l: DEFAULT_RANGES.l,\n    c: DEFAULT_RANGES.c,\n    h: DEFAULT_RANGES.h,\n    a: DEFAULT_RANGES.a,\n  };\n\n  @query(`#slider-l`) _sliderL!: HTMLElement;\n  @query(`#slider-c`) _sliderC!: HTMLElement;\n  @query(`#slider-h`) _sliderH!: HTMLElement;\n  @query(`#slider-a`) _sliderA!: HTMLElement;\n  @query(`.preview`) _previewEl!: HTMLElement;\n\n  // Last programmatically-set values — used as double-click reset targets.\n  // Initialised to the component's own defaults.\n  private _defaultL = this.l;\n  private _defaultC = this.c;\n  private _defaultH = this.h;\n  private _defaultA = this.a;\n\n  // Keys are added synchronously in input handlers and cleared only inside\n  // updated() (which runs asynchronously). This means updated() can reliably\n  // tell whether a property change was user-initiated or programmatic.\n  private readonly _userInitiated = new Set<string>();\n\n  get value(): string {\n    return oklchToCss(this.l, this.c, this.h, this.a);\n  }\n\n  set value(colourString: string) {\n    const c = Colour.convert(colourString, `oklch-absolute`);\n    this.l = c.l;\n    this.c = c.c;\n    this.h = c.h;\n    this.a = c.opacity ?? 1;\n    this._valueAttr = colourString;\n  }\n\n  /**\n   * Set the colour from any ixfx-compatible format (CSS string, OkLch object,\n   * HSL object, etc.). Also updates the double-click reset defaults for all\n   * sliders.\n   */\n  setColour(colour: Colour.Colourish): void {\n    const c = Colour.convert(colour, `oklch-absolute`);\n    this.l = c.l;\n    this.c = c.c;\n    this.h = c.h;\n    this.a = c.opacity ?? 1;\n    // No _userInitiated keys added → updated() will set _defaultL/C/H/A. ✓\n  }\n\n  get rangeL(): Range {\n    return [this._ranges.l[0], this._ranges.l[1]];\n  }\n\n  set rangeL(range: RangeInput) {\n    this._applyRangeInput(`l`, range);\n  }\n\n  get rangeC(): Range {\n    return [this._ranges.c[0], this._ranges.c[1]];\n  }\n\n  set rangeC(range: RangeInput) {\n    this._applyRangeInput(`c`, range);\n  }\n\n  get rangeH(): Range {\n    return [this._ranges.h[0], this._ranges.h[1]];\n  }\n\n  set rangeH(range: RangeInput) {\n    this._applyRangeInput(`h`, range);\n  }\n\n  get rangeA(): Range {\n    return [this._ranges.a[0], this._ranges.a[1]];\n  }\n\n  set rangeA(range: RangeInput) {\n    this._applyRangeInput(`a`, range);\n  }\n\n  setRangeL(range: RangeInput): void {\n    this.rangeL = range;\n  }\n\n  setRangeC(range: RangeInput): void {\n    this.rangeC = range;\n  }\n\n  setRangeH(range: RangeInput): void {\n    this.rangeH = range;\n  }\n\n  setRangeA(range: RangeInput): void {\n    this.rangeA = range;\n  }\n\n  override willUpdate(changedProperties: PropertyValues): void {\n    if (changedProperties.has(`rangeLAttr`))\n      this._setRangeFromAttribute(`l`, this.rangeLAttr);\n    if (changedProperties.has(`rangeCAttr`))\n      this._setRangeFromAttribute(`c`, this.rangeCAttr);\n    if (changedProperties.has(`rangeHAttr`))\n      this._setRangeFromAttribute(`h`, this.rangeHAttr);\n    if (changedProperties.has(`rangeAAttr`))\n      this._setRangeFromAttribute(`a`, this.rangeAAttr);\n    super.willUpdate(changedProperties);\n  }\n\n  private _applyRangeInput(channel: ChannelSlider, input: RangeInput): void {\n    const normalized = this._coerceRangeInput(channel, input);\n    if (!normalized)\n      return;\n    this._setRange(channel, normalized);\n  }\n\n  private _coerceRangeInput(channel: ChannelSlider, input: RangeInput): Range | null {\n    if (!Array.isArray(input) || input.length < 2)\n      return null;\n    const [start, end] = input;\n    if (!Number.isFinite(start) || !Number.isFinite(end))\n      return null;\n    return this._normalizeRange(channel, [start, end]);\n  }\n\n  private _setRangeFromAttribute(channel: ChannelSlider, value: string | null): void {\n    if (value === null) {\n      this._setRange(channel, DEFAULT_RANGES[channel]);\n      return;\n    }\n    const parsed = this._parseRangeString(channel, value);\n    if (parsed)\n      this._setRange(channel, parsed);\n  }\n\n  private _setRange(channel: ChannelSlider, range: Range): void {\n    const normalized = this._normalizeRange(channel, range);\n    const currentRange = this._ranges[channel];\n    if (currentRange[0] === normalized[0] && currentRange[1] === normalized[1])\n      return;\n\n    this._ranges = { ...this._ranges, [channel]: normalized };\n\n    switch (channel) {\n      case `l`:\n        this.l = this._clampToRange(`l`, this.l);\n        break;\n      case `c`:\n        this.c = this._clampToRange(`c`, this.c);\n        break;\n      case `h`:\n        this.h = this._clampToRange(`h`, this.h);\n        break;\n      case `a`:\n        this.a = this._clampToRange(`a`, this.a);\n        break;\n    }\n\n    this.requestUpdate();\n  }\n\n  private _getRange(channel: ChannelSlider): Range {\n    return this._ranges[channel] ?? DEFAULT_RANGES[channel];\n  }\n\n  private _parseRangeString(channel: ChannelSlider, value: string): Range | null {\n    const cleaned = value.trim();\n    const parts = cleaned.split(`-`, 2);\n    if (parts.length !== 2)\n      return null;\n    const start = Number(parts[0]!.trim());\n    const end = Number(parts[1]!.trim());\n    if (!Number.isFinite(start) || !Number.isFinite(end))\n      return null;\n    return this._normalizeRange(channel, [start, end]);\n  }\n\n  private _normalizeRange(channel: ChannelSlider, range: Range): Range {\n    const limits = DEFAULT_RANGES[channel];\n    const [rawMin, rawMax] = range;\n    const minVal = Math.min(Math.min(rawMin, rawMax), limits[1]);\n    const maxVal = Math.max(Math.max(rawMin, rawMax), limits[0]);\n    return [\n      Math.max(minVal, limits[0]),\n      Math.min(maxVal, limits[1]),\n    ];\n  }\n\n  private _clampToRange(channel: ChannelSlider, value: number): number {\n    const [min, max] = this._getRange(channel);\n    return Math.min(Math.max(value, min), max);\n  }\n\n  override render() {\n    const makeSlider = (channel: `l` | `c` | `h` | `a`, label: string, min: number, max: number, step: number, isHidden: boolean, formatter?: (value: string) => string) => {\n      if (isHidden)\n        return nothing;\n      return html`\n        <ixfx-labelled-range-input\n          id=\"slider-${channel}\"\n          label=\"${label}\"\n          min=${min}\n          max=${max}\n          mini-width-threshold=200\n          .value=${this[channel]}\n          step=${step}\n          .orientation=${this.slidersVertical ? `vertical` : `horizontal`}\n          .formatter=${formatter}\n          ?no-tooltip=${this.hideTooltips}\n          .displayTextLogic=${this.hideTooltips ? `show` : `transient`}\n          @input=${(e: Event) => this._onInput(e, channel)}\n          @change=${(e: Event) => this._onChange(e, channel)}\n        ></ixfx-labelled-range-input>\n      `;\n    };\n\n    return html`\n      <div class=\"picker\" ?horizontal=${this.horizontal}>\n        <div class=\"preview\" ?hidden=${this.hidePreview}></div>\n        <div class=\"sliders\">\n          ${makeSlider(`h`, `Hue`, ...this._getRange(`h`), 1, this.hideH, v => `${Math.round(Number(v))}°`)}\n          ${makeSlider(`l`, `Lightness`, ...this._getRange(`l`), 0.01, this.hideL, v => `${Math.round(Number(v) * 100)}%`)}\n          ${makeSlider(`c`, `Chroma`, ...this._getRange(`c`), 0.005, this.hideC, v => `${Number.parseFloat(v).toFixed(2)}`)}\n          ${this.showA ? makeSlider(`a`, `Opacity`, ...this._getRange(`a`), 0.01, false, v => `${Math.round(Number(v) * 100)}%`) : nothing}\n        </div>\n      </div>\n    `;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues): void {\n    super.firstUpdated(changedProperties);\n    this._updateGradients();\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    // Update reset defaults only for programmatic changes (not user input).\n    // _userInitiated is populated synchronously in input handlers and cleared\n    // here, so it correctly reflects what changed since the last render.\n    if (changedProperties.has(`l`) && !this._userInitiated.has(`l`))\n      this._defaultL = this.l;\n    if (changedProperties.has(`c`) && !this._userInitiated.has(`c`))\n      this._defaultC = this.c;\n    if (changedProperties.has(`h`) && !this._userInitiated.has(`h`))\n      this._defaultH = this.h;\n    if (changedProperties.has(`a`) && !this._userInitiated.has(`a`))\n      this._defaultA = this.a;\n    this._userInitiated.clear();\n\n    if (changedProperties.has(`l`) || changedProperties.has(`c`) || changedProperties.has(`h`) || changedProperties.has(`a`) || changedProperties.has(`showA`) || changedProperties.has(`slidersVertical`)) {\n      this._updateGradients();\n    }\n  }\n\n  _updateGradients(): void {\n    const l = this.l;\n    const c = this.c;\n    const h = this.h;\n    const a = this.a;\n\n    // Get actual ranges from this._ranges (may be restricted via attributes)\n    const [lMin, lMax] = this._ranges.l;\n    const [cMin, cMax] = this._ranges.c;\n    const [hMin, hMax] = this._ranges.h;\n    const [aMin, aMax] = this._ranges.a;\n\n    // Gradient direction: vertical sliders fill bottom→top (bottom = min, top = max).\n    const dir = this.slidersVertical ? `to top` : `to right`;\n\n    // L slider: black → white at current chroma + hue, using actual range\n    const lGrad = `linear-gradient(in oklch ${dir}, oklch(${lMin} ${c} ${h}), oklch(${lMax} ${c} ${h}))`;\n\n    // C slider: neutral grey → fully saturated at current lightness + hue, using actual range\n    const cGrad = `linear-gradient(in oklch ${dir}, oklch(${l} ${cMin} ${h}), oklch(${l} ${cMax} ${h}))`;\n\n    // H slider: hue range at current lightness + chroma.\n    // Use 'longer hue' for full 0-360 range, 'shorter hue' for restricted ranges.\n    const hRange = hMax - hMin;\n    const hLonger = hRange >= 300; // Full or near-full hue range\n    const hGrad = `linear-gradient(in oklch ${hLonger ? `longer` : `shorter`} hue ${dir}, oklch(${l} ${c} ${hMin}), oklch(${l} ${c} ${hMax}))`;\n\n    // A slider: transparent to opaque at current colour, using actual range.\n    // Includes checkerboard pattern as bottom layer, with opacity gradient on top.\n    const aGrad = `\n      linear-gradient(${dir}, oklch(${l} ${c} ${h} / ${aMin}), oklch(${l} ${c} ${h} / ${aMax})),\n      repeating-conic-gradient(\n        var(--surface-2) 0% 25%,\n        var(--surface-4) 0% 50%\n      ) 50% / 16px 16px\n    `;\n\n    // Set gradient on --background-track (goes to .range-bg, the track background)\n    // Set --background-track-value to transparent to hide the filled-portion bar\n    const trackBgVars = [\n      `--background-track`,\n      `--background-track-hover`,\n    ] as const;\n\n    const trackValueVars = [\n      `--background-track-value`,\n      `--background-track-value-hover`,\n      `--background-track-value-active`,\n      `--background-track-value-vertical`,\n      `--background-track-value-hover-vertical`,\n      `--background-track-value-active-vertical`,\n    ] as const;\n\n    const sliders: Array<[HTMLElement | null, string]> = [\n      [this._sliderL, lGrad],\n      [this._sliderC, cGrad],\n      [this._sliderH, hGrad],\n    ];\n\n    if (this.showA && this._sliderA)\n      sliders.push([this._sliderA, aGrad]);\n\n    for (const [el, grad] of sliders) {\n      if (!el)\n        continue;\n      // Set gradient on track background (.range-bg)\n      for (const v of trackBgVars) {\n        el.style.setProperty(v, grad);\n      }\n      // Hide the filled-portion bar (track pseudo-element)\n      for (const v of trackValueVars) {\n        el.style.setProperty(v, `transparent`);\n      }\n    }\n\n    // Preview swatch background - show checkerboard behind when opacity < 1\n    if (this._previewEl) {\n      if (this.a < 1) {\n        const previewBg = `\n          linear-gradient(oklch(${l} ${c} ${h} / ${a}), oklch(${l} ${c} ${h} / ${a})),\n          repeating-conic-gradient(\n            var(--surface-2) 0% 25%,\n            var(--surface-4) 0% 50%\n          ) 50% / 16px 16px\n        `;\n        this._previewEl.style.background = previewBg;\n      } else {\n        this._previewEl.style.background = this.value;\n      }\n    }\n  }\n\n  _onInput = (e: Event, channel: `l` | `c` | `h` | `a`): void => {\n    const detail = (e as CustomEvent).detail;\n    this._userInitiated.add(channel);\n    this[channel] = detail.value;\n    this._dispatchInput();\n    e.stopPropagation();\n  };\n\n  _onChange = (e: Event, channel: `l` | `c` | `h` | `a`): void => {\n    const detail = (e as CustomEvent).detail;\n    this._userInitiated.add(channel);\n    const value = typeof detail.value === `string` ? Number.parseFloat(detail.value) : detail.value;\n    switch (channel) {\n      case `l`: this.l = value; break;\n      case `c`: this.c = value; break;\n      case `h`: this.h = value; break;\n      case `a`: this.a = value; break;\n    }\n    e.stopPropagation();\n    this.requestUpdate();\n    this._dispatchChange();\n  };\n\n  _dispatchInput(): void {\n    const detail: ColourPickerEventDetail = { l: this.l, c: this.c, h: this.h, a: this.a };\n    this.dispatchEvent(new CustomEvent<ColourPickerEventDetail>(`input`, { detail, bubbles: true, composed: true }));\n  }\n\n  _dispatchChange(): void {\n    const detail: ColourPickerEventDetail = { l: this.l, c: this.c, h: this.h, a: this.a };\n    this.dispatchEvent(new CustomEvent<ColourPickerEventDetail>(`change`, { detail, bubbles: true, composed: true }));\n  }\n\n  static styles: CSSResultGroup = [themeFallbacks, css`\n    /*\n     * Default intrinsic size — not determined by label text.\n     * Override via CSS: ixfx-colour-picker { width: 100%; height: 200px; }\n     * Or via custom properties: --picker-alt-width, --picker-alt-min-slider-height\n     */\n    :host {\n      display: block;\n      width: var(--picker-alt-width, 240px);\n      height: var(--picker-alt-height, 240px);\n      --_radius-m: var(--radius-m, 4px);\n      --_radius-s: var(--radius-m, 3px);\n      container-type: size;\n    }\n\n    .picker {\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-s, 8px);\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .picker[horizontal] {\n      flex-direction: row;\n      align-items: stretch;\n    }\n\n    .sliders {\n      display: flex;\n      flex-direction: column;\n      gap: var(--space-s, 8px);\n      flex: 1;\n      min-height: 0;\n    }\n\n    .picker[horizontal] .sliders {\n      flex-direction: column;\n    }\n\n    .preview {\n      flex-shrink: 0;\n      height: 30%;\n      border-radius: var(--_radius-m);\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    .preview[hidden] {\n      display: none;\n    }\n\n    .picker[horizontal] .preview {\n      width: 3em;\n      height: auto;\n      flex-shrink: 0;\n    }\n\n    ixfx-labelled-range-input {\n      flex: 1;\n      min-height: var(--picker-alt-min-slider-height, 2.5em);\n      width: 100%;\n      min-width: 0;\n      --track-thickness: 2em;\n      --track-radius: var(--_radius-s);\n      --label-width: 5em;\n      --thumb-thickness: 4px;\n      --thumb-color: rgba(255, 255, 255, 0.9);\n      --thumb-color-active: white;\n      --thumb-radius: 3px;\n      --thumb-border: 2px solid rgba(255, 255, 255, 0.85);\n      --thumb-shadow: 0 0 0 2px rgba(0, 0, 0, 0.65);\n    }\n\n    /* Vertical sliders mode: sliders are side-by-side vertical bars */\n    :host([sliders-vertical]) .sliders {\n      flex-direction: row;\n      align-items: stretch;\n    }\n\n    :host([sliders-vertical]) ixfx-labelled-range-input {\n      width: auto;\n      height: 100%;\n      min-height: 0;\n      --mini: 1;             /* force mini mode: no label, tooltip on hover */\n      --track-thickness: 100%;  /* fill full width of the narrow slider */\n    }\n\n    /* Landscape */\n    @container (aspect-ratio > 1) {\n      .picker {\n        flex-direction: row;\n        display:flex;\n        align-items: stretch;\n\n      }\n      .preview {\n        width: 30%;\n        height: unset;\n      }\n      .sliders {\n        height: 100%;\n        overflow: hidden;\n      }\n    }\n\n    /* Small height. Show as landscape */\n    @container (max-height: 150px) {\n      .picker {\n        flex-direction: row;\n        align-items: stretch;\n      }\n      ixfx-labelled-range-input {\n        --track-thickness: 1em;\n        min-height: unset;\n      }\n      .preview {\n        min-width: 50%;\n        height: auto;\n      }\n    }\n\n    /* Medium height — tighter but not extreme */\n    @container (max-height: 210px) and (min-height: 150px) {\n      ixfx-labelled-range-input {\n        --track-thickness: 1.6em;\n        min-height: 1.8em;\n      }\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-colour-picker': ColourPicker;\n  }\n}\n","/**\n * <ixfx-colour-picker-popup> — inline colour swatch that opens an ixfx-colour-picker\n * in a native popover.\n *\n * Properties:\n *   mode       — \"fluid\" (default) | \"confirm\"\n *   l, c, h, a — committed OKLCH values\n *   hide-h, hide-l, hide-c, show-a, horizontal — passed to inner picker\n *   show-preview — show the colour preview swatch inside the picker (fluid mode hides it by default)\n *\n * Getters:\n *   value — committed colour as CSS string e.g. \"oklch(0.7 0.15 180)\"\n *\n * Methods:\n *   setColour(colour: Colour.Colourish) — programmatically set committed colour\n *\n * Events:\n *   input  — (fluid mode only) CustomEvent { detail: { l, c, h, a } }\n *   change — CustomEvent { detail: { l, c, h, a } }\n *\n * CSS custom properties:\n *   --cp-popup-swatch-size    — swatch button size (default: 1.5em)\n */\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport type { ColourPicker } from './colour-picker.js';\nimport type { ColourPickerEventDetail } from './types.js';\nimport { Colour } from '@ixfx/visual';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { ICON_CHECK } from '../icons/defaults.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { popupSurfaceStyles } from '../styles/popup.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport { oklchToCss } from './util.js';\nimport './colour-picker.js';\n\nlet _instanceCounter = 0;\n\nconst PICKER_SIZES = {\n  small: { width: 130, height: 100 },\n  medium: { width: 100, height: 155 },\n  large: { width: 200, height: 180 },\n  huge: { width: 290, height: 240 },\n} as const;\n\ntype PickerSize = keyof typeof PICKER_SIZES;\n\nfunction swatchBackground(l: number, c: number, h: number, a: number): string {\n  if (a < 1) {\n    return `\n      linear-gradient(oklch(${l} ${c} ${h} / ${a}), oklch(${l} ${c} ${h} / ${a})),\n      repeating-conic-gradient(\n        var(--surface-2) 0% 25%,\n        var(--surface-4) 0% 50%\n      ) 50% / 8px 8px\n    `;\n  }\n  return oklchToCss(l, c, h);\n}\n\n@customElement(`ixfx-colour-picker-popup`)\nexport class ColourPickerPopup extends LitElement {\n  @property({ type: String }) mode: `fluid` | `confirm` = `fluid`;\n\n  @property({ type: Number }) l = 0.7;\n  @property({ type: Number }) c = 0.15;\n  @property({ type: Number }) h = 180;\n  @property({ type: Number }) a = 1;\n\n  @property({ type: Boolean, attribute: `show-preview` }) showPreview = false;\n  @property({ type: Boolean, attribute: `hide-h`, reflect: true }) hideH = false;\n  @property({ type: Boolean, attribute: `hide-l`, reflect: true }) hideL = false;\n  @property({ type: Boolean, attribute: `hide-c`, reflect: true }) hideC = false;\n  @property({ type: Boolean, attribute: `show-a` }) showA = false;\n  @property({ type: Boolean, attribute: `horizontal` }) horizontal = false;\n  @property({ type: String }) size: PickerSize = `medium`;\n\n  @state() private _isOpen = false;\n  @state() private _everOpened = false;\n\n  @query(`.popup`) _popupEl!: HTMLElement;\n  @query(`ixfx-colour-picker`) _pickerEl!: ColourPicker;\n\n  private readonly _uid: string;\n  private readonly _anchorName: string;\n  private readonly _popupId: string;\n\n  // Confirm mode: values being adjusted (not yet committed)\n  private _pendingL = this.l;\n  private _pendingC = this.c;\n  private _pendingH = this.h;\n  private _pendingA = this.a;\n\n  // Confirm mode: snapshot taken on open, used for revert on dismiss\n  private _savedL = this.l;\n  private _savedC = this.c;\n  private _savedH = this.h;\n  private _savedA = this.a;\n\n  // Set to true just before hidePopover() in _onConfirm to suppress revert\n  private _pendingConfirmed = false;\n\n  constructor() {\n    super();\n    const id = ++_instanceCounter;\n    this._uid = `cp-popup-${id}`;\n    this._anchorName = `--cp-popup-anchor-${id}`;\n    this._popupId = `cp-popup-panel-${id}`;\n  }\n\n  get value(): string {\n    return oklchToCss(this.l, this.c, this.h, this.a);\n  }\n\n  private get _innerHidePreview(): boolean {\n    // Fluid mode hides the preview by default (swatch already shows live colour).\n    // show-preview overrides this. Confirm mode shows it by default.\n    if (this.mode === `fluid`)\n      return !this.showPreview;\n    return false;\n  }\n\n  private get _pickerDimensions(): { width: number; height: number } {\n    return PICKER_SIZES[this.size] ?? PICKER_SIZES.medium;\n  }\n\n  setColour(colour: Colour.Colourish): void {\n    const c = Colour.convert(colour, `oklch-absolute`);\n    this.l = c.l;\n    this.c = c.c;\n    this.h = c.h;\n    this.a = c.opacity ?? 1;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues): void {\n    super.firstUpdated(changedProperties);\n    this._applyAnchorPositioning();\n    this._updateSwatchBackground();\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    const colourChanged = changedProperties.has(`l`) || changedProperties.has(`c`)\n      || changedProperties.has(`h`) || changedProperties.has(`a`);\n    if (colourChanged) {\n      this._updateSwatchBackground();\n    }\n  }\n\n  private _applyAnchorPositioning(): void {\n    const swatch = this.shadowRoot?.querySelector(`.swatch`) as HTMLElement | null;\n    if (swatch) {\n      swatch.style.setProperty(`anchor-name`, this._anchorName);\n    }\n    if (this._popupEl) {\n      this._popupEl.style.setProperty(`position-anchor`, this._anchorName);\n    }\n  }\n\n  private _updateSwatchBackground(): void {\n    const swatch = this.shadowRoot?.querySelector(`.swatch`) as HTMLElement | null;\n    if (swatch) {\n      swatch.style.background = swatchBackground(this.l, this.c, this.h, this.a);\n    }\n  }\n\n  private _onPopoverToggle = (e: Event): void => {\n    const te = e as ToggleEvent;\n    this._isOpen = te.newState === `open`;\n\n    if (te.newState === `open`) {\n      this._savedL = this.l;\n      this._savedC = this.c;\n      this._savedH = this.h;\n      this._savedA = this.a;\n      this._pendingL = this.l;\n      this._pendingC = this.c;\n      this._pendingH = this.h;\n      this._pendingA = this.a;\n      this._pendingConfirmed = false;\n    } else if (this.mode === `confirm` && !this._pendingConfirmed) {\n      // Dismissed without confirming — reset inner picker to saved values\n      this._pickerEl?.setColour(oklchToCss(this._savedL, this._savedC, this._savedH, this._savedA));\n    }\n  };\n\n  private _onPickerInput = (e: Event): void => {\n    e.stopPropagation();\n    const detail = (e as CustomEvent<ColourPickerEventDetail>).detail;\n\n    if (this.mode === `confirm`) {\n      this._pendingL = detail.l;\n      this._pendingC = detail.c;\n      this._pendingH = detail.h;\n      this._pendingA = detail.a ?? 1;\n      return;\n    }\n\n    this.l = detail.l;\n    this.c = detail.c;\n    this.h = detail.h;\n    this.a = detail.a ?? 1;\n    this._dispatchInput();\n  };\n\n  private _onPickerChange = (e: Event): void => {\n    e.stopPropagation();\n    const detail = (e as CustomEvent<ColourPickerEventDetail>).detail;\n\n    if (this.mode === `confirm`) {\n      this._pendingL = detail.l;\n      this._pendingC = detail.c;\n      this._pendingH = detail.h;\n      this._pendingA = detail.a ?? 1;\n      return;\n    }\n\n    this.l = detail.l;\n    this.c = detail.c;\n    this.h = detail.h;\n    this.a = detail.a ?? 1;\n    this._dispatchChange();\n  };\n\n  private _onConfirm = (): void => {\n    this.l = this._pendingL;\n    this.c = this._pendingC;\n    this.h = this._pendingH;\n    this.a = this._pendingA;\n    this._pendingConfirmed = true;\n    this._dispatchChange();\n    try {\n      (this._popupEl as HTMLElement & { hidePopover: () => void }).hidePopover();\n    } catch {\n      // Popover API not supported\n    }\n  };\n\n  private _onSwatchClick = async (): Promise<void> => {\n    if (!this._everOpened) {\n      this._everOpened = true;\n      await this.updateComplete;\n    }\n    try {\n      (this._popupEl as HTMLElement & { showPopover: () => void }).showPopover();\n    } catch {\n      // Popover API not supported\n    }\n  };\n\n  private _dispatchInput(): void {\n    const detail: ColourPickerEventDetail = { l: this.l, c: this.c, h: this.h, a: this.a };\n    this.dispatchEvent(new CustomEvent<ColourPickerEventDetail>(`input`, { detail, bubbles: true, composed: true }));\n  }\n\n  private _dispatchChange(): void {\n    const detail: ColourPickerEventDetail = { l: this.l, c: this.c, h: this.h, a: this.a };\n    this.dispatchEvent(new CustomEvent<ColourPickerEventDetail>(`change`, { detail, bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <button\n        class=\"swatch\"\n        @click=${this._onSwatchClick}\n        aria-label=\"Pick colour: ${this.value}\"\n        aria-expanded=\"${this._isOpen}\"\n        aria-haspopup=\"dialog\"\n      ></button>\n      <div\n        id=\"${this._popupId}\"\n        class=\"popup popup-surface\"\n        popover=\"auto\"\n        role=\"dialog\"\n        aria-label=\"Colour picker\"\n        style=\"--cp-popup-min-width:${this._pickerDimensions.width}px;--cp-popup-min-height:${this._pickerDimensions.height}px\"\n        @toggle=${this._onPopoverToggle}\n      >\n        ${this._everOpened\n          ? html`\n          <ixfx-colour-picker\n            .l=${this.l}\n            .c=${this.c}\n            .h=${this.h}\n            .a=${this.a}\n            style=\"width:${this._pickerDimensions.width}px;height:${this._pickerDimensions.height}px\"\n            ?hide-preview=${this._innerHidePreview}\n            ?hide-h=${this.hideH}\n            ?hide-l=${this.hideL}\n            ?hide-c=${this.hideC}\n            ?show-a=${this.showA}\n            ?horizontal=${this.horizontal}\n            hide-tooltips\n            @input=${this._onPickerInput}\n            @change=${this._onPickerChange}\n          ></ixfx-colour-picker>\n          ${this.mode === `confirm`\n            ? html`\n            <button class=\"confirm-btn\" @click=${this._onConfirm} aria-label=\"Confirm colour\" title=\"Confirm colour\">\n              ${unsafeHTML(ICON_CHECK)}\n            </button>\n          `\n            : nothing}\n        `\n          : nothing}\n      </div>\n    `;\n  }\n\n  static styles: CSSResultGroup = [themeFallbacks, popupSurfaceStyles, css`\n    :host {\n      display: inline-block;\n    }\n\n    .swatch {\n      display: inline-block;\n      width: var(--cp-popup-swatch-size, 1.5em);\n      height: var(--cp-popup-swatch-size, 1.5em);\n      border-radius: var(--radius-m, 4px);\n      border: 1px solid rgba(0, 0, 0, 0.2);\n      cursor: pointer;\n      padding: 0;\n      box-sizing: border-box;\n      vertical-align: middle;\n      transition: transform 0.1s ease, box-shadow 0.1s ease;\n    }\n\n    .swatch:hover {\n      transform: scale(1.1);\n    }\n\n    .swatch:focus-visible {\n      outline: 2px solid var(--accent, oklch(60% 0.15 140));\n      outline-offset: 2px;\n    }\n\n    /* Popover panel */\n    .popup {\n      display:flex;\n      flex-direction: column;\n      gap: var(--space-s);\n      /* Reset popover UA inset */\n      inset: unset;\n      margin: 0;\n\n      min-width: var(--cp-popup-min-width);\n      min-height: var(--cp-popup-min-height);\n\n      /* CSS anchor positioning — position-anchor set via inline style in JS */\n      position: fixed;\n      position-area: block-end span-inline-start;\n      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;\n      margin-block-start: 4px;\n\n      padding: var(--space-l);\n      z-index: 100;\n\n      /* Animate in/out */\n      opacity: 0;\n      scale: 0.97;\n      pointer-events: none;\n      transition: opacity 0.12s ease, scale 0.12s ease;\n    }\n\n    .popup:popover-open {\n      opacity: 1;\n      scale: 1;\n      pointer-events: auto;\n    }\n\n    ixfx-colour-picker {\n      display: block;\n    }\n\n    .confirm-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-block-start: var(--space-s);\n      margin-inline-start: auto;\n      width: 1.8em;\n      height: 1.8em;\n      border-radius: 50%;\n      border: none;\n      background: var(--accent, oklch(60% 0.15 140));\n      color: var(--accent-text, #fff);\n      padding: 0;\n      cursor: pointer;\n      transition: background var(--transition, 0.15s ease-out);\n    }\n\n    .confirm-btn svg {\n      width: 1.1em;\n      height: 1.1em;\n      flex-shrink: 0;\n    }\n\n    .confirm-btn:hover {\n      background: var(--accent, oklch(70% 0.15 140));\n    }\n\n    .confirm-btn:focus-visible {\n      outline: 2px solid var(--accent, oklch(60% 0.15 140));\n      outline-offset: 2px;\n    }\n  `];\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-colour-picker-popup': ColourPickerPopup;\n  }\n}\n"],"mappings":"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"}

package/dist/colour-picker.d.ts

@@ -1,2 +1,2 @@
-import { a as ColourPickerInputEvent, i as ColourPickerEventDetail, n as ColourPicker, o as OklchValue, r as ColourPickerChangeEvent, t as ColourPickerPopup } from "./index-DgXpCg_G.js";
+import { a as ColourPickerInputEvent, i as ColourPickerEventDetail, n as ColourPicker, o as OklchValue, r as ColourPickerChangeEvent, t as ColourPickerPopup } from "./index-D_ftz_IT.js";
 export { ColourPicker, type ColourPickerChangeEvent, type ColourPickerEventDetail, type ColourPickerInputEvent, ColourPickerPopup, type OklchValue };

package/dist/colour-picker.js

@@ -1,2 +1,2 @@
-import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-0sgAha1T.js";
+import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-C3Ag4uh-.js";
 export { ColourPicker, ColourPickerPopup };

package/dist/crumbs.d.ts

@@ -1,6 +1,8 @@
-import { C as TreeNode, a as TreeComponent, b as TreeFilterPredicate, c as TreeExpandEvent, g as TreeDataModel, h as TreeTickleEvent, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeSelectEvent, u as TreeItemClickEvent, v as LoadChildrenCallback, w as TreeSelectionFilter, y as TreeExclusivity } from "./tree-component-BaCSPWg1.js";
+import { n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-DO3gt5vg.js";
+import { a as TreeComponent, c as TreeExpandEvent, g as TreeDataModel, h as TreeTickleEvent, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeSelectEvent, u as TreeItemClickEvent } from "./tree-component-DCmmKZ4j.js";
+import "./menu-item-DSyf9f_L.js";
+import "./narrowed-text.js";
 import { LitElement, PropertyValues } from "lit";
-
 //#region src/crumbs/crumb-navigation.d.ts
 /** @deprecated Use TreeSelectDetail from src/common/tree-component.ts */
 type CrumbNavigationChangeDetail = {
@@ -62,6 +64,7 @@ declare class CrumbNavigationElement extends LitElement implements TreeComponent
     depth: number;
   }>;
   updated(changedProps: PropertyValues): void;
+  connectedCallback(): void;
   disconnectedCallback(): void;
   /** Navigate to a node by key path. Returns false if any key is not found in already-loaded children. */
   navigateTo(keys: readonly string[]): boolean;