stimeo-ui 0.2.1 → 0.4.0

package/dist/controllers/meter_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/coerce.ts","../../src/controllers/meter_controller.ts"],"names":[],"mappings":"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","file":"meter_controller.js","sourcesContent":["/**\n * Numeric coercion shared by the value-bearing status controllers (progress,\n * meter).\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 { toFiniteNumber } from \"../utils/coerce\";\n\n/**\n * Event shape `setValue` accepts: an action param `amount` or a `detail.value`.\n * Both are typed `number | string` because, while Stimulus coerces numeric action\n * params to numbers, a `meter:set` CustomEvent (or a non-numeric-looking param)\n * may carry a string; {@link MeterController.setValue} normalizes either form.\n */\ntype SetValueEvent = Event & {\n  params?: { amount?: number | string };\n  detail?: { value?: number | string };\n};\n\n/** Threshold segment a value falls into, reflected on `data-state`. */\ntype MeterState = \"low\" | \"medium\" | \"high\";\n\n/**\n * Headless meter behavior backed by the WAI-ARIA `meter` role.\n *\n * Markup contract (identifier: `stimeo--meter`):\n *   <div data-controller=\"stimeo--meter\" role=\"meter\" aria-label=\"Disk usage\"\n *        aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"72\"\n *        data-stimeo--meter-value-value=\"72\"\n *        data-stimeo--meter-low-value=\"50\" data-stimeo--meter-high-value=\"80\">\n *     <div data-stimeo--meter-target=\"bar\"></div>\n *   </div>\n *\n * A `meter` is a *point-in-time* scalar within a known range (disk usage,\n * battery, score) — distinct from {@link ProgressController}'s task progress.\n * The controller syncs the ARIA value attributes and, when `low`/`high`\n * thresholds are present, classifies the value into a `low`/`medium`/`high`\n * segment on `data-state` so the consumer can color the bar.\n *\n * @remarks\n * Behavior only. Because state must not be conveyed by color alone (WCAG 1.4.1),\n * a consumer-provided `valueText` template feeds `aria-valuetext` so the segment\n * is also available as text. Threshold presence is read from the *attributes*\n * (an absent attribute means \"no threshold\"), not from a sentinel value.\n */\nexport class MeterController extends Controller<HTMLElement> {\n  static override targets = [\"bar\"];\n  static override values = {\n    value: { type: Number, default: 0 },\n    min: { type: Number, default: 0 },\n    max: { type: Number, default: 100 },\n    low: { type: Number, default: 0 },\n    high: { type: Number, default: 0 },\n    optimum: { type: Number, default: 0 },\n    valueText: { type: String, default: \"\" },\n  };\n  static actions = [\"setValue\"] as const;\n  static events = [\"change\"] as const;\n\n  declare readonly barTarget: HTMLElement;\n  declare readonly hasBarTarget: boolean;\n\n  declare valueValue: number;\n  declare minValue: number;\n  declare maxValue: number;\n  declare lowValue: number;\n  declare highValue: number;\n  declare optimumValue: number;\n  declare valueTextValue: string;\n\n  override connect(): void {\n    this.#render();\n  }\n\n  /**\n   * Updates the measured value from an action param (`amount`) or a\n   * `detail.value` CustomEvent, syncs ARIA and `data-state`, and dispatches\n   * `change` with the value, ratio, and computed segment.\n   */\n  setValue(event: SetValueEvent): void {\n    const next = toFiniteNumber(event.params?.amount ?? event.detail?.value);\n    if (next === null) return;\n    this.valueValue = this.#clamp(next);\n    this.#render();\n    this.dispatch(\"change\", {\n      detail: { value: this.valueValue, ratio: this.#ratio, state: this.#state },\n    });\n  }\n\n  /** Clamps `raw` into the configured `[min, max]` range. */\n  #clamp(raw: number): number {\n    return Math.min(this.maxValue, Math.max(this.minValue, raw));\n  }\n\n  /** Current fraction of the range in `[0, 1]`; `0` when the range is empty. */\n  get #ratio(): number {\n    const span = this.maxValue - this.minValue;\n    if (span <= 0) return 0;\n    return (this.#clamp(this.valueValue) - this.minValue) / span;\n  }\n\n  /** Whether a threshold attribute is present (absent = no threshold). */\n  #hasThreshold(name: \"low\" | \"high\"): boolean {\n    return this.element.hasAttribute(`data-stimeo--meter-${name}-value`);\n  }\n\n  /**\n   * Classifies the value into a `low`/`medium`/`high` segment. Values at or\n   * below `low` are `low`; at or above `high` are `high`; otherwise `medium`.\n   * With neither threshold present, everything is `medium`.\n   */\n  get #state(): MeterState {\n    const value = this.#clamp(this.valueValue);\n    if (this.#hasThreshold(\"low\") && value <= this.lowValue) return \"low\";\n    if (this.#hasThreshold(\"high\") && value >= this.highValue) return \"high\";\n    return \"medium\";\n  }\n\n  /** Reflects value/range onto ARIA, the segment onto `data-state`, and the ratio. */\n  #render(): void {\n    const value = this.#clamp(this.valueValue);\n    this.element.setAttribute(\"aria-valuemin\", String(this.minValue));\n    this.element.setAttribute(\"aria-valuemax\", String(this.maxValue));\n    this.element.setAttribute(\"aria-valuenow\", String(value));\n    this.element.style.setProperty(\"--stimeo-meter-ratio\", String(this.#ratio));\n    this.element.setAttribute(\"data-state\", this.#state);\n    this.#applyValueText(value);\n  }\n\n  /**\n   * Sets `aria-valuetext` from the consumer-provided template, substituting\n   * `{value}`, `{percent}`, and `{state}`. Kept i18n-neutral in the library;\n   * cleared when no template is given.\n   */\n  #applyValueText(value: number): void {\n    if (this.valueTextValue.length === 0) {\n      this.element.removeAttribute(\"aria-valuetext\");\n      return;\n    }\n    const percent = Math.round(this.#ratio * 100);\n    const text = this.valueTextValue\n      .replaceAll(\"{value}\", String(value))\n      .replaceAll(\"{percent}\", String(percent))\n      .replaceAll(\"{state}\", this.#state);\n    this.element.setAttribute(\"aria-valuetext\", text);\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/announce.ts","../../src/utils/coerce.ts","../../src/utils/microtask_coalescer.ts","../../src/utils/range.ts","../../src/controllers/meter_controller.ts"],"names":[],"mappings":";;;;;AAoBO,SAAS,QAAA,CAAS,OAAA,EAAiB,OAAA,GAAmC,EAAC,EAAS;AACrF,EAAA,MAAM,IAAA,GAAO,QAAQ,IAAA,EAAK;AAC1B,EAAA,IAAI,IAAA,CAAK,WAAW,CAAA,EAAG;AACvB,EAAA,MAAA,CAAO,aAAA;AAAA,IACL,IAAI,YAAY,4BAAA,EAA8B;AAAA,MAC5C,QAAQ,EAAE,OAAA,EAAS,MAAM,SAAA,EAAW,OAAA,CAAQ,cAAc,IAAA;AAAK,KAChE;AAAA,GACH;AACF;AAUO,SAAS,YAAA,CAAa,UAAkB,MAAA,EAAiD;AAC9F,EAAA,OAAO,QAAA,CAAS,OAAA,CAAQ,6BAAA,EAA+B,CAAC,OAAO,IAAA,KAAiB;AAC9E,IAAA,MAAM,WAAA,GAAc,OAAO,IAAI,CAAA;AAC/B,IAAA,OAAO,WAAA,KAAgB,MAAA,GAAY,KAAA,GAAQ,MAAA,CAAO,WAAW,CAAA;AAAA,EAC/D,CAAC,CAAA;AACH;;;AC5BO,SAAS,eAAe,GAAA,EAAwD;AACrF,EAAA,IAAI,QAAQ,IAAA,IAAQ,GAAA,KAAQ,MAAA,IAAa,GAAA,KAAQ,IAAI,OAAO,IAAA;AAC5D,EAAA,MAAM,QAAQ,OAAO,GAAA,KAAQ,QAAA,GAAW,GAAA,GAAM,OAAO,GAAG,CAAA;AACxD,EAAA,OAAO,MAAA,CAAO,QAAA,CAAS,KAAK,CAAA,GAAI,KAAA,GAAQ,IAAA;AAC1C;;;ACgCO,IAAM,qBAAN,MAAyB;AAAA,EACrB,IAAA;AAAA,EACT,OAAA,GAAU,KAAA;AAAA,EACV,OAAA,GAAU,KAAA;AAAA,EACV,WAAA,GAAc,CAAA;AAAA;AAAA,EAGd,YAAY,GAAA,EAAiB;AAC3B,IAAA,IAAA,CAAK,IAAA,GAAO,GAAA;AAAA,EACd;AAAA;AAAA,EAGA,QAAA,GAAiB;AACf,IAAA,IAAA,CAAK,OAAA,GAAU,IAAA;AAAA,EACjB;AAAA;AAAA,EAGA,MAAA,GAAe;AACb,IAAA,IAAA,CAAK,OAAA,GAAU,KAAA;AACf,IAAA,IAAA,CAAK,OAAA,GAAU,KAAA;AACf,IAAA,IAAA,CAAK,WAAA,IAAe,CAAA;AAAA,EACtB;AAAA;AAAA,EAGA,QAAA,GAAiB;AACf,IAAA,IAAI,CAAC,IAAA,CAAK,OAAA,IAAW,IAAA,CAAK,OAAA,EAAS;AACnC,IAAA,IAAA,CAAK,OAAA,GAAU,IAAA;AACf,IAAA,MAAM,aAAa,IAAA,CAAK,WAAA;AACxB,IAAA,cAAA,CAAe,MAAM;AAEnB,MAAA,IAAI,UAAA,KAAe,KAAK,WAAA,IAAe,CAAC,KAAK,OAAA,IAAW,CAAC,KAAK,OAAA,EAAS;AACvE,MAAA,IAAA,CAAK,OAAA,GAAU,KAAA;AACf,MAAA,IAAA,CAAK,IAAA,EAAK;AAAA,IACZ,CAAC,CAAA;AAAA,EACH;AACF,CAAA;;;AC9DO,SAAS,aAAA,CAAc,KAAA,EAAe,GAAA,EAAa,GAAA,EAAqB;AAC7E,EAAA,MAAM,OAAO,GAAA,GAAM,GAAA;AACnB,EAAA,IAAI,EAAE,IAAA,GAAO,CAAA,CAAA,EAAI,OAAO,CAAA;AAExB,EAAA,MAAM,OAAA,GAAU,KAAK,GAAA,CAAI,GAAA,EAAK,KAAK,GAAA,CAAI,GAAA,EAAK,KAAK,CAAC,CAAA;AAClD,EAAA,IAAI,QAAA;AACJ,EAAA,IAAI,MAAA,CAAO,QAAA,CAAS,IAAI,CAAA,EAAG;AACzB,IAAA,QAAA,GAAA,CAAY,UAAU,GAAA,IAAO,IAAA;AAAA,EAC/B,CAAA,MAAO;AAGL,IAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,GAAA,CAAI,GAAG,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,GAAG,CAAC,CAAA;AACnD,IAAA,QAAA,GAAA,CAAY,UAAU,KAAA,GAAQ,GAAA,GAAM,KAAA,KAAU,GAAA,GAAM,QAAQ,GAAA,GAAM,KAAA,CAAA;AAAA,EACpE;AAEA,EAAA,IAAI,CAAC,MAAA,CAAO,QAAA,CAAS,QAAQ,GAAG,OAAO,CAAA;AACvC,EAAA,OAAO,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,GAAA,CAAI,CAAA,EAAG,QAAQ,CAAC,CAAA;AAC1C;;;ACZA,IAAM,gBAAA,GAAmB,mCAAA;AA0BlB,IAAM,eAAA,GAAN,cAA8B,UAAA,CAAwB;AAAA,EAC3D,OAAgB,OAAA,GAAU,CAAC,KAAK,CAAA;AAAA,EAChC,OAAgB,MAAA,GAAS;AAAA,IACvB,YAAA,EAAc,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,EAAA,EAAG;AAAA,IAC1C,KAAA,EAAO,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,IAClC,GAAA,EAAK,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,IAChC,GAAA,EAAK,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,GAAA,EAAI;AAAA,IAClC,GAAA,EAAK,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,IAChC,IAAA,EAAM,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,IACjC,OAAA,EAAS,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,CAAA,EAAE;AAAA,IACpC,SAAA,EAAW,EAAE,IAAA,EAAM,MAAA,EAAQ,SAAS,EAAA;AAAG,GACzC;AAAA,EACA,OAAO,OAAA,GAAU,CAAC,UAAU,CAAA;AAAA,EAC5B,OAAO,MAAA,GAAS,CAAC,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmBhB,QAAA,GAAW,IAAI,kBAAA,CAAmB,MAAM;AAC/C,IAAA,IAAA,CAAK,OAAA,EAAQ;AAAA,EACf,CAAC,CAAA;AAAA;AAAA,EAGD,eAAA,GAAqC,IAAA;AAAA,EAE5B,OAAA,GAAgB;AACvB,IAAA,IAAA,CAAK,SAAS,QAAA,EAAS;AACvB,IAAA,IAAA,CAAK,OAAA,EAAQ;AAAA,EACf;AAAA;AAAA,EAGS,UAAA,GAAmB;AAC1B,IAAA,IAAA,CAAK,SAAS,MAAA,EAAO;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,SAAS,KAAA,EAA4B;AACnC,IAAA,MAAM,OAAO,cAAA,CAAe,KAAA,CAAM,QAAQ,MAAA,IAAU,KAAA,CAAM,QAAQ,KAAK,CAAA;AACvE,IAAA,IAAI,SAAS,IAAA,EAAM;AACnB,IAAA,IAAA,CAAK,UAAA,GAAa,IAAA,CAAK,MAAA,CAAO,IAAI,CAAA;AAClC,IAAA,MAAM,OAAA,GAAU,KAAK,OAAA,EAAQ;AAC7B,IAAA,IAAA,CAAK,QAAA,CAAS,QAAA,EAAU,EAAE,MAAA,EAAQ,SAAS,CAAA;AAG3C,IAAA,IAAI,OAAA,CAAQ,KAAA,KAAU,IAAA,CAAK,eAAA,EAAiB;AAC1C,MAAA,IAAA,CAAK,kBAAkB,OAAA,CAAQ,KAAA;AAC/B,MAAA,QAAA;AAAA,QACE,YAAA,CAAa,IAAA,CAAK,iBAAA,EAAmB,EAAE,KAAA,EAAO,QAAQ,KAAA,EAAO,KAAA,EAAO,OAAA,CAAQ,KAAA,EAAO;AAAA,OACrF;AAAA,IACF;AAAA,EACF;AAAA;AAAA,EAGA,iBAAA,GAA0B;AACxB,IAAA,IAAA,CAAK,SAAS,QAAA,EAAS;AAAA,EACzB;AAAA;AAAA,EAGA,eAAA,GAAwB;AACtB,IAAA,IAAA,CAAK,SAAS,QAAA,EAAS;AAAA,EACzB;AAAA;AAAA,EAGA,eAAA,GAAwB;AACtB,IAAA,IAAA,CAAK,SAAS,QAAA,EAAS;AAAA,EACzB;AAAA;AAAA,EAGA,eAAA,GAAwB;AACtB,IAAA,IAAA,CAAK,SAAS,QAAA,EAAS;AAAA,EACzB;AAAA;AAAA,EAGA,gBAAA,GAAyB;AACvB,IAAA,IAAA,CAAK,SAAS,QAAA,EAAS;AAAA,EACzB;AAAA;AAAA,EAGA,qBAAA,GAA8B;AAC5B,IAAA,IAAA,CAAK,SAAS,QAAA,EAAS;AAAA,EACzB;AAAA;AAAA,EAGA,OAAO,GAAA,EAAqB;AAC1B,IAAA,OAAO,IAAA,CAAK,IAAI,IAAA,CAAK,QAAA,EAAU,KAAK,GAAA,CAAI,IAAA,CAAK,QAAA,EAAU,GAAG,CAAC,CAAA;AAAA,EAC7D;AAAA;AAAA,EAGA,cAAc,IAAA,EAA+B;AAC3C,IAAA,OAAO,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,CAAA,mBAAA,EAAsB,IAAI,CAAA,MAAA,CAAQ,CAAA;AAAA,EACrE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,SAAS,KAAA,EAA2B;AAClC,IAAA,IAAI,KAAK,aAAA,CAAc,KAAK,KAAK,KAAA,IAAS,IAAA,CAAK,UAAU,OAAO,KAAA;AAChE,IAAA,IAAI,KAAK,aAAA,CAAc,MAAM,KAAK,KAAA,IAAS,IAAA,CAAK,WAAW,OAAO,MAAA;AAClE,IAAA,OAAO,QAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAA,GAAwB;AACtB,IAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,MAAA,CAAO,IAAA,CAAK,UAAU,CAAA;AACzC,IAAA,MAAM,OAAA,GAAwB;AAAA,MAC5B,KAAA;AAAA,MACA,OAAO,aAAA,CAAc,KAAA,EAAO,IAAA,CAAK,QAAA,EAAU,KAAK,QAAQ,CAAA;AAAA,MACxD,KAAA,EAAO,IAAA,CAAK,QAAA,CAAS,KAAK;AAAA,KAC5B;AACA,IAAA,IAAA,CAAK,QAAQ,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,IAAA,CAAK,QAAQ,CAAC,CAAA;AAChE,IAAA,IAAA,CAAK,QAAQ,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,IAAA,CAAK,QAAQ,CAAC,CAAA;AAChE,IAAA,IAAA,CAAK,QAAQ,YAAA,CAAa,eAAA,EAAiB,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAC,CAAA;AAChE,IAAA,IAAA,CAAK,QAAQ,KAAA,CAAM,WAAA,CAAY,wBAAwB,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAC,CAAA;AAC5E,IAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,YAAA,EAAc,OAAA,CAAQ,KAAK,CAAA;AACrD,IAAA,IAAA,CAAK,gBAAgB,OAAO,CAAA;AAC5B,IAAA,OAAO,OAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,eAAA,CAAgB,EAAE,KAAA,EAAO,KAAA,EAAO,OAAM,EAAuB;AAC3D,IAAA,IAAI,IAAA,CAAK,cAAA,CAAe,MAAA,KAAW,CAAA,EAAG;AACpC,MAAA,IAAI,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,gBAAgB,CAAA,EAAG;AAC/C,QAAA,IAAA,CAAK,OAAA,CAAQ,gBAAgB,gBAAgB,CAAA;AAC7C,QAAA,IAAA,CAAK,OAAA,CAAQ,gBAAgB,gBAAgB,CAAA;AAAA,MAC/C;AACA,MAAA;AAAA,IACF;AACA,IAAA,MAAM,OAAA,GAAU,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,GAAG,CAAA;AACtC,IAAA,MAAM,OAAO,IAAA,CAAK,cAAA,CACf,UAAA,CAAW,SAAA,EAAW,OAAO,KAAK,CAAC,CAAA,CACnC,UAAA,CAAW,aAAa,MAAA,CAAO,OAAO,CAAC,CAAA,CACvC,UAAA,CAAW,WAAW,KAAK,CAAA;AAC9B,IAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,gBAAA,EAAkB,IAAI,CAAA;AAChD,IAAA,IAAA,CAAK,OAAA,CAAQ,YAAA,CAAa,gBAAA,EAAkB,EAAE,CAAA;AAAA,EAChD;AACF","file":"meter_controller.js","sourcesContent":["/**\n * Sends one message to the page's shared `stimeo--announcer`.\n *\n * A component that has to reach assistive tech does not carry a live region of its\n * own: a region only announces what changes *after* assistive tech already knows\n * about it, which a region that appears (or is un-hidden) with its message cannot\n * satisfy. The one region that can is the announcer sitting in the page from the\n * start, so state changes are handed to it as an event and it does the reading.\n *\n * The event goes to `window` because the announcer is usually a sibling high in the\n * document rather than an ancestor of the component dispatching it.\n *\n * Wording comes from the consumer — the library ships no English strings — so an\n * empty message is silently dropped and nothing is announced.\n *\n * @example\n * ```ts\n * announce(this.announceTextValue, { assertive: false });\n * ```\n */\nexport function announce(message: string, options: { assertive?: boolean } = {}): void {\n  const text = message.trim();\n  if (text.length === 0) return;\n  window.dispatchEvent(\n    new CustomEvent(\"stimeo--announcer:announce\", {\n      detail: { message: text, assertive: options.assertive === true },\n    }),\n  );\n}\n\n/**\n * Fills `{name}` placeholders in an announcement template from `values`.\n *\n * The same substitution the value-text templates use, so a consumer writes\n * `\"{percent}% complete\"` in one attribute and gets the same rules everywhere. A\n * placeholder with no matching entry is left as authored rather than blanked, which\n * keeps a typo visible instead of silently swallowing the word.\n */\nexport function fillTemplate(template: string, values: Record<string, string | number>): string {\n  return template.replace(/\\{([a-zA-Z][a-zA-Z0-9]*)\\}/g, (match, name: string) => {\n    const replacement = values[name];\n    return replacement === undefined ? match : String(replacement);\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","/**\n * Collapses many target callbacks from one DOM mutation into a single pass.\n *\n * Stimulus fires `<name>TargetConnected` / `Disconnected` once per element, so\n * replacing a list of N options delivers N callbacks — but the useful unit of\n * work is \"reconcile against the DOM that resulted\", once, after the batch has\n * settled. Every controller that owns a reconcilable target set needs the same\n * shape: a `queued` flag plus `queueMicrotask`.\n *\n * **A microtask is the right horizon, and the reason is specific.** Stimulus\n * drives these callbacks from a `MutationObserver`, whose own callback already\n * runs as a microtask with the whole batch in hand; scheduling one more lands\n * after the last sibling callback of that batch and still before paint or any\n * event handler. A timer would be later than it needs to be, and reconciling\n * synchronously would run once per element against a half-applied DOM.\n *\n * **The two guards are not the same guard.** Scheduling is refused before the\n * controller connects, and running is refused after it disconnects:\n *\n * - **Before `connect()`** — Stimulus delivers the *initial* target callbacks\n *   ahead of `connect()`. Reconciling there would compute a fallback against a\n *   controller whose own state has not been initialised, and `connect()` is\n *   about to do a full pass anyway.\n * - **After `disconnect()`** — Stimulus fires a callback for **every** target\n *   during teardown, and a microtask queued just before it would otherwise run\n *   against a detached tree. {@link MicrotaskCoalescer.cancel} exists for the\n *   teardown path to drop the pending pass outright.\n *\n * Both guards are part of one contract here rather than something each consumer\n * has to remember separately.\n *\n * Scope is the scheduling only. *What* to reconcile — keep the surviving active\n * option, fall back to the next / previous / first visible one, rebuild derived\n * chips or hidden fields — stays in the controller, because no two consumers\n * answer it the same way.\n *\n * This file's own doc block is dropped from `dist`, but every member comment is\n * inlined into each consumer entry (`tsup` builds with `splitting: false`), so\n * rationale belongs here and only the contract belongs on the members.\n *\n * @example\n * ```ts\n * readonly #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());\n *\n * connect()    { this.#reconcile.activate(); }\n * disconnect() { this.#reconcile.cancel(); }\n *\n * optionTargetConnected()    { this.#reconcile.schedule(); }\n * optionTargetDisconnected() { this.#reconcile.schedule(); }\n * ```\n */\nexport class MicrotaskCoalescer {\n  readonly #run: () => void;\n  #queued = false;\n  #active = false;\n  #generation = 0;\n\n  /** @param run - the single reconciliation pass, invoked at most once per batch. */\n  constructor(run: () => void) {\n    this.#run = run;\n  }\n\n  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */\n  activate(): void {\n    this.#active = true;\n  }\n\n  /** Closes the window and drops any pending pass; call from `disconnect()`. */\n  cancel(): void {\n    this.#active = false;\n    this.#queued = false;\n    this.#generation += 1;\n  }\n\n  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */\n  schedule(): void {\n    if (!this.#active || this.#queued) return;\n    this.#queued = true;\n    const generation = this.#generation;\n    queueMicrotask(() => {\n      // A cancelled callback must not consume a pass queued after reconnect.\n      if (generation !== this.#generation || !this.#queued || !this.#active) return;\n      this.#queued = false;\n      this.#run();\n    });\n  }\n}\n","/**\n * Range normalization shared by the value-bearing controllers (progress, meter,\n * slider, range-slider).\n *\n * Each of them publishes \"where the value sits inside `[min, max]`\" as a CSS\n * custom property the consumer multiplies a track by, and each has to answer the\n * same degenerate cases: empty and inverted ranges cannot express progress, and\n * malformed Number Values can produce `NaN`. Keeping the rule in one place is\n * what makes those answers identical across the four.\n */\n\n/**\n * Fraction of `[min, max]` that `value` occupies, always within `[0, 1]`.\n *\n * `value` is clamped into the range first, so a value outside it reports a full\n * or empty track rather than pushing the fraction past the ends.\n *\n * An empty, inverted, or non-numeric range yields `0`. That is a deliberate\n * floor rather than a computed result: `min === max` would produce `NaN`, and\n * `min > max` would report a full track for a value that is really out of range.\n * Non-finite results are floored for the same reason. These results reach\n * assistive tech, because the same fraction drives the percentage substituted\n * into `aria-valuetext`.\n */\nexport function rangeFraction(value: number, min: number, max: number): number {\n  const span = max - min;\n  if (!(span > 0)) return 0;\n\n  const clamped = Math.min(max, Math.max(min, value));\n  let fraction: number;\n  if (Number.isFinite(span)) {\n    fraction = (clamped - min) / span;\n  } else {\n    // Scaling preserves the ratio when two finite endpoints straddle zero so\n    // widely that their subtraction overflows to Infinity.\n    const scale = Math.max(Math.abs(min), Math.abs(max));\n    fraction = (clamped / scale - min / scale) / (max / scale - min / scale);\n  }\n\n  if (!Number.isFinite(fraction)) return 0;\n  return Math.min(1, Math.max(0, fraction));\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { announce, fillTemplate } from \"../utils/announce\";\nimport { toFiniteNumber } from \"../utils/coerce\";\nimport { MicrotaskCoalescer } from \"../utils/microtask_coalescer\";\nimport { rangeFraction } from \"../utils/range\";\n\n/**\n * Event shape `setValue` accepts: an action param `amount` or a `detail.value`.\n * Both are typed `number | string` because, while Stimulus coerces numeric action\n * params to numbers, a `meter:set` CustomEvent (or a non-numeric-looking param)\n * may carry a string; {@link MeterController.setValue} normalizes either form.\n */\ntype SetValueEvent = Event & {\n  params?: { amount?: number | string };\n  detail?: { value?: number | string };\n};\n\n/** Threshold segment a value falls into, reflected on `data-state`. */\ntype MeterState = \"low\" | \"medium\" | \"high\";\n\n/** One point-in-time reading: the clamped value with the ratio and segment it implies. */\ntype MeterReading = { value: number; ratio: number; state: MeterState };\n\n/**\n * Marks an `aria-valuetext` this controller wrote, so a render takes back only\n * its own text. `aria-valuetext` is shared: a consumer may author it instead of\n * supplying a template, and that text is what carries the threshold segment to\n * readers who cannot see the colour — clearing it would take the segment with it.\n */\nconst OWNED_VALUE_TEXT = \"data-stimeo--meter-owns-valuetext\";\n\n/**\n * Headless meter behavior backed by the WAI-ARIA `meter` role.\n *\n * Markup contract (identifier: `stimeo--meter`):\n *   <div data-controller=\"stimeo--meter\" role=\"meter\" aria-label=\"Disk usage\"\n *        aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"72\"\n *        data-stimeo--meter-value-value=\"72\"\n *        data-stimeo--meter-low-value=\"50\" data-stimeo--meter-high-value=\"80\">\n *     <div data-stimeo--meter-target=\"bar\"></div>\n *   </div>\n *\n * A `meter` is a *point-in-time* scalar within a known range (disk usage,\n * battery, score) — distinct from {@link ProgressController}'s task progress.\n * The controller syncs the ARIA value attributes and, when `low`/`high`\n * thresholds are present, classifies the value into a `low`/`medium`/`high`\n * segment on `data-state` so the consumer can color the bar.\n *\n * @remarks\n * Behavior only. Because state must not be conveyed by color alone (WCAG 1.4.1),\n * a consumer-provided `valueText` template feeds `aria-valuetext` so the segment\n * is also available as text; a consumer that authors `aria-valuetext` itself keeps\n * it instead (see {@link OWNED_VALUE_TEXT}). Threshold presence is read from the\n * *attributes* (an absent attribute means \"no threshold\"), not from a sentinel value.\n */\nexport class MeterController extends Controller<HTMLElement> {\n  static override targets = [\"bar\"];\n  static override values = {\n    announceText: { type: String, default: \"\" },\n    value: { type: Number, default: 0 },\n    min: { type: Number, default: 0 },\n    max: { type: Number, default: 100 },\n    low: { type: Number, default: 0 },\n    high: { type: Number, default: 0 },\n    optimum: { type: Number, default: 0 },\n    valueText: { type: String, default: \"\" },\n  };\n  static actions = [\"setValue\"] as const;\n  static events = [\"change\"] as const;\n\n  declare readonly barTarget: HTMLElement;\n  declare readonly hasBarTarget: boolean;\n\n  declare valueValue: number;\n  declare minValue: number;\n  declare maxValue: number;\n  declare lowValue: number;\n  declare highValue: number;\n  declare optimumValue: number;\n  declare valueTextValue: string;\n  declare announceTextValue: string;\n\n  /**\n   * Collapses a morph that swaps several render inputs at once into one repaint.\n   * A single update usually rewrites the whole set, and each Value would otherwise\n   * repaint on its own.\n   */\n  readonly #repaint = new MicrotaskCoalescer(() => {\n    this.#render();\n  });\n\n  /** The segment last announced, so only a change is read out. */\n  #announcedState: MeterState | null = null;\n\n  override connect(): void {\n    this.#repaint.activate();\n    this.#render();\n  }\n\n  /** Closes the window in which a queued repaint may still run. */\n  override disconnect(): void {\n    this.#repaint.cancel();\n  }\n\n  /**\n   * Updates the measured value from an action param (`amount`) or a\n   * `detail.value` CustomEvent, syncs ARIA and `data-state`, and dispatches\n   * `change` with the value, ratio, and computed segment.\n   */\n  setValue(event: SetValueEvent): void {\n    const next = toFiniteNumber(event.params?.amount ?? event.detail?.value);\n    if (next === null) return;\n    this.valueValue = this.#clamp(next);\n    const reading = this.#render();\n    this.dispatch(\"change\", { detail: reading });\n    // Only the segment is news: reading every value would be unusable, and the\n    // number itself is already exposed through `aria-valuenow`.\n    if (reading.state !== this.#announcedState) {\n      this.#announcedState = reading.state;\n      announce(\n        fillTemplate(this.announceTextValue, { state: reading.state, value: reading.value }),\n      );\n    }\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `value` at runtime. */\n  valueValueChanged(): void {\n    this.#repaint.schedule();\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */\n  minValueChanged(): void {\n    this.#repaint.schedule();\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */\n  maxValueChanged(): void {\n    this.#repaint.schedule();\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `low` at runtime. */\n  lowValueChanged(): void {\n    this.#repaint.schedule();\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `high` at runtime. */\n  highValueChanged(): void {\n    this.#repaint.schedule();\n  }\n\n  /** Repaints when application code (or a Turbo morph) changes `valueText` at runtime. */\n  valueTextValueChanged(): void {\n    this.#repaint.schedule();\n  }\n\n  /** Clamps `raw` into the configured `[min, max]` range. */\n  #clamp(raw: number): number {\n    return Math.min(this.maxValue, Math.max(this.minValue, raw));\n  }\n\n  /** Whether a threshold attribute is present (absent = no threshold). */\n  #hasThreshold(name: \"low\" | \"high\"): boolean {\n    return this.element.hasAttribute(`data-stimeo--meter-${name}-value`);\n  }\n\n  /**\n   * Classifies `value` into a `low`/`medium`/`high` segment. Values at or below\n   * `low` are `low`; at or above `high` are `high`; otherwise `medium`. With\n   * neither threshold present, everything is `medium`.\n   */\n  #stateOf(value: number): MeterState {\n    if (this.#hasThreshold(\"low\") && value <= this.lowValue) return \"low\";\n    if (this.#hasThreshold(\"high\") && value >= this.highValue) return \"high\";\n    return \"medium\";\n  }\n\n  /**\n   * Reflects value/range onto ARIA, the segment onto `data-state`, and the ratio.\n   * The reading is derived once and returned, so the `change` detail reports the\n   * same numbers the DOM just received.\n   */\n  #render(): MeterReading {\n    const value = this.#clamp(this.valueValue);\n    const reading: MeterReading = {\n      value,\n      ratio: rangeFraction(value, this.minValue, this.maxValue),\n      state: this.#stateOf(value),\n    };\n    this.element.setAttribute(\"aria-valuemin\", String(this.minValue));\n    this.element.setAttribute(\"aria-valuemax\", String(this.maxValue));\n    this.element.setAttribute(\"aria-valuenow\", String(reading.value));\n    this.element.style.setProperty(\"--stimeo-meter-ratio\", String(reading.ratio));\n    this.element.setAttribute(\"data-state\", reading.state);\n    this.#applyValueText(reading);\n    return reading;\n  }\n\n  /**\n   * Sets `aria-valuetext` from the consumer-provided template, substituting\n   * `{value}`, `{percent}`, and `{state}`. Kept i18n-neutral in the library.\n   * With no template the attribute belongs to the consumer, so only a text this\n   * controller wrote is taken back ({@link OWNED_VALUE_TEXT}).\n   */\n  #applyValueText({ value, ratio, state }: MeterReading): void {\n    if (this.valueTextValue.length === 0) {\n      if (this.element.hasAttribute(OWNED_VALUE_TEXT)) {\n        this.element.removeAttribute(\"aria-valuetext\");\n        this.element.removeAttribute(OWNED_VALUE_TEXT);\n      }\n      return;\n    }\n    const percent = Math.round(ratio * 100);\n    const text = this.valueTextValue\n      .replaceAll(\"{value}\", String(value))\n      .replaceAll(\"{percent}\", String(percent))\n      .replaceAll(\"{state}\", state);\n    this.element.setAttribute(\"aria-valuetext\", text);\n    this.element.setAttribute(OWNED_VALUE_TEXT, \"\");\n  }\n}\n"]}

