@ixfx/components 0.5.18 → 0.5.20

package/dist/xy-pad.d.ts

@@ -1,5 +1,6 @@
-import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-DgMTRYlh.js";
+import { n as WheelNudgeConsumerType, t as WheelDirection } from "./wheel-nudge-C-ra_1os.js";
 import { LitElement, PropertyValues, html } from "lit";
+
 //#region src/xy-pad/xy-pad.d.ts
 declare const XyPad_base: (new (...args: any[]) => WheelNudgeConsumerType<LitElement>) & typeof LitElement;
 declare class XyPad extends XyPad_base {

package/dist/xy-pad.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"xy-pad.d.ts","names":[],"sources":["../src/xy-pad/xy-pad.ts"],"mappings":";;;;cAmFa,cAAc;SACT,sBAAM;EAoHM;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EAC0B;EACA;;EAEL;;EAEA;EAErB;EACA;EAE8C;EACN;EACE;EAC1B;;EAGhB;;EAGsB;;EAGA;UAE1C;UACA;UACA;UACA;UAEA;UAuBA;UAIA;;;;;UA8CA;EA2BC,iBAAiB,WAAW,gBAAgB,OAAO;UAIpD;UAeA;UAOA;UAeA;UA+BA;;;;EAoBR;;;;EAQA;;;;;;EAUA;IAAc;IAAgB;;EAUrB,QAAQ,UAAU;EAKlB;EAMA,UAAU,kBAAkB;;KAiB3B;WACD;WACA;;KAGC,kBAAkB,YAAY;QAElC;YACI;IACR,eAAe;;;UAIF;EACf,OAAO;EACP,QAAQ;;UAGO;EACf,oBAAoB,gBAAgB,eAClC,MAAM,GACN,WAAW,MAAM,OAAO,OAAO,cAAc,aAC7C,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB"}
+{"version":3,"file":"xy-pad.d.ts","names":[],"sources":["../src/xy-pad/xy-pad.ts"],"mappings":";;;;cAkD4C,UAAA;cAiC/B,KAAA,SAAc,UAAA;EAAA,OACT,MAAA,gBAAM,SAAA;EAoHM,IAAA;EACA,IAAA;EACA,CAAA;EAEA,IAAA;EACA,IAAA;EACA,CAAA;EAEA,MAAA;EACA,MAAA;EAC0B,SAAA;EACA,SAAA;EAgI5B;EA9HuB,KAAA;EA8HI;EA5HJ,KAAA;EAErB,MAAA;EACA,MAAA;EAE8C,cAAA;EACN,QAAA;EACE,UAAA;EAC1B,QAAA;EAkO5C;EA/N4B,KAAA;EA+NE;EA5NoB,MAAA;EAsOvB;EAnOuB,MAAA;EAAA,QAE1C,SAAA;EAAA,QACA,WAAA;EAAA,QACA,WAAA;EAAA,QACA,YAAA;EAAA,QAEA,UAAA;EAAA,QAuBA,QAAA;EAAA,QAIA,mBAAA;EA6NkB;;;AAEhB;EAFgB,QA/KlB,aAAA;EA2BC,gBAAA,CAAiB,SAAA,EAAW,cAAA,EAAgB,KAAA,EAAO,UAAA;EAAA,QAIpD,cAAA;EAAA,QAeA,cAAA;EAAA,QAOA,YAAA;EAAA,QAeA,kBAAA;EAAA,QA+BA,WAAA;;;;EAoBR,YAAA;EAiEE;;;EAzDF,YAAA;EAyDsB;AAIxB;;;;EAnDE,QAAA;IAAc,MAAA;IAAgB,KAAA;EAAA;EAUrB,OAAA,CAAQ,QAAA,EAAU,cAAA;EAKlB,oBAAA;EAMA,MAAA,IAAU,UAAA,QAAkB,IAAA;AAAA;AAAA,KAiB3B,gBAAA;EAAA,SACD,CAAA;EAAA,SACA,CAAC;AAAA;AAAA,KAGA,eAAA,GAAkB,WAAW,CAAC,gBAAA;AAAA,QAElC,MAAA;EAAA,UACI,qBAAA;IACR,aAAA,EAAe,KAAK;EAAA;AAAA;AAAA,UAIP,aAAA;EACf,KAAA,EAAO,eAAA;EACP,MAAA,EAAQ,eAAe;AAAA;AAAA,UAGR,KAAA;EACf,gBAAA,oBAAoC,aAAA,EAClC,IAAA,EAAM,CAAA,EACN,QAAA,GAAW,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,aAAA,CAAc,CAAA,YAC7C,OAAA,aAAoB,uBAAA,eAEpB,IAAA,UACA,QAAA,EAAU,kCAAA,EACV,OAAA,aAAoB,uBAAA;AAAA"}

package/dist/xy-pad.js

@@ -1,8 +1,8 @@
-import { t as themeFallbacks } from "./fallbacks-DPgPEqo8.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
 import { t as prominenceStyles } from "./prominence-DlFShic3.js";
 import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
-import { t as WheelNudgeMixin } from "./wheel-nudge-BlSCe_hD.js";
+import { t as WheelNudgeMixin } from "./wheel-nudge-Dhzi5nHc.js";
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 //#region src/xy-pad/xy-pad.ts

package/dist/xy-pad.js.map

