stimeo-ui 0.4.0 → 0.6.0

package/dist/controllers/multi_select_controller.d.ts

@@ -4,7 +4,9 @@ import { Controller } from '@hotwired/stimulus';
  * Headless, accessible multi-select combobox with chips.
  *
  * Markup contract (identifier: `stimeo--multi-select`):
- *   <div data-controller="stimeo--multi-select">
+ *   <div data-controller="stimeo--multi-select"
+ *        data-stimeo--multi-select-announce-text-value="{label} selected; {count} total"
+ *        data-stimeo--multi-select-announce-removed-text-value="{label} removed; {count} total">
  *     <ul data-stimeo--multi-select-target="tags" aria-label="Selected"></ul>
  *     <input type="text" role="combobox" aria-expanded="false"
  *            aria-autocomplete="list" aria-controls="ms-list"
@@ -18,11 +20,15 @@ import { Controller } from '@hotwired/stimulus';
  *           data-stimeo--multi-select-target="option"
  *           data-action="click->stimeo--multi-select#toggleOption">Apple</li>
  *     </ul>
- *     <span role="status" aria-live="polite" class="visually-hidden"
- *           data-stimeo--multi-select-target="status"></span>
  *     <!-- Optional: submit the selection as name="fruits[]" hidden inputs. -->
  *     <div data-stimeo--multi-select-target="fields"></div>
- *     <template data-stimeo--multi-select-target="tagTemplate">…</template>
+ *     <template data-stimeo--multi-select-target="tagTemplate">
+ *       <li data-stimeo--multi-select-target="tag">
+ *         <span data-stimeo--multi-select-target="label"></span>
+ *         <button type="button" tabindex="-1" aria-label="Remove {label}"
+ *                 data-stimeo--multi-select-target="remove">×</button>
+ *       </li>
+ *     </template>
  *   </div>
  *
  * Implements the WAI-ARIA APG **Combobox** pattern in its list-autocomplete,
@@ -35,13 +41,19 @@ import { Controller } from '@hotwired/stimulus';
  * - Typing filters options by substring and opens the list; `ArrowDown`/`ArrowUp`
  *   (wrapping), `Home`/`End` move the active option; `Enter` toggles it (the list
  *   stays open); `Escape`/`Tab`/outside click close.
- * - Toggling syncs `aria-selected`, adds/removes a `Remove {label}` chip, mirrors
- *   the live region, and dispatches `stimeo--multi-select:change` with `values`;
- *   filtering dispatches `stimeo--multi-select:filter` for async candidates.
+ * - Toggling syncs `aria-selected`, expands the author-localized remove-button
+ *   name from the chip template, adds/removes the chip, sends localized text to
+ *   the shared announcer, and dispatches
+ *   `stimeo--multi-select:change` with `values`; filtering dispatches
+ *   `stimeo--multi-select:filter` for async candidates. Option churn or a lowered
+ *   `max` that moves the selection without a user edit is reported as
+ *   `stimeo--multi-select:reconcile`, carrying the same `values` detail.
  * - The chips are one roving Tab stop: `ArrowLeft`/`ArrowRight` move between them,
  *   `Delete`/`Backspace` remove the focused chip, and `Backspace` on an empty
- *   input removes the last; removal re-homes focus to a neighbor or the input.
- * - `max` caps the selection (`0` = unlimited).
+ *   input removes the last and keeps input focus; removal from a chip re-homes
+ *   focus to a neighbor or the input.
+ * - `max` is a permanent selection invariant across initial markup, interaction,
+ *   runtime options, and runtime cap changes (`0` = unlimited).
  * - With a `fields` target the selected values are mirrored into named hidden
  *   inputs (default name `options[]`), so the selection submits with a normal
  *   form and no consumer JS — parity with {@link TagsInputController}. An optional
@@ -65,27 +77,37 @@ declare class MultiSelectController extends Controller<HTMLElement> {
             type: StringConstructor;
             default: string;
         };
+        announceText: {
+            type: StringConstructor;
+            default: string;
+        };
+        announceRemovedText: {
+            type: StringConstructor;
+            default: string;
+        };
     };
     static actions: readonly ["close", "filter", "onKeydown", "open", "toggleOption"];
-    static events: readonly ["change", "filter"];
+    static events: readonly ["change", "filter", "reconcile"];
     readonly inputTarget: HTMLInputElement;
     readonly listTarget: HTMLElement;
     readonly optionTargets: HTMLElement[];
     readonly tagsTarget: HTMLElement;
     readonly tagTargets: HTMLElement[];
     readonly tagTemplateTarget: HTMLTemplateElement;
-    readonly statusTarget: HTMLElement;
+    readonly labelTargets: HTMLElement[];
+    readonly removeTargets: HTMLButtonElement[];
     readonly fieldsTarget: HTMLElement;
     readonly hasListTarget: boolean;
     readonly hasInputTarget: boolean;
     readonly hasTagsTarget: boolean;
     readonly hasTagTemplateTarget: boolean;
-    readonly hasStatusTarget: boolean;
     readonly hasFieldsTarget: boolean;
     maxValue: number;
     nameValue: string;
     formValue: string;
     readonly hasFormValue: boolean;
+    announceTextValue: string;
+    announceRemovedTextValue: string;
     /** Starts closed, syncs chips for any pre-selected options, and listens out. */
     connect(): void;
     /** Tears down document and chip listeners on disconnect (Turbo included). */
@@ -94,6 +116,18 @@ declare class MultiSelectController extends Controller<HTMLElement> {
     optionTargetConnected(): void;
     /** Cleans a removed target and reconciles active state against the surviving DOM. */
     optionTargetDisconnected(option: HTMLElement): void;
+    /** Rebinds delegated chip interaction when Turbo replaces the tags container. */
+    tagsTargetConnected(tags: HTMLElement): void;
+    /** Releases only the row that actually disconnected, never a newer replacement. */
+    tagsTargetDisconnected(tags: HTMLElement): void;
+    /** Seeds a fields target inserted after connect from the current selection. */
+    fieldsTargetConnected(): void;
+    /** Reconciles a runtime max change, including dropping any newly invalid overflow. */
+    maxValueChanged(): void;
+    /** Rebuilds submitted fields when their public name changes at runtime. */
+    nameValueChanged(): void;
+    /** Rebuilds submitted fields when their associated form changes at runtime. */
+    formValueChanged(): 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