stimeo-ui 0.1.0.pre.alpha.1

data/dist/controllers/character_counter_controller.js

@@ -0,0 +1,179 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/character_counter_controller.ts
+
+// src/utils/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+// src/controllers/character_counter_controller.ts
+var ORIGINAL_INVALID = "data-character-counter-original-invalid";
+var CharacterCounterController = class _CharacterCounterController extends Controller {
+  static targets = ["input", "output"];
+  static values = {
+    max: { type: Number, default: 0 },
+    warnAt: { type: Number, default: 0 },
+    mode: { type: String, default: "remaining" }
+  };
+  static events = ["change"];
+  /** Delay (ms) before the live-region count is written, to throttle SR flooding. */
+  static #announceDelay = 200;
+  #timeouts = new SafeTimeout();
+  #announceId = null;
+  /** True while an IME composition is active; intermediate input is skipped. */
+  #composing = false;
+  #onInput = (event) => {
+    if (this.#composing || event.isComposing) return;
+    this.#update();
+  };
+  #onCompositionStart = () => {
+    this.#composing = true;
+  };
+  #onCompositionEnd = () => {
+    this.#composing = false;
+    this.#update();
+  };
+  connect() {
+    const field = this.#field;
+    if (!field) return;
+    field.addEventListener("input", this.#onInput);
+    field.addEventListener("compositionstart", this.#onCompositionStart);
+    field.addEventListener("compositionend", this.#onCompositionEnd);
+    this.#update({ announce: false });
+  }
+  disconnect() {
+    const field = this.#field;
+    field?.removeEventListener("input", this.#onInput);
+    field?.removeEventListener("compositionstart", this.#onCompositionStart);
+    field?.removeEventListener("compositionend", this.#onCompositionEnd);
+    this.#timeouts.clearAll();
+    this.#announceId = null;
+    this.#composing = false;
+  }
+  /**
+   * Recomputes length-derived state. Non-text state (data hooks, `aria-invalid`)
+   * and the `change` event apply immediately; the live-region count text is
+   * debounced unless `announce` is `false` (initial render).
+   */
+  #update(options = {}) {
+    const field = this.#field;
+    if (!field) return;
+    const length = field.value.length;
+    const hasLimit = this.maxValue > 0;
+    const remaining = hasLimit ? this.maxValue - length : null;
+    const over = hasLimit && length > this.maxValue;
+    const near = hasLimit && this.warnAtValue > 0 && !over && remaining !== null && remaining <= this.warnAtValue;
+    this.#toggle("data-over-limit", over);
+    this.#toggle("data-near-limit", near);
+    if (hasLimit && over) {
+      if (!field.hasAttribute(ORIGINAL_INVALID)) {
+        field.setAttribute(ORIGINAL_INVALID, field.getAttribute("aria-invalid") ?? "");
+      }
+      field.setAttribute("aria-invalid", "true");
+    } else if (field.hasAttribute(ORIGINAL_INVALID)) {
+      const original = field.getAttribute(ORIGINAL_INVALID);
+      if (original) {
+        field.setAttribute("aria-invalid", original);
+      } else {
+        field.removeAttribute("aria-invalid");
+      }
+      field.removeAttribute(ORIGINAL_INVALID);
+    }
+    const text = this.#format(length, remaining);
+    if (options.announce === false) {
+      this.#writeOutput(text);
+      return;
+    }
+    this.dispatch("change", { detail: { length, remaining, over } });
+    if (this.#announceId !== null) this.#timeouts.clear(this.#announceId);
+    this.#announceId = this.#timeouts.set(() => {
+      this.#writeOutput(text);
+      this.#announceId = null;
+    }, _CharacterCounterController.#announceDelay);
+  }
+  /** Builds the count text for the active `mode`. */
+  #format(length, remaining) {
+    if (remaining === null) return String(length);
+    switch (this.modeValue) {
+      case "used":
+        return String(length);
+      case "both":
+        return `${length}/${this.maxValue}`;
+      default:
+        return String(remaining);
+    }
+  }
+  #writeOutput(text) {
+    if (this.hasOutputTarget) this.outputTarget.textContent = text;
+  }
+  /** Sets a presence-style boolean data hook (attribute present when `on`). */
+  #toggle(name, on) {
+    if (on) {
+      this.element.setAttribute(name, "true");
+    } else {
+      this.element.removeAttribute(name);
+    }
+  }
+  /** The watched field: the `input` target, or the element itself when it is one. */
+  get #field() {
+    if (this.hasInputTarget) return this.inputTarget;
+    const el = this.element;
+    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+      return el;
+    }
+    return null;
+  }
+};
+
+export { CharacterCounterController };
+//# sourceMappingURL=character_counter_controller.js.map
+//# sourceMappingURL=character_counter_controller.js.map