package/dist/controllers/multi_select_controller.d.ts

@@ -46,8 +46,8 @@ import { Controller } from '@hotwired/stimulus';
  *   inputs (default name `options[]`), so the selection submits with a normal
  *   form and no consumer JS — parity with {@link TagsInputController}. An optional
  *   `form` value sets the hidden inputs' `form` attribute, associating them with a
- *   `<form>` by id even when the picker lives outside it. Purely additive: with no
- *   `fields` target the behavior is unchanged.
+ *   `<form>` by id even when the picker lives outside it. Without a `fields`
+ *   target the hidden inputs are simply not written.
  */
 declare class MultiSelectController extends Controller<HTMLElement> {
     #private;
@@ -90,15 +90,41 @@ declare class MultiSelectController extends Controller<HTMLElement> {
     connect(): void;
     /** Tears down document and chip listeners on disconnect (Turbo included). */
     disconnect(): void;
-    /** Tracks an input added initially or after connect. */
+    /** Reconciles active state after an option target is added at runtime. */
+    optionTargetConnected(): void;
+    /** Cleans a removed target and reconciles active state against the surviving DOM. */
+    optionTargetDisconnected(option: HTMLElement): void;
+    /**
+     * Tracks an input added initially or after connect, and makes it describe the
+     * widget that is actually on screen: a swapped-in input arrives with the
+     * authored ARIA of a fresh node while this controller still holds the popup
+     * state, and the open path cannot repair that (it seeds an active option only
+     * when there is none), so a live list would go unannounced.
+     */
     inputTargetConnected(input: HTMLInputElement): void;
     /** Removes composition listeners when the active input is replaced or removed. */
     inputTargetDisconnected(input: HTMLInputElement): void;
     /** Filters confirmed input text, opens, and re-seeds the active option. */
     filter(event?: InputEvent): void;
-    /** Opens the list and activates the first visible option when none is active. */
+    /**
+     * Opens the list and activates the first visible option when none is active.
+     *
+     * Needs the input, which owns `aria-expanded` and `aria-activedescendant`: a
+     * list shown without one is a popup no assistive technology is told about. So
+     * opening is skipped entirely, where {@link close} still closes.
+     */
     open(): void;
-    /** Closes the list and clears the active option. */
+    /**
+     * Closes the list and clears the active option.
+     *
+     * Survives a missing input in both directions. `connect()` calls this second,
+     * so dereferencing the input here would throw before the chips, the roving
+     * seed, the chip listeners, the hidden fields and the outside-click listener —
+     * and Stimulus keeps the controller alive after that throw, so none of them
+     * would ever run and the selection would silently stop submitting. An input
+     * removed while the list is open must still let it come down *and* forget its
+     * active option, so only the `aria-expanded` write is guarded.
+     */
     close(): void;
     /** Routes input keyboard interaction per the multi-select combobox model. */
     onKeydown(event: KeyboardEvent): void;

package/dist/controllers/multi_select_controller.js

@@ -19,6 +19,22 @@ function ensureId(element, prefix = "stimeo") {
   return id;
 }
 
+// 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/composition_tracker.ts
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
@@ -66,6 +82,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;
@@ -111,6 +160,33 @@ var RovingTabindex = class {
   }
 };
 
+// src/utils/tabindex_loan.ts
+var TabindexLoan = class {
+  #value;
+  #lent = /* @__PURE__ */ new Set();
+  /**
+   * @param value - the `tabindex` to lend. `"-1"` (the default) is
+   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
+   *   which a scroll region with no focusable content of its own needs.
+   */
+  constructor(value = "-1") {
+    this.#value = value;
+  }
+  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
+  lend(element) {
+    if (element.hasAttribute("tabindex")) return;
+    element.setAttribute("tabindex", this.#value);
+    this.#lent.add(element);
+  }
+  /** Takes back every loan whose value is still the one that was lent. */
+  returnAll() {
+    for (const element of this.#lent) {
+      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+    }
+    this.#lent.clear();
+  }
+};
+
 // src/controllers/multi_select_controller.ts
 var MultiSelectController = class extends Controller {
   static targets = [
@@ -130,8 +206,14 @@ var MultiSelectController = class extends Controller {
   };
   static actions = ["close", "filter", "onKeydown", "open", "toggleOption"];
   static events = ["change", "filter"];
-  /** The active option (tracked via `aria-activedescendant`), or null. */
-  #activeOption = null;
+  /** Stable id of the active option; the current target is resolved from the DOM. */
+  #activeOptionId = null;
+  /** Whether the root borrowed a tab stop to catch focus, so teardown can undo it. */
+  #tabindex = new TabindexLoan();
+  /** Prevents initial/teardown target callbacks from mutating authored DOM. */
+  #connected = false;
+  /** Collapses one batch of target callbacks into a single final-DOM reconciliation. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());
   /** Absorbs the browser's redundant final input after compositionend. */
   #ignorePostCompositionInput = false;
   /** Owns IME lifecycle state; confirmed text emits one filter result. */
@@ -151,30 +233,109 @@ var MultiSelectController = class extends Controller {
   /** Starts closed, syncs chips for any pre-selected options, and listens out. */
   connect() {
     if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
+    this.#normalizeSelection();
     this.close();
     if (this.hasTagsTarget) {
       this.tagsTarget.addEventListener("keydown", this.#onTagKeydown);
       this.tagsTarget.addEventListener("click", this.#onTagClick);
-      for (const tag of this.tagTargets) tag.remove();
-      for (const option of this.#selectedOptions) this.#appendTag(option);
-      if (this.#removeButtons.length > 0) this.#roving.setActive(0);
+      this.#rebuildTags();
     }
     this.#syncFields();
-    document.addEventListener("click", this.#onOutsideClick);
+    document.addEventListener("click", this.#onOutsideClick, true);
+    this.#connected = true;
+    this.#reconcile.activate();
+  }
+  /**
+   * Derives the chips from the selected options, idempotently: a Turbo Drive cache
+   * restore or morph can re-connect with chips already in the DOM, so they are
+   * cleared before deriving afresh to avoid duplicates.
+   */
+  #rebuildTags() {
+    if (!this.hasTagsTarget) return;
+    for (const tag of this.tagTargets) tag.remove();
+    for (const option of this.#selectedOptions) this.#appendTag(option);
+    if (this.#removeButtons.length > 0) this.#roving.setActive(0);
   }
   /** Tears down document and chip listeners on disconnect (Turbo included). */
   disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
     this.#composition.disconnect();
     this.#ignorePostCompositionInput = false;
     if (this.hasTagsTarget) {
       this.tagsTarget.removeEventListener("keydown", this.#onTagKeydown);
       this.tagsTarget.removeEventListener("click", this.#onTagClick);
     }
-    document.removeEventListener("click", this.#onOutsideClick);
+    document.removeEventListener("click", this.#onOutsideClick, true);
+    this.#releaseTabindex();
+  }
+  /** Reconciles active state after an option target is added at runtime. */
+  optionTargetConnected() {
+    this.#scheduleOptionReconcile();
   }
-  /** Tracks an input added initially or after connect. */
+  /** Cleans a removed target and reconciles active state against the surviving DOM. */
+  optionTargetDisconnected(option) {
+    if (!this.#connected) return;
+    option.removeAttribute("data-active");
+    this.#scheduleOptionReconcile();
+  }
+  /** Schedules one reconciliation after all callbacks in the mutation batch. */
+  #scheduleOptionReconcile() {
+    this.#reconcile.schedule();
+  }
+  /**
+   * Keeps a surviving/same-id active target, otherwise falls back to the first
+   * visible one — and brings the derived state back in line with the new option set.
+   *
+   * The baseline pass fills in any missing `aria-selected`, and the chips and
+   * hidden fields are re-derived from it, because the options are the truth source
+   * for the selection. The chips are rebuilt **only when the selected value set
+   * actually moved**: the rebuild removes and recreates every chip, so running it
+   * for an unrelated option would drop focus from a chip's remove button to
+   * `<body>`, losing the keyboard user's place for something that did not concern
+   * them.
+   */
+  #reconcileOptions() {
+    const visible = this.#visibleOptions;
+    const active = this.#activeOption;
+    const next = this.#isClosed ? null : active && !active.hidden ? active : visible[0] ?? null;
+    this.#setActive(next);
+    this.#reflectEmpty();
+    this.#normalizeSelection();
+    const selected = this.#selectedOptions;
+    const nextValues = selected.map((option) => this.#optionValue(option)).sort();
+    const tagValues = this.tagTargets.map((tag) => tag.dataset.value ?? "").sort();
+    const unchanged = nextValues.length === tagValues.length && nextValues.every((value, index) => value === tagValues[index]);
+    if (unchanged) this.#refreshTagLabels(selected);
+    else this.#rebuildTags();
+    this.#syncFields();
+  }
+  /**
+   * Gives every option an explicit `aria-selected`, without changing which ones
+   * the author chose. An absent value means "not selectable" in ARIA, so a
+   * forgotten attribute hides a selectable option. Several `true` is the normal
+   * case here — the list is `aria-multiselectable` — so nothing is dropped.
+   */
+  #normalizeSelection() {
+    for (const option of this.optionTargets) {
+      if (option.getAttribute("aria-selected") !== "true") {
+        option.setAttribute("aria-selected", "false");
+      }
+    }
+  }
+  /**
+   * Tracks an input added initially or after connect, and makes it describe the
+   * widget that is actually on screen: a swapped-in input arrives with the
+   * authored ARIA of a fresh node while this controller still holds the popup
+   * state, and the open path cannot repair that (it seeds an active option only
+   * when there is none), so a live list would go unannounced.
+   */
   inputTargetConnected(input) {
     this.#composition.observe(input);
+    input.setAttribute("aria-expanded", String(!this.#isClosed));
+    const active = this.#activeOption;
+    if (active) input.setAttribute("aria-activedescendant", ensureId(active, "stimeo-ms-opt"));
+    else input.removeAttribute("aria-activedescendant");
   }
   /** Removes composition listeners when the active input is replaced or removed. */
   inputTargetDisconnected(input) {
@@ -195,28 +356,48 @@ var MultiSelectController = class extends Controller {
     }
     this.open();
     const visible = this.#visibleOptions;
-    this.element.toggleAttribute("data-stimeo--multi-select-empty", visible.length === 0);
+    this.#reflectEmpty();
     this.#setActive(visible[0] ?? null);
     this.dispatch("filter", { detail: { query } });
   }
-  /** Opens the list and activates the first visible option when none is active. */
+  /**
+   * Opens the list and activates the first visible option when none is active.
+   *
+   * Needs the input, which owns `aria-expanded` and `aria-activedescendant`: a
+   * list shown without one is a popup no assistive technology is told about. So
+   * opening is skipped entirely, where {@link close} still closes.
+   */
   open() {
-    if (!this.hasListTarget) return;
+    if (!this.hasListTarget || !this.hasInputTarget) return;
     this.listTarget.hidden = false;
     this.inputTarget.setAttribute("aria-expanded", "true");
     if (!this.#activeOption) this.#setActive(this.#visibleOptions[0] ?? null);
   }
-  /** Closes the list and clears the active option. */
+  /**
+   * Closes the list and clears the active option.
+   *
+   * Survives a missing input in both directions. `connect()` calls this second,
+   * so dereferencing the input here would throw before the chips, the roving
+   * seed, the chip listeners, the hidden fields and the outside-click listener —
+   * and Stimulus keeps the controller alive after that throw, so none of them
+   * would ever run and the selection would silently stop submitting. An input
+   * removed while the list is open must still let it come down *and* forget its
+   * active option, so only the `aria-expanded` write is guarded.
+   */
   close() {
     if (!this.hasListTarget) return;
     this.listTarget.hidden = true;
-    this.inputTarget.setAttribute("aria-expanded", "false");
     this.#setActive(null);
+    if (!this.hasInputTarget) return;
+    this.inputTarget.setAttribute("aria-expanded", "false");
   }
   /** Routes input keyboard interaction per the multi-select combobox model. */
   onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     if (this.#composition.isComposing(event)) return;
-    switch (event.key) {
+    this.#reconcileActiveForInteraction();
+    switch (logicalArrowKey(event.key, this.element)) {
       case "ArrowDown":
         event.preventDefault();
         if (this.#isClosed) this.open();
@@ -241,14 +422,16 @@ var MultiSelectController = class extends Controller {
         }
         break;
       }
-      case "Enter":
-        if (!this.#isClosed && this.#activeOption) {
+      case "Enter": {
+        const active = this.#activeOption;
+        if (!this.#isClosed && active) {
           event.preventDefault();
-          this.#toggleSelection(this.#activeOption);
+          this.#toggleSelection(active);
         }
         break;
+      }
       case "Escape":
-        if (event.defaultPrevented || this.#isClosed) break;
+        if (this.#isClosed) break;
         event.preventDefault();
         this.close();
         break;
@@ -281,9 +464,50 @@ var MultiSelectController = class extends Controller {
    */
   toggleOption(event) {
     const option = event.currentTarget.closest('[role="option"]');
-    if (!option) return;
+    if (!option || !this.optionTargets.includes(option)) return;
     this.#toggleSelection(option);
-    this.inputTarget.focus();
+    this.#focusInput();
+  }
+  /**
+   * Re-homes focus to the input, or leaves it where it is when there is none.
+   *
+   * All three callers run *after* an option or a chip already took focus, and all
+   * three are reachable without an input — options and chips carry their own
+   * `data-action`. Throwing here would leave the chip removed but focus stranded
+   * on a detached button.
+   */
+  #focusInput() {
+    if (this.hasInputTarget) this.inputTarget.focus();
+  }
+  /**
+   * Re-homes focus after the last chip was removed: to the input, else the root.
+   *
+   * Unlike the other {@link #focusInput} callers, the element that held focus has
+   * just left the DOM, so "leave it alone" is not an option — the browser already
+   * dropped it to `<body>`. The root borrows a `tabindex="-1"` just-in-time (not a
+   * Tab stop, handed back on teardown). Focus that landed on a real element is
+   * left alone, so a chip removed out of band never steals it.
+   */
+  #focusAfterLastTag() {
+    if (this.hasInputTarget) {
+      this.inputTarget.focus();
+      return;
+    }
+    const doc = this.element.ownerDocument;
+    const active = doc.activeElement;
+    if (active && active !== doc.body && active !== doc.documentElement && active.isConnected) {
+      return;
+    }
+    this.#tabindex.lend(this.element);
+    this.element.focus();
+  }
+  /**
+   * Returns the borrowed tab stop. Owning the borrow is not enough — the value
+   * has to still be the one this instance wrote, since a consumer that changed it
+   * afterwards owns it now.
+   */
+  #releaseTabindex() {
+    this.#tabindex.returnAll();
   }
   /**
    * Removes the chip whose remove button was clicked, deselecting its option.
@@ -302,7 +526,8 @@ var MultiSelectController = class extends Controller {
     const visible = this.#visibleOptions;
     if (visible.length === 0) return;
     const current = this.#activeOption ? visible.indexOf(this.#activeOption) : -1;
-    const next = (current + delta + visible.length) % visible.length;
+    const candidate = current === -1 ? delta > 0 ? 0 : visible.length - 1 : current + delta;
+    const next = (candidate + visible.length) % visible.length;
     this.#setActive(visible[next] ?? null);
   }
   /** Selects/deselects `option`, honoring `max`, and syncs chip + live region. */
@@ -322,6 +547,30 @@ var MultiSelectController = class extends Controller {
     this.#syncFields();
     this.dispatch("change", { detail: { values: this.#values } });
   }
+  /**
+   * Re-reads each chip's label from its option, in place.
+   *
+   * The value order alone does not say the chips are still correct: a server can
+   * re-render the same candidate with a new label ("Apple" → "Green Apple"), and
+   * the chip text and its `Remove {label}` name are both derived from the option.
+   * Updating them here keeps the rebuild — which would drop focus — for the case
+   * that actually needs it, a changed selection.
+   */
+  #refreshTagLabels(selected) {
+    const options = new Map(selected.map((option) => [this.#optionValue(option), option]));
+    for (const tag of this.tagTargets) {
+      const option = options.get(tag.dataset.value ?? "");
+      if (!option) continue;
+      const text = this.#optionLabel(option);
+      const label = tag.querySelector('[data-multi-select-slot="label"]');
+      if (label && label.textContent !== text) label.textContent = text;
+      const button = tag.querySelector("button");
+      const name = `Remove ${text}`;
+      if (button && button.getAttribute("aria-label") !== name) {
+        button.setAttribute("aria-label", name);
+      }
+    }
+  }
   /** Builds one chip from the template for `option`. */
   #appendTag(option) {
     if (!this.hasTagTemplateTarget || !this.hasTagsTarget) return;
@@ -357,19 +606,21 @@ var MultiSelectController = class extends Controller {
     this.dispatch("change", { detail: { values: this.#values } });
     const remaining = this.#removeButtons;
     if (remaining.length === 0) {
-      this.inputTarget.focus();
+      this.#focusAfterLastTag();
     } else {
       this.#roving.setActive(Math.min(index, remaining.length - 1), { focus: true });
     }
   }
   /** Arrow navigation and deletion within the chip list (delegated). */
   #onTagKeydown = (event) => {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const button = event.target.closest("button");
     if (!button) return;
     const buttons = this.#removeButtons;
     const index = buttons.indexOf(button);
     if (index === -1) return;
-    switch (event.key) {
+    switch (logicalArrowKey(event.key, this.element)) {
       case "ArrowLeft":
         if (index > 0) {
           event.preventDefault();
@@ -379,7 +630,7 @@ var MultiSelectController = class extends Controller {
       case "ArrowRight":
         event.preventDefault();
         if (index < buttons.length - 1) this.#roving.setActive(index + 1, { focus: true });
-        else this.inputTarget.focus();
+        else this.#focusInput();
         break;
       case "Delete":
       case "Backspace":
@@ -391,23 +642,49 @@ var MultiSelectController = class extends Controller {
   /**
    * Marks `option` active via `data-active` and the input's
    * `aria-activedescendant` (the attribute is removed, not emptied, when null).
+   *
+   * The state half runs even with no input, so a `close()` that cannot touch ARIA
+   * still clears it: {@link open} seeds an active option only when there is none,
+   * so a stale one makes the next open skip the seeding and a replacement input
+   * gets no `aria-activedescendant` at all.
    */
   #setActive(option) {
-    this.#activeOption = option;
+    const activeId = option ? ensureId(option, "stimeo-ms-opt") : null;
+    this.#activeOptionId = activeId;
     for (const candidate of this.optionTargets) {
       candidate.toggleAttribute("data-active", candidate === option);
     }
-    if (option) {
-      this.inputTarget.setAttribute("aria-activedescendant", ensureId(option, "stimeo-ms-opt"));
-      if (this.hasListTarget) scrollOptionIntoView(this.listTarget, option);
+    if (option && this.hasListTarget) scrollOptionIntoView(this.listTarget, option);
+    if (!this.hasInputTarget) return;
+    if (activeId !== null) {
+      this.inputTarget.setAttribute("aria-activedescendant", activeId);
     } else {
       this.inputTarget.removeAttribute("aria-activedescendant");
     }
   }
+  /** Repairs only active identity before a key; the fallback waits for the target callback. */
+  #reconcileActiveForInteraction() {
+    const activeId = this.#activeOptionId;
+    if (activeId === null) return;
+    const resolved = this.#activeOption;
+    const active = resolved && !resolved.hidden ? resolved : null;
+    const marked = this.optionTargets.filter((candidate) => candidate.hasAttribute("data-active"));
+    const idref = this.hasInputTarget ? this.inputTarget.getAttribute("aria-activedescendant") : null;
+    if (!active || marked.length !== 1 || marked[0] !== active || idref !== activeId) {
+      this.#setActive(active);
+    }
+  }
+  /** Reflects whether the open list currently has no visible option targets. */
+  #reflectEmpty() {
+    this.element.toggleAttribute(
+      "data-stimeo--multi-select-empty",
+      !this.#isClosed && this.#visibleOptions.length === 0
+    );
+  }
   /**
    * Mirrors the selected values into named hidden inputs under the `fields`
    * target so the selection submits with a normal form (parity with tags-input).
-   * No-ops without a `fields` target, keeping the control back-compat. When the
+   * No-ops without a `fields` target. When the
    * `form` value is set, each input gets a matching `form` attribute so the picker
    * can submit with a `<form>` it lives outside of.
    */
@@ -449,6 +726,12 @@ var MultiSelectController = class extends Controller {
   get #visibleOptions() {
     return this.optionTargets.filter((option) => !option.hidden);
   }
+  /** Current active target resolved by stable id, never a detached node reference. */
+  get #activeOption() {
+    const activeId = this.#activeOptionId;
+    if (activeId === null) return null;
+    return this.optionTargets.find((option) => option.id === activeId) ?? null;
+  }
   /** Options currently selected. */
   get #selectedOptions() {
     return this.optionTargets.filter((option) => option.getAttribute("aria-selected") === "true");