@@ -1 +1 @@
-{"version":3,"file":"xy-pad.js","names":["customElement"],"sources":["../src/xy-pad/xy-pad.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport type { PropertyValues } from 'lit';\nimport type { WheelDirection } from '../mixins/wheel-nudge.js';\n/**\n * <x-xy-pad> — 2D touch-friendly XY pad for controlling two parameters.\n *\n * Mouse wheel: up = increase Y, down = decrease Y (X is unaffected). Same step\n * math as keyboard `ArrowUp`/`ArrowDown`; Shift halves the step. Pad must have\n * focus by default, or set `lighttouch` to react on hover. See\n * `docs/infra-mousewheel.md`.\n *\n * Generic pad that accepts min/max/value for both axes with configurable labels.\n * Each axis can independently use logarithmic or linear scaling.\n * Y axis is inverted (top = high value).\n *\n * Properties\n *   xMin, xMax, x      – horizontal range and current value\n *   yMin, yMax, y      – vertical range and current value\n *   xScale, yScale     – 'log' (default) or 'linear'\n *   xSnapStep, ySnapStep – snap granularity for pointer and keyboard moves (defaults: 1 / 0.01)\n *   stepX, stepY        – keyboard nudge step size (absolute units). If unset, defaults to 10% of the axis range.\n *                        Distinct from xSnapStep which post-snaps the resulting value.\n *   xLabel, yLabel     – axis labels (displayed in corners)\n *   showCrosshairs      – show X/Y axis lines (default: false)\n *   showGrid            – show background grid (default: false)\n *\n * CSS variables:\n *   --marker-size         – size of the position marker (default: 10cqb)\n *   --crosshair-color     – colour of both crosshair lines (default: surface-hh)\n *   --crosshair-width     – thickness of both crosshair lines (default: 2px)\n *   --crosshair-x-color   – colour of the vertical (X) crosshair line; falls back to --crosshair-color\n *   --crosshair-x-width   – thickness of the vertical (X) crosshair line; falls back to --crosshair-width\n *   --crosshair-y-color   – colour of the horizontal (Y) crosshair line; falls back to --crosshair-color\n *   --crosshair-y-width   – thickness of the horizontal (Y) crosshair line; falls back to --crosshair-width\n *   --grid-color          – colour of grid lines (default: surface-hh)\n *   --grid-width          – thickness of grid lines (default: 1px)\n *   --x-pct               – current X position as unitless number (0–100), set on host so external styles can use it\n *   --y-pct               – current Y position as unitless number (0–100), set on host so external styles can use it\n *   --radius-pct          – distance from center as unitless number (0–100), set on host so external styles can use it\n *   hide-cursor           – boolean, hide cursor during drag and hover (default: false)\n *\n * Events\n *   input – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires continuously during drag\n *   change – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires when drag ends\n *\n * Methods\n *   getRelativeX() – returns X position as 0–1 fraction\n *   getRelativeY() – returns Y position as 0–1 fraction\n *   getPolar() – returns { radius: number, angle: number } where radius is 0–1 and angle is in radians (0 to 2π, 0 = right, clockwise)\n */\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { resolveAxisStep } from '../keyboard.js';\nimport { WheelNudgeMixin } from '../mixins/wheel-nudge.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { prominenceStyles } from '../styles/prominence.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n// ---------------------------------------------------------------------------\n// Scale helpers — log or linear, selected per-axis\n// ---------------------------------------------------------------------------\n\nfunction valueToFrac(value: number, min: number, max: number, scale: string): number {\n  if (scale === `linear`)\n    return (value - min) / (max - min);\n  return Math.log(value / min) / Math.log(max / min);\n}\n\nfunction fracToValue(frac: number, min: number, max: number, scale: string): number {\n  if (scale === `linear`)\n    return min + frac * (max - min);\n  return min * (max / min) ** frac;\n}\n\nfunction quantise(value: number, min: number, max: number, stops?: number): number {\n  if (!stops || stops <= 1)\n    return value;\n  const range = max - min;\n  const step = range / stops;\n  return Math.round((value - min) / step) * step + min;\n}\n\n@customElement(`ixfx-xy-pad`)\nexport class XyPad extends WheelNudgeMixin(LitElement) {\n  static override styles = [themeFallbacks, prominenceStyles, css`\n    :host {\n      display: block;\n      width: 200px;\n      height: 200px;\n      touch-action: none;\n      user-select: none;\n      container-type: size;\n      --marker-size: 10cqb;\n      --crosshair-color: var(--surface-6);\n      --crosshair-width: 2px;\n      --crosshair-x-color: var(--crosshair-color);\n      --crosshair-x-width: var(--crosshair-width);\n      --crosshair-y-color: var(--crosshair-color);\n      --crosshair-y-width: var(--crosshair-width);\n      --grid-color: var(--surface-6);\n      --grid-width: 1px;\n      --_space-s: var(--space-s, 4px);\n      --_space-m: var(--space-m, 8px);\n    }\n    .xy-pad-area {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      background: var(--xy-pad-bg, var(--surface-3));\n      border: var(--border);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-shadow: var(--deboss-3);\n      cursor: var(--cursor-display, crosshair);\n    }\n    :host([dragging]) .xy-pad-area {\n      cursor: none;\n    }\n\n    .xy-pad-area:focus {\n      outline: none;\n    }\n\n    .xy-pad-area:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n    .xy-pad-area::before,\n    .xy-pad-area::after {\n      content: '';\n      position: absolute;\n      pointer-events: none;\n      opacity: var(--show-crosshairs, 0);\n    }\n    :host([show-crosshairs]) {\n      --show-crosshairs: 1;\n    }\n    .xy-pad-area::before {\n      left: 0;\n      right: 0;\n      top: calc(100% - var(--y-pct, 50) * 1%);\n      height: var(--crosshair-y-width);\n      background: var(--crosshair-y-color);\n    }\n    .xy-pad-area::after {\n      top: 0;\n      bottom: 0;\n      left: calc(var(--x-pct, 50) * 1%);\n      width: var(--crosshair-x-width);\n      background: var(--crosshair-x-color);\n    }\n\n    .xy-pad-grid {\n      position: absolute;\n      inset: 0;\n      background-image:\n        linear-gradient(to right, var(--grid-color) var(--grid-width), transparent var(--grid-width)),\n        linear-gradient(to bottom, var(--grid-color) var(--grid-width), transparent var(--grid-width));\n      background-size: 10cqb 10cqb;\n      pointer-events: none;\n      opacity: var(--show-grid, 0);\n    }\n    :host([show-grid]) {\n      --show-grid: 1;\n    }\n    \n    .xy-pad-marker {\n      position: absolute;\n      width: var(--marker-size, 10cqb);\n      height: var(--marker-size, 10cqb);\n      border-radius: 50%;\n      background: var(--surface-2-accent, var(--accent));\n      top: calc(100% - var(--y-pct, 50) * 1%);\n      left: calc(var(--x-pct, 50) * 1%);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n      z-index: 2;\n    }\n    .xy-pad-label-x {\n      position: absolute;\n      bottom: var(--_space-s);\n      color: var(--surface-muted-text);\n      font-size: var(--text-s, 12px);\n      pointer-events: none;\n      width: 100%;\n      text-align: center;\n    }\n    .xy-pad-label-y {\n      position: absolute;\n      top: var(--_space-s);\n      left: var(--_space-m);\n      color: var(--surface-muted-text);\n      font-size: var(--text-s, 12px);\n      pointer-events: none;\n      writing-mode: sideways-lr;\n      height:100%;\n      text-align:center;\n    }\n  `];\n\n  @property({ type: Number }) xMin = 1;\n  @property({ type: Number }) xMax = 100;\n  @property({ type: Number }) x = 50;\n\n  @property({ type: Number }) yMin = 1;\n  @property({ type: Number }) yMax = 100;\n  @property({ type: Number }) y = 50;\n\n  @property({ type: String }) xScale = `linear`;\n  @property({ type: String }) yScale = `linear`;\n  @property({ type: Number, attribute: `x-snap-step` }) xSnapStep?: number;\n  @property({ type: Number, attribute: `y-snap-step` }) ySnapStep?: number;\n  /** Explicit keyboard nudge step for X axis (absolute units). Overrides the 10% default. */\n  @property({ type: Number, attribute: `step-x` }) stepX?: number;\n  /** Explicit keyboard nudge step for Y axis (absolute units). Overrides the 10% default. */\n  @property({ type: Number, attribute: `step-y` }) stepY?: number;\n\n  @property({ type: String }) xLabel = `X`;\n  @property({ type: String }) yLabel = `Y`;\n\n  @property({ type: Boolean, reflect: true, attribute: `show-crosshairs` }) showCrosshairs = false;\n  @property({ type: Boolean, reflect: true, attribute: `show-grid` }) showGrid = false;\n  @property({ type: Boolean, reflect: true, attribute: `hide-cursor` }) hideCursor = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Number of quantised stops for both axes. Overridden by stops-x/stops-y if set. */\n  @property({ type: Number }) stops?: number;\n\n  /** Number of quantised stops for X axis. If set, overrides the stops setting for X. */\n  @property({ type: Number, attribute: `stops-x` }) stopsX?: number;\n\n  /** Number of quantised stops for Y axis. If set, overrides the stops setting for Y. */\n  @property({ type: Number, attribute: `stops-y` }) stopsY?: number;\n\n  private _dragging = false;\n  private _dragStartX = 0;\n  private _dragStartY = 0;\n  private _pressedKeys = new Set<string>();\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this.disabled)\n      return;\n    if ([`ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`].includes(e.key)) {\n      e.preventDefault();\n      this._pressedKeys.add(e.key);\n      this._handleKeyboardMove(e.shiftKey);\n    } else if (e.key === `Home` || e.key === `End`) {\n      e.preventDefault();\n      const newX = e.key === `Home` ? this.xMin : this.xMax;\n      const newY = e.key === `Home` ? this.yMin : this.yMax;\n      if (newX !== this.x || newY !== this.y) {\n        this.x = newX;\n        this.y = newY;\n        this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n          detail: { x: this.x, y: this.y },\n          bubbles: true,\n          composed: true,\n        }));\n      }\n    }\n  };\n\n  private _onKeyUp = (e: KeyboardEvent): void => {\n    this._pressedKeys.delete(e.key);\n  };\n\n  private _handleKeyboardMove = (shiftKey: boolean): void => {\n    const xRange = this.xMax - this.xMin;\n    const yRange = this.yMax - this.yMin;\n    const effectiveStopsX = this.stopsX ?? this.stops;\n    const effectiveStopsY = this.stopsY ?? this.stops;\n\n    const xStep = resolveAxisStep(xRange, effectiveStopsX, this.stepX, shiftKey);\n    const yStep = resolveAxisStep(yRange, effectiveStopsY, this.stepY, shiftKey);\n\n    let newX = this.x;\n    let newY = this.y;\n\n    if (this._pressedKeys.has(`ArrowLeft`)) {\n      newX = Math.max(this.xMin, this.x - xStep);\n    }\n    if (this._pressedKeys.has(`ArrowRight`)) {\n      newX = Math.min(this.xMax, this.x + xStep);\n    }\n    if (this._pressedKeys.has(`ArrowUp`)) {\n      newY = Math.min(this.yMax, this.y + yStep);\n    }\n    if (this._pressedKeys.has(`ArrowDown`)) {\n      newY = Math.max(this.yMin, this.y - yStep);\n    }\n\n    if (newX !== this.x || newY !== this.y) {\n      let finalX = (this.xSnapStep && this.xSnapStep > 0) ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;\n      let finalY = (this.ySnapStep && this.ySnapStep > 0) ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;\n\n      finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);\n      finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);\n\n      this.x = finalX;\n      this.y = finalY;\n      this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n        detail: { x: this.x, y: this.y },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  /**\n   * Apply a Y-axis nudge by direction. Wheel affects Y only (matches the\n   * keyboard `ArrowUp`/`ArrowDown` semantic per `plans/mousewheel.md`).\n   */\n  private _stepYByDelta(direction: 1 | -1, shiftKey: boolean): void {\n    const yRange = this.yMax - this.yMin;\n    const effectiveStopsY = this.stopsY ?? this.stops;\n    const yStep = resolveAxisStep(yRange, effectiveStopsY, this.stepY, shiftKey);\n\n    const candidate = direction === 1\n      ? Math.min(this.yMax, this.y + yStep)\n      : Math.max(this.yMin, this.y - yStep);\n    if (candidate === this.y)\n      return;\n\n    let finalY = (this.ySnapStep && this.ySnapStep > 0)\n      ? Math.round(candidate / this.ySnapStep) * this.ySnapStep\n      : candidate;\n    finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);\n    if (finalY === this.y)\n      return;\n\n    this.y = finalY;\n    this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n      detail: { x: this.x, y: this.y },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  // Wheel handler — installed by WheelNudgeMixin on the host.\n  override _applyWheelDelta(direction: WheelDirection, event: WheelEvent): void {\n    this._stepYByDelta(direction, event.shiftKey);\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    e.preventDefault();\n    const pad = this.renderRoot.querySelector(`.xy-pad-area`) as HTMLElement | undefined;\n    pad?.focus();\n    if (pad)\n      pad.setPointerCapture(e.pointerId);\n    this._dragging = true;\n    this._dragStartX = this.x;\n    this._dragStartY = this.y;\n    this.setAttribute(`dragging`, ``);\n    this._updateFromPointer(e);\n    globalThis.addEventListener(`pointermove`, this._onPointerMove);\n    globalThis.addEventListener(`pointerup`, this._onPointerUp);\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._dragging)\n      return;\n    e.preventDefault();\n    this._updateFromPointer(e);\n  };\n\n  private _onPointerUp = (): void => {\n    const hasChanged = this.x !== this._dragStartX || this.y !== this._dragStartY;\n    this._dragging = false;\n    this.removeAttribute(`dragging`);\n    globalThis.removeEventListener(`pointermove`, this._onPointerMove);\n    globalThis.removeEventListener(`pointerup`, this._onPointerUp);\n    if (hasChanged) {\n      this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`change`, {\n        detail: { x: this.x, y: this.y },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  private _updateFromPointer(e: PointerEvent): void {\n    const pad = this.renderRoot.querySelector(`.xy-pad-area`);\n    if (!pad)\n      return;\n\n    const rect = pad.getBoundingClientRect();\n    const xFrac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const yFrac = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));\n\n    const newX = fracToValue(xFrac, this.xMin, this.xMax, this.xScale);\n    const newY = fracToValue(yFrac, this.yMin, this.yMax, this.yScale);\n\n    let finalX = (this.xSnapStep && this.xSnapStep > 0) ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;\n    let finalY = (this.ySnapStep && this.ySnapStep > 0) ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;\n\n    const effectiveStopsX = this.stopsX ?? this.stops;\n    const effectiveStopsY = this.stopsY ?? this.stops;\n\n    finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);\n    finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);\n\n    this.x = finalX;\n    this.y = finalY;\n\n    this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n      detail: { x: this.x, y: this.y },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _setPctVars(): void {\n    const cx = Math.max(this.xMin, Math.min(this.xMax, this.x));\n    const cy = Math.max(this.yMin, Math.min(this.yMax, this.y));\n    const xPct = valueToFrac(cx, this.xMin, this.xMax, this.xScale) * 100;\n    const yPct = valueToFrac(cy, this.yMin, this.yMax, this.yScale) * 100;\n    this.style.setProperty(`--x-pct`, `${xPct}`);\n    this.style.setProperty(`--y-pct`, `${yPct}`);\n\n    // Calculate radius from center (50, 50) - distance as 0-100\n    const dx = xPct - 50;\n    const dy = yPct - 50;\n    const radiusPct = Math.sqrt(dx * dx + dy * dy);\n    this.style.setProperty(`--radius-pct`, `${radiusPct}`);\n  }\n\n  // ── Public API ─────────────────────────────────────────────────────────────\n\n  /**\n   * Returns X position as a 0–1 fraction.\n   */\n  getRelativeX(): number {\n    const cx = Math.max(this.xMin, Math.min(this.xMax, this.x));\n    return valueToFrac(cx, this.xMin, this.xMax, this.xScale);\n  }\n\n  /**\n   * Returns Y position as a 0–1 fraction.\n   */\n  getRelativeY(): number {\n    const cy = Math.max(this.yMin, Math.min(this.yMax, this.y));\n    return valueToFrac(cy, this.yMin, this.yMax, this.yScale);\n  }\n\n  /**\n   * Returns polar coordinates.\n   * - radius: 0–1 distance from center\n   * - angle: radians, 0 = right, clockwise (0 to 2π)\n   */\n  getPolar(): { radius: number; angle: number } {\n    const xRel = this.getRelativeX() - 0.5; // -0.5 to 0.5\n    const yRel = this.getRelativeY() - 0.5; // -0.5 to 0.5\n    const radius = Math.sqrt(xRel * xRel + yRel * yRel) * 2; // 0 to 1\n    let angle = Math.atan2(yRel, xRel); // -π to π\n    if (angle < 0)\n      angle += 2 * Math.PI; // 0 to 2π\n    return { radius, angle };\n  }\n\n  override updated(_changed: PropertyValues): void {\n    super.updated(_changed);\n    this._setPctVars();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._onPointerUp();\n    this._pressedKeys.clear();\n  }\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <div class=\"xy-pad-area\"\n           tabindex=${this.disabled ? -1 : 0}\n           @pointerdown=${this._onPointerDown}\n           @keydown=${this._onKeyDown}\n           @keyup=${this._onKeyUp}\n           @blur=${() => this._pressedKeys.clear()}>\n        ${this.showGrid ? html`<div class=\"xy-pad-grid\"></div>` : ``}\n        <div class=\"xy-pad-marker\"></div>\n        <div class=\"xy-pad-label-x\">${this.xLabel}</div>\n        <div class=\"xy-pad-label-y\">${this.yLabel}</div>\n      </div>\n    `;\n  }\n}\n\nexport type XyPadInputDetail = {\n  readonly x: number;\n  readonly y: number;\n};\n\nexport type XyPadInputEvent = CustomEvent<XyPadInputDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-xy-pad': XyPad;\n  }\n}\n\nexport interface XyPadEventMap {\n  input: XyPadInputEvent;\n  change: XyPadInputEvent;\n}\n\nexport interface XyPad {\n  addEventListener: (<K extends keyof XyPadEventMap>(\n    type: K,\n    listener: (this: XyPad, event: XyPadEventMap[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":"xy-pad.js","names":["customElement"],"sources":["../src/xy-pad/xy-pad.ts"],"sourcesContent":["/* eslint-disable ts/no-unsafe-declaration-merging */\nimport type { PropertyValues } from 'lit';\nimport type { WheelDirection } from '../mixins/wheel-nudge.js';\n/**\n * <x-xy-pad> — 2D touch-friendly XY pad for controlling two parameters.\n *\n * Mouse wheel: up = increase Y, down = decrease Y (X is unaffected). Same step\n * math as keyboard `ArrowUp`/`ArrowDown`; Shift halves the step. Pad must have\n * focus by default, or set `lighttouch` to react on hover. See\n * `docs/infra-mousewheel.md`.\n *\n * Generic pad that accepts min/max/value for both axes with configurable labels.\n * Each axis can independently use logarithmic or linear scaling.\n * Y axis is inverted (top = high value).\n *\n * Properties\n *   xMin, xMax, x      – horizontal range and current value\n *   yMin, yMax, y      – vertical range and current value\n *   xScale, yScale     – 'log' (default) or 'linear'\n *   xSnapStep, ySnapStep – snap granularity for pointer and keyboard moves (defaults: 1 / 0.01)\n *   stepX, stepY        – keyboard nudge step size (absolute units). If unset, defaults to 10% of the axis range.\n *                        Distinct from xSnapStep which post-snaps the resulting value.\n *   xLabel, yLabel     – axis labels (displayed in corners)\n *   showCrosshairs      – show X/Y axis lines (default: false)\n *   showGrid            – show background grid (default: false)\n *\n * CSS variables:\n *   --marker-size         – size of the position marker (default: 10cqb)\n *   --crosshair-color     – colour of both crosshair lines (default: surface-hh)\n *   --crosshair-width     – thickness of both crosshair lines (default: 2px)\n *   --crosshair-x-color   – colour of the vertical (X) crosshair line; falls back to --crosshair-color\n *   --crosshair-x-width   – thickness of the vertical (X) crosshair line; falls back to --crosshair-width\n *   --crosshair-y-color   – colour of the horizontal (Y) crosshair line; falls back to --crosshair-color\n *   --crosshair-y-width   – thickness of the horizontal (Y) crosshair line; falls back to --crosshair-width\n *   --grid-color          – colour of grid lines (default: surface-hh)\n *   --grid-width          – thickness of grid lines (default: 1px)\n *   --x-pct               – current X position as unitless number (0–100), set on host so external styles can use it\n *   --y-pct               – current Y position as unitless number (0–100), set on host so external styles can use it\n *   --radius-pct          – distance from center as unitless number (0–100), set on host so external styles can use it\n *   hide-cursor           – boolean, hide cursor during drag and hover (default: false)\n *\n * Events\n *   input – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires continuously during drag\n *   change – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires when drag ends\n *\n * Methods\n *   getRelativeX() – returns X position as 0–1 fraction\n *   getRelativeY() – returns Y position as 0–1 fraction\n *   getPolar() – returns { radius: number, angle: number } where radius is 0–1 and angle is in radians (0 to 2π, 0 = right, clockwise)\n */\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { resolveAxisStep } from '../keyboard.js';\nimport { WheelNudgeMixin } from '../mixins/wheel-nudge.js';\nimport { themeFallbacks } from '../styles/fallbacks.js';\nimport { prominenceStyles } from '../styles/prominence.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\n// ---------------------------------------------------------------------------\n// Scale helpers — log or linear, selected per-axis\n// ---------------------------------------------------------------------------\n\nfunction valueToFrac(value: number, min: number, max: number, scale: string): number {\n  if (scale === `linear`)\n    return (value - min) / (max - min);\n  return Math.log(value / min) / Math.log(max / min);\n}\n\nfunction fracToValue(frac: number, min: number, max: number, scale: string): number {\n  if (scale === `linear`)\n    return min + frac * (max - min);\n  return min * (max / min) ** frac;\n}\n\nfunction quantise(value: number, min: number, max: number, stops?: number): number {\n  if (!stops || stops <= 1)\n    return value;\n  const range = max - min;\n  const step = range / stops;\n  return Math.round((value - min) / step) * step + min;\n}\n\n@customElement(`ixfx-xy-pad`)\nexport class XyPad extends WheelNudgeMixin(LitElement) {\n  static override styles = [themeFallbacks, prominenceStyles, css`\n    :host {\n      display: block;\n      width: 200px;\n      height: 200px;\n      touch-action: none;\n      user-select: none;\n      container-type: size;\n      --marker-size: 10cqb;\n      --crosshair-color: var(--surface-6);\n      --crosshair-width: 2px;\n      --crosshair-x-color: var(--crosshair-color);\n      --crosshair-x-width: var(--crosshair-width);\n      --crosshair-y-color: var(--crosshair-color);\n      --crosshair-y-width: var(--crosshair-width);\n      --grid-color: var(--surface-6);\n      --grid-width: 1px;\n      --_space-s: var(--space-s, 4px);\n      --_space-m: var(--space-m, 8px);\n    }\n    .xy-pad-area {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      background: var(--xy-pad-bg, var(--surface-3));\n      border: var(--border);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-shadow: var(--deboss-3);\n      cursor: var(--cursor-display, crosshair);\n    }\n    :host([dragging]) .xy-pad-area {\n      cursor: none;\n    }\n\n    .xy-pad-area:focus {\n      outline: none;\n    }\n\n    .xy-pad-area:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n    .xy-pad-area::before,\n    .xy-pad-area::after {\n      content: '';\n      position: absolute;\n      pointer-events: none;\n      opacity: var(--show-crosshairs, 0);\n    }\n    :host([show-crosshairs]) {\n      --show-crosshairs: 1;\n    }\n    .xy-pad-area::before {\n      left: 0;\n      right: 0;\n      top: calc(100% - var(--y-pct, 50) * 1%);\n      height: var(--crosshair-y-width);\n      background: var(--crosshair-y-color);\n    }\n    .xy-pad-area::after {\n      top: 0;\n      bottom: 0;\n      left: calc(var(--x-pct, 50) * 1%);\n      width: var(--crosshair-x-width);\n      background: var(--crosshair-x-color);\n    }\n\n    .xy-pad-grid {\n      position: absolute;\n      inset: 0;\n      background-image:\n        linear-gradient(to right, var(--grid-color) var(--grid-width), transparent var(--grid-width)),\n        linear-gradient(to bottom, var(--grid-color) var(--grid-width), transparent var(--grid-width));\n      background-size: 10cqb 10cqb;\n      pointer-events: none;\n      opacity: var(--show-grid, 0);\n    }\n    :host([show-grid]) {\n      --show-grid: 1;\n    }\n    \n    .xy-pad-marker {\n      position: absolute;\n      width: var(--marker-size, 10cqb);\n      height: var(--marker-size, 10cqb);\n      border-radius: 50%;\n      background: var(--surface-2-accent, var(--accent));\n      top: calc(100% - var(--y-pct, 50) * 1%);\n      left: calc(var(--x-pct, 50) * 1%);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n      z-index: 2;\n    }\n    .xy-pad-label-x {\n      position: absolute;\n      bottom: var(--_space-s);\n      color: var(--surface-muted-text);\n      font-size: var(--text-s, 12px);\n      pointer-events: none;\n      width: 100%;\n      text-align: center;\n    }\n    .xy-pad-label-y {\n      position: absolute;\n      top: var(--_space-s);\n      left: var(--_space-m);\n      color: var(--surface-muted-text);\n      font-size: var(--text-s, 12px);\n      pointer-events: none;\n      writing-mode: sideways-lr;\n      height:100%;\n      text-align:center;\n    }\n  `];\n\n  @property({ type: Number }) xMin = 1;\n  @property({ type: Number }) xMax = 100;\n  @property({ type: Number }) x = 50;\n\n  @property({ type: Number }) yMin = 1;\n  @property({ type: Number }) yMax = 100;\n  @property({ type: Number }) y = 50;\n\n  @property({ type: String }) xScale = `linear`;\n  @property({ type: String }) yScale = `linear`;\n  @property({ type: Number, attribute: `x-snap-step` }) xSnapStep?: number;\n  @property({ type: Number, attribute: `y-snap-step` }) ySnapStep?: number;\n  /** Explicit keyboard nudge step for X axis (absolute units). Overrides the 10% default. */\n  @property({ type: Number, attribute: `step-x` }) stepX?: number;\n  /** Explicit keyboard nudge step for Y axis (absolute units). Overrides the 10% default. */\n  @property({ type: Number, attribute: `step-y` }) stepY?: number;\n\n  @property({ type: String }) xLabel = `X`;\n  @property({ type: String }) yLabel = `Y`;\n\n  @property({ type: Boolean, reflect: true, attribute: `show-crosshairs` }) showCrosshairs = false;\n  @property({ type: Boolean, reflect: true, attribute: `show-grid` }) showGrid = false;\n  @property({ type: Boolean, reflect: true, attribute: `hide-cursor` }) hideCursor = false;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Number of quantised stops for both axes. Overridden by stops-x/stops-y if set. */\n  @property({ type: Number }) stops?: number;\n\n  /** Number of quantised stops for X axis. If set, overrides the stops setting for X. */\n  @property({ type: Number, attribute: `stops-x` }) stopsX?: number;\n\n  /** Number of quantised stops for Y axis. If set, overrides the stops setting for Y. */\n  @property({ type: Number, attribute: `stops-y` }) stopsY?: number;\n\n  private _dragging = false;\n  private _dragStartX = 0;\n  private _dragStartY = 0;\n  private _pressedKeys = new Set<string>();\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this.disabled)\n      return;\n    if ([`ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`].includes(e.key)) {\n      e.preventDefault();\n      this._pressedKeys.add(e.key);\n      this._handleKeyboardMove(e.shiftKey);\n    } else if (e.key === `Home` || e.key === `End`) {\n      e.preventDefault();\n      const newX = e.key === `Home` ? this.xMin : this.xMax;\n      const newY = e.key === `Home` ? this.yMin : this.yMax;\n      if (newX !== this.x || newY !== this.y) {\n        this.x = newX;\n        this.y = newY;\n        this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n          detail: { x: this.x, y: this.y },\n          bubbles: true,\n          composed: true,\n        }));\n      }\n    }\n  };\n\n  private _onKeyUp = (e: KeyboardEvent): void => {\n    this._pressedKeys.delete(e.key);\n  };\n\n  private _handleKeyboardMove = (shiftKey: boolean): void => {\n    const xRange = this.xMax - this.xMin;\n    const yRange = this.yMax - this.yMin;\n    const effectiveStopsX = this.stopsX ?? this.stops;\n    const effectiveStopsY = this.stopsY ?? this.stops;\n\n    const xStep = resolveAxisStep(xRange, effectiveStopsX, this.stepX, shiftKey);\n    const yStep = resolveAxisStep(yRange, effectiveStopsY, this.stepY, shiftKey);\n\n    let newX = this.x;\n    let newY = this.y;\n\n    if (this._pressedKeys.has(`ArrowLeft`)) {\n      newX = Math.max(this.xMin, this.x - xStep);\n    }\n    if (this._pressedKeys.has(`ArrowRight`)) {\n      newX = Math.min(this.xMax, this.x + xStep);\n    }\n    if (this._pressedKeys.has(`ArrowUp`)) {\n      newY = Math.min(this.yMax, this.y + yStep);\n    }\n    if (this._pressedKeys.has(`ArrowDown`)) {\n      newY = Math.max(this.yMin, this.y - yStep);\n    }\n\n    if (newX !== this.x || newY !== this.y) {\n      let finalX = (this.xSnapStep && this.xSnapStep > 0) ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;\n      let finalY = (this.ySnapStep && this.ySnapStep > 0) ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;\n\n      finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);\n      finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);\n\n      this.x = finalX;\n      this.y = finalY;\n      this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n        detail: { x: this.x, y: this.y },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  /**\n   * Apply a Y-axis nudge by direction. Wheel affects Y only (matches the\n   * keyboard `ArrowUp`/`ArrowDown` semantic per `plans/mousewheel.md`).\n   */\n  private _stepYByDelta(direction: 1 | -1, shiftKey: boolean): void {\n    const yRange = this.yMax - this.yMin;\n    const effectiveStopsY = this.stopsY ?? this.stops;\n    const yStep = resolveAxisStep(yRange, effectiveStopsY, this.stepY, shiftKey);\n\n    const candidate = direction === 1\n      ? Math.min(this.yMax, this.y + yStep)\n      : Math.max(this.yMin, this.y - yStep);\n    if (candidate === this.y)\n      return;\n\n    let finalY = (this.ySnapStep && this.ySnapStep > 0)\n      ? Math.round(candidate / this.ySnapStep) * this.ySnapStep\n      : candidate;\n    finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);\n    if (finalY === this.y)\n      return;\n\n    this.y = finalY;\n    this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n      detail: { x: this.x, y: this.y },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  // Wheel handler — installed by WheelNudgeMixin on the host.\n  override _applyWheelDelta(direction: WheelDirection, event: WheelEvent): void {\n    this._stepYByDelta(direction, event.shiftKey);\n  }\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    e.preventDefault();\n    const pad = this.renderRoot.querySelector(`.xy-pad-area`) as HTMLElement | undefined;\n    pad?.focus();\n    if (pad)\n      pad.setPointerCapture(e.pointerId);\n    this._dragging = true;\n    this._dragStartX = this.x;\n    this._dragStartY = this.y;\n    this.setAttribute(`dragging`, ``);\n    this._updateFromPointer(e);\n    globalThis.addEventListener(`pointermove`, this._onPointerMove);\n    globalThis.addEventListener(`pointerup`, this._onPointerUp);\n  };\n\n  private _onPointerMove = (e: PointerEvent): void => {\n    if (!this._dragging)\n      return;\n    e.preventDefault();\n    this._updateFromPointer(e);\n  };\n\n  private _onPointerUp = (): void => {\n    const hasChanged = this.x !== this._dragStartX || this.y !== this._dragStartY;\n    this._dragging = false;\n    this.removeAttribute(`dragging`);\n    globalThis.removeEventListener(`pointermove`, this._onPointerMove);\n    globalThis.removeEventListener(`pointerup`, this._onPointerUp);\n    if (hasChanged) {\n      this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`change`, {\n        detail: { x: this.x, y: this.y },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  private _updateFromPointer(e: PointerEvent): void {\n    const pad = this.renderRoot.querySelector(`.xy-pad-area`);\n    if (!pad)\n      return;\n\n    const rect = pad.getBoundingClientRect();\n    const xFrac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n    const yFrac = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));\n\n    const newX = fracToValue(xFrac, this.xMin, this.xMax, this.xScale);\n    const newY = fracToValue(yFrac, this.yMin, this.yMax, this.yScale);\n\n    let finalX = (this.xSnapStep && this.xSnapStep > 0) ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;\n    let finalY = (this.ySnapStep && this.ySnapStep > 0) ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;\n\n    const effectiveStopsX = this.stopsX ?? this.stops;\n    const effectiveStopsY = this.stopsY ?? this.stops;\n\n    finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);\n    finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);\n\n    this.x = finalX;\n    this.y = finalY;\n\n    this.dispatchEvent(new CustomEvent<XyPadInputDetail>(`input`, {\n      detail: { x: this.x, y: this.y },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _setPctVars(): void {\n    const cx = Math.max(this.xMin, Math.min(this.xMax, this.x));\n    const cy = Math.max(this.yMin, Math.min(this.yMax, this.y));\n    const xPct = valueToFrac(cx, this.xMin, this.xMax, this.xScale) * 100;\n    const yPct = valueToFrac(cy, this.yMin, this.yMax, this.yScale) * 100;\n    this.style.setProperty(`--x-pct`, `${xPct}`);\n    this.style.setProperty(`--y-pct`, `${yPct}`);\n\n    // Calculate radius from center (50, 50) - distance as 0-100\n    const dx = xPct - 50;\n    const dy = yPct - 50;\n    const radiusPct = Math.sqrt(dx * dx + dy * dy);\n    this.style.setProperty(`--radius-pct`, `${radiusPct}`);\n  }\n\n  // ── Public API ─────────────────────────────────────────────────────────────\n\n  /**\n   * Returns X position as a 0–1 fraction.\n   */\n  getRelativeX(): number {\n    const cx = Math.max(this.xMin, Math.min(this.xMax, this.x));\n    return valueToFrac(cx, this.xMin, this.xMax, this.xScale);\n  }\n\n  /**\n   * Returns Y position as a 0–1 fraction.\n   */\n  getRelativeY(): number {\n    const cy = Math.max(this.yMin, Math.min(this.yMax, this.y));\n    return valueToFrac(cy, this.yMin, this.yMax, this.yScale);\n  }\n\n  /**\n   * Returns polar coordinates.\n   * - radius: 0–1 distance from center\n   * - angle: radians, 0 = right, clockwise (0 to 2π)\n   */\n  getPolar(): { radius: number; angle: number } {\n    const xRel = this.getRelativeX() - 0.5; // -0.5 to 0.5\n    const yRel = this.getRelativeY() - 0.5; // -0.5 to 0.5\n    const radius = Math.sqrt(xRel * xRel + yRel * yRel) * 2; // 0 to 1\n    let angle = Math.atan2(yRel, xRel); // -π to π\n    if (angle < 0)\n      angle += 2 * Math.PI; // 0 to 2π\n    return { radius, angle };\n  }\n\n  override updated(_changed: PropertyValues): void {\n    super.updated(_changed);\n    this._setPctVars();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._onPointerUp();\n    this._pressedKeys.clear();\n  }\n\n  override render(): ReturnType<typeof html> {\n    return html`\n      <div class=\"xy-pad-area\"\n           tabindex=${this.disabled ? -1 : 0}\n           @pointerdown=${this._onPointerDown}\n           @keydown=${this._onKeyDown}\n           @keyup=${this._onKeyUp}\n           @blur=${() => this._pressedKeys.clear()}>\n        ${this.showGrid ? html`<div class=\"xy-pad-grid\"></div>` : ``}\n        <div class=\"xy-pad-marker\"></div>\n        <div class=\"xy-pad-label-x\">${this.xLabel}</div>\n        <div class=\"xy-pad-label-y\">${this.yLabel}</div>\n      </div>\n    `;\n  }\n}\n\nexport type XyPadInputDetail = {\n  readonly x: number;\n  readonly y: number;\n};\n\nexport type XyPadInputEvent = CustomEvent<XyPadInputDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-xy-pad': XyPad;\n  }\n}\n\nexport interface XyPadEventMap {\n  input: XyPadInputEvent;\n  change: XyPadInputEvent;\n}\n\nexport interface XyPad {\n  addEventListener: (<K extends keyof XyPadEventMap>(\n    type: K,\n    listener: (this: XyPad, event: XyPadEventMap[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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"}

package/docs-user/ac-token.md

@@ -41,9 +41,15 @@ el.addEventListener('ac-token-change', e => {
 | `strict`              | `boolean`                         | `false`     | When true, only suggestions from the popup can be committed. Free-form typed text is ignored. |
 | `cacheSize`           | `number`                          | `20`        | LRU cache size for provider results.                                |
 | `debounceMs`          | `number`                          | `150`       | Debounce delay in ms before invoking the provider after a keystroke.|
-| `tokens` (property)   | `readonly AcTokenItem[]`          | `[]`        | Get or set the full token list programmatically.                    |
+| `tokens` (property)   | `readonly AcTokenItem[]`          | `[]`        | Get or set the full token list programmatically. Setting it dispatches `ac-token-change`, same as a user edit — beware feedback loops if a parent updates this binding from its own `ac-token-change` handler. Use `setTokens()` to avoid that. |
 | `value` (property, read-only) | `string`                | —           | All committed token labels joined with `, `.                        |
 
+### Methods
+
+| Method | Description |
+|--------|-------------|
+| `setTokens(tokens)` | Set the token list programmatically without dispatching `ac-token-change`. Prefer this over the `tokens` property for initialisation or any other update driven by the component's own state. |
+
 ---
 
 ### Events

package/docs-user/colour-picker.md

@@ -188,11 +188,11 @@ Picker sizes (width × height):
 | `large`   | 200 × 180 px |
 | `huge`    | 290 × 240 px |
 
-### Getters
+### Getters/setters
 
-| Getter  | Returns  | Description |
-|---------|----------|-------------|
-| `value` | `string` | Committed colour as a CSS `oklch()` string |
+| Property | Type                    | Description |
+|----------|-------------------------|-------------|
+| `value`  | `string` (get) / `Colour.Colourish` (set) | Committed colour. Reading returns a CSS `oklch()` string; assigning accepts any ixfx-compatible colour format (equivalent to calling `setColour()`) — including via a Lit property binding, e.g. `.value=${someColour}`. |
 
 ### Methods
 
@@ -200,6 +200,10 @@ Picker sizes (width × height):
 
 Set the committed colour from any ixfx-compatible format. The swatch updates immediately. The inner picker reflects the new colour the next time the popover opens.
 
+### Limitations
+
+The popover is positioned relative to the swatch using CSS anchor positioning (`anchor-name`/`position-anchor`). Chrome does not resolve anchor positioning for elements inside an SVG `<foreignObject>` — if you embed this component there, the popover will render unanchored at the top-left of the viewport instead of next to the swatch. Workaround: keep the swatch as a plain SVG element and render this component (or just the picker) in a fixed-positioned HTML overlay positioned via `getBoundingClientRect()` on your own swatch element.
+
 ```js
 popup.setColour('#3498db');
 popup.setColour({ l: 0.5, c: 0.25, h: 30 });

package/docs-user/crumbs.md

@@ -36,6 +36,8 @@ nav.model = {
 | `caretEmbedded`       | `boolean`                      | `true`      | Embed carets within segments                    |
 | `hideRoot`            | `boolean`                      | `false`     | Hide the root node                               |
 | `inputMode`           | `string`                       | `''`        | Input mode for styling (`'keyboard'`, etc.)      |
+| `padEnding`           | `boolean`                      | `false`     | Pad trailing space to enable left-align scroll   |
+| `withUp`              | `boolean`                      | `false`     | Show an Up button to navigate to parent         |
 
 ### Events
 
@@ -85,6 +87,8 @@ Variables use the bridge pattern: internal `--crumb-*` variables fall back to ge
 | `exclusivity` | `TreeExclusivity` | `'none'` | Selection exclusivity mode. |
 | `selection-filter` | `TreeSelectionFilter` | `'leaf'` | Which nodes can be selected. |
 | `input-mode` | `string` | `''` | Input mode for styling (`'keyboard'`, etc.). |
+| `pad-ending` | `boolean` | `false` | Pad trailing space so the selected item can scroll to the far left. |
+| `with-up` | `boolean` | `false` | Show an Up button to navigate to the parent node. |
 
 ### CSS parts
 

package/docs-user/menu.md

@@ -206,7 +206,7 @@ container.registry = registry;
 ```html
 <!-- label and icon resolved from registry -->
 <ixfx-menu-item command="bold"></ixfx-menu-item>
-<ixfx-menu-item command="italic"></ixfx-item>
+<ixfx-menu-item command="italic"></ixfx-menu-item>
 ```
 
 ### Keyboard Shortcuts
@@ -226,10 +226,12 @@ trigger.keyboardManager = keyboardManager;
 
 ### CSS Custom Properties
 
+`ixfx-menu-item` and `ixfx-menu-check-item` use the generic "Item States" variable family documented in `user-theming.md` (`--item-bg`, `--item-bg-tickled`, `--item-border`, `--item-border-tickled`, `--item-text-tickled`, etc.) — the same family used by other list/item components such as `ixfx-vertical-list` and `ixfx-select-horiz`.
+
+The trigger button and menu bar additionally expose a couple of underscore-prefixed variables — the underscore marks these as narrowly-scoped internal tuning knobs (unlike the generic `--item-*` family above, they have no effect outside the trigger/bar):
+
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--_item-hover-bg` | `var(--surface-6)` | Background on mouse hover |
-| `--_item-focused-bg` | `var(--surface-6)` | Background when keyboard-focused (tickled) |
 | `--_trigger-hover-bg` | `var(--surface-4)` | Trigger button hover background |
 | `--_trigger-hover-opacity` | `1` | Trigger button hover opacity |
 
@@ -245,10 +247,9 @@ The popup surface uses these from `popupSurfaceStyles`:
 ### Custom Item Background Colors
 
 ```css
-/* Apply to ixfx-menu-container */
+/* Apply to ixfx-menu-container, or globally on :root */
 ixfx-menu-container {
-  --_item-hover-bg: #ffdddd;
-  --_item-focused-bg: #ffcccc;
+  --item-bg-tickled: #ffcccc;
 }
 ```
 
@@ -280,10 +281,12 @@ ixfx-menu-item[command="delete"] .item {
 
 | Event | Detail | Description |
 |-------|--------|-------------|
-| `command` | `{ command, args, checked? }` | Fired by `ixfx-menu-item`, `ixfx-menu-check-item` |
+| `command` | `{ command, args }` | Fired by `ixfx-menu-item` |
+| `command` | `{ command, args, checked }` | Fired by `ixfx-menu-check-item` |
 | `radio-select` | `{ value }` | Fired by `ixfx-menu-radio-item` |
 | `radio-change` | `{ name, value }` | Fired by `ixfx-menu-radio-group` when selection changes |
-| `menu-command` | `{ command, value?, checked? }` | Bubbles up from `ixfx-menu-trigger` |
+| `menu-command` | `{ command, args, checked }` | Bubbles up from `ixfx-menu-trigger`, re-dispatching a `command`/`checked` event's detail verbatim — `args` is always present, `checked` only from a check-item |
+| `menu-command` | `{ command, value }` | Bubbles up from `ixfx-menu-trigger`, built from a `radio-change` event — `value` only appears on this radio-group path, never alongside `args`/`checked` |
 
 ## `ixfx-menu-command-controller`
 

package/docs-user/split-layout.md

@@ -1,6 +1,6 @@
 # Split Layout
 
-A Lit web component that lays out two elements within a container with a resize handle to adjust their proportions.
+A Lit web component that lays out two elements within a container with a split bar to adjust their proportions.
 
 ---
 
@@ -32,10 +32,15 @@ A Lit web component that lays out two elements within a container with a resize
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--handle-size` | `2px` | Width/height of the resize handle |
-| `--handle-colour` | `var(--surface-5)` | Colour of the resize handle |
+| `--handle-size` | `2px` | Width/height of the split bar |
+| `--handle-colour` | `transparent` | Colour of the split bar |
 | `--handle-hover-colour` | `var(--surface-6)` | Colour of handle when hovering |
 | `--handle-active-colour` | `var(--accent)` | Colour of handle when being dragged |
+| `--handle-bg` | `var(--handle-colour)` | Background colour of the grab handle rectangle |
+| `--handle-grab-colour` | `var(--surface-muted-text)` | Colour of the grab handle dots |
+| `--handle-grab-dot-size` | `3px` | Diameter of each grab handle dot |
+| `--handle-grab-size` | `16px` | Length of the grab handle |
+| `--handle-grab-thickness` | `8px` | Thickness of the grab handle |
 
 ### Events
 
@@ -79,7 +84,7 @@ A Lit web component that lays out two elements within a container with a resize
 
 ## Collapsible Panels
 
-When `collapsible` is set, dragging a resize handle to the edge collapses that panel. The other panel expands to fill the space. Dragging away from the edge uncollapses the panel.
+When `collapsible` is set, dragging a split bar to the edge collapses that panel. The other panel expands to fill the space. Dragging away from the edge uncollapses the panel.
 
 ```html
 <ixfx-split-layout collapsible layout="horizontal" style="width: 100%; height: 400px;">
@@ -125,7 +130,7 @@ Use `minSizeA`, `maxSizeA`, `minSizeB`, and `maxSizeB` to constrain panel sizes:
 
 ## Nested Splits with Two-Way Corner Resize
 
-When a `ixfx-split-layout` is nested inside slot A of an outer split, a corner zone appears at the intersection of the two resize handles. This enables simultaneous resize of both splits.
+When a `ixfx-split-layout` is nested inside slot A of an outer split, a corner zone appears at the intersection of the two split bars. This enables simultaneous resize of both splits.
 
 ```
 ┌─────────────────┬────────────┐
@@ -163,7 +168,7 @@ When a `ixfx-split-layout` is nested inside slot A of an outer split, a corner z
 - **Visual indicator**: A small magenta circle (12px) appears at the intersection point
 - **Cursor change**: Shows `nwse-resize` cursor when hovering over the corner zone (for vertical-outer/horizontal-inner splits)
 - **Two-way resize**: Dragging the corner zone adjusts both the outer vertical split and the inner horizontal split simultaneously
-- **Position tracking**: The corner zone follows the resize handles as they move, staying at their intersection
+- **Position tracking**: The corner zone follows the split bars as they move, staying at their intersection
 
 ---
 
@@ -180,6 +185,23 @@ ixfx-split-layout {
 }
 ```
 
+### Grab Handle
+
+When `--handle-size` is greater than `5px`, a grab handle appears in the center of the split bar. The grab handle consists of a rectangle with three dots arranged perpendicular to the split direction:
+
+- **Vertical split**: Rectangle with 3 vertical dots (⋮)
+- **Horizontal split**: Rectangle with 3 horizontal dots (⁝)
+
+```css
+ixfx-split-layout {
+  --handle-bg: var(--handle-colour);         /* Rectangle background */
+  --handle-grab-colour: var(--surface-muted-text); /* Dot colour */
+  --handle-grab-dot-size: 3px;               /* Dot diameter */
+  --handle-grab-size: 16px;                 /* Rectangle length */
+  --handle-grab-thickness: 8px;             /* Rectangle thickness */
+}
+```
+
 ### Hide Collapsed Panels Completely
 
 ```css
@@ -228,5 +250,5 @@ console.log('Is B collapsed?', split.collapsedB);
 - Slots use `display: block` and `overflow: hidden` by default
 - When no size is specified for a panel, it defaults to `auto` (fill remaining space)
 - When both sizes are empty, both default to `50%`
-- The resize handle is `flex-shrink: 0` to prevent it from collapsing
+- The split bar is `flex-shrink: 0` to prevent it from collapsing
 - Nested splits detect their parent through slot assignment and automatically enable corner resize

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.5.18",
+  "version": "0.5.20",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -41,6 +41,8 @@
     "rebuild": "rm -rf dist bundle && pnpm run build",
     "publish-prepare": "pnpm run rebuild && pnpm run typecheck && pnpm run lint",
     "preview": "vite preview",
+    "build:demo": "vite build --config vite.static.config.js",
+    "deploy:demo": "cd ixfxcomponents-demo && pnpm run deploy",
     "knip": "knip --config ./config/knip.json"
   },
   "dependencies": {

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

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