data/dist/controllers/checkbox_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/checkbox_controller.ts
+var CheckboxController = class extends Controller {
+  static targets = ["parent", "child"];
+  static actions = ["onChildChange", "onParentChange"];
+  static events = ["change"];
+  /** Reflects the initial aggregate (e.g. from server-rendered child states). */
+  connect() {
+    if (this.childTargets.length > 0) {
+      this.#syncFromChildren(false);
+    } else {
+      this.element.setAttribute("data-state", this.#aggregate());
+    }
+  }
+  /** Cascades the parent's state to every child. Bound via `data-action` (change). */
+  onParentChange() {
+    if (!this.hasParentTarget) return;
+    const checked = this.parentTarget.checked;
+    for (const child of this.childTargets) {
+      child.checked = checked;
+    }
+    this.parentTarget.indeterminate = false;
+    const state = checked ? "all" : "none";
+    this.element.setAttribute("data-state", state);
+    this.dispatch("change", { detail: { checked, indeterminate: false, state } });
+  }
+  /** Recomputes the parent from its children. Bound via `data-action` (change). */
+  onChildChange() {
+    this.#syncFromChildren(true);
+  }
+  /**
+   * Derives the parent's `checked`/`indeterminate` and the root `data-state` from
+   * the children, optionally dispatching `change`.
+   */
+  #syncFromChildren(dispatch) {
+    const state = this.#aggregate();
+    if (this.hasParentTarget) {
+      this.parentTarget.checked = state === "all";
+      this.parentTarget.indeterminate = state === "partial";
+    }
+    this.element.setAttribute("data-state", state);
+    if (dispatch) {
+      this.dispatch("change", {
+        detail: {
+          checked: this.hasParentTarget ? this.parentTarget.checked : state === "all",
+          indeterminate: this.hasParentTarget ? this.parentTarget.indeterminate : false,
+          state
+        }
+      });
+    }
+  }
+  /**
+   * Computes the aggregate state. With children it counts them; with none it
+   * reads the parent so a lone tri-state checkbox still reports a state without
+   * its externally-set `indeterminate` being clobbered.
+   */
+  #aggregate() {
+    const children = this.childTargets;
+    if (children.length === 0) {
+      if (this.hasParentTarget && this.parentTarget.indeterminate) return "partial";
+      return this.hasParentTarget && this.parentTarget.checked ? "all" : "none";
+    }
+    const checked = children.filter((child) => child.checked).length;
+    if (checked === 0) return "none";
+    if (checked === children.length) return "all";
+    return "partial";
+  }
+};
+
+export { CheckboxController };
+//# sourceMappingURL=checkbox_controller.js.map
+//# sourceMappingURL=checkbox_controller.js.map

data/dist/controllers/combobox_controller.js

