@ixfx/components 0.11.9 → 0.13.0

package/dist/ac-text.js

@@ -1,5 +1,5 @@
 import { r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
-import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
+import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { n as tickledStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";

package/dist/ac-token.js

@@ -1,4 +1,4 @@
-import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
+import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";

package/dist/{checked-select-Dejl13qd.js → checked-select-lDgAQQ7v.js}

@@ -1,9 +1,9 @@
-import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
+import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { t as handleStyles } from "./handle-DAXs7kbJ.js";
-import "./interaction-BskmlA9t.js";
+import "./interaction-ZTh4htzr.js";
 import "./checkbox.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -601,4 +601,4 @@ CheckedSelect = __decorate([safeCustomElement(`ixfx-checked-select`)], CheckedSe
 //#endregion
 export { CheckedSelect as t };
 
-//# sourceMappingURL=checked-select-Dejl13qd.js.map
+//# sourceMappingURL=checked-select-lDgAQQ7v.js.map

package/dist/{checked-select-Dejl13qd.js.map → checked-select-lDgAQQ7v.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checked-select-Dejl13qd.js","names":["#emitChange","#focusRestCheckbox","#popup","#trigger","#rows","#tickled","#scrollToCursor","#toggleRow","#listbox","#anchorName","#onDocumentPointerDown","#close","#onRestCheckboxChange","#onRowClick","#onTriggerClick","#onTriggerKeyDown","#renderRest","#onListKeyDown","#renderRow","#onResizeDown","customElement"],"sources":["../src/checked-select/logic.ts","../src/checked-select/checked-select.ts"],"sourcesContent":["import type { CheckedSelectItem, CheckState, Size } from './types.js';\n\nfunction byLabel(a: CheckedSelectItem, b: CheckedSelectItem): number {\n  return a.label.localeCompare(b.label, undefined, { sensitivity: `base` });\n}\n\n/** Checked/indeterminate items first, then the rest; each group sorted by label. */\nexport function sortForOpen(items: readonly CheckedSelectItem[]): CheckedSelectItem[] {\n  const on = items.filter(i => i.checked !== `false`).toSorted(byLabel);\n  const off = items.filter(i => i.checked === `false`).toSorted(byLabel);\n  return [...on, ...off];\n}\n\n/** User toggle: indeterminate and unchecked become checked, checked becomes unchecked. */\nexport function toggleState(state: CheckState): CheckState {\n  return state === `true` ? `false` : `true`;\n}\n\n/** Items shown in the resting state, alphabetically. */\nexport function visibleAtRest(items: readonly CheckedSelectItem[]): CheckedSelectItem[] {\n  return items.filter(i => i.checked !== `false`).toSorted(byLabel);\n}\n\nexport const VARIES_LABEL = `(varies)`;\n\n/** Resting text entries: checked labels, then a single `(varies)` if any are indeterminate. */\nexport function restTextParts(items: readonly CheckedSelectItem[]): string[] {\n  const on = items.filter(i => i.checked === `true`).toSorted(byLabel).map(i => i.label);\n  const varies = items.some(i => i.checked === `indeterminate`) ? [VARIES_LABEL] : [];\n  return [...on, ...varies];\n}\n\n/** Plain-text resting summary, comma separated. */\nexport function restText(items: readonly CheckedSelectItem[]): string {\n  return restTextParts(items).join(`, `);\n}\n\n/** Returns a new list with the item matching `value` toggled. */\nexport function applyToggle(items: readonly CheckedSelectItem[], value: string): CheckedSelectItem[] {\n  return items.map(i => i.value === value ? { ...i, checked: toggleState(i.checked) } : i);\n}\n\n/**\n * Index of the next label after `current` beginning with `char` (case-insensitive),\n * wrapping around. Returns -1 if nothing matches.\n */\nexport function nextMatchIndex(labels: readonly string[], current: number, char: string): number {\n  const c = char.toLocaleLowerCase();\n  const count = labels.length;\n  for (let step = 1; step <= count; step++) {\n    const index = (current + step + count) % count;\n    if (labels[index].toLocaleLowerCase().startsWith(c))\n      return index;\n  }\n  return -1;\n}\n\n/** Items in `draft` whose state differs from `original`. */\nexport function diffItems(original: readonly CheckedSelectItem[], draft: readonly CheckedSelectItem[]): CheckedSelectItem[] {\n  const before = new Map(original.map(i => [i.value, i.checked]));\n  return draft.filter(i => before.get(i.value) !== i.checked);\n}\n\nexport function clampSize(size: Size, min: Size, max: Size): Size {\n  return {\n    width: Math.min(Math.max(size.width, min.width), Math.max(max.width, min.width)),\n    height: Math.min(Math.max(size.height, min.height), Math.max(max.height, min.height)),\n  };\n}\n","/* eslint-disable ts/no-unsafe-declaration-merging */\n/**\n * <ixfx-checked-select> — a SELECT-like multi-choice control with tri-state items.\n *\n * At rest it shows the checked and indeterminate items as a flow of display-only\n * `ixfx-checkbox`. Opening it shows a scrollable, resizable popup of every item\n * (checked first, sorted once at open time). Edits are made to a draft:\n * Enter (or clicking the resting area again) commits, Escape or clicking outside\n * cancels.\n *\n * Properties\n *   items        – CheckedSelectItem[] ({ value, label, checked: 'true'|'false'|'indeterminate' })\n *   multiline    – let the resting flow wrap (default: false)\n *   items-inert  – resting checkboxes are display-only; clicking them opens the popup\n *   orientation  – 'horizontal' (default) flows items in a row; 'vertical' stacks one per row\n *                  (vertical ignores multiline; text mode then lists one entry per line, no commas)\n *   item-display – 'checkbox' (default) or 'text' (comma-separated labels, then '(varies)' if any are indeterminate)\n *   placeholder  – shown when nothing is checked\n *   disabled     – prevents opening\n *\n * Events\n *   change – CustomEvent { detail: { items, changed } }, bubbles + composed.\n *            Fired once per commit, and only if something changed.\n *\n * CSS Variables\n *   --checked-select-gap         – gap between resting checkboxes\n *   --checked-select-padding     – padding of the resting area\n *   --checked-select-caret-width – width of the always-visible caret (default: 2rem)\n *   --checked-select-rest-max-height – resting height before it scrolls when multiline (default: 8rem)\n *   --checked-select-max-height  – popup height before it scrolls (default: 16rem)\n *   --checked-select-min-width   – minimum popup width when resized (default: 8rem)\n *   --checked-select-min-height  – minimum popup height when resized (default: 5rem)\n */\nimport type { PropertyValues } from 'lit';\nimport type { CheckedSelectItem, ItemDisplay, ItemOrientation, Size } from './types.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { TickledController, tickledItemStyles, tickledStyles } from '../interaction/index.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { handleStyles } from '../styles/handle.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport { applyToggle, clampSize, diffItems, nextMatchIndex, restText, restTextParts, sortForOpen, visibleAtRest } from './logic.js';\nimport '../checkbox/checkbox.js';\n\nexport type { CheckedSelectItem, CheckState, ItemDisplay, ItemOrientation } from './types.js';\n\nlet instanceCounter = 0;\n\n@customElement(`ixfx-checked-select`)\nexport class CheckedSelect extends LitElement {\n  static override styles = [themeFallbacks, handleStyles, tickledStyles, tickledItemStyles, css`\n    :host {\n      --checked-select-gap: var(--space-m);\n      --checked-select-padding: var(--space-s) var(--space-m);\n      --checked-select-caret-width: 2rem;\n      --checked-select-rest-max-height: 8rem;\n      --checked-select-max-height: 16rem;\n      --checked-select-min-width: 8rem;\n      --checked-select-min-height: 5rem;\n\n      display: block;\n      position: relative;\n    }\n\n    :host([disabled]) {\n      opacity: var(--prominence-disabled-opacity, 0.4);\n      pointer-events: none;\n    }\n\n    .rest {\n      position: relative;\n      box-sizing: border-box;\n      cursor: pointer;\n      background: var(--surface-4);\n      color: var(--surface-4-text);\n      border: var(--border);\n      border-radius: var(--radius-m);\n      user-select: none;\n    }\n\n    .rest-items {\n      display: flex;\n      flex-wrap: nowrap;\n      align-items: center;\n      gap: var(--checked-select-gap);\n      padding: var(--checked-select-padding);\n      /* Room to scroll the last item clear of the caret */\n      padding-inline-end: var(--checked-select-caret-width);\n      min-height: 1.5em;\n      box-sizing: border-box;\n      overflow-x: auto;\n      overflow-y: hidden;\n      scrollbar-width: thin;\n    }\n    :host([multiline]) .rest-items {\n      flex-wrap: wrap;\n      overflow-x: hidden;\n      overflow-y: auto;\n      max-height: var(--checked-select-rest-max-height);\n      /* Wrapping never runs under the caret, so keep its column clear (and the scrollbar beside it) */\n      padding-inline-end: var(--space-m);\n      margin-inline-end: var(--checked-select-caret-width);\n    }\n\n    /* Vertical: one item per row, scrolling vertically beside the caret. Must follow the multiline rule. */\n    :host([orientation=\"vertical\"]) .rest-items {\n      flex-direction: column;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      overflow-x: hidden;\n      overflow-y: auto;\n      max-height: var(--checked-select-rest-max-height);\n      padding-inline-end: var(--space-m);\n      margin-inline-end: var(--checked-select-caret-width);\n    }\n\n    /* Always-visible caret; items scroll underneath it */\n    .caret {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-end: 0;\n      width: var(--checked-select-caret-width);\n      display: grid;\n      place-items: center;\n      background: inherit;\n      border-radius: inherit;\n      pointer-events: auto;\n    }\n    .caret svg {\n      width: 1.1em;\n      height: 1.1em;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      transition: rotate var(--transition, 0.1s ease-out);\n    }\n    .rest[aria-expanded=\"true\"] .caret svg {\n      rotate: 180deg;\n    }\n    /* While the popup is open its draft is authoritative */\n    .rest[aria-expanded=\"true\"] ixfx-checkbox {\n      pointer-events: none;\n    }\n    .rest:hover {\n      background: var(--surface-5);\n    }\n    .rest:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n    .rest ixfx-checkbox {\n      flex-shrink: 0;\n    }\n    .rest-text {\n      white-space: nowrap;\n    }\n    :host([multiline]) .rest-text {\n      white-space: normal;\n    }\n    .placeholder {\n      opacity: 0.6;\n    }\n\n    .popup {\n      /* Reset popover UA styles */\n      inset: unset;\n      margin: 0;\n      padding: 0;\n      border: none;\n      background: transparent;\n      overflow: visible;\n\n      /* CSS anchor positioning — position-anchor set inline */\n      position: fixed;\n      left: anchor(left);\n      top: anchor(bottom);\n      /* anchor-size() only works on the anchored element itself, so the width lives here */\n      width: anchor-size(width);\n      min-width: var(--checked-select-min-width);\n      position-try-fallbacks: flip-block;\n      margin-block: 4px;\n      z-index: 100;\n    }\n\n    .frame {\n      position: relative;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      max-height: var(--checked-select-max-height);\n      background: var(--surface-3);\n      color: var(--surface-3-text);\n      border: var(--border);\n      border-radius: var(--radius-m);\n    }\n\n    .listbox {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      padding: var(--space-s);\n      outline: none;\n    }\n    .listbox:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: -2px;\n    }\n\n    .item {\n      display: flex;\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    /* Key-repeat outpaces the fade, smearing the cursor across rows. Snap while\n       the keyboard drives the cursor; hover (mouse mode) keeps the transition. */\n    .listbox[data-input-mode=\"keyboard\"] .item {\n      transition: none;\n    }\n\n    .resize-zone {\n      position: absolute;\n      inset-block-end: 0;\n      inset-inline-end: 0;\n      width: 16px;\n      height: 16px;\n      display: grid;\n      place-items: center;\n      cursor: nwse-resize;\n      touch-action: none;\n    }\n    .resize-zone .ixfx-handle {\n      --ixfx-handle-spot-size: 10px;\n    }\n  `];\n\n  @property({ type: Array }) items: readonly CheckedSelectItem[] = [];\n  @property({ type: Boolean, reflect: true }) multiline = false;\n  /** At-rest checkboxes are display-only; clicking them just opens the popup. (Not `inert`: that native attribute would block the whole element.) */\n  @property({ type: Boolean, attribute: `items-inert`, reflect: true }) itemsInert = false;\n  /** How at-rest items are shown: as `checkbox`es, or as comma-separated `text`. */\n  @property({ type: String, attribute: `item-display`, reflect: true }) itemDisplay: ItemDisplay = `checkbox`;\n  /** Direction the resting items flow: `horizontal` (default) or `vertical` (one per row). */\n  @property({ type: String, reflect: true }) orientation: ItemOrientation = `horizontal`;\n  @property({ type: String }) placeholder = ``;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _open = false;\n  @state() private _draft: readonly CheckedSelectItem[] = [];\n  @state() private _order: readonly string[] = [];\n  @state() private _size: Size | undefined;\n\n  readonly #anchorName = `--checked-select-anchor-${instanceCounter++}`;\n\n  #tickled = new TickledController<number>(this, {\n    getItems: () => this._order.map((_, i) => ({ id: i })),\n  });\n\n  get isOpen(): boolean {\n    return this._open;\n  }\n\n  get #trigger(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(`.rest`) ?? null;\n  }\n\n  get #popup(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(`.popup`) ?? null;\n  }\n\n  get #listbox(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(`.listbox`) ?? null;\n  }\n\n  /** Draft items in their frozen open-time order. */\n  #rows(): CheckedSelectItem[] {\n    const byValue = new Map(this._draft.map(i => [i.value, i]));\n    return this._order.flatMap(v => byValue.get(v) ?? []);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener(`pointerdown`, this.#onDocumentPointerDown, true);\n  }\n\n  override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    if (changed.has(`disabled`) && this.disabled && this._open) {\n      this.cancel();\n    }\n  }\n\n  async open(): Promise<void> {\n    if (this._open || this.disabled)\n      return;\n    this._draft = this.items;\n    this._order = sortForOpen(this.items).map(i => i.value);\n    this._size = undefined;\n    this._open = true;\n    if (this._order.length > 0)\n      this.#tickled.handleKeyboardNavigation(`first`);\n    document.addEventListener(`pointerdown`, this.#onDocumentPointerDown, true);\n    await this.updateComplete;\n    this.#popup?.showPopover?.();\n    this.#listbox?.focus();\n  }\n\n  commit(): void {\n    if (!this._open)\n      return;\n    const changed = diffItems(this.items, this._draft);\n    const next = this._draft;\n    this.#close();\n    if (changed.length === 0)\n      return;\n    this.#emitChange(next, changed);\n  }\n\n  #emitChange(next: readonly CheckedSelectItem[], changed: readonly CheckedSelectItem[]): void {\n    this.items = next;\n    this.dispatchEvent(new CustomEvent<CheckedSelectChangeDetail>(`change`, {\n      detail: { items: next, changed },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /** A resting checkbox was used directly: toggle and commit immediately. */\n  #onRestCheckboxChange = (e: Event, value: string): void => {\n    // The checkbox's own `change` bubbles out of this shadow root; ours replaces it\n    e.stopPropagation();\n    if (this._open)\n      return;\n    const next = applyToggle(this.items, value);\n    this.#emitChange(next, diffItems(this.items, next));\n    void this.#focusRestCheckbox(value);\n  };\n\n  async #focusRestCheckbox(value: string): Promise<void> {\n    await this.updateComplete;\n    const box = this.shadowRoot?.querySelector<HTMLElement>(`.rest ixfx-checkbox[data-value=\"${CSS.escape(value)}\"]`);\n    // Unchecking removes the checkbox from the resting view; keep focus on the control\n    (box ?? this.#trigger)?.focus();\n  }\n\n  cancel(): void {\n    if (!this._open)\n      return;\n    this.#close();\n  }\n\n  #close(): void {\n    document.removeEventListener(`pointerdown`, this.#onDocumentPointerDown, true);\n    this.#popup?.hidePopover?.();\n    this._open = false;\n    this._draft = [];\n    this.#tickled.clearTickled();\n    this.#trigger?.focus();\n  }\n\n  #onDocumentPointerDown = (e: PointerEvent): void => {\n    const path = e.composedPath();\n    const popup = this.#popup;\n    const trigger = this.#trigger;\n    if ((popup && path.includes(popup)) || (trigger && path.includes(trigger)))\n      return;\n    this.cancel();\n  };\n\n  #onTriggerClick = (e: Event): void => {\n    // Clicks on a resting checkbox toggle it; only empty space (or the caret) opens/commits\n    if ((e.target as Element).closest?.(`ixfx-checkbox`))\n      return;\n    // Grabbing the scrollbar of the resting items isn't a click on the control\n    const scroller = e.composedPath()[0] as HTMLElement;\n    if (scroller.classList?.contains(`rest-items`) && e instanceof MouseEvent\n      && (e.offsetX > scroller.clientWidth || e.offsetY > scroller.clientHeight)) {\n      return;\n    }\n    if (this._open)\n      this.commit();\n    else void this.open();\n  };\n\n  #onTriggerKeyDown = (e: KeyboardEvent): void => {\n    // Keys on a focused resting checkbox belong to that checkbox\n    if (this._open || e.target !== e.currentTarget)\n      return;\n    if (e.key === `Enter` || e.key === ` ` || e.key === `ArrowDown`) {\n      e.preventDefault();\n      void this.open();\n    }\n  };\n\n  #toggleRow(value: string): void {\n    this._draft = applyToggle(this._draft, value);\n  }\n\n  #onRowClick(value: string, index: number): void {\n    this.#tickled.setTickled(index);\n    this.#toggleRow(value);\n  }\n\n  #onListKeyDown = (e: KeyboardEvent): void => {\n    const rows = this.#rows();\n    switch (e.key) {\n      case `ArrowDown`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`next`);\n        void this.#scrollToCursor();\n        return;\n      case `ArrowUp`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`previous`);\n        void this.#scrollToCursor();\n        return;\n      case `Home`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`first`);\n        void this.#scrollToCursor();\n        return;\n      case `End`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`last`);\n        void this.#scrollToCursor();\n        return;\n      case ` `: {\n        e.preventDefault();\n        const row = rows[this.#tickled.tickledId ?? -1];\n        if (row)\n          this.#toggleRow(row.value);\n        return;\n      }\n      case `Enter`:\n        e.preventDefault();\n        this.commit();\n        return;\n      case `Escape`:\n        e.preventDefault();\n        this.cancel();\n        return;\n      case `Tab`:\n        this.cancel();\n        return;\n    }\n    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n      const next = nextMatchIndex(rows.map(r => r.label), this.#tickled.tickledId ?? -1, e.key);\n      if (next >= 0) {\n        this.#tickled.handleKeyboardNavigation(next);\n        void this.#scrollToCursor();\n      }\n    }\n  };\n\n  async #scrollToCursor(): Promise<void> {\n    await this.updateComplete;\n    const index = this.#tickled.tickledId;\n    this.shadowRoot?.querySelector(`[data-index=\"${index}\"]`)?.scrollIntoView?.({ block: `nearest` });\n  }\n\n  #onResizeDown = (e: PointerEvent): void => {\n    const frame = this.shadowRoot?.querySelector<HTMLElement>(`.frame`);\n    const zone = e.currentTarget as HTMLElement;\n    if (!frame)\n      return;\n    e.preventDefault();\n    const start = frame.getBoundingClientRect();\n    const originX = e.clientX;\n    const originY = e.clientY;\n    const style = getComputedStyle(this);\n    const min: Size = {\n      width: Number.parseFloat(style.getPropertyValue(`--checked-select-min-width`)) || 128,\n      height: Number.parseFloat(style.getPropertyValue(`--checked-select-min-height`)) || 80,\n    };\n    const max: Size = {\n      width: window.innerWidth - start.left - 8,\n      height: window.innerHeight - start.top - 8,\n    };\n    zone.setPointerCapture?.(e.pointerId);\n    zone.setAttribute(`data-active`, ``);\n    const onMove = (m: PointerEvent): void => {\n      this._size = clampSize({\n        width: start.width + m.clientX - originX,\n        height: start.height + m.clientY - originY,\n      }, min, max);\n    };\n    const onEnd = (): void => {\n      zone.removeAttribute(`data-active`);\n      zone.removeEventListener(`pointermove`, onMove);\n      zone.removeEventListener(`pointerup`, onEnd);\n      zone.removeEventListener(`pointercancel`, onEnd);\n      this.#listbox?.focus();\n    };\n    zone.addEventListener(`pointermove`, onMove);\n    zone.addEventListener(`pointerup`, onEnd);\n    zone.addEventListener(`pointercancel`, onEnd);\n  };\n\n  #renderRest() {\n    const shown = visibleAtRest(this.items);\n    if (shown.length === 0) {\n      return html`<span class=\"placeholder\">${this.placeholder}</span>`;\n    }\n    if (this.itemDisplay === `text`) {\n      if (this.orientation === `vertical`) {\n        return restTextParts(this.items).map(part => html`<span class=\"rest-text\">${part}</span>`);\n      }\n      return html`<span class=\"rest-text\">${restText(this.items)}</span>`;\n    }\n    return repeat(shown, i => i.value, i => html`\n      <ixfx-checkbox\n        ?readonly=${this.itemsInert}\n        data-value=${i.value}\n        label=${i.label}\n        .checked=${i.checked === `true`}\n        .indeterminate=${i.checked === `indeterminate`}\n        @change=${(e: Event) => this.#onRestCheckboxChange(e, i.value)}\n      ></ixfx-checkbox>`);\n  }\n\n  #renderRow(row: CheckedSelectItem, index: number) {\n    return html`\n      <div\n        class=\"item ${this.#tickled.isTickled(index) ? `tickled` : ``}\"\n        role=\"option\"\n        id=\"opt-${index}\"\n        data-index=${index}\n        aria-checked=${row.checked === `indeterminate` ? `mixed` : row.checked}\n        @pointerenter=${() => this.#tickled.handlePointerEnter(index)}\n        @click=${() => this.#onRowClick(row.value, index)}\n      >\n        <ixfx-checkbox\n          readonly\n          label=${row.label}\n          .checked=${row.checked === `true`}\n          .indeterminate=${row.checked === `indeterminate`}\n        ></ixfx-checkbox>\n      </div>`;\n  }\n\n  protected override render() {\n    const rows = this._open ? this.#rows() : [];\n    const cursor = this.#tickled.tickledId;\n    const popupSize = this._size ? `width: ${this._size.width}px;` : ``;\n    const frameStyle = this._size ? `height: ${this._size.height}px; max-height: none;` : ``;\n    const summary = visibleAtRest(this.items).map(i => i.label).join(`, `);\n    return html`\n      <div\n        class=\"rest\"\n        role=\"combobox\"\n        tabindex=${this.disabled ? `-1` : `0`}\n        aria-haspopup=\"listbox\"\n        aria-expanded=${this._open ? `true` : `false`}\n        aria-disabled=${this.disabled ? `true` : nothing}\n        title=${summary || nothing}\n        style=\"anchor-name: ${this.#anchorName}\"\n        @click=${this.#onTriggerClick}\n        @keydown=${this.#onTriggerKeyDown}\n      >\n        <div class=\"rest-items\">${this.#renderRest()}</div>\n        <div class=\"caret\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"m6 9 6 6 6-6\" /></svg>\n        </div>\n      </div>\n      <div class=\"popup\" popover=\"manual\" style=\"position-anchor: ${this.#anchorName}; ${popupSize}\">\n        <div class=\"frame\" style=${frameStyle}>\n          <div\n            class=\"listbox\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            tabindex=\"-1\"\n            aria-activedescendant=${cursor === undefined ? nothing : `opt-${cursor}`}\n            data-input-mode=${this.#tickled.inputMode}\n            @pointerleave=${(e: PointerEvent) => this.#tickled.handlePointerLeave(e)}\n            @keydown=${this.#onListKeyDown}\n          >${rows.map((r, i) => this.#renderRow(r, i))}</div>\n          <div class=\"resize-zone\" @pointerdown=${this.#onResizeDown}>\n            <span class=\"ixfx-handle\" data-handle=\"dotted\" data-shape=\"spot\" part=\"handle\"></span>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport type CheckedSelectChangeDetail = {\n  /** Every item, with its committed state. */\n  readonly items: readonly CheckedSelectItem[];\n  /** Only the items whose state changed. */\n  readonly changed: readonly CheckedSelectItem[];\n};\n\nexport type CheckedSelectChangeEvent = CustomEvent<CheckedSelectChangeDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-checked-select': CheckedSelect;\n  }\n}\n\nexport interface CheckedSelectEventMap {\n  change: CheckedSelectChangeEvent;\n}\n\nexport interface CheckedSelect {\n  addEventListener: (<K extends keyof CheckedSelectEventMap>(\n    type: K,\n    listener: (this: CheckedSelect, event: CheckedSelectEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":"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"}
+{"version":3,"file":"checked-select-lDgAQQ7v.js","names":["#emitChange","#focusRestCheckbox","#popup","#trigger","#rows","#tickled","#scrollToCursor","#toggleRow","#listbox","#anchorName","#onDocumentPointerDown","#close","#onRestCheckboxChange","#onRowClick","#onTriggerClick","#onTriggerKeyDown","#renderRest","#onListKeyDown","#renderRow","#onResizeDown","customElement"],"sources":["../src/checked-select/logic.ts","../src/checked-select/checked-select.ts"],"sourcesContent":["import type { CheckedSelectItem, CheckState, Size } from './types.js';\n\nfunction byLabel(a: CheckedSelectItem, b: CheckedSelectItem): number {\n  return a.label.localeCompare(b.label, undefined, { sensitivity: `base` });\n}\n\n/** Checked/indeterminate items first, then the rest; each group sorted by label. */\nexport function sortForOpen(items: readonly CheckedSelectItem[]): CheckedSelectItem[] {\n  const on = items.filter(i => i.checked !== `false`).toSorted(byLabel);\n  const off = items.filter(i => i.checked === `false`).toSorted(byLabel);\n  return [...on, ...off];\n}\n\n/** User toggle: indeterminate and unchecked become checked, checked becomes unchecked. */\nexport function toggleState(state: CheckState): CheckState {\n  return state === `true` ? `false` : `true`;\n}\n\n/** Items shown in the resting state, alphabetically. */\nexport function visibleAtRest(items: readonly CheckedSelectItem[]): CheckedSelectItem[] {\n  return items.filter(i => i.checked !== `false`).toSorted(byLabel);\n}\n\nexport const VARIES_LABEL = `(varies)`;\n\n/** Resting text entries: checked labels, then a single `(varies)` if any are indeterminate. */\nexport function restTextParts(items: readonly CheckedSelectItem[]): string[] {\n  const on = items.filter(i => i.checked === `true`).toSorted(byLabel).map(i => i.label);\n  const varies = items.some(i => i.checked === `indeterminate`) ? [VARIES_LABEL] : [];\n  return [...on, ...varies];\n}\n\n/** Plain-text resting summary, comma separated. */\nexport function restText(items: readonly CheckedSelectItem[]): string {\n  return restTextParts(items).join(`, `);\n}\n\n/** Returns a new list with the item matching `value` toggled. */\nexport function applyToggle(items: readonly CheckedSelectItem[], value: string): CheckedSelectItem[] {\n  return items.map(i => i.value === value ? { ...i, checked: toggleState(i.checked) } : i);\n}\n\n/**\n * Index of the next label after `current` beginning with `char` (case-insensitive),\n * wrapping around. Returns -1 if nothing matches.\n */\nexport function nextMatchIndex(labels: readonly string[], current: number, char: string): number {\n  const c = char.toLocaleLowerCase();\n  const count = labels.length;\n  for (let step = 1; step <= count; step++) {\n    const index = (current + step + count) % count;\n    if (labels[index].toLocaleLowerCase().startsWith(c))\n      return index;\n  }\n  return -1;\n}\n\n/** Items in `draft` whose state differs from `original`. */\nexport function diffItems(original: readonly CheckedSelectItem[], draft: readonly CheckedSelectItem[]): CheckedSelectItem[] {\n  const before = new Map(original.map(i => [i.value, i.checked]));\n  return draft.filter(i => before.get(i.value) !== i.checked);\n}\n\nexport function clampSize(size: Size, min: Size, max: Size): Size {\n  return {\n    width: Math.min(Math.max(size.width, min.width), Math.max(max.width, min.width)),\n    height: Math.min(Math.max(size.height, min.height), Math.max(max.height, min.height)),\n  };\n}\n","/* eslint-disable ts/no-unsafe-declaration-merging */\n/**\n * <ixfx-checked-select> — a SELECT-like multi-choice control with tri-state items.\n *\n * At rest it shows the checked and indeterminate items as a flow of display-only\n * `ixfx-checkbox`. Opening it shows a scrollable, resizable popup of every item\n * (checked first, sorted once at open time). Edits are made to a draft:\n * Enter (or clicking the resting area again) commits, Escape or clicking outside\n * cancels.\n *\n * Properties\n *   items        – CheckedSelectItem[] ({ value, label, checked: 'true'|'false'|'indeterminate' })\n *   multiline    – let the resting flow wrap (default: false)\n *   items-inert  – resting checkboxes are display-only; clicking them opens the popup\n *   orientation  – 'horizontal' (default) flows items in a row; 'vertical' stacks one per row\n *                  (vertical ignores multiline; text mode then lists one entry per line, no commas)\n *   item-display – 'checkbox' (default) or 'text' (comma-separated labels, then '(varies)' if any are indeterminate)\n *   placeholder  – shown when nothing is checked\n *   disabled     – prevents opening\n *\n * Events\n *   change – CustomEvent { detail: { items, changed } }, bubbles + composed.\n *            Fired once per commit, and only if something changed.\n *\n * CSS Variables\n *   --checked-select-gap         – gap between resting checkboxes\n *   --checked-select-padding     – padding of the resting area\n *   --checked-select-caret-width – width of the always-visible caret (default: 2rem)\n *   --checked-select-rest-max-height – resting height before it scrolls when multiline (default: 8rem)\n *   --checked-select-max-height  – popup height before it scrolls (default: 16rem)\n *   --checked-select-min-width   – minimum popup width when resized (default: 8rem)\n *   --checked-select-min-height  – minimum popup height when resized (default: 5rem)\n */\nimport type { PropertyValues } from 'lit';\nimport type { CheckedSelectItem, ItemDisplay, ItemOrientation, Size } from './types.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { TickledController, tickledItemStyles, tickledStyles } from '../interaction/index.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { handleStyles } from '../styles/handle.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\nimport { applyToggle, clampSize, diffItems, nextMatchIndex, restText, restTextParts, sortForOpen, visibleAtRest } from './logic.js';\nimport '../checkbox/checkbox.js';\n\nexport type { CheckedSelectItem, CheckState, ItemDisplay, ItemOrientation } from './types.js';\n\nlet instanceCounter = 0;\n\n@customElement(`ixfx-checked-select`)\nexport class CheckedSelect extends LitElement {\n  static override styles = [themeFallbacks, handleStyles, tickledStyles, tickledItemStyles, css`\n    :host {\n      --checked-select-gap: var(--space-m);\n      --checked-select-padding: var(--space-s) var(--space-m);\n      --checked-select-caret-width: 2rem;\n      --checked-select-rest-max-height: 8rem;\n      --checked-select-max-height: 16rem;\n      --checked-select-min-width: 8rem;\n      --checked-select-min-height: 5rem;\n\n      display: block;\n      position: relative;\n    }\n\n    :host([disabled]) {\n      opacity: var(--prominence-disabled-opacity, 0.4);\n      pointer-events: none;\n    }\n\n    .rest {\n      position: relative;\n      box-sizing: border-box;\n      cursor: pointer;\n      background: var(--surface-4);\n      color: var(--surface-4-text);\n      border: var(--border);\n      border-radius: var(--radius-m);\n      user-select: none;\n    }\n\n    .rest-items {\n      display: flex;\n      flex-wrap: nowrap;\n      align-items: center;\n      gap: var(--checked-select-gap);\n      padding: var(--checked-select-padding);\n      /* Room to scroll the last item clear of the caret */\n      padding-inline-end: var(--checked-select-caret-width);\n      min-height: 1.5em;\n      box-sizing: border-box;\n      overflow-x: auto;\n      overflow-y: hidden;\n      scrollbar-width: thin;\n    }\n    :host([multiline]) .rest-items {\n      flex-wrap: wrap;\n      overflow-x: hidden;\n      overflow-y: auto;\n      max-height: var(--checked-select-rest-max-height);\n      /* Wrapping never runs under the caret, so keep its column clear (and the scrollbar beside it) */\n      padding-inline-end: var(--space-m);\n      margin-inline-end: var(--checked-select-caret-width);\n    }\n\n    /* Vertical: one item per row, scrolling vertically beside the caret. Must follow the multiline rule. */\n    :host([orientation=\"vertical\"]) .rest-items {\n      flex-direction: column;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      overflow-x: hidden;\n      overflow-y: auto;\n      max-height: var(--checked-select-rest-max-height);\n      padding-inline-end: var(--space-m);\n      margin-inline-end: var(--checked-select-caret-width);\n    }\n\n    /* Always-visible caret; items scroll underneath it */\n    .caret {\n      position: absolute;\n      inset-block: 0;\n      inset-inline-end: 0;\n      width: var(--checked-select-caret-width);\n      display: grid;\n      place-items: center;\n      background: inherit;\n      border-radius: inherit;\n      pointer-events: auto;\n    }\n    .caret svg {\n      width: 1.1em;\n      height: 1.1em;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      transition: rotate var(--transition, 0.1s ease-out);\n    }\n    .rest[aria-expanded=\"true\"] .caret svg {\n      rotate: 180deg;\n    }\n    /* While the popup is open its draft is authoritative */\n    .rest[aria-expanded=\"true\"] ixfx-checkbox {\n      pointer-events: none;\n    }\n    .rest:hover {\n      background: var(--surface-5);\n    }\n    .rest:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n    .rest ixfx-checkbox {\n      flex-shrink: 0;\n    }\n    .rest-text {\n      white-space: nowrap;\n    }\n    :host([multiline]) .rest-text {\n      white-space: normal;\n    }\n    .placeholder {\n      opacity: 0.6;\n    }\n\n    .popup {\n      /* Reset popover UA styles */\n      inset: unset;\n      margin: 0;\n      padding: 0;\n      border: none;\n      background: transparent;\n      overflow: visible;\n\n      /* CSS anchor positioning — position-anchor set inline */\n      position: fixed;\n      left: anchor(left);\n      top: anchor(bottom);\n      /* anchor-size() only works on the anchored element itself, so the width lives here */\n      width: anchor-size(width);\n      min-width: var(--checked-select-min-width);\n      position-try-fallbacks: flip-block;\n      margin-block: 4px;\n      z-index: 100;\n    }\n\n    .frame {\n      position: relative;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      max-height: var(--checked-select-max-height);\n      background: var(--surface-3);\n      color: var(--surface-3-text);\n      border: var(--border);\n      border-radius: var(--radius-m);\n    }\n\n    .listbox {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      padding: var(--space-s);\n      outline: none;\n    }\n    .listbox:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: -2px;\n    }\n\n    .item {\n      display: flex;\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    /* Key-repeat outpaces the fade, smearing the cursor across rows. Snap while\n       the keyboard drives the cursor; hover (mouse mode) keeps the transition. */\n    .listbox[data-input-mode=\"keyboard\"] .item {\n      transition: none;\n    }\n\n    .resize-zone {\n      position: absolute;\n      inset-block-end: 0;\n      inset-inline-end: 0;\n      width: 16px;\n      height: 16px;\n      display: grid;\n      place-items: center;\n      cursor: nwse-resize;\n      touch-action: none;\n    }\n    .resize-zone .ixfx-handle {\n      --ixfx-handle-spot-size: 10px;\n    }\n  `];\n\n  @property({ type: Array }) items: readonly CheckedSelectItem[] = [];\n  @property({ type: Boolean, reflect: true }) multiline = false;\n  /** At-rest checkboxes are display-only; clicking them just opens the popup. (Not `inert`: that native attribute would block the whole element.) */\n  @property({ type: Boolean, attribute: `items-inert`, reflect: true }) itemsInert = false;\n  /** How at-rest items are shown: as `checkbox`es, or as comma-separated `text`. */\n  @property({ type: String, attribute: `item-display`, reflect: true }) itemDisplay: ItemDisplay = `checkbox`;\n  /** Direction the resting items flow: `horizontal` (default) or `vertical` (one per row). */\n  @property({ type: String, reflect: true }) orientation: ItemOrientation = `horizontal`;\n  @property({ type: String }) placeholder = ``;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _open = false;\n  @state() private _draft: readonly CheckedSelectItem[] = [];\n  @state() private _order: readonly string[] = [];\n  @state() private _size: Size | undefined;\n\n  readonly #anchorName = `--checked-select-anchor-${instanceCounter++}`;\n\n  #tickled = new TickledController<number>(this, {\n    getItems: () => this._order.map((_, i) => ({ id: i })),\n  });\n\n  get isOpen(): boolean {\n    return this._open;\n  }\n\n  get #trigger(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(`.rest`) ?? null;\n  }\n\n  get #popup(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(`.popup`) ?? null;\n  }\n\n  get #listbox(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>(`.listbox`) ?? null;\n  }\n\n  /** Draft items in their frozen open-time order. */\n  #rows(): CheckedSelectItem[] {\n    const byValue = new Map(this._draft.map(i => [i.value, i]));\n    return this._order.flatMap(v => byValue.get(v) ?? []);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener(`pointerdown`, this.#onDocumentPointerDown, true);\n  }\n\n  override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    if (changed.has(`disabled`) && this.disabled && this._open) {\n      this.cancel();\n    }\n  }\n\n  async open(): Promise<void> {\n    if (this._open || this.disabled)\n      return;\n    this._draft = this.items;\n    this._order = sortForOpen(this.items).map(i => i.value);\n    this._size = undefined;\n    this._open = true;\n    if (this._order.length > 0)\n      this.#tickled.handleKeyboardNavigation(`first`);\n    document.addEventListener(`pointerdown`, this.#onDocumentPointerDown, true);\n    await this.updateComplete;\n    this.#popup?.showPopover?.();\n    this.#listbox?.focus();\n  }\n\n  commit(): void {\n    if (!this._open)\n      return;\n    const changed = diffItems(this.items, this._draft);\n    const next = this._draft;\n    this.#close();\n    if (changed.length === 0)\n      return;\n    this.#emitChange(next, changed);\n  }\n\n  #emitChange(next: readonly CheckedSelectItem[], changed: readonly CheckedSelectItem[]): void {\n    this.items = next;\n    this.dispatchEvent(new CustomEvent<CheckedSelectChangeDetail>(`change`, {\n      detail: { items: next, changed },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  /** A resting checkbox was used directly: toggle and commit immediately. */\n  #onRestCheckboxChange = (e: Event, value: string): void => {\n    // The checkbox's own `change` bubbles out of this shadow root; ours replaces it\n    e.stopPropagation();\n    if (this._open)\n      return;\n    const next = applyToggle(this.items, value);\n    this.#emitChange(next, diffItems(this.items, next));\n    void this.#focusRestCheckbox(value);\n  };\n\n  async #focusRestCheckbox(value: string): Promise<void> {\n    await this.updateComplete;\n    const box = this.shadowRoot?.querySelector<HTMLElement>(`.rest ixfx-checkbox[data-value=\"${CSS.escape(value)}\"]`);\n    // Unchecking removes the checkbox from the resting view; keep focus on the control\n    (box ?? this.#trigger)?.focus();\n  }\n\n  cancel(): void {\n    if (!this._open)\n      return;\n    this.#close();\n  }\n\n  #close(): void {\n    document.removeEventListener(`pointerdown`, this.#onDocumentPointerDown, true);\n    this.#popup?.hidePopover?.();\n    this._open = false;\n    this._draft = [];\n    this.#tickled.clearTickled();\n    this.#trigger?.focus();\n  }\n\n  #onDocumentPointerDown = (e: PointerEvent): void => {\n    const path = e.composedPath();\n    const popup = this.#popup;\n    const trigger = this.#trigger;\n    if ((popup && path.includes(popup)) || (trigger && path.includes(trigger)))\n      return;\n    this.cancel();\n  };\n\n  #onTriggerClick = (e: Event): void => {\n    // Clicks on a resting checkbox toggle it; only empty space (or the caret) opens/commits\n    if ((e.target as Element).closest?.(`ixfx-checkbox`))\n      return;\n    // Grabbing the scrollbar of the resting items isn't a click on the control\n    const scroller = e.composedPath()[0] as HTMLElement;\n    if (scroller.classList?.contains(`rest-items`) && e instanceof MouseEvent\n      && (e.offsetX > scroller.clientWidth || e.offsetY > scroller.clientHeight)) {\n      return;\n    }\n    if (this._open)\n      this.commit();\n    else void this.open();\n  };\n\n  #onTriggerKeyDown = (e: KeyboardEvent): void => {\n    // Keys on a focused resting checkbox belong to that checkbox\n    if (this._open || e.target !== e.currentTarget)\n      return;\n    if (e.key === `Enter` || e.key === ` ` || e.key === `ArrowDown`) {\n      e.preventDefault();\n      void this.open();\n    }\n  };\n\n  #toggleRow(value: string): void {\n    this._draft = applyToggle(this._draft, value);\n  }\n\n  #onRowClick(value: string, index: number): void {\n    this.#tickled.setTickled(index);\n    this.#toggleRow(value);\n  }\n\n  #onListKeyDown = (e: KeyboardEvent): void => {\n    const rows = this.#rows();\n    switch (e.key) {\n      case `ArrowDown`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`next`);\n        void this.#scrollToCursor();\n        return;\n      case `ArrowUp`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`previous`);\n        void this.#scrollToCursor();\n        return;\n      case `Home`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`first`);\n        void this.#scrollToCursor();\n        return;\n      case `End`:\n        e.preventDefault();\n        this.#tickled.handleKeyboardNavigation(`last`);\n        void this.#scrollToCursor();\n        return;\n      case ` `: {\n        e.preventDefault();\n        const row = rows[this.#tickled.tickledId ?? -1];\n        if (row)\n          this.#toggleRow(row.value);\n        return;\n      }\n      case `Enter`:\n        e.preventDefault();\n        this.commit();\n        return;\n      case `Escape`:\n        e.preventDefault();\n        this.cancel();\n        return;\n      case `Tab`:\n        this.cancel();\n        return;\n    }\n    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {\n      const next = nextMatchIndex(rows.map(r => r.label), this.#tickled.tickledId ?? -1, e.key);\n      if (next >= 0) {\n        this.#tickled.handleKeyboardNavigation(next);\n        void this.#scrollToCursor();\n      }\n    }\n  };\n\n  async #scrollToCursor(): Promise<void> {\n    await this.updateComplete;\n    const index = this.#tickled.tickledId;\n    this.shadowRoot?.querySelector(`[data-index=\"${index}\"]`)?.scrollIntoView?.({ block: `nearest` });\n  }\n\n  #onResizeDown = (e: PointerEvent): void => {\n    const frame = this.shadowRoot?.querySelector<HTMLElement>(`.frame`);\n    const zone = e.currentTarget as HTMLElement;\n    if (!frame)\n      return;\n    e.preventDefault();\n    const start = frame.getBoundingClientRect();\n    const originX = e.clientX;\n    const originY = e.clientY;\n    const style = getComputedStyle(this);\n    const min: Size = {\n      width: Number.parseFloat(style.getPropertyValue(`--checked-select-min-width`)) || 128,\n      height: Number.parseFloat(style.getPropertyValue(`--checked-select-min-height`)) || 80,\n    };\n    const max: Size = {\n      width: window.innerWidth - start.left - 8,\n      height: window.innerHeight - start.top - 8,\n    };\n    zone.setPointerCapture?.(e.pointerId);\n    zone.setAttribute(`data-active`, ``);\n    const onMove = (m: PointerEvent): void => {\n      this._size = clampSize({\n        width: start.width + m.clientX - originX,\n        height: start.height + m.clientY - originY,\n      }, min, max);\n    };\n    const onEnd = (): void => {\n      zone.removeAttribute(`data-active`);\n      zone.removeEventListener(`pointermove`, onMove);\n      zone.removeEventListener(`pointerup`, onEnd);\n      zone.removeEventListener(`pointercancel`, onEnd);\n      this.#listbox?.focus();\n    };\n    zone.addEventListener(`pointermove`, onMove);\n    zone.addEventListener(`pointerup`, onEnd);\n    zone.addEventListener(`pointercancel`, onEnd);\n  };\n\n  #renderRest() {\n    const shown = visibleAtRest(this.items);\n    if (shown.length === 0) {\n      return html`<span class=\"placeholder\">${this.placeholder}</span>`;\n    }\n    if (this.itemDisplay === `text`) {\n      if (this.orientation === `vertical`) {\n        return restTextParts(this.items).map(part => html`<span class=\"rest-text\">${part}</span>`);\n      }\n      return html`<span class=\"rest-text\">${restText(this.items)}</span>`;\n    }\n    return repeat(shown, i => i.value, i => html`\n      <ixfx-checkbox\n        ?readonly=${this.itemsInert}\n        data-value=${i.value}\n        label=${i.label}\n        .checked=${i.checked === `true`}\n        .indeterminate=${i.checked === `indeterminate`}\n        @change=${(e: Event) => this.#onRestCheckboxChange(e, i.value)}\n      ></ixfx-checkbox>`);\n  }\n\n  #renderRow(row: CheckedSelectItem, index: number) {\n    return html`\n      <div\n        class=\"item ${this.#tickled.isTickled(index) ? `tickled` : ``}\"\n        role=\"option\"\n        id=\"opt-${index}\"\n        data-index=${index}\n        aria-checked=${row.checked === `indeterminate` ? `mixed` : row.checked}\n        @pointerenter=${() => this.#tickled.handlePointerEnter(index)}\n        @click=${() => this.#onRowClick(row.value, index)}\n      >\n        <ixfx-checkbox\n          readonly\n          label=${row.label}\n          .checked=${row.checked === `true`}\n          .indeterminate=${row.checked === `indeterminate`}\n        ></ixfx-checkbox>\n      </div>`;\n  }\n\n  protected override render() {\n    const rows = this._open ? this.#rows() : [];\n    const cursor = this.#tickled.tickledId;\n    const popupSize = this._size ? `width: ${this._size.width}px;` : ``;\n    const frameStyle = this._size ? `height: ${this._size.height}px; max-height: none;` : ``;\n    const summary = visibleAtRest(this.items).map(i => i.label).join(`, `);\n    return html`\n      <div\n        class=\"rest\"\n        role=\"combobox\"\n        tabindex=${this.disabled ? `-1` : `0`}\n        aria-haspopup=\"listbox\"\n        aria-expanded=${this._open ? `true` : `false`}\n        aria-disabled=${this.disabled ? `true` : nothing}\n        title=${summary || nothing}\n        style=\"anchor-name: ${this.#anchorName}\"\n        @click=${this.#onTriggerClick}\n        @keydown=${this.#onTriggerKeyDown}\n      >\n        <div class=\"rest-items\">${this.#renderRest()}</div>\n        <div class=\"caret\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"m6 9 6 6 6-6\" /></svg>\n        </div>\n      </div>\n      <div class=\"popup\" popover=\"manual\" style=\"position-anchor: ${this.#anchorName}; ${popupSize}\">\n        <div class=\"frame\" style=${frameStyle}>\n          <div\n            class=\"listbox\"\n            role=\"listbox\"\n            aria-multiselectable=\"true\"\n            tabindex=\"-1\"\n            aria-activedescendant=${cursor === undefined ? nothing : `opt-${cursor}`}\n            data-input-mode=${this.#tickled.inputMode}\n            @pointerleave=${(e: PointerEvent) => this.#tickled.handlePointerLeave(e)}\n            @keydown=${this.#onListKeyDown}\n          >${rows.map((r, i) => this.#renderRow(r, i))}</div>\n          <div class=\"resize-zone\" @pointerdown=${this.#onResizeDown}>\n            <span class=\"ixfx-handle\" data-handle=\"dotted\" data-shape=\"spot\" part=\"handle\"></span>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport type CheckedSelectChangeDetail = {\n  /** Every item, with its committed state. */\n  readonly items: readonly CheckedSelectItem[];\n  /** Only the items whose state changed. */\n  readonly changed: readonly CheckedSelectItem[];\n};\n\nexport type CheckedSelectChangeEvent = CustomEvent<CheckedSelectChangeDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-checked-select': CheckedSelect;\n  }\n}\n\nexport interface CheckedSelectEventMap {\n  change: CheckedSelectChangeEvent;\n}\n\nexport interface CheckedSelect {\n  addEventListener: (<K extends keyof CheckedSelectEventMap>(\n    type: K,\n    listener: (this: CheckedSelect, event: CheckedSelectEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,QAAQ,GAAsB,GAA8B;CACnE,OAAO,EAAE,MAAM,cAAc,EAAE,OAAO,KAAA,GAAW,EAAE,aAAa,OAAO,CAAC;AAC1E;;AAGA,SAAgB,YAAY,OAA0D;CACpF,MAAM,KAAK,MAAM,QAAO,MAAK,EAAE,YAAY,OAAO,CAAC,CAAC,SAAS,OAAO;CACpE,MAAM,MAAM,MAAM,QAAO,MAAK,EAAE,YAAY,OAAO,CAAC,CAAC,SAAS,OAAO;CACrE,OAAO,CAAC,GAAG,IAAI,GAAG,GAAG;AACvB;;AAGA,SAAgB,YAAY,OAA+B;CACzD,OAAO,UAAU,SAAS,UAAU;AACtC;;AAGA,SAAgB,cAAc,OAA0D;CACtF,OAAO,MAAM,QAAO,MAAK,EAAE,YAAY,OAAO,CAAC,CAAC,SAAS,OAAO;AAClE;AAEA,MAAa,eAAe;;AAG5B,SAAgB,cAAc,OAA+C;CAC3E,MAAM,KAAK,MAAM,QAAO,MAAK,EAAE,YAAY,MAAM,CAAC,CAAC,SAAS,OAAO,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK;CACrF,MAAM,SAAS,MAAM,MAAK,MAAK,EAAE,YAAY,eAAe,IAAI,CAAC,YAAY,IAAI,CAAC;CAClF,OAAO,CAAC,GAAG,IAAI,GAAG,MAAM;AAC1B;;AAGA,SAAgB,SAAS,OAA6C;CACpE,OAAO,cAAc,KAAK,CAAC,CAAC,KAAK,IAAI;AACvC;;AAGA,SAAgB,YAAY,OAAqC,OAAoC;CACnG,OAAO,MAAM,KAAI,MAAK,EAAE,UAAU,QAAQ;EAAE,GAAG;EAAG,SAAS,YAAY,EAAE,OAAO;CAAE,IAAI,CAAC;AACzF;;;;;AAMA,SAAgB,eAAe,QAA2B,SAAiB,MAAsB;CAC/F,MAAM,IAAI,KAAK,kBAAkB;CACjC,MAAM,QAAQ,OAAO;CACrB,KAAK,IAAI,OAAO,GAAG,QAAQ,OAAO,QAAQ;EACxC,MAAM,SAAS,UAAU,OAAO,SAAS;EACzC,IAAI,OAAO,MAAM,CAAC,kBAAkB,CAAC,CAAC,WAAW,CAAC,GAChD,OAAO;CACX;CACA,OAAO;AACT;;AAGA,SAAgB,UAAU,UAAwC,OAA0D;CAC1H,MAAM,SAAS,IAAI,IAAI,SAAS,KAAI,MAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;CAC9D,OAAO,MAAM,QAAO,MAAK,OAAO,IAAI,EAAE,KAAK,MAAM,EAAE,OAAO;AAC5D;AAEA,SAAgB,UAAU,MAAY,KAAW,KAAiB;CAChE,OAAO;EACL,OAAO,KAAK,IAAI,KAAK,IAAI,KAAK,OAAO,IAAI,KAAK,GAAG,KAAK,IAAI,IAAI,OAAO,IAAI,KAAK,CAAC;EAC/E,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,QAAQ,IAAI,MAAM,GAAG,KAAK,IAAI,IAAI,QAAQ,IAAI,MAAM,CAAC;CACtF;AACF;;;ACrBA,IAAI,kBAAkB;AAGf,IAAM,gBAAN,MAAM,sBAAsB,WAAW;;;EA8LqB,KAAA,QAAA,CAAC;EACV,KAAA,YAAA;EAE2B,KAAA,aAAA;EAEc,KAAA,cAAA;EAEvB,KAAA,cAAA;EAChC,KAAA,cAAA;EACa,KAAA,WAAA;EAE9B,KAAA,QAAA;EAC+B,KAAA,SAAA,CAAC;EACZ,KAAA,SAAA,CAAC;EAGvB,KAAA,cAAA,2BAA2B;EAEvC,KAAA,WAAA,IAAI,kBAA0B,MAAM,EAC7C,gBAAgB,KAAK,OAAO,KAAK,GAAG,OAAO,EAAE,IAAI,EAAE,EAAE,EACvD,CAAC;EAwEwB,KAAA,yBAAA,GAAU,UAAwB;GAEzD,EAAE,gBAAgB;GAClB,IAAI,KAAK,OACP;GACF,MAAM,OAAO,YAAY,KAAK,OAAO,KAAK;GAC1C,KAAKA,YAAY,MAAM,UAAU,KAAK,OAAO,IAAI,CAAC;GAClD,KAAUC,mBAAmB,KAAK;EACpC;EAwB0B,KAAA,0BAAA,MAA0B;GAClD,MAAM,OAAO,EAAE,aAAa;GAC5B,MAAM,QAAQ,KAAKC;GACnB,MAAM,UAAU,KAAKC;GACrB,IAAK,SAAS,KAAK,SAAS,KAAK,KAAO,WAAW,KAAK,SAAS,OAAO,GACtE;GACF,KAAK,OAAO;EACd;EAEmB,KAAA,mBAAA,MAAmB;GAEpC,IAAK,EAAE,OAAmB,UAAU,eAAe,GACjD;GAEF,MAAM,WAAW,EAAE,aAAa,CAAC,CAAC;GAClC,IAAI,SAAS,WAAW,SAAS,YAAY,KAAK,aAAa,eACzD,EAAE,UAAU,SAAS,eAAe,EAAE,UAAU,SAAS,eAC7D;GAEF,IAAI,KAAK,OACP,KAAK,OAAO;QACT,KAAU,KAAK;EACtB;EAEqB,KAAA,qBAAA,MAA2B;GAE9C,IAAI,KAAK,SAAS,EAAE,WAAW,EAAE,eAC/B;GACF,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,OAAO,EAAE,QAAQ,aAAa;IAC/D,EAAE,eAAe;IACjB,KAAU,KAAK;GACjB;EACF;EAWkB,KAAA,kBAAA,MAA2B;GAC3C,MAAM,OAAO,KAAKC,MAAM;GACxB,QAAQ,EAAE,KAAV;IACE,KAAK;KACH,EAAE,eAAe;KACjB,KAAKC,SAAS,yBAAyB,MAAM;KAC7C,KAAUC,gBAAgB;KAC1B;IACF,KAAK;KACH,EAAE,eAAe;KACjB,KAAKD,SAAS,yBAAyB,UAAU;KACjD,KAAUC,gBAAgB;KAC1B;IACF,KAAK;KACH,EAAE,eAAe;KACjB,KAAKD,SAAS,yBAAyB,OAAO;KAC9C,KAAUC,gBAAgB;KAC1B;IACF,KAAK;KACH,EAAE,eAAe;KACjB,KAAKD,SAAS,yBAAyB,MAAM;KAC7C,KAAUC,gBAAgB;KAC1B;IACF,KAAK,KAAK;KACR,EAAE,eAAe;KACjB,MAAM,MAAM,KAAK,KAAKD,SAAS,aAAa;KAC5C,IAAI,KACF,KAAKE,WAAW,IAAI,KAAK;KAC3B;IACF;IACA,KAAK;KACH,EAAE,eAAe;KACjB,KAAK,OAAO;KACZ;IACF,KAAK;KACH,EAAE,eAAe;KACjB,KAAK,OAAO;KACZ;IACF,KAAK;KACH,KAAK,OAAO;KACZ;GACJ;GACA,IAAI,EAAE,IAAI,WAAW,KAAK,CAAC,EAAE,WAAW,CAAC,EAAE,WAAW,CAAC,EAAE,QAAQ;IAC/D,MAAM,OAAO,eAAe,KAAK,KAAI,MAAK,EAAE,KAAK,GAAG,KAAKF,SAAS,aAAa,IAAI,EAAE,GAAG;IACxF,IAAI,QAAQ,GAAG;KACb,KAAKA,SAAS,yBAAyB,IAAI;KAC3C,KAAUC,gBAAgB;IAC5B;GACF;EACF;EAQiB,KAAA,iBAAA,MAA0B;GACzC,MAAM,QAAQ,KAAK,YAAY,cAA2B,QAAQ;GAClE,MAAM,OAAO,EAAE;GACf,IAAI,CAAC,OACH;GACF,EAAE,eAAe;GACjB,MAAM,QAAQ,MAAM,sBAAsB;GAC1C,MAAM,UAAU,EAAE;GAClB,MAAM,UAAU,EAAE;GAClB,MAAM,QAAQ,iBAAiB,IAAI;GACnC,MAAM,MAAY;IAChB,OAAO,OAAO,WAAW,MAAM,iBAAiB,4BAA4B,CAAC,KAAK;IAClF,QAAQ,OAAO,WAAW,MAAM,iBAAiB,6BAA6B,CAAC,KAAK;GACtF;GACA,MAAM,MAAY;IAChB,OAAO,OAAO,aAAa,MAAM,OAAO;IACxC,QAAQ,OAAO,cAAc,MAAM,MAAM;GAC3C;GACA,KAAK,oBAAoB,EAAE,SAAS;GACpC,KAAK,aAAa,eAAe,EAAE;GACnC,MAAM,UAAU,MAA0B;IACxC,KAAK,QAAQ,UAAU;KACrB,OAAO,MAAM,QAAQ,EAAE,UAAU;KACjC,QAAQ,MAAM,SAAS,EAAE,UAAU;IACrC,GAAG,KAAK,GAAG;GACb;GACA,MAAM,cAAoB;IACxB,KAAK,gBAAgB,aAAa;IAClC,KAAK,oBAAoB,eAAe,MAAM;IAC9C,KAAK,oBAAoB,aAAa,KAAK;IAC3C,KAAK,oBAAoB,iBAAiB,KAAK;IAC/C,KAAKE,UAAU,MAAM;GACvB;GACA,KAAK,iBAAiB,eAAe,MAAM;GAC3C,KAAK,iBAAiB,aAAa,KAAK;GACxC,KAAK,iBAAiB,iBAAiB,KAAK;EAC9C;;;EAjcyB,KAAA,SAAA;GAAC;GAAgB;GAAc;GAAe;GAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2L5F;;CAkBD;CAEA;CAIA,IAAI,SAAkB;EACpB,OAAO,KAAK;CACd;CAEA,IAAIL,WAA+B;EACjC,OAAO,KAAK,YAAY,cAA2B,OAAO,KAAK;CACjE;CAEA,IAAID,SAA6B;EAC/B,OAAO,KAAK,YAAY,cAA2B,QAAQ,KAAK;CAClE;CAEA,IAAIM,WAA+B;EACjC,OAAO,KAAK,YAAY,cAA2B,UAAU,KAAK;CACpE;;CAGA,QAA6B;EAC3B,MAAM,UAAU,IAAI,IAAI,KAAK,OAAO,KAAI,MAAK,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;EAC1D,OAAO,KAAK,OAAO,SAAQ,MAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC;CACtD;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,SAAS,oBAAoB,eAAe,KAAKE,wBAAwB,IAAI;CAC/E;CAEA,WAAoB,SAA+B;EACjD,MAAM,WAAW,OAAO;EACxB,IAAI,QAAQ,IAAI,UAAU,KAAK,KAAK,YAAY,KAAK,OACnD,KAAK,OAAO;CAEhB;CAEA,MAAM,OAAsB;EAC1B,IAAI,KAAK,SAAS,KAAK,UACrB;EACF,KAAK,SAAS,KAAK;EACnB,KAAK,SAAS,YAAY,KAAK,KAAK,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK;EACtD,KAAK,QAAQ,KAAA;EACb,KAAK,QAAQ;EACb,IAAI,KAAK,OAAO,SAAS,GACvB,KAAKL,SAAS,yBAAyB,OAAO;EAChD,SAAS,iBAAiB,eAAe,KAAKK,wBAAwB,IAAI;EAC1E,MAAM,KAAK;EACX,KAAKR,QAAQ,cAAc;EAC3B,KAAKM,UAAU,MAAM;CACvB;CAEA,SAAe;EACb,IAAI,CAAC,KAAK,OACR;EACF,MAAM,UAAU,UAAU,KAAK,OAAO,KAAK,MAAM;EACjD,MAAM,OAAO,KAAK;EAClB,KAAKG,OAAO;EACZ,IAAI,QAAQ,WAAW,GACrB;EACF,KAAKX,YAAY,MAAM,OAAO;CAChC;CAEA,YAAY,MAAoC,SAA6C;EAC3F,KAAK,QAAQ;EACb,KAAK,cAAc,IAAI,YAAuC,UAAU;GACtE,QAAQ;IAAE,OAAO;IAAM;GAAQ;GAC/B,SAAS;GACT,UAAU;EACZ,CAAC,CAAC;CACJ;;CAGA;CAUA,MAAMC,mBAAmB,OAA8B;EACrD,MAAM,KAAK;EAGX,CAFY,KAAK,YAAY,cAA2B,mCAAmC,IAAI,OAAO,KAAK,EAAE,GAAG,KAExG,KAAKE,SAAAA,EAAW,MAAM;CAChC;CAEA,SAAe;EACb,IAAI,CAAC,KAAK,OACR;EACF,KAAKQ,OAAO;CACd;CAEA,SAAe;EACb,SAAS,oBAAoB,eAAe,KAAKD,wBAAwB,IAAI;EAC7E,KAAKR,QAAQ,cAAc;EAC3B,KAAK,QAAQ;EACb,KAAK,SAAS,CAAC;EACf,KAAKG,SAAS,aAAa;EAC3B,KAAKF,UAAU,MAAM;CACvB;CAEA;CASA;CAeA;CAUA,WAAW,OAAqB;EAC9B,KAAK,SAAS,YAAY,KAAK,QAAQ,KAAK;CAC9C;CAEA,YAAY,OAAe,OAAqB;EAC9C,KAAKE,SAAS,WAAW,KAAK;EAC9B,KAAKE,WAAW,KAAK;CACvB;CAEA;CAmDA,MAAMD,kBAAiC;EACrC,MAAM,KAAK;EACX,MAAM,QAAQ,KAAKD,SAAS;EAC5B,KAAK,YAAY,cAAc,gBAAgB,MAAM,GAAG,CAAC,EAAE,iBAAiB,EAAE,OAAO,UAAU,CAAC;CAClG;CAEA;CAsCA,cAAc;EACZ,MAAM,QAAQ,cAAc,KAAK,KAAK;EACtC,IAAI,MAAM,WAAW,GACnB,OAAO,IAAI,6BAA6B,KAAK,YAAY;EAE3D,IAAI,KAAK,gBAAgB,QAAQ;GAC/B,IAAI,KAAK,gBAAgB,YACvB,OAAO,cAAc,KAAK,KAAK,CAAC,CAAC,KAAI,SAAQ,IAAI,2BAA2B,KAAK,QAAQ;GAE3F,OAAO,IAAI,2BAA2B,SAAS,KAAK,KAAK,EAAE;EAC7D;EACA,OAAO,OAAO,QAAO,MAAK,EAAE,QAAO,MAAK,IAAI;;oBAE5B,KAAK,WAAW;qBACf,EAAE,MAAM;gBACb,EAAE,MAAM;mBACL,EAAE,YAAY,OAAO;yBACf,EAAE,YAAY,gBAAgB;mBACpC,MAAa,KAAKO,sBAAsB,GAAG,EAAE,KAAK,EAAE;wBAC/C;CACtB;CAEA,WAAW,KAAwB,OAAe;EAChD,OAAO,IAAI;;sBAEO,KAAKP,SAAS,UAAU,KAAK,IAAI,YAAY,GAAG;;kBAEpD,MAAM;qBACH,MAAM;uBACJ,IAAI,YAAY,kBAAkB,UAAU,IAAI,QAAQ;8BACjD,KAAKA,SAAS,mBAAmB,KAAK,EAAE;uBAC/C,KAAKQ,YAAY,IAAI,OAAO,KAAK,EAAE;;;;kBAIxC,IAAI,MAAM;qBACP,IAAI,YAAY,OAAO;2BACjB,IAAI,YAAY,gBAAgB;;;CAGzD;CAEA,SAA4B;EAC1B,MAAM,OAAO,KAAK,QAAQ,KAAKT,MAAM,IAAI,CAAC;EAC1C,MAAM,SAAS,KAAKC,SAAS;EAC7B,MAAM,YAAY,KAAK,QAAQ,UAAU,KAAK,MAAM,MAAM,OAAO;EACjE,MAAM,aAAa,KAAK,QAAQ,WAAW,KAAK,MAAM,OAAO,yBAAyB;EACtF,MAAM,UAAU,cAAc,KAAK,KAAK,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK,CAAC,CAAC,KAAK,IAAI;EACrE,OAAO,IAAI;;;;mBAII,KAAK,WAAW,OAAO,IAAI;;wBAEtB,KAAK,QAAQ,SAAS,QAAQ;wBAC9B,KAAK,WAAW,SAAS,QAAQ;gBACzC,WAAW,QAAQ;8BACL,KAAKI,YAAY;iBAC9B,KAAKK,gBAAgB;mBACnB,KAAKC,kBAAkB;;kCAER,KAAKC,YAAY,EAAE;;;;;oEAKe,KAAKP,YAAY,IAAI,UAAU;mCAChE,WAAW;;;;;;oCAMV,WAAW,KAAA,IAAY,UAAU,OAAO,SAAS;8BACvD,KAAKJ,SAAS,UAAU;6BACzB,MAAoB,KAAKA,SAAS,mBAAmB,CAAC,EAAE;uBAC9D,KAAKY,eAAe;aAC9B,KAAK,KAAK,GAAG,MAAM,KAAKC,WAAW,GAAG,CAAC,CAAC,EAAE;kDACL,KAAKC,cAAc;;;;;;CAMnE;AACF;AA3VG,WAAA,CAAA,SAAS,EAAE,MAAM,MAAM,CAAC,CAAA,GAAA,cAAA,WAAA,SAAA,KAAA,CAAA;AACxB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,aAAA,KAAA,CAAA;AAEzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,cAAA,KAAA,CAAA;AAEnE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAgB,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,eAAA,KAAA,CAAA;AAEnE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,eAAA,KAAA,CAAA;AACxC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,cAAA,WAAA,eAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,cAAA,WAAA,YAAA,KAAA,CAAA;AAEzC,WAAA,CAAA,MAAM,CAAA,GAAA,cAAA,WAAA,SAAA,KAAA,CAAA;AACN,WAAA,CAAA,MAAM,CAAA,GAAA,cAAA,WAAA,UAAA,KAAA,CAAA;AACN,WAAA,CAAA,MAAM,CAAA,GAAA,cAAA,WAAA,UAAA,KAAA,CAAA;AACN,WAAA,CAAA,MAAM,CAAA,GAAA,cAAA,WAAA,SAAA,KAAA,CAAA;AA7MRC,gBAAAA,WAAAA,CAAAA,kBAAc,qBAAqB,CAAA,GAAA,aAAA"}

package/dist/checked-select.js

@@ -1,3 +1,3 @@
 import "./checkbox.js";
-import { t as CheckedSelect } from "./checked-select-Dejl13qd.js";
+import { t as CheckedSelect } from "./checked-select-lDgAQQ7v.js";
 export { CheckedSelect };

package/dist/{colour-picker-WDrPuqoO.js → colour-picker-BCMU7W7R.js}

@@ -1,7 +1,7 @@
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { n as ICON_CHECK } from "./defaults-kVl1t2tT.js";
+import { n as ICON_CHECK } from "./defaults-B4ePs4LB.js";
 import "./labelled-range-input.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
@@ -933,4 +933,4 @@ ColourPickerPopup = __decorate([safeCustomElement(`ixfx-colour-picker-popup`)],
 //#endregion
 export { ColourPicker as n, ColourPickerPopup as t };
 
-//# sourceMappingURL=colour-picker-WDrPuqoO.js.map
+//# sourceMappingURL=colour-picker-BCMU7W7R.js.map

package/dist/{colour-picker-WDrPuqoO.js.map → colour-picker-BCMU7W7R.js.map}

@@ -1 +1 @@
-{"version":3,"file":"colour-picker-WDrPuqoO.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, unit: `scalar`, space: `oklch` };\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, unit: `scalar`, space: `oklch` };\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/setters:\n *   value — committed colour as CSS string e.g. \"oklch(0.7 0.15 180)\";\n *     setting accepts any ixfx-compatible colour format (equivalent to calling setColour())\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  set value(colour: Colour.Colourish) {\n    this.setColour(colour);\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, unit: `scalar`, space: `oklch` };\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, unit: `scalar`, space: `oklch` };\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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"}
+{"version":3,"file":"colour-picker-BCMU7W7R.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, unit: `scalar`, space: `oklch` };\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, unit: `scalar`, space: `oklch` };\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/setters:\n *   value — committed colour as CSS string e.g. \"oklch(0.7 0.15 180)\";\n *     setting accepts any ixfx-compatible colour format (equivalent to calling setColour())\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  set value(colour: Colour.Colourish) {\n    this.setColour(colour);\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, unit: `scalar`, space: `oklch` };\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, unit: `scalar`, space: `oklch` };\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":";;;;;;;;;AAGA,MAAa,eAA0C;CACrD,GAAG,CAAC,GAAG,CAAC;CACR,GAAG,CAAC,GAAG,EAAU;CACjB,GAAG,CAAC,GAAG,GAAG;CACV,GAAG,CAAC,GAAG,CAAC;AACV;AACA,MAAa,iBAA4C;CACvD,GAAG,aAAa;CAChB,GAAG,aAAa;CAChB,GAAG,aAAa;CAChB,GAAG,aAAa;AAClB;;;;AAaA,SAAgB,WAAW,GAAW,GAAW,GAAW,IAAY,GAAW;CACjF,IAAI,IAAI,GACN,OAAO,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE;CAErC,OAAO,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE;AAC9B;;;ACEO,IAAM,eAAN,MAAM,qBAAqB,WAAW;;;EACX,KAAA,IAAA;EACA,KAAA,IAAA;EACA,KAAA,IAAA;EACA,KAAA,IAAA;EAEqD,KAAA,cAAA;EACZ,KAAA,QAAA;EACA,KAAA,QAAA;EACA,KAAA,QAAA;EACf,KAAA,QAAA;EACwB,KAAA,aAAA;EACW,KAAA,kBAAA;EACN,KAAA,eAAA;EAGnD,KAAA,aAAA;EAE0C,KAAA,aAAA;EACA,KAAA,aAAA;EACA,KAAA,aAAA;EACA,KAAA,aAAA;EAE9B,KAAA,UAAA;GAC9C,GAAG,eAAe;GAClB,GAAG,eAAe;GAClB,GAAG,eAAe;GAClB,GAAG,eAAe;EACpB;EAUoB,KAAA,YAAA,KAAK;EACL,KAAA,YAAA,KAAK;EACL,KAAA,YAAA,KAAK;EACL,KAAA,YAAA,KAAK;EAKS,KAAA,iCAAA,IAAI,IAAY;EAuUtC,KAAA,YAAA,GAAU,YAAyC;GAC7D,MAAM,SAAU,EAAkB;GAClC,KAAK,eAAe,IAAI,OAAO;GAC/B,KAAK,WAAW,OAAO;GACvB,KAAK,eAAe;GACpB,EAAE,gBAAgB;EACpB;EAEa,KAAA,aAAA,GAAU,YAAyC;GAC9D,MAAM,SAAU,EAAkB;GAClC,KAAK,eAAe,IAAI,OAAO;GAC/B,MAAM,QAAQ,OAAO,OAAO,UAAU,WAAW,OAAO,WAAW,OAAO,KAAK,IAAI,OAAO;GAC1F,QAAQ,SAAR;IACE,KAAK;KAAK,KAAK,IAAI;KAAO;IAC1B,KAAK;KAAK,KAAK,IAAI;KAAO;IAC1B,KAAK;KAAK,KAAK,IAAI;KAAO;IAC1B,KAAK,KAAK,KAAK,IAAI;GACrB;GACA,EAAE,gBAAgB;GAClB,KAAK,cAAc;GACnB,KAAK,gBAAgB;EACvB;;CA1VA,IAAI,QAAgB;EAClB,OAAO,WAAW,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CAClD;CAEA,IAAI,MAAM,cAAsB;EAC9B,MAAM,IAAI,OAAO,QAAQ,cAAc,gBAAgB;EACvD,KAAK,IAAI,EAAE;EACX,KAAK,IAAI,EAAE;EACX,KAAK,IAAI,EAAE;EACX,KAAK,IAAI,EAAE,WAAW;EACtB,KAAK,aAAa;CACpB;;;;;;CAOA,UAAU,QAAgC;EACxC,MAAM,IAAI,OAAO,QAAQ,QAAQ,gBAAgB;EACjD,KAAK,IAAI,EAAE;EACX,KAAK,IAAI,EAAE;EACX,KAAK,IAAI,EAAE;EACX,KAAK,IAAI,EAAE,WAAW;CAExB;CAEA,IAAI,SAAgB;EAClB,OAAO,CAAC,KAAK,QAAQ,EAAE,IAAI,KAAK,QAAQ,EAAE,EAAE;CAC9C;CAEA,IAAI,OAAO,OAAmB;EAC5B,KAAK,iBAAiB,KAAK,KAAK;CAClC;CAEA,IAAI,SAAgB;EAClB,OAAO,CAAC,KAAK,QAAQ,EAAE,IAAI,KAAK,QAAQ,EAAE,EAAE;CAC9C;CAEA,IAAI,OAAO,OAAmB;EAC5B,KAAK,iBAAiB,KAAK,KAAK;CAClC;CAEA,IAAI,SAAgB;EAClB,OAAO,CAAC,KAAK,QAAQ,EAAE,IAAI,KAAK,QAAQ,EAAE,EAAE;CAC9C;CAEA,IAAI,OAAO,OAAmB;EAC5B,KAAK,iBAAiB,KAAK,KAAK;CAClC;CAEA,IAAI,SAAgB;EAClB,OAAO,CAAC,KAAK,QAAQ,EAAE,IAAI,KAAK,QAAQ,EAAE,EAAE;CAC9C;CAEA,IAAI,OAAO,OAAmB;EAC5B,KAAK,iBAAiB,KAAK,KAAK;CAClC;CAEA,UAAU,OAAyB;EACjC,KAAK,SAAS;CAChB;CAEA,UAAU,OAAyB;EACjC,KAAK,SAAS;CAChB;CAEA,UAAU,OAAyB;EACjC,KAAK,SAAS;CAChB;CAEA,UAAU,OAAyB;EACjC,KAAK,SAAS;CAChB;CAEA,WAAoB,mBAAyC;EAC3D,IAAI,kBAAkB,IAAI,YAAY,GACpC,KAAK,uBAAuB,KAAK,KAAK,UAAU;EAClD,IAAI,kBAAkB,IAAI,YAAY,GACpC,KAAK,uBAAuB,KAAK,KAAK,UAAU;EAClD,IAAI,kBAAkB,IAAI,YAAY,GACpC,KAAK,uBAAuB,KAAK,KAAK,UAAU;EAClD,IAAI,kBAAkB,IAAI,YAAY,GACpC,KAAK,uBAAuB,KAAK,KAAK,UAAU;EAClD,MAAM,WAAW,iBAAiB;CACpC;CAEA,iBAAyB,SAAwB,OAAyB;EACxE,MAAM,aAAa,KAAK,kBAAkB,SAAS,KAAK;EACxD,IAAI,CAAC,YACH;EACF,KAAK,UAAU,SAAS,UAAU;CACpC;CAEA,kBAA0B,SAAwB,OAAiC;EACjF,IAAI,CAAC,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS,GAC1C,OAAO;EACT,MAAM,CAAC,OAAO,OAAO;EACrB,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,CAAC,OAAO,SAAS,GAAG,GACjD,OAAO;EACT,OAAO,KAAK,gBAAgB,SAAS,CAAC,OAAO,GAAG,CAAC;CACnD;CAEA,uBAA+B,SAAwB,OAA4B;EACjF,IAAI,UAAU,MAAM;GAClB,KAAK,UAAU,SAAS,eAAe,QAAQ;GAC/C;EACF;EACA,MAAM,SAAS,KAAK,kBAAkB,SAAS,KAAK;EACpD,IAAI,QACF,KAAK,UAAU,SAAS,MAAM;CAClC;CAEA,UAAkB,SAAwB,OAAoB;EAC5D,MAAM,aAAa,KAAK,gBAAgB,SAAS,KAAK;EACtD,MAAM,eAAe,KAAK,QAAQ;EAClC,IAAI,aAAa,OAAO,WAAW,MAAM,aAAa,OAAO,WAAW,IACtE;EAEF,KAAK,UAAU;GAAE,GAAG,KAAK;IAAU,UAAU;EAAW;EAExD,QAAQ,SAAR;GACE,KAAK;IACH,KAAK,IAAI,KAAK,cAAc,KAAK,KAAK,CAAC;IACvC;GACF,KAAK;IACH,KAAK,IAAI,KAAK,cAAc,KAAK,KAAK,CAAC;IACvC;GACF,KAAK;IACH,KAAK,IAAI,KAAK,cAAc,KAAK,KAAK,CAAC;IACvC;GACF,KAAK,KACH,KAAK,IAAI,KAAK,cAAc,KAAK,KAAK,CAAC;EAE3C;EAEA,KAAK,cAAc;CACrB;CAEA,UAAkB,SAA+B;EAC/C,OAAO,KAAK,QAAQ,YAAY,eAAe;CACjD;CAEA,kBAA0B,SAAwB,OAA6B;EAE7E,MAAM,QADU,MAAM,KACF,CAAC,CAAC,MAAM,KAAK,CAAC;EAClC,IAAI,MAAM,WAAW,GACnB,OAAO;EACT,MAAM,QAAQ,OAAO,MAAM,EAAE,CAAE,KAAK,CAAC;EACrC,MAAM,MAAM,OAAO,MAAM,EAAE,CAAE,KAAK,CAAC;EACnC,IAAI,CAAC,OAAO,SAAS,KAAK,KAAK,CAAC,OAAO,SAAS,GAAG,GACjD,OAAO;EACT,OAAO,KAAK,gBAAgB,SAAS,CAAC,OAAO,GAAG,CAAC;CACnD;CAEA,gBAAwB,SAAwB,OAAqB;EACnE,MAAM,SAAS,eAAe;EAC9B,MAAM,CAAC,QAAQ,UAAU;EACzB,MAAM,SAAS,KAAK,IAAI,KAAK,IAAI,QAAQ,MAAM,GAAG,OAAO,EAAE;EAC3D,MAAM,SAAS,KAAK,IAAI,KAAK,IAAI,QAAQ,MAAM,GAAG,OAAO,EAAE;EAC3D,OAAO,CACL,KAAK,IAAI,QAAQ,OAAO,EAAE,GAC1B,KAAK,IAAI,QAAQ,OAAO,EAAE,CAC5B;CACF;CAEA,cAAsB,SAAwB,OAAuB;EACnE,MAAM,CAAC,KAAK,OAAO,KAAK,UAAU,OAAO;EACzC,OAAO,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;CAC3C;CAEA,SAAkB;EAChB,MAAM,cAAc,SAAgC,OAAe,KAAa,KAAa,MAAc,UAAmB,cAA0C;GACtK,IAAI,UACF,OAAO;GACT,OAAO,IAAI;;uBAEM,QAAQ;mBACZ,MAAM;gBACT,IAAI;gBACJ,IAAI;;mBAED,KAAK,SAAS;iBAChB,KAAK;yBACG,KAAK,kBAAkB,aAAa,aAAa;uBACnD,UAAU;wBACT,KAAK,aAAa;8BACZ,KAAK,eAAe,SAAS,YAAY;oBACnD,MAAa,KAAK,SAAS,GAAG,OAAO,EAAE;qBACtC,MAAa,KAAK,UAAU,GAAG,OAAO,EAAE;;;EAGzD;EAEA,OAAO,IAAI;wCACyB,KAAK,WAAW;uCACjB,KAAK,YAAY;;YAE5C,WAAW,KAAK,OAAO,GAAG,KAAK,UAAU,GAAG,GAAG,GAAG,KAAK,QAAO,MAAK,GAAG,KAAK,MAAM,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;YAChG,WAAW,KAAK,aAAa,GAAG,KAAK,UAAU,GAAG,GAAG,KAAM,KAAK,QAAO,MAAK,GAAG,KAAK,MAAM,OAAO,CAAC,IAAI,GAAG,EAAE,EAAE,EAAE;YAC/G,WAAW,KAAK,UAAU,GAAG,KAAK,UAAU,GAAG,GAAG,MAAO,KAAK,QAAO,MAAK,GAAG,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,EAAE;YAChH,KAAK,QAAQ,WAAW,KAAK,WAAW,GAAG,KAAK,UAAU,GAAG,GAAG,KAAM,QAAO,MAAK,GAAG,KAAK,MAAM,OAAO,CAAC,IAAI,GAAG,EAAE,EAAE,IAAI,QAAQ;;;;CAIzI;CAEA,aAAsB,mBAAyC;EAC7D,MAAM,aAAa,iBAAiB;EACpC,KAAK,iBAAiB;CACxB;CAEA,QAAiB,mBAAyC;EACxD,MAAM,QAAQ,iBAAiB;EAK/B,IAAI,kBAAkB,IAAI,GAAG,KAAK,CAAC,KAAK,eAAe,IAAI,GAAG,GAC5D,KAAK,YAAY,KAAK;EACxB,IAAI,kBAAkB,IAAI,GAAG,KAAK,CAAC,KAAK,eAAe,IAAI,GAAG,GAC5D,KAAK,YAAY,KAAK;EACxB,IAAI,kBAAkB,IAAI,GAAG,KAAK,CAAC,KAAK,eAAe,IAAI,GAAG,GAC5D,KAAK,YAAY,KAAK;EACxB,IAAI,kBAAkB,IAAI,GAAG,KAAK,CAAC,KAAK,eAAe,IAAI,GAAG,GAC5D,KAAK,YAAY,KAAK;EACxB,KAAK,eAAe,MAAM;EAE1B,IAAI,kBAAkB,IAAI,GAAG,KAAK,kBAAkB,IAAI,GAAG,KAAK,kBAAkB,IAAI,GAAG,KAAK,kBAAkB,IAAI,GAAG,KAAK,kBAAkB,IAAI,OAAO,KAAK,kBAAkB,IAAI,iBAAiB,GACnM,KAAK,iBAAiB;CAE1B;CAEA,mBAAyB;EACvB,MAAM,IAAI,KAAK;EACf,MAAM,IAAI,KAAK;EACf,MAAM,IAAI,KAAK;EACf,MAAM,IAAI,KAAK;EAGf,MAAM,CAAC,MAAM,QAAQ,KAAK,QAAQ;EAClC,MAAM,CAAC,MAAM,QAAQ,KAAK,QAAQ;EAClC,MAAM,CAAC,MAAM,QAAQ,KAAK,QAAQ;EAClC,MAAM,CAAC,MAAM,QAAQ,KAAK,QAAQ;EAGlC,MAAM,MAAM,KAAK,kBAAkB,WAAW;EAG9C,MAAM,QAAQ,4BAA4B,IAAI,UAAU,KAAK,GAAG,EAAE,GAAG,EAAE,WAAW,KAAK,GAAG,EAAE,GAAG,EAAE;EAGjG,MAAM,QAAQ,4BAA4B,IAAI,UAAU,EAAE,GAAG,KAAK,GAAG,EAAE,WAAW,EAAE,GAAG,KAAK,GAAG,EAAE;EAMjG,MAAM,QAAQ,4BAFC,OAAO,QACI,MAC0B,WAAW,UAAU,OAAO,IAAI,UAAU,EAAE,GAAG,EAAE,GAAG,KAAK,WAAW,EAAE,GAAG,EAAE,GAAG,KAAK;EAIvI,MAAM,QAAQ;wBACM,IAAI,UAAU,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,KAAK;;;;;;EASzF,MAAM,cAAc,CAClB,sBACA,0BACF;EAEA,MAAM,iBAAiB;GACrB;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM,UAA+C;GACnD,CAAC,KAAK,UAAU,KAAK;GACrB,CAAC,KAAK,UAAU,KAAK;GACrB,CAAC,KAAK,UAAU,KAAK;EACvB;EAEA,IAAI,KAAK,SAAS,KAAK,UACrB,QAAQ,KAAK,CAAC,KAAK,UAAU,KAAK,CAAC;EAErC,KAAK,MAAM,CAAC,IAAI,SAAS,SAAS;GAChC,IAAI,CAAC,IACH;GAEF,KAAK,MAAM,KAAK,aACd,GAAG,MAAM,YAAY,GAAG,IAAI;GAG9B,KAAK,MAAM,KAAK,gBACd,GAAG,MAAM,YAAY,GAAG,aAAa;EAEzC;EAGA,IAAI,KAAK,YAAY;GACnB,IAAI,KAAK,IAAI,GAAG;IACd,MAAM,YAAY;kCACQ,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE;;;;;;IAM3E,KAAK,WAAW,MAAM,aAAa;GACrC,OACE,KAAK,WAAW,MAAM,aAAa,KAAK;EAE5C;CACF;CAyBA,iBAAuB;EACrB,MAAM,SAAkC;GAAE,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,MAAM;GAAU,OAAO;EAAQ;EACrH,KAAK,cAAc,IAAI,YAAqC,SAAS;GAAE;GAAQ,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CACjH;CAEA,kBAAwB;EACtB,MAAM,SAAkC;GAAE,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,MAAM;GAAU,OAAO;EAAQ;EACrH,KAAK,cAAc,IAAI,YAAqC,UAAU;GAAE;GAAQ,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAClH;;EAEgC,KAAA,SAAA,CAAC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiInD;;AACH;AAvhBG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,KAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,KAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,KAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,KAAA,KAAA,CAAA;AAEzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAgB,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AACpE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AAC9D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AAC9D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AAC9D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAS,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AAC/C,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAClE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAoB,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,mBAAA,KAAA,CAAA;AACxE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAiB,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,gBAAA,KAAA,CAAA;AAErE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAQ,CAAC,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAG7C,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAU,CAAC,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAC/C,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAU,CAAC,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAC/C,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAU,CAAC,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAC/C,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAU,CAAC,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAS/C,WAAA,CAAA,MAAM,WAAW,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AACjB,WAAA,CAAA,MAAM,WAAW,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AACjB,WAAA,CAAA,MAAM,WAAW,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AACjB,WAAA,CAAA,MAAM,WAAW,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AACjB,WAAA,CAAA,MAAM,UAAU,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAnClBA,eAAAA,WAAAA,CAAAA,kBAAc,oBAAoB,CAAA,GAAA,YAAA;;;ACKnC,IAAI,mBAAmB;AAEvB,MAAM,eAAe;CACnB,OAAO;EAAE,OAAO;EAAK,QAAQ;CAAI;CACjC,QAAQ;EAAE,OAAO;EAAK,QAAQ;CAAI;CAClC,OAAO;EAAE,OAAO;EAAK,QAAQ;CAAI;CACjC,MAAM;EAAE,OAAO;EAAK,QAAQ;CAAI;AAClC;AAIA,SAAS,iBAAiB,GAAW,GAAW,GAAW,GAAmB;CAC5E,IAAI,IAAI,GACN,OAAO;8BACmB,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE;;;;;;CAO7E,OAAO,WAAW,GAAG,GAAG,CAAC;AAC3B;AAGO,IAAM,oBAAN,MAAM,0BAA0B,WAAW;CAyChD,cAAc;EACZ,MAAM;EAzCgD,KAAA,OAAA;EAExB,KAAA,IAAA;EACA,KAAA,IAAA;EACA,KAAA,IAAA;EACA,KAAA,IAAA;EAEsC,KAAA,cAAA;EACG,KAAA,QAAA;EACA,KAAA,QAAA;EACA,KAAA,QAAA;EACf,KAAA,QAAA;EACS,KAAA,aAAA;EACpB,KAAA,OAAA;EAEpB,KAAA,UAAA;EACI,KAAA,cAAA;EAUX,KAAA,YAAA,KAAK;EACL,KAAA,YAAA,KAAK;EACL,KAAA,YAAA,KAAK;EACL,KAAA,YAAA,KAAK;EAGP,KAAA,UAAA,KAAK;EACL,KAAA,UAAA,KAAK;EACL,KAAA,UAAA,KAAK;EACL,KAAA,UAAA,KAAK;EAGK,KAAA,oBAAA;EAsEA,KAAA,oBAAA,MAAmB;GAC7C,MAAM,KAAK;GACX,KAAK,UAAU,GAAG,aAAa;GAE/B,IAAI,GAAG,aAAa,QAAQ;IAC1B,KAAK,UAAU,KAAK;IACpB,KAAK,UAAU,KAAK;IACpB,KAAK,UAAU,KAAK;IACpB,KAAK,UAAU,KAAK;IACpB,KAAK,YAAY,KAAK;IACtB,KAAK,YAAY,KAAK;IACtB,KAAK,YAAY,KAAK;IACtB,KAAK,YAAY,KAAK;IACtB,KAAK,oBAAoB;GAC3B,OAAO,IAAI,KAAK,SAAS,aAAa,CAAC,KAAK,mBAE1C,KAAK,WAAW,UAAU,WAAW,KAAK,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,OAAO,CAAC;EAEhG;EAE0B,KAAA,kBAAA,MAAmB;GAC3C,EAAE,gBAAgB;GAClB,MAAM,SAAU,EAA2C;GAE3D,IAAI,KAAK,SAAS,WAAW;IAC3B,KAAK,YAAY,OAAO;IACxB,KAAK,YAAY,OAAO;IACxB,KAAK,YAAY,OAAO;IACxB,KAAK,YAAY,OAAO,KAAK;IAC7B;GACF;GAEA,KAAK,IAAI,OAAO;GAChB,KAAK,IAAI,OAAO;GAChB,KAAK,IAAI,OAAO;GAChB,KAAK,IAAI,OAAO,KAAK;GACrB,KAAK,eAAe;EACtB;EAE2B,KAAA,mBAAA,MAAmB;GAC5C,EAAE,gBAAgB;GAClB,MAAM,SAAU,EAA2C;GAE3D,IAAI,KAAK,SAAS,WAAW;IAC3B,KAAK,YAAY,OAAO;IACxB,KAAK,YAAY,OAAO;IACxB,KAAK,YAAY,OAAO;IACxB,KAAK,YAAY,OAAO,KAAK;IAC7B;GACF;GAEA,KAAK,IAAI,OAAO;GAChB,KAAK,IAAI,OAAO;GAChB,KAAK,IAAI,OAAO;GAChB,KAAK,IAAI,OAAO,KAAK;GACrB,KAAK,gBAAgB;EACvB;EAEiC,KAAA,mBAAA;GAC/B,KAAK,IAAI,KAAK;GACd,KAAK,IAAI,KAAK;GACd,KAAK,IAAI,KAAK;GACd,KAAK,IAAI,KAAK;GACd,KAAK,oBAAoB;GACzB,KAAK,gBAAgB;GACrB,IAAI;IACF,KAAM,SAAuD,YAAY;GAC3E,QAAQ,CAER;EACF;EAEyB,KAAA,iBAAA,YAA2B;GAClD,IAAI,CAAC,KAAK,aAAa;IACrB,KAAK,cAAc;IACnB,MAAM,KAAK;GACb;GACA,IAAI;IACF,KAAM,SAAuD,YAAY;GAC3E,QAAQ,CAER;EACF;EApJE,MAAM,KAAK,EAAE;EACb,KAAK,OAAO,YAAY;EACxB,KAAK,cAAc,qBAAqB;EACxC,KAAK,WAAW,kBAAkB;CACpC;CAEA,IAAI,QAAgB;EAClB,OAAO,WAAW,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CAClD;CAEA,IAAI,MAAM,QAA0B;EAClC,KAAK,UAAU,MAAM;CACvB;CAEA,IAAY,oBAA6B;EAGvC,IAAI,KAAK,SAAS,SAChB,OAAO,CAAC,KAAK;EACf,OAAO;CACT;CAEA,IAAY,oBAAuD;EACjE,OAAO,aAAa,KAAK,SAAS,aAAa;CACjD;CAEA,UAAU,QAAgC;EACxC,MAAM,IAAI,OAAO,QAAQ,QAAQ,gBAAgB;EACjD,KAAK,IAAI,EAAE;EACX,KAAK,IAAI,EAAE;EACX,KAAK,IAAI,EAAE;EACX,KAAK,IAAI,EAAE,WAAW;CACxB;CAEA,aAAsB,mBAAyC;EAC7D,MAAM,aAAa,iBAAiB;EACpC,KAAK,wBAAwB;EAC7B,KAAK,wBAAwB;CAC/B;CAEA,QAAiB,mBAAyC;EACxD,MAAM,QAAQ,iBAAiB;EAG/B,IAFsB,kBAAkB,IAAI,GAAG,KAAK,kBAAkB,IAAI,GAAG,KACxE,kBAAkB,IAAI,GAAG,KAAK,kBAAkB,IAAI,GAAG,GAE1D,KAAK,wBAAwB;CAEjC;CAEA,0BAAwC;EACtC,MAAM,SAAS,KAAK,YAAY,cAAc,SAAS;EACvD,IAAI,QACF,OAAO,MAAM,YAAY,eAAe,KAAK,WAAW;EAE1D,IAAI,KAAK,UACP,KAAK,SAAS,MAAM,YAAY,mBAAmB,KAAK,WAAW;CAEvE;CAEA,0BAAwC;EACtC,MAAM,SAAS,KAAK,YAAY,cAAc,SAAS;EACvD,IAAI,QACF,OAAO,MAAM,aAAa,iBAAiB,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CAE7E;CAsFA,iBAA+B;EAC7B,MAAM,SAAkC;GAAE,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,MAAM;GAAU,OAAO;EAAQ;EACrH,KAAK,cAAc,IAAI,YAAqC,SAAS;GAAE;GAAQ,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CACjH;CAEA,kBAAgC;EAC9B,MAAM,SAAkC;GAAE,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,GAAG,KAAK;GAAG,MAAM;GAAU,OAAO;EAAQ;EACrH,KAAK,cAAc,IAAI,YAAqC,UAAU;GAAE;GAAQ,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAClH;CAEA,SAAkB;EAChB,OAAO,IAAI;;;iBAGE,KAAK,eAAe;mCACF,KAAK,MAAM;yBACrB,KAAK,QAAQ;;;;cAIxB,KAAK,SAAS;;;;;sCAKU,KAAK,kBAAkB,MAAM,2BAA2B,KAAK,kBAAkB,OAAO;kBAC1G,KAAK,iBAAiB;;UAE9B,KAAK,cACH,IAAI;;iBAEC,KAAK,EAAE;iBACP,KAAK,EAAE;iBACP,KAAK,EAAE;iBACP,KAAK,EAAE;2BACG,KAAK,kBAAkB,MAAM,YAAY,KAAK,kBAAkB,OAAO;4BACtE,KAAK,kBAAkB;sBAC7B,KAAK,MAAM;sBACX,KAAK,MAAM;sBACX,KAAK,MAAM;sBACX,KAAK,MAAM;0BACP,KAAK,WAAW;;qBAErB,KAAK,eAAe;sBACnB,KAAK,gBAAgB;;YAE/B,KAAK,SAAS,YACZ,IAAI;iDAC+B,KAAK,WAAW;gBACjD,WAAW,UAAU,EAAE;;cAGzB,QAAQ;YAEV,QAAQ;;;CAGlB;;EAEgC,KAAA,SAAA;GAAC;GAAgB;GAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgGvE;;AACH;AA5VG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;AAEzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,kBAAA,WAAA,KAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,kBAAA,WAAA,KAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,kBAAA,WAAA,KAAA,KAAA,CAAA;AACzB,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,kBAAA,WAAA,KAAA,KAAA,CAAA;AAEzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAe,CAAC,CAAA,GAAA,kBAAA,WAAA,eAAA,KAAA,CAAA;AACrD,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,SAAA,KAAA,CAAA;AAC9D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,SAAA,KAAA,CAAA;AAC9D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,kBAAA,WAAA,SAAA,KAAA,CAAA;AAC9D,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAS,CAAC,CAAA,GAAA,kBAAA,WAAA,SAAA,KAAA,CAAA;AAC/C,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;AAAa,CAAC,CAAA,GAAA,kBAAA,WAAA,cAAA,KAAA,CAAA;AACnD,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,kBAAA,WAAA,QAAA,KAAA,CAAA;AAEzB,WAAA,CAAA,MAAM,CAAA,GAAA,kBAAA,WAAA,WAAA,KAAA,CAAA;AACN,WAAA,CAAA,MAAM,CAAA,GAAA,kBAAA,WAAA,eAAA,KAAA,CAAA;AAEN,WAAA,CAAA,MAAM,QAAQ,CAAA,GAAA,kBAAA,WAAA,YAAA,KAAA,CAAA;AACd,WAAA,CAAA,MAAM,oBAAoB,CAAA,GAAA,kBAAA,WAAA,aAAA,KAAA,CAAA;AArB5BC,oBAAAA,WAAAA,CAAAA,kBAAc,0BAA0B,CAAA,GAAA,iBAAA"}

package/dist/colour-picker.js

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

package/dist/crumbs.d.ts

@@ -1,7 +1,7 @@
 import { E as TreeSelectEvent, O as TreeTickleEvent, a as TreeComponent, k as TreeDataModel, n as TreeActivateEvent, o as TreeComponentEventMap, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-DukLqesg.js";
 import { n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-D-kYF16b.js";
 import "./menu-item-B0zqw2xp.js";
-import "./narrowed-text.js";
+import "./index-o-CWDt11.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/crumbs/crumb-navigation.d.ts
 /** @deprecated Use TreeSelectDetail from src/common/tree-component.ts */

package/dist/crumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crumbs.d.ts","names":[],"sources":["../src/crumbs/crumb-navigation.ts"],"mappings":";;;;;;;KAoCY;WACD,UAAU;WACV,UAAU;;KAGT,6BAA6B,YAAY;KAEzC;EAAmC,MAAM;EAAU;;KACnD,gCAAgC,YAAY;KAE5C;EAAgC,MAAM;EAAU;;KAChD,6BAA6B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BxC,+BAA+B,sBAAsB;;EAEhE,MAAM;EAGN,OAAO;EAGP,cAAc;UAGN;MAEJ,iBAAiB,YAAY;;EAMjC,cAAc;EAGd,iBAAiB;EAGjB,aAAa;EAGb,iBAAiB;UAGT;UAGA;UAGA;UAGA;EAGR;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;UAUQ;EAiTR,OAAO,MAAM;EAIb,SAAS,OAAO;EAIhB;;EAMA;;EAKA;EAIA,YAAY;IAAgB,MAAM;IAAU;;EAgBnC,QAAQ,cAAc;EAkBtB;EAMA;EAUA;;EA0TT,WAAW;;EAiBX,eAAe,YAAY,MAAM;;EAUjC,UAAU;;EAKV,WAAW,OAAO,SAAS;EAuC3B,wBAAM;SA6QC,sBAAM;;QA2PP;YACI;IACR,yBAAyB;;;UAIZ,uCAAuC;EACtD,cAAc;EACd,UAAU;EACV,UAAU;EACV,UAAU;EACV,YAAY;;UAGG;EACf,oBAAoB,gBAAgB,gCAClC,MAAM,GACN,WAAW,MAAM,wBAAwB,OAAO,+BAA+B,aAC/E,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
+{"version":3,"file":"crumbs.d.ts","names":[],"sources":["../src/crumbs/crumb-navigation.ts"],"mappings":";;;;;;;KAoCY;WACD,UAAU;WACV,UAAU;;KAGT,6BAA6B,YAAY;KAEzC;EAAmC,MAAM;EAAU;;KACnD,gCAAgC,YAAY;KAE5C;EAAgC,MAAM;EAAU;;KAChD,6BAA6B,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCxC,+BAA+B,sBAAsB;;EAEhE,MAAM;EAGN,OAAO;EAGP,cAAc;UAGN;MAEJ,iBAAiB,YAAY;;EAMjC,cAAc;EAGd,iBAAiB;EAGjB,aAAa;EAGb,iBAAiB;UAGT;UAGA;UAGA;UAGA;EAGR;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;EAGA;UAUQ;EAiTR,OAAO,MAAM;EAIb,SAAS,OAAO;EAIhB;;EAMA;;EAKA;EAIA,YAAY;IAAgB,MAAM;IAAU;;EAgBnC,QAAQ,cAAc;EAkBtB;EAMA;EAUA;;EA0TT,WAAW;;EAiBX,eAAe,YAAY,MAAM;;EAUjC,UAAU;;EAKV,WAAW,OAAO,SAAS;EAuC3B,wBAAM;SA6QC,sBAAM;;QAsQP;YACI;IACR,yBAAyB;;;UAIZ,uCAAuC;EACtD,cAAc;EACd,UAAU;EACV,UAAU;EACV,UAAU;EACV,YAAY;;UAGG;EACf,oBAAoB,gBAAgB,gCAClC,MAAM,GACN,WAAW,MAAM,wBAAwB,OAAO,+BAA+B,aAC/E,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}

package/dist/crumbs.js

@@ -1,15 +1,19 @@
-import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
+import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import "./interaction-BskmlA9t.js";
-import "./menu-item-CDPFgaSF.js";
+import "./interaction-ZTh4htzr.js";
+import "./menu-item-BDEekBVy.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
 import "./narrowed-text.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/crumbs/crumb-navigation.ts
+/** Menu / suggestion order: by label, without mutating the tree's own order. */
+function sortNodesByLabel(nodes) {
+	return [...nodes].sort((a, b) => (a.item.label ?? ``).localeCompare(b.item.label ?? ``));
+}
 let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -531,7 +535,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 	#getSiblingMenuItems(pathNodes, index) {
 		if (index === 0) {
 			if (!this.hideRoot || !this.root) return [];
-			const siblings = [...this.root.children ?? []].sort((a, b) => (a.item.label ?? ``).localeCompare(b.item.label ?? ``));
+			const siblings = sortNodesByLabel(this.root.children ?? []);
 			this.#currentLeadingSiblings = siblings;
 			return siblings.map((sibling) => html`
         <ixfx-menu-item
@@ -544,7 +548,8 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
         ></ixfx-menu-item>
       `);
 		}
-		const siblings = [...pathNodes[index - 1].children ?? []].sort((a, b) => (a.item.label ?? ``).localeCompare(b.item.label ?? ``));
+		const parent = pathNodes[index - 1];
+		const siblings = sortNodesByLabel(parent.children ?? []);
 		this.#currentLeadingSiblings = siblings;
 		return siblings.map((sibling) => html`
       <ixfx-menu-item
@@ -649,7 +654,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
 			const showLeadingCaret = this.leadingCaret && (i > 0 || this.hideRoot) && hasChildren;
 			const showTrailingCaret = !this.leadingCaret && hasChildren || this.leadingCaret && isLast && hasChildren;
 			const siblingMenuItems = showLeadingCaret ? this.#getSiblingMenuItems(pathNodes, i) : [];
-			const childMenuItems = (node.children ?? []).map((c) => html`
+			const childMenuItems = sortNodesByLabel(node.children ?? []).map((c) => html`
         <ixfx-menu-item
           label="${c.item.label}"
           command="${c.item.key}"
@@ -759,7 +764,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
               aria-label="Go up one level"
               @click=${this.#onUpClick}
             >
-              <ixfx-icon name="folder-up"></ixfx-icon>
+              <span class="label"><ixfx-icon name="folder-up"></ixfx-icon></span>
             </button>
           ` : nothing}
         <div
@@ -824,7 +829,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
         @narrowed-text-blur=${this.#onNarrowedTextBlur}
         @narrowed-text-shift-tab=${this.#onNarrowedTextShiftTab}
       >
-        ${children.map((c) => html`
+        ${sortNodesByLabel(children).map((c) => html`
           <span data-value="${c.item.key}" data-label="${c.item.label}"></span>
         `)}
       </ixfx-narrowed-text>
@@ -882,6 +887,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
     }
 
     .up-button {
+      box-sizing: border-box;
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -889,9 +895,12 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
       background: var(--crumb-item-bg);
       border: var(--crumb-item-border);
       border-radius: var(--crumb-item-border-radius);
-      padding: var(--crumb-item-padding);
+      padding: 0;
+      margin: 0;
       cursor: pointer;
       color: inherit;
+      font: inherit;
+      line-height: normal;
     }
 
     .up-button:disabled {
@@ -904,7 +913,14 @@ let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
       border-color: var(--crumb-item-border-tickled);
     }
 
-    .up-button ixfx-icon {
+    .up-button .label {
+      display: flex;
+      align-items: center;
+      padding: var(--crumb-item-padding);
+    }
+
+    .up-button .label ixfx-icon {
+      display: block;
       width: 1em;
       height: 1em;
       pointer-events: none;