stimeo-ui 0.2.0 → 0.3.0

package/dist/controllers/color_picker_controller.js

@@ -0,0 +1,252 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/color_picker_controller.ts
+
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function logicalArrowKey(key, element) {
+  if (key !== "ArrowRight" && key !== "ArrowLeft") return key;
+  if (!isRtl(element)) return key;
+  return key === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+}
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
+// src/utils/coerce.ts
+function toFiniteNumber(raw) {
+  if (raw === null || raw === void 0 || raw === "") return null;
+  const value = typeof raw === "number" ? raw : Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+
+// src/controllers/color_picker_controller.ts
+var COLOR_PROPERTY = "--stimeo-color";
+var CHANNEL_RANGE = {
+  hue: [0, 360],
+  saturation: [0, 100],
+  lightness: [0, 100],
+  alpha: [0, 100]
+};
+var ColorPickerController = class extends Controller {
+  static targets = ["slider", "hex", "preview", "field"];
+  static values = {
+    value: { type: String, default: "#000000" },
+    alpha: { type: Boolean, default: false },
+    logicalTrack: { type: Boolean, default: false }
+  };
+  static actions = ["onHexInput", "onKeydown", "onPointerDown"];
+  static events = ["change"];
+  /** Whether the consumer declared a mirroring track and the direction mirrors it. */
+  get #mirrored() {
+    return this.logicalTrackValue && isRtl(this.element);
+  }
+  /** The current color in the editing model. */
+  #color = { hue: 0, saturation: 0, lightness: 0, alpha: 100 };
+  /** Aborts in-progress pointer-drag listeners on drag end / teardown. */
+  #dragAbort = null;
+  /** Seeds the model from the initial hex value and renders every surface. */
+  connect() {
+    const parsed = hexToHsla(this.valueValue);
+    if (parsed) this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+    this.#render();
+  }
+  /** Cancels any active pointer drag so document listeners never leak. */
+  disconnect() {
+    this.#dragAbort?.abort();
+    this.#dragAbort = null;
+  }
+  /** Keyboard stepping on the focused channel slider (APG Slider model). */
+  onKeydown(event) {
+    if (isReservedArrowChord(event)) return;
+    const slider = event.currentTarget;
+    const channel = this.#channelOf(slider);
+    if (!channel) return;
+    const [min, max] = this.#rangeOf(slider, channel);
+    const value = this.#color[channel];
+    let next = null;
+    switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = value + 1;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = value - 1;
+        break;
+      case "PageUp":
+        next = value + 10;
+        break;
+      case "PageDown":
+        next = value - 10;
+        break;
+      case "Home":
+        next = min;
+        break;
+      case "End":
+        next = max;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    this.#setChannel(channel, next, min, max);
+  }
+  /** Begins a pointer drag on a channel slider and tracks movement. */
+  onPointerDown(event) {
+    const slider = event.currentTarget;
+    const channel = this.#channelOf(slider);
+    if (!channel) return;
+    event.preventDefault();
+    slider.focus();
+    const [min, max] = this.#rangeOf(slider, channel);
+    const mirrored = this.#mirrored;
+    const update = (clientX) => {
+      const rect = slider.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const offset = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+      const fraction = mirrored ? 1 - offset : offset;
+      this.#setChannel(channel, min + fraction * (max - min), min, max);
+    };
+    update(event.clientX);
+    this.#dragAbort?.abort();
+    const abort = new AbortController();
+    this.#dragAbort = abort;
+    const onMove = (move) => update(move.clientX);
+    const onUp = () => {
+      abort.abort();
+      this.#dragAbort = null;
+    };
+    document.addEventListener("pointermove", onMove, { signal: abort.signal });
+    document.addEventListener("pointerup", onUp, { signal: abort.signal });
+    document.addEventListener("pointercancel", onUp, { signal: abort.signal });
+  }
+  /** Parses the hex input on confirm and syncs every channel + surface. */
+  onHexInput() {
+    if (!this.hasHexTarget) return;
+    const parsed = hexToHsla(this.hexTarget.value);
+    if (!parsed) {
+      this.hexTarget.value = this.#hexString();
+      return;
+    }
+    this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+    this.#render();
+  }
+  /** Clamps and snaps one channel to an integer, then re-renders + emits change. */
+  #setChannel(channel, raw, min, max) {
+    this.#color[channel] = Math.round(Math.min(max, Math.max(min, raw)));
+    this.#render();
+  }
+  /** Reflects the model onto sliders, the hex input, preview, and form field. */
+  #render() {
+    for (const slider of this.sliderTargets) {
+      const channel = this.#channelOf(slider);
+      if (!channel) continue;
+      const value = this.#color[channel];
+      slider.setAttribute("aria-valuenow", String(value));
+      slider.setAttribute("aria-valuetext", valueText(channel, value));
+    }
+    const hex = this.#hexString();
+    if (this.hasHexTarget) this.hexTarget.value = hex;
+    for (const field of this.fieldTargets) field.value = hex;
+    for (const preview of this.previewTargets) preview.style.setProperty(COLOR_PROPERTY, hex);
+    this.element.style.setProperty(COLOR_PROPERTY, hex);
+    const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);
+    this.dispatch("change", {
+      detail: { value: hex, rgba: { ...rgb, a: this.#color.alpha / 100 } }
+    });
+  }
+  /** The current color as `#RRGGBB`, or `#RRGGBBAA` when alpha is enabled. */
+  #hexString() {
+    const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);
+    const base = `#${hex2(rgb.r)}${hex2(rgb.g)}${hex2(rgb.b)}`;
+    if (!this.alphaValue) return base;
+    return `${base}${hex2(Math.round(this.#color.alpha / 100 * 255))}`;
+  }
+  /** Reads a slider's `data-channel`, if it is a known channel. */
+  #channelOf(slider) {
+    const channel = slider.getAttribute("data-channel");
+    return channel && channel in CHANNEL_RANGE ? channel : null;
+  }
+  /**
+   * A slider's `[min, max]` from aria-valuemin/max, falling back per channel.
+   * An absent or blank attribute means "not authored", not zero — coercing it to
+   * a number would pin the channel at `0` and make the per-channel default
+   * unreachable.
+   */
+  #rangeOf(slider, channel) {
+    const [defMin, defMax] = CHANNEL_RANGE[channel];
+    return [
+      toFiniteNumber(slider.getAttribute("aria-valuemin")) ?? defMin,
+      toFiniteNumber(slider.getAttribute("aria-valuemax")) ?? defMax
+    ];
+  }
+};
+function valueText(channel, value) {
+  const label = channel.charAt(0).toUpperCase() + channel.slice(1);
+  const unit = channel === "hue" ? "degrees" : "percent";
+  return `${label} ${value} ${unit}`;
+}
+function hex2(value) {
+  return Math.round(Math.min(255, Math.max(0, value))).toString(16).padStart(2, "0");
+}
+function hslToRgb(h, s, l) {
+  const sat = s / 100;
+  const light = l / 100;
+  const c = (1 - Math.abs(2 * light - 1)) * sat;
+  const hp = (h % 360 + 360) % 360 / 60;
+  const x = c * (1 - Math.abs(hp % 2 - 1));
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (hp >= 0 && hp < 1) [r, g, b] = [c, x, 0];
+  else if (hp < 2) [r, g, b] = [x, c, 0];
+  else if (hp < 3) [r, g, b] = [0, c, x];
+  else if (hp < 4) [r, g, b] = [0, x, c];
+  else if (hp < 5) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  const m = light - c / 2;
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((b + m) * 255)
+  };
+}
+function rgbToHsl(r, g, b) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const delta = max - min;
+  const l = (max + min) / 2;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === rn) h = (gn - bn) / delta % 6;
+    else if (max === gn) h = (bn - rn) / delta + 2;
+    else h = (rn - gn) / delta + 4;
+    h = (h * 60 + 360) % 360;
+  }
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+function hexToHsla(input) {
+  const hex = input.trim().replace(/^#/, "");
+  if (!/^(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(hex)) return null;
+  const full = hex.length <= 4 ? hex.split("").map((char) => char + char).join("") : hex;
+  const r = Number.parseInt(full.slice(0, 2), 16);
+  const g = Number.parseInt(full.slice(2, 4), 16);
+  const b = Number.parseInt(full.slice(4, 6), 16);
+  const a = full.length === 8 ? Number.parseInt(full.slice(6, 8), 16) : 255;
+  const { h, s, l } = rgbToHsl(r, g, b);
+  return { hue: h, saturation: s, lightness: l, alpha: Math.round(a / 255 * 100) };
+}
+
+export { ColorPickerController };
+//# sourceMappingURL=color_picker_controller.js.map
+//# sourceMappingURL=color_picker_controller.js.map

package/dist/controllers/color_picker_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/logical_scroll.ts","../../src/utils/arrow_step.ts","../../src/utils/coerce.ts","../../src/controllers/color_picker_controller.ts"],"names":[],"mappings":"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","file":"color_picker_controller.js","sourcesContent":["/** Normalized scroll position and maximum distance on one logical axis. */\nexport interface LogicalScrollMetrics {\n  position: number;\n  max: number;\n}\n\n/**\n * Whether horizontal scrolling on `element` follows right-to-left inline flow.\n *\n * Resolved from the **computed** `direction`, so the authoring contract is the\n * usual `dir=\"rtl\"` (or a stylesheet) on the element or any ancestor.\n *\n * Scope: horizontal writing modes. A vertical writing mode (`writing-mode:\n * vertical-rl`) also inverts the horizontal axis, which this check does not\n * model — vertical writing modes are out of scope for the scroll utilities\n * (their consumers describe axes as horizontal/vertical, not inline/block).\n */\nexport function isRtl(element: Element): boolean {\n  return window.getComputedStyle(element).direction === \"rtl\";\n}\n\n/**\n * Returns scroll distance from the logical start edge.\n *\n * CSSOM View exposes standards-mode RTL horizontal offsets as `0` at the inline\n * start (right) and increasingly negative values toward the inline end (left).\n * The normalized position is always clamped to `[0, max]`, which also absorbs\n * Safari's elastic overscroll values.\n */\nexport function logicalScrollMetrics(\n  element: HTMLElement,\n  horizontal: boolean,\n): LogicalScrollMetrics {\n  const max = Math.max(\n    0,\n    horizontal\n      ? element.scrollWidth - element.clientWidth\n      : element.scrollHeight - element.clientHeight,\n  );\n  const raw = horizontal ? element.scrollLeft : element.scrollTop;\n  const position = horizontal && isRtl(element) ? -raw : raw;\n  return { position: Math.min(max, Math.max(0, position)), max };\n}\n\n/**\n * Converts a logical start/end delta to the physical value accepted by\n * `Element.scrollBy`.\n */\nexport function physicalScrollDelta(\n  element: HTMLElement,\n  horizontal: boolean,\n  logicalDelta: number,\n): number {\n  return horizontal && isRtl(element) ? -logicalDelta : logicalDelta;\n}\n","import { isRtl } from \"./logical_scroll\";\n\n/**\n * Turns an arrow key into a **logical** step: `+1` for \"next\", `-1` for\n * \"previous\", `0` when the key names neither.\n *\n * APG defines the horizontal pair as *next / previous* and says a vertical\n * arrangement swaps in Down/Up for the same meaning — so the pair is one axis's\n * spelling of an order, and the order reverses with the writing direction. Only\n * the horizontal pair reverses. Down/Up name an axis the writing direction does\n * not mirror, and returning them unchanged is the point: many controllers fold\n * both pairs into one branch, where swapping the branches under RTL would flip\n * the vertical axis too — a bug that reads as \"the arrows work\" until someone\n * presses Down.\n *\n * **Direction is read from the element the caller passes, which should be the\n * container that lays the items out** — not the focused child. A child may carry\n * its own `dir` (an LTR input inside an RTL form is ordinary authoring), and\n * probing per handler makes two handlers disagree at the boundary between them.\n *\n * This decides direction only. Whether the axis is even active (an\n * `orientation=\"horizontal\"` widget ignoring Down/Up), how far the step lands,\n * and what wrapping does all stay with the caller.\n *\n * **It encodes the list-order convention: `ArrowDown` is *next*.** Widgets that\n * pair the arrows by *value* instead — `ArrowUp` meaning \"more\", as a rating or a\n * slider does — must not use this, or their vertical axis inverts. Reverse the\n * horizontal pair on its own there.\n *\n * @example\n * ```ts\n * const step = logicalArrowStep(event.key, this.element);\n * if (step === 0) return;\n * this.#roving.setActive(rovingMove(current, length, step, \"wrap\"), { focus: true });\n * ```\n */\nexport function logicalArrowStep(key: string, element: Element): 1 | -1 | 0 {\n  if (key === \"ArrowDown\") return 1;\n  if (key === \"ArrowUp\") return -1;\n  if (key !== \"ArrowRight\" && key !== \"ArrowLeft\") return 0;\n  const forward = isRtl(element) ? \"ArrowLeft\" : \"ArrowRight\";\n  return key === forward ? 1 : -1;\n}\n\n/**\n * Rewrites `key` so an existing LTR-shaped branch keeps working under RTL:\n * `ArrowRight` and `ArrowLeft` trade places, everything else passes through.\n *\n * The alternative — negating a delta — silently breaks handlers whose two\n * horizontal branches are **not mirror images**. A grid that clamps one edge but\n * not the other, or a segmented field guarding `index > 0` on one side and\n * `index < length - 1` on the other, ends up applying the wrong guard to the\n * wrong direction. Swapping the key leaves each branch, guards and all, exactly\n * where its author put it.\n *\n * Same rule as {@link logicalArrowStep} about which element to read: pass the\n * container that lays the items out, not the focused child.\n *\n * @example\n * ```ts\n * switch (logicalArrowKey(event.key, this.element)) {\n *   case \"ArrowLeft\": // \"previous\" — whatever direction that is on screen\n * ```\n */\nexport function logicalArrowKey(key: string, element: Element): string {\n  if (key !== \"ArrowRight\" && key !== \"ArrowLeft\") return key;\n  if (!isRtl(element)) return key;\n  return key === \"ArrowRight\" ? \"ArrowLeft\" : \"ArrowRight\";\n}\n\n/** Modifiers a widget may claim on an arrow key, named for the `allow` list. */\nexport type ArrowModifier = \"alt\" | \"ctrl\" | \"meta\" | \"shift\";\n\n/**\n * True when an arrow key arrived carrying a modifier the widget must leave to\n * the browser: return without calling `preventDefault()` and without moving any\n * state.\n *\n * A bare arrow belongs to the widget; a chorded one usually does not.\n * `Alt`/`Meta` plus a horizontal arrow is history back/forward on every desktop\n * browser, and a widget that swallows it makes the shortcut work or not\n * depending on where focus happens to sit — a coin-flip the user cannot see.\n *\n * `allow` is for the combinations APG assigns to a pattern **and the widget\n * actually implements** — today only Combobox's optional `Alt+Down`/`Alt+Up`.\n * Listing one the widget does not implement defeats the point: the chord then\n * runs the plain-arrow branch, which is exactly what this guard exists to stop.\n * Non-arrow keys return `false`, so chorded letters and\n * `Control+Home`/`Control+End` are untouched.\n *\n * @example\n * ```ts\n * if (isReservedArrowChord(event)) return;\n * ```\n */\nexport function isReservedArrowChord(\n  event: KeyboardEvent,\n  allow: readonly ArrowModifier[] = [],\n): boolean {\n  if (!event.key.startsWith(\"Arrow\")) return false;\n  return (\n    (event.altKey && !allow.includes(\"alt\")) ||\n    (event.ctrlKey && !allow.includes(\"ctrl\")) ||\n    (event.metaKey && !allow.includes(\"meta\")) ||\n    (event.shiftKey && !allow.includes(\"shift\"))\n  );\n}\n","/**\n * Numeric coercion shared by the value-bearing controllers (progress, meter,\n * color-picker).\n *\n * Stimulus already coerces numeric action params to numbers, but a value can also\n * arrive as a string — via a `*:set` CustomEvent `detail`, or an action param\n * whose attribute does not look numeric. Centralizing the parse keeps `setValue`\n * tolerant of either form while rejecting anything that is not a finite number.\n */\n\n/**\n * Coerces `raw` to a finite number, or returns `null` when it is absent, empty,\n * or not parseable. Empty strings are treated as \"no value\" rather than `0`, so a\n * stray blank param cannot silently reset the value.\n */\nexport function toFiniteNumber(raw: number | string | null | undefined): number | null {\n  if (raw === null || raw === undefined || raw === \"\") return null;\n  const value = typeof raw === \"number\" ? raw : Number(raw);\n  return Number.isFinite(value) ? value : null;\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { isReservedArrowChord, logicalArrowKey } from \"../utils/arrow_step\";\nimport { toFiniteNumber } from \"../utils/coerce\";\nimport { isRtl } from \"../utils/logical_scroll\";\n\n/** CSS custom property exposing the current color to consumer CSS. */\nconst COLOR_PROPERTY = \"--stimeo-color\";\n\n/** A color channel slider, identified by its `data-channel` attribute. */\ntype Channel = \"hue\" | \"saturation\" | \"lightness\" | \"alpha\";\n\n/** Default `[min, max]` per channel when the slider omits aria-valuemin/max. */\nconst CHANNEL_RANGE: Record<Channel, [number, number]> = {\n  hue: [0, 360],\n  saturation: [0, 100],\n  lightness: [0, 100],\n  alpha: [0, 100],\n};\n\n/** Internal color model: HSL plus an alpha percentage (0–100). */\ninterface Hsla {\n  hue: number;\n  saturation: number;\n  lightness: number;\n  alpha: number;\n}\n\n/**\n * Headless, accessible **Color Picker** behavior.\n *\n * Markup contract (identifier: `stimeo--color-picker`):\n *   <div data-controller=\"stimeo--color-picker\"\n *        data-stimeo--color-picker-value-value=\"#3366cc\">\n *     <div role=\"slider\" aria-label=\"Hue\" data-channel=\"hue\" tabindex=\"0\"\n *          aria-valuemin=\"0\" aria-valuemax=\"360\" aria-valuenow=\"210\"\n *          data-stimeo--color-picker-target=\"slider\"\n *          data-action=\"keydown->stimeo--color-picker#onKeydown\n *                       pointerdown->stimeo--color-picker#onPointerDown\"></div>\n *     <!-- saturation / lightness / alpha sliders share the same contract -->\n *     <input type=\"text\" aria-label=\"Hex color\"\n *            data-stimeo--color-picker-target=\"hex\"\n *            data-action=\"change->stimeo--color-picker#onHexInput\" />\n *     <div data-stimeo--color-picker-target=\"preview\" aria-hidden=\"true\"></div>\n *     <input type=\"hidden\" data-stimeo--color-picker-target=\"field\" />\n *   </div>\n *\n * Decomposes color selection into independent APG **Slider** channels (hue,\n * saturation, lightness, optional alpha) instead of a 2-D palette, so every\n * adjustment is keyboard- and screen-reader-operable. Each slider exposes\n * `aria-valuenow` and a human-readable `aria-valuetext` (e.g. \"Hue 210 degrees\");\n * the hex input stays two-way synced; the current color is published on the\n * preview and root as the `--stimeo-color` custom property and mirrored into a\n * hidden form field.\n *\n * @remarks\n * Behavior only — the swatch/gradient visuals are the consumer's CSS/canvas, fed\n * by `--stimeo-color`. Only the consumer knows whether a channel track mirrors\n * under RTL: set `logicalTrack` to declare that it does, and the pointer mapping\n * and horizontal arrow pair follow the writing direction. Left unset, nothing\n * here reads `direction`. A gradient has no logical `to` keyword, so mirroring\n * one means swapping `to right`/`to left` under a `:dir(rtl)` selector.\n *\n * Pointer-drag listeners on `document` are bound to an\n * {@link AbortController} and released on drag end and on `disconnect()` (Turbo\n * navigation included). Color is fully reconstructable from the `value` (hex), so\n * there is no transient state to restore after a Turbo cache/morph.\n *\n * The internal model is integer HSL(A), so a hex → HSL → hex round-trip is not\n * exactly bijective: a typed hex can normalize to a near (not identical) value\n * once the HSL sliders are touched. This keeps the model small and zero-dep; use a\n * dedicated color library on the consumer side if exact hex preservation matters.\n */\nexport class ColorPickerController extends Controller<HTMLElement> {\n  static override targets = [\"slider\", \"hex\", \"preview\", \"field\"];\n  static override values = {\n    value: { type: String, default: \"#000000\" },\n    alpha: { type: Boolean, default: false },\n    logicalTrack: { type: Boolean, default: false },\n  };\n  static actions = [\"onHexInput\", \"onKeydown\", \"onPointerDown\"] as const;\n  static events = [\"change\"] as const;\n\n  declare readonly sliderTargets: HTMLElement[];\n  declare readonly hexTarget: HTMLInputElement;\n  declare readonly hasHexTarget: boolean;\n  declare readonly previewTargets: HTMLElement[];\n  declare readonly fieldTargets: HTMLInputElement[];\n  declare valueValue: string;\n  declare alphaValue: boolean;\n  declare logicalTrackValue: boolean;\n\n  /** Whether the consumer declared a mirroring track and the direction mirrors it. */\n  get #mirrored(): boolean {\n    return this.logicalTrackValue && isRtl(this.element);\n  }\n\n  /** The current color in the editing model. */\n  #color: Hsla = { hue: 0, saturation: 0, lightness: 0, alpha: 100 };\n  /** Aborts in-progress pointer-drag listeners on drag end / teardown. */\n  #dragAbort: AbortController | null = null;\n\n  /** Seeds the model from the initial hex value and renders every surface. */\n  override connect(): void {\n    const parsed = hexToHsla(this.valueValue);\n    // When alpha is disabled, drop any alpha carried by an `#RRGGBBAA` value so\n    // the model stays opaque — otherwise `hexString()` would emit `#RRGGBB`\n    // while `change` reported `rgba.a < 1`. Mirrors `onHexInput()`.\n    if (parsed) this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };\n    this.#render();\n  }\n\n  /** Cancels any active pointer drag so document listeners never leak. */\n  override disconnect(): void {\n    this.#dragAbort?.abort();\n    this.#dragAbort = null;\n  }\n\n  /** Keyboard stepping on the focused channel slider (APG Slider model). */\n  onKeydown(event: KeyboardEvent): void {\n    if (isReservedArrowChord(event)) return;\n    const slider = event.currentTarget as HTMLElement;\n    const channel = this.#channelOf(slider);\n    if (!channel) return;\n\n    const [min, max] = this.#rangeOf(slider, channel);\n    const value = this.#color[channel];\n    let next: number | null = null;\n    // On a mirrored track the greater value sits at the visual left, so the\n    // horizontal pair trades places; the vertical pair passes through.\n    switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {\n      case \"ArrowRight\":\n      case \"ArrowUp\":\n        next = value + 1;\n        break;\n      case \"ArrowLeft\":\n      case \"ArrowDown\":\n        next = value - 1;\n        break;\n      case \"PageUp\":\n        next = value + 10;\n        break;\n      case \"PageDown\":\n        next = value - 10;\n        break;\n      case \"Home\":\n        next = min;\n        break;\n      case \"End\":\n        next = max;\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n    this.#setChannel(channel, next, min, max);\n  }\n\n  /** Begins a pointer drag on a channel slider and tracks movement. */\n  onPointerDown(event: PointerEvent): void {\n    const slider = event.currentTarget as HTMLElement;\n    const channel = this.#channelOf(slider);\n    if (!channel) return;\n    event.preventDefault();\n    slider.focus();\n\n    const [min, max] = this.#rangeOf(slider, channel);\n    // Resolve the direction once for the whole gesture: reading it per move\n    // would query computed style on every frame, and a drag that flipped\n    // mid-gesture would be incoherent anyway.\n    const mirrored = this.#mirrored;\n    const update = (clientX: number): void => {\n      const rect = slider.getBoundingClientRect();\n      if (rect.width === 0) return;\n      const offset = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));\n      const fraction = mirrored ? 1 - offset : offset;\n      this.#setChannel(channel, min + fraction * (max - min), min, max);\n    };\n    update(event.clientX);\n\n    this.#dragAbort?.abort();\n    const abort = new AbortController();\n    this.#dragAbort = abort;\n    const onMove = (move: PointerEvent): void => update(move.clientX);\n    const onUp = (): void => {\n      abort.abort();\n      this.#dragAbort = null;\n    };\n    document.addEventListener(\"pointermove\", onMove, { signal: abort.signal });\n    document.addEventListener(\"pointerup\", onUp, { signal: abort.signal });\n    document.addEventListener(\"pointercancel\", onUp, { signal: abort.signal });\n  }\n\n  /** Parses the hex input on confirm and syncs every channel + surface. */\n  onHexInput(): void {\n    if (!this.hasHexTarget) return;\n    const parsed = hexToHsla(this.hexTarget.value);\n    if (!parsed) {\n      // Reject invalid input by restoring the last valid hex.\n      this.hexTarget.value = this.#hexString();\n      return;\n    }\n    this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };\n    this.#render();\n  }\n\n  /** Clamps and snaps one channel to an integer, then re-renders + emits change. */\n  #setChannel(channel: Channel, raw: number, min: number, max: number): void {\n    this.#color[channel] = Math.round(Math.min(max, Math.max(min, raw)));\n    this.#render();\n  }\n\n  /** Reflects the model onto sliders, the hex input, preview, and form field. */\n  #render(): void {\n    for (const slider of this.sliderTargets) {\n      const channel = this.#channelOf(slider);\n      if (!channel) continue;\n      const value = this.#color[channel];\n      slider.setAttribute(\"aria-valuenow\", String(value));\n      slider.setAttribute(\"aria-valuetext\", valueText(channel, value));\n    }\n\n    const hex = this.#hexString();\n    if (this.hasHexTarget) this.hexTarget.value = hex;\n    for (const field of this.fieldTargets) field.value = hex;\n    for (const preview of this.previewTargets) preview.style.setProperty(COLOR_PROPERTY, hex);\n    this.element.style.setProperty(COLOR_PROPERTY, hex);\n\n    const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);\n    this.dispatch(\"change\", {\n      detail: { value: hex, rgba: { ...rgb, a: this.#color.alpha / 100 } },\n    });\n  }\n\n  /** The current color as `#RRGGBB`, or `#RRGGBBAA` when alpha is enabled. */\n  #hexString(): string {\n    const rgb = hslToRgb(this.#color.hue, this.#color.saturation, this.#color.lightness);\n    const base = `#${hex2(rgb.r)}${hex2(rgb.g)}${hex2(rgb.b)}`;\n    if (!this.alphaValue) return base;\n    return `${base}${hex2(Math.round((this.#color.alpha / 100) * 255))}`;\n  }\n\n  /** Reads a slider's `data-channel`, if it is a known channel. */\n  #channelOf(slider: HTMLElement): Channel | null {\n    const channel = slider.getAttribute(\"data-channel\");\n    return channel && channel in CHANNEL_RANGE ? (channel as Channel) : null;\n  }\n\n  /**\n   * A slider's `[min, max]` from aria-valuemin/max, falling back per channel.\n   * An absent or blank attribute means \"not authored\", not zero — coercing it to\n   * a number would pin the channel at `0` and make the per-channel default\n   * unreachable.\n   */\n  #rangeOf(slider: HTMLElement, channel: Channel): [number, number] {\n    const [defMin, defMax] = CHANNEL_RANGE[channel];\n    return [\n      toFiniteNumber(slider.getAttribute(\"aria-valuemin\")) ?? defMin,\n      toFiniteNumber(slider.getAttribute(\"aria-valuemax\")) ?? defMax,\n    ];\n  }\n}\n\n/** Capitalizes a channel name for `aria-valuetext` (e.g. \"Hue\"). */\nfunction valueText(channel: Channel, value: number): string {\n  const label = channel.charAt(0).toUpperCase() + channel.slice(1);\n  const unit = channel === \"hue\" ? \"degrees\" : \"percent\";\n  return `${label} ${value} ${unit}`;\n}\n\n/** Formats a 0–255 byte as a 2-digit lowercase hex pair. */\nfunction hex2(value: number): string {\n  return Math.round(Math.min(255, Math.max(0, value)))\n    .toString(16)\n    .padStart(2, \"0\");\n}\n\n/** Converts HSL (h:0–360, s/l:0–100) to RGB bytes (0–255). */\nfunction hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {\n  const sat = s / 100;\n  const light = l / 100;\n  const c = (1 - Math.abs(2 * light - 1)) * sat;\n  const hp = (((h % 360) + 360) % 360) / 60;\n  const x = c * (1 - Math.abs((hp % 2) - 1));\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  if (hp >= 0 && hp < 1) [r, g, b] = [c, x, 0];\n  else if (hp < 2) [r, g, b] = [x, c, 0];\n  else if (hp < 3) [r, g, b] = [0, c, x];\n  else if (hp < 4) [r, g, b] = [0, x, c];\n  else if (hp < 5) [r, g, b] = [x, 0, c];\n  else [r, g, b] = [c, 0, x];\n  const m = light - c / 2;\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n  };\n}\n\n/** Converts RGB bytes (0–255) to HSL (h:0–360, s/l:0–100). */\nfunction rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {\n  const rn = r / 255;\n  const gn = g / 255;\n  const bn = b / 255;\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const delta = max - min;\n  const l = (max + min) / 2;\n\n  let h = 0;\n  if (delta !== 0) {\n    if (max === rn) h = ((gn - bn) / delta) % 6;\n    else if (max === gn) h = (bn - rn) / delta + 2;\n    else h = (rn - gn) / delta + 4;\n    h = (h * 60 + 360) % 360;\n  }\n  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));\n  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n}\n\n/**\n * Parses `#RGB`, `#RGBA`, `#RRGGBB`, or `#RRGGBBAA` into the HSLA model, or\n * returns null when the string is not a valid hex color.\n */\nfunction hexToHsla(input: string): Hsla | null {\n  const hex = input.trim().replace(/^#/, \"\");\n  if (!/^(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(hex)) return null;\n\n  // Expand shorthand (#RGB / #RGBA) so every channel is a full byte pair.\n  const full =\n    hex.length <= 4\n      ? hex\n          .split(\"\")\n          .map((char) => char + char)\n          .join(\"\")\n      : hex;\n\n  const r = Number.parseInt(full.slice(0, 2), 16);\n  const g = Number.parseInt(full.slice(2, 4), 16);\n  const b = Number.parseInt(full.slice(4, 6), 16);\n  const a = full.length === 8 ? Number.parseInt(full.slice(6, 8), 16) : 255;\n\n  const { h, s, l } = rgbToHsl(r, g, b);\n  return { hue: h, saturation: s, lightness: l, alpha: Math.round((a / 255) * 100) };\n}\n"]}

package/dist/controllers/combobox_controller.d.ts

@@ -61,6 +61,10 @@ declare class ComboboxController extends Controller<HTMLElement> {
     inputTargetConnected(input: HTMLInputElement): void;
     /** Removes composition listeners when the active input is replaced or removed. */
     inputTargetDisconnected(input: HTMLInputElement): void;
+    /** Establishes the active-state baseline, then reconciles a runtime addition. */
+    optionTargetConnected(option: HTMLElement): void;
+    /** Clears the disconnected node's active state, then reconciles the survivors. */
+    optionTargetDisconnected(option: HTMLElement): void;
     /** Filters confirmed input text and opens the listbox. */
     filter(event?: InputEvent): void;
     /**
@@ -69,7 +73,16 @@ declare class ComboboxController extends Controller<HTMLElement> {
      * re-opening with a stale non-matching value still surfaces the empty state).
      */
     open(): void;
-    /** Closes the listbox, clears the active option, and updates ARIA state. */
+    /**
+     * Closes the listbox, clears the active option, and updates ARIA state.
+     *
+     * Survives a missing input in both directions. {@link inputTargetConnected}
+     * accepts an input added after connect, so dereferencing it here would abort
+     * `connect()` before it registers the outside-click listener, and nothing
+     * re-registers it later. Symmetrically, an input removed while the popup is
+     * open must still let the popup come down — so hiding the list is
+     * unconditional and only the ARIA half is guarded.
+     */
     close(): void;
     /** Routes keyboard interaction per the APG combobox model. */
     onKeydown(event: KeyboardEvent): void;

package/dist/controllers/combobox_controller.js

@@ -2,6 +2,24 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/combobox_controller.ts
 
+// src/utils/active_option.ts
+function syncActiveOption(options, active) {
+  let written = 0;
+  for (const option of options) {
+    const next = option === active ? "true" : "false";
+    if (option.getAttribute("aria-selected") === next) continue;
+    option.setAttribute("aria-selected", next);
+    written += 1;
+  }
+  return written;
+}
+
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/composition_tracker.ts
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
@@ -49,6 +67,39 @@ var CompositionTracker = class {
   };
 };
 
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/option_scroll.ts
 function scrollOptionIntoView(list, option) {
   if (list.scrollHeight <= list.clientHeight) return;
@@ -66,8 +117,11 @@ var ComboboxController = class extends Controller {
   static targets = ["input", "list", "option"];
   static actions = ["close", "filter", "onKeydown", "open", "selectByClick"];
   static events = ["selected"];
-  /** Index into the *visible* options of the active option, or -1 if none. */
-  #activeIndex = -1;
+  /** Stable ID of the active option; the live element is resolved before every use. */
+  #activeId = null;
+  #connected = false;
+  /** Collapses one mutation batch of target callbacks into a single pass. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());
   /**
    * Suppresses {@link open} for the duration of the programmatic re-focus in
    * `#select`, so committing a value (which returns focus to the input)
@@ -80,21 +134,36 @@ var ComboboxController = class extends Controller {
   connect() {
     if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
     this.close();
-    document.addEventListener("click", this.#onOutsideClick);
+    document.addEventListener("click", this.#onOutsideClick, true);
+    this.#connected = true;
+    this.#reconcile.activate();
   }
   /** Removes the document-level listener registered in {@link connect}. */
   disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
     this.#composition.disconnect();
-    document.removeEventListener("click", this.#onOutsideClick);
+    document.removeEventListener("click", this.#onOutsideClick, true);
   }
   /** Tracks an input added initially or after connect. */
   inputTargetConnected(input) {
     this.#composition.observe(input);
+    if (this.#connected) this.#queueOptionReconciliation();
   }
   /** Removes composition listeners when the active input is replaced or removed. */
   inputTargetDisconnected(input) {
     this.#composition.unobserve(input);
   }
+  /** Establishes the active-state baseline, then reconciles a runtime addition. */
+  optionTargetConnected(option) {
+    option.setAttribute("aria-selected", "false");
+    if (this.#connected) this.#queueOptionReconciliation();
+  }
+  /** Clears the disconnected node's active state, then reconciles the survivors. */
+  optionTargetDisconnected(option) {
+    option.setAttribute("aria-selected", "false");
+    if (this.#connected) this.#queueOptionReconciliation();
+  }
   /** Filters confirmed input text and opens the listbox. */
   filter(event) {
     if (this.#composition.isComposing(event)) return;
@@ -106,7 +175,7 @@ var ComboboxController = class extends Controller {
    * re-opening with a stale non-matching value still surfaces the empty state).
    */
   open() {
-    if (!this.hasListTarget || this.#suppressOpen) return;
+    if (!this.hasListTarget || !this.hasInputTarget || this.#suppressOpen) return;
     this.#applyFilter();
     this.listTarget.hidden = false;
     this.inputTarget.setAttribute("aria-expanded", "true");
@@ -124,24 +193,47 @@ var ComboboxController = class extends Controller {
       option.hidden = query.length > 0 && !text.includes(query);
     }
   }
-  /** Closes the listbox, clears the active option, and updates ARIA state. */
+  /**
+   * Closes the listbox, clears the active option, and updates ARIA state.
+   *
+   * Survives a missing input in both directions. {@link inputTargetConnected}
+   * accepts an input added after connect, so dereferencing it here would abort
+   * `connect()` before it registers the outside-click listener, and nothing
+   * re-registers it later. Symmetrically, an input removed while the popup is
+   * open must still let the popup come down — so hiding the list is
+   * unconditional and only the ARIA half is guarded.
+   */
   close() {
     if (!this.hasListTarget) return;
     this.listTarget.hidden = true;
-    this.inputTarget.setAttribute("aria-expanded", "false");
-    this.#setActive(-1);
     this.element.removeAttribute("data-stimeo--combobox-empty");
+    if (this.hasInputTarget) this.inputTarget.setAttribute("aria-expanded", "false");
+    this.#setActive(-1);
   }
   /** Routes keyboard interaction per the APG combobox model. */
   onKeydown(event) {
     if (this.#composition.isComposing(event)) return;
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event, ["alt"])) return;
+    if (event.altKey && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      if (event.key === "ArrowDown" ? !this.#isClosed : this.#isClosed) return;
+      event.preventDefault();
+      if (event.key === "ArrowDown") {
+        this.open();
+      } else {
+        this.close();
+      }
+      return;
+    }
+    if (!this.#isClosed) this.#reconcileActive();
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
         if (this.#isClosed) this.open();
         const visible = this.#visibleOptions();
         if (visible.length > 0) {
-          const next = this.#activeIndex === -1 ? 0 : (this.#activeIndex + 1) % visible.length;
+          const activeIndex = this.#findActiveIndex(visible);
+          const next = activeIndex === -1 ? 0 : (activeIndex + 1) % visible.length;
           this.#setActive(next);
         }
         break;
@@ -151,7 +243,8 @@ var ComboboxController = class extends Controller {
         if (this.#isClosed) this.open();
         const visible = this.#visibleOptions();
         if (visible.length > 0) {
-          const next = this.#activeIndex === -1 ? visible.length - 1 : (this.#activeIndex - 1 + visible.length) % visible.length;
+          const activeIndex = this.#findActiveIndex(visible);
+          const next = activeIndex === -1 ? visible.length - 1 : (activeIndex - 1 + visible.length) % visible.length;
           this.#setActive(next);
         }
         break;
@@ -172,7 +265,8 @@ var ComboboxController = class extends Controller {
       }
       case "Enter": {
         const visible = this.#visibleOptions();
-        const active = this.#activeIndex === -1 ? void 0 : visible[this.#activeIndex];
+        const activeIndex = this.#findActiveIndex(visible);
+        const active = activeIndex === -1 ? void 0 : visible[activeIndex];
         if (active) {
           event.preventDefault();
           this.#select(active);
@@ -180,7 +274,7 @@ var ComboboxController = class extends Controller {
         break;
       }
       case "Escape":
-        if (event.defaultPrevented || this.#isClosed) break;
+        if (this.#isClosed) break;
         event.preventDefault();
         this.close();
         break;
@@ -200,11 +294,24 @@ var ComboboxController = class extends Controller {
   /** Selects the clicked option. Bound via `data-action` (click). */
   selectByClick(event) {
     const option = event.currentTarget.closest('[role="option"]');
-    if (option) this.#select(option);
+    if (option && this.optionTargets.includes(option)) this.#select(option);
   }
-  /** Commits an option: fills the input, closes the listbox, notifies listeners. */
+  /**
+   * Commits an option: fills the input, closes the listbox, notifies listeners.
+   *
+   * An input removed while the popup is open leaves the options clickable, and
+   * {@link close} already survives that state. Selection does too: the popup
+   * comes down and listeners still hear the choice, with only the field-bound
+   * half — the value write, the focus return, and the native `change` — skipped,
+   * because there is no field to carry them.
+   */
   #select(option) {
     const value = option.dataset.value ?? (option.textContent ?? "").trim();
+    if (!this.hasInputTarget) {
+      this.close();
+      this.dispatch("selected", { detail: { value } });
+      return;
+    }
     const changed = this.inputTarget.value !== value;
     this.inputTarget.value = value;
     this.close();
@@ -235,19 +342,51 @@ var ComboboxController = class extends Controller {
    * input's `aria-activedescendant`. Pass `-1` to clear the active option.
    */
   #setActive(index) {
-    this.#activeIndex = index;
     const visible = this.#visibleOptions();
-    const active = index === -1 ? null : visible[index];
-    for (const option of this.optionTargets) {
-      option.setAttribute("aria-selected", option === active ? "true" : "false");
-    }
-    if (active?.id) {
-      this.inputTarget.setAttribute("aria-activedescendant", active.id);
-    } else {
-      this.inputTarget.removeAttribute("aria-activedescendant");
+    const active = index === -1 ? null : visible[index] ?? null;
+    syncActiveOption(this.optionTargets, active);
+    this.#activeId = active?.id || null;
+    if (this.hasInputTarget) {
+      if (active?.id) {
+        this.inputTarget.setAttribute("aria-activedescendant", active.id);
+      } else {
+        this.inputTarget.removeAttribute("aria-activedescendant");
+      }
     }
     if (active && this.hasListTarget) scrollOptionIntoView(this.listTarget, active);
   }
+  /** Re-applies filtering and active state after a target collection change. */
+  #reconcileOptions() {
+    if (this.hasInputTarget && !this.#isClosed) this.#applyFilter();
+    this.#reconcileActive();
+    this.#reflectEmptyState();
+  }
+  /** Preserves a surviving active ID; disappearance deliberately clears active state. */
+  #reconcileActive() {
+    if (!this.hasInputTarget || this.#isClosed) {
+      this.#setActive(-1);
+      return;
+    }
+    const visible = this.#visibleOptions();
+    const index = this.#findActiveIndex(visible);
+    const active = index === -1 ? null : visible[index] ?? null;
+    const selected = this.optionTargets.filter(
+      (option) => option.getAttribute("aria-selected") === "true"
+    );
+    const idref = this.inputTarget.getAttribute("aria-activedescendant");
+    const stateMatches = active ? this.#activeId === (active.id || null) && selected.length === 1 && selected[0] === active && idref === (active.id || null) : this.#activeId === null && selected.length === 0 && idref === null;
+    if (!stateMatches) this.#setActive(index);
+  }
+  /** Resolves the stable ID, with `aria-selected` as the ID-less compatibility marker. */
+  #findActiveIndex(options) {
+    const activeId = (this.hasInputTarget ? this.inputTarget.getAttribute("aria-activedescendant") : null) ?? this.#activeId;
+    if (activeId) return options.findIndex((option) => option.id === activeId);
+    return options.findIndex((option) => option.getAttribute("aria-selected") === "true");
+  }
+  /** Coalesces all target callbacks from one MutationObserver batch. */
+  #queueOptionReconciliation() {
+    this.#reconcile.schedule();
+  }
   /** The options currently shown (not filtered out). */
   #visibleOptions() {
     return this.optionTargets.filter((option) => !option.hidden);