@@ -0,0 +1,186 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/combobox_controller.ts
+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;
+  /**
+   * Suppresses {@link open} for the duration of the programmatic re-focus in
+   * `#select`, so committing a value (which returns focus to the input)
+   * does not immediately re-open the listbox via a `focus`-bound action.
+   */
+  #suppressOpen = false;
+  /** Starts closed with no active option and registers the outside-click listener. */
+  connect() {
+    this.close();
+    document.addEventListener("click", this.#onOutsideClick);
+  }
+  /** Removes the document-level listener registered in {@link connect}. */
+  disconnect() {
+    document.removeEventListener("click", this.#onOutsideClick);
+  }
+  /** Filters options by the current input value and opens the listbox. */
+  filter() {
+    this.open();
+  }
+  /**
+   * Opens the listbox, re-filtering the options against the current input value
+   * so the visible options and empty state always match what is typed (e.g.
+   * re-opening with a stale non-matching value still surfaces the empty state).
+   */
+  open() {
+    if (!this.hasListTarget || this.#suppressOpen) return;
+    this.#applyFilter();
+    this.listTarget.hidden = false;
+    this.inputTarget.setAttribute("aria-expanded", "true");
+    this.#setActive(-1);
+    this.#reflectEmptyState();
+  }
+  /**
+   * Hides options that don't match the current input value (case-insensitive
+   * substring). An empty query shows every option. Does not change open state.
+   */
+  #applyFilter() {
+    const query = this.inputTarget.value.trim().toLowerCase();
+    for (const option of this.optionTargets) {
+      const text = (option.textContent ?? "").trim().toLowerCase();
+      option.hidden = query.length > 0 && !text.includes(query);
+    }
+  }
+  /** Closes the listbox, clears the active option, and updates ARIA state. */
+  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");
+  }
+  /** Routes keyboard interaction per the APG combobox model. */
+  onKeydown(event) {
+    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;
+          this.#setActive(next);
+        }
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        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;
+          this.#setActive(next);
+        }
+        break;
+      }
+      case "Home":
+        if (!this.#isClosed && this.#visibleOptions().length > 0) {
+          event.preventDefault();
+          this.#setActive(0);
+        }
+        break;
+      case "End": {
+        const visible = this.#visibleOptions();
+        if (!this.#isClosed && visible.length > 0) {
+          event.preventDefault();
+          this.#setActive(visible.length - 1);
+        }
+        break;
+      }
+      case "Enter": {
+        const visible = this.#visibleOptions();
+        const active = this.#activeIndex === -1 ? void 0 : visible[this.#activeIndex];
+        if (active) {
+          event.preventDefault();
+          this.#select(active);
+        }
+        break;
+      }
+      case "Escape":
+        event.preventDefault();
+        this.close();
+        break;
+      case "Tab":
+        this.close();
+        break;
+    }
+  }
+  /**
+   * Closes the listbox when a click lands outside the combobox. Mirrors the menu
+   * button's outside-click behavior; clicks on an option are inside the element,
+   * so `#select` (not this handler) closes the popup after committing.
+   */
+  #onOutsideClick = (event) => {
+    if (!this.#isClosed && !this.element.contains(event.target)) this.close();
+  };
+  /** Selects the clicked option. Bound via `data-action` (click). */
+  selectByClick(event) {
+    const option = event.currentTarget.closest('[role="option"]');
+    if (option) this.#select(option);
+  }
+  /** Commits an option: fills the input, closes the listbox, notifies listeners. */
+  #select(option) {
+    const value = option.dataset.value ?? (option.textContent ?? "").trim();
+    const changed = this.inputTarget.value !== value;
+    this.inputTarget.value = value;
+    this.close();
+    this.#suppressOpen = true;
+    this.inputTarget.focus();
+    this.#suppressOpen = false;
+    if (changed) {
+      this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    this.dispatch("selected", { detail: { value } });
+  }
+  /**
+   * Reflects whether the open listbox currently has zero matching options by
+   * toggling `data-stimeo--combobox-empty` on the root element. Behavior only:
+   * consumers decide how to present the empty state (hide the list, show a
+   * "no results" node, etc.) via CSS keyed off this attribute.
+   */
+  #reflectEmptyState() {
+    const empty = !this.#isClosed && this.#visibleOptions().length === 0;
+    if (empty) {
+      this.element.setAttribute("data-stimeo--combobox-empty", "");
+    } else {
+      this.element.removeAttribute("data-stimeo--combobox-empty");
+    }
+  }
+  /**
+   * Marks the visible option at `index` active via `aria-selected` and the
+   * 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");
+    }
+  }
+  /** The options currently shown (not filtered out). */
+  #visibleOptions() {
+    return this.optionTargets.filter((option) => !option.hidden);
+  }
+  /** Whether the listbox is currently hidden. */
+  get #isClosed() {
+    return !this.hasListTarget || this.listTarget.hidden !== false;
+  }
+};
+
+export { ComboboxController };
+//# sourceMappingURL=combobox_controller.js.map
+//# sourceMappingURL=combobox_controller.js.map