stimeo-ui 0.6.0 → 0.7.0

data/dist/controllers/form_validation_controller.js

@@ -9,8 +9,80 @@ function setDefaultAttribute(element, name, value) {
   return true;
 }
 
-// src/utils/focus_trap.ts
-var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+// src/utils/focus_candidate.ts
+function inheritsFieldsetDisabled(control) {
+  let fieldset = control.closest("fieldset[disabled]");
+  while (fieldset) {
+    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(control)) return true;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
+  }
+  return false;
+}
+function canTakeFocus(element) {
+  if (element.closest("[hidden], [inert]")) return false;
+  if (element instanceof HTMLInputElement && element.type === "hidden") return false;
+  if (!("disabled" in element)) return true;
+  if (element.disabled) return false;
+  return !inheritsFieldsetDisabled(element);
+}
+var TAB_STOP_CANDIDATE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  "[tabindex]",
+  "[contenteditable]"
+].join(",");
+function isRenderedForFocus(element) {
+  const check = element.checkVisibility;
+  return typeof check === "function" ? check.call(element, { visibilityProperty: true }) : true;
+}
+function authoredTabindex(element) {
+  const value = element.getAttribute("tabindex");
+  if (value === null || !/^[+-]?\d+$/.test(value.trim())) return null;
+  return Number(value);
+}
+function hasNativeTabStop(element) {
+  if (element instanceof HTMLAnchorElement || element instanceof HTMLAreaElement) {
+    return element.hasAttribute("href");
+  }
+  if (element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+    return true;
+  }
+  if (element instanceof HTMLInputElement) return element.type !== "hidden";
+  if (element instanceof HTMLIFrameElement) return true;
+  if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
+    return element.hasAttribute("controls");
+  }
+  if (element instanceof HTMLElement && element.tagName === "SUMMARY") {
+    const details = element.parentElement;
+    return details instanceof HTMLDetailsElement && Array.from(details.children).find((child) => child.tagName === "SUMMARY") === element;
+  }
+  return false;
+}
+function hasEditableTabStop(element) {
+  const value = element.getAttribute("contenteditable")?.toLowerCase();
+  return value === "" || value === "true" || value === "plaintext-only";
+}
+function isTabStop(element) {
+  if (!canTakeFocus(element) || !isRenderedForFocus(element)) return false;
+  const tabindex = authoredTabindex(element);
+  if (tabindex !== null) return tabindex >= 0;
+  return hasNativeTabStop(element) || hasEditableTabStop(element);
+}
+function firstTabStop(root) {
+  for (const candidate of root.querySelectorAll(TAB_STOP_CANDIDATE_SELECTOR)) {
+    if (isTabStop(candidate)) return candidate;
+  }
+  return null;
+}
 
 // src/controllers/form_validation_controller.ts
 var CONSTRAINT_MESSAGE_KEYS = [
@@ -24,10 +96,12 @@ var CONSTRAINT_MESSAGE_KEYS = [
   ["stepMismatch", "step-mismatch"],
   ["badInput", "bad-input"]
 ];
-var MESSAGE_ATTR_PREFIX = "data-stimeo--form-field-message-";
-var MESSAGE_ATTR_GENERIC = "data-stimeo--form-field-message";
-var DISALLOW_ATTR = "data-stimeo--form-field-disallow";
+var MESSAGE_ATTR_PREFIX = "data-stimeo--form-validation-message-";
+var MESSAGE_ATTR_GENERIC = "data-stimeo--form-validation-message";
+var DISALLOW_ATTR = "data-stimeo--form-validation-disallow";
+var DISALLOW_WHITESPACE_MESSAGE = `${MESSAGE_ATTR_PREFIX}whitespace`;
 var DISALLOW_WHITESPACE_DEFAULT = "Please enter a value that is not only whitespace.";
+var FORM_FIELD_INVALID_ATTR = "data-stimeo--form-field-invalid";
 var FormValidationController = class _FormValidationController extends Controller {
   static outlets = ["stimeo--form-field"];
   static values = {
@@ -40,14 +114,21 @@ var FormValidationController = class _FormValidationController extends Controlle
   static events = ["valid", "invalid"];
   /** Marker recording that we added `novalidate`, so we only remove our own. */
   static #NOVALIDATE_MARKER = "data-stimeo--form-validation-novalidate";
-  /** Controls already interacted with — the gate for blur / input (re)validation. */
-  #touched = /* @__PURE__ */ new WeakSet();
+  /** Object-backed groups already interacted with — the input revalidation gate. */
+  #touchedGroups = /* @__PURE__ */ new WeakSet();
+  /** String-backed fallback radio groups already interacted with. */
+  #touchedRadioGroups = /* @__PURE__ */ new Set();
   /**
-   * Controls whose `customError` *we* set via the `disallow` rule. Tracked so we
-   * only ever clear our own custom validity — a consumer's `setCustomValidity` on
-   * the same control survives once our rule passes (don't-clobber-authored-state).
+   * Last message this controller wrote through `setCustomValidity`, kept as a
+   * two-layer ownership ledger: a value is cleared only while the live message
+   * still equals the recorded write. Iterable so disconnect can release every
+   * surviving loan without touching a consumer's later custom error.
    */
-  #ownedCustomError = /* @__PURE__ */ new WeakSet();
+  #ownedCustomErrors = /* @__PURE__ */ new Map();
+  /** Last invalid message routed to each field, suppressing duplicate reports. */
+  #reportedErrors = /* @__PURE__ */ new WeakMap();
+  /** Exact document that owns the delegated listeners for this connection. */
+  #listenerDocument = null;
   #onSubmit = (event) => {
     if (event.target !== this.element) return;
     const invalid = this.#validateAll();
@@ -63,43 +144,51 @@ var FormValidationController = class _FormValidationController extends Controlle
   };
   #onFocusOut = (event) => {
     if (!this.validateOnBlurValue) return;
-    const control = this.#controlFrom(event.target);
-    if (!control) return;
-    const field = this.#fieldFor(control);
+    const snapshot = this.#snapshot();
+    const group = snapshot.groupByControl.get(this.#controlFrom(event.target));
+    if (!group) return;
     const related = event.relatedTarget;
-    if (field && related instanceof Node && field.element.contains(related)) return;
-    this.#touched.add(control);
-    this.#validateControl(control);
+    if (group.field && related instanceof Node && group.field.element.contains(related)) return;
+    if (snapshot.groupByControl.get(this.#controlFrom(related))?.key === group.key) return;
+    this.#markTouched(group.key);
+    this.#applyGroup(group);
   };
   #onInput = (event) => {
     if (!this.revalidateOnInputValue) return;
-    const control = this.#controlFrom(event.target);
-    if (!control || !this.#touched.has(control)) return;
-    this.#validateControl(control);
+    const group = this.#snapshot().groupByControl.get(this.#controlFrom(event.target));
+    if (!group || !this.#isTouched(group.key)) return;
+    this.#applyGroup(group);
   };
   #onChange = (event) => {
     if (!this.validateOnChangeValue) return;
-    const control = this.#controlFrom(event.target);
-    if (!control) return;
-    this.#touched.add(control);
-    this.#validateControl(control);
+    const group = this.#snapshot().groupByControl.get(this.#controlFrom(event.target));
+    if (!group) return;
+    this.#markTouched(group.key);
+    this.#applyGroup(group);
   };
   /** Suppresses native bubbles and binds the submit / blur / input listeners. */
   connect() {
     if (setDefaultAttribute(this.element, "novalidate", "")) {
       this.element.setAttribute(_FormValidationController.#NOVALIDATE_MARKER, "");
     }
-    document.addEventListener("submit", this.#onSubmit, true);
-    this.element.addEventListener("focusout", this.#onFocusOut);
-    this.element.addEventListener("input", this.#onInput);
-    this.element.addEventListener("change", this.#onChange);
+    this.#listenerDocument = this.element.ownerDocument;
+    this.#listenerDocument.addEventListener("submit", this.#onSubmit, true);
+    this.#listenerDocument.addEventListener("focusout", this.#onFocusOut);
+    this.#listenerDocument.addEventListener("input", this.#onInput);
+    this.#listenerDocument.addEventListener("change", this.#onChange);
   }
   /** Tears down listeners and restores `novalidate` if we added it. */
   disconnect() {
-    document.removeEventListener("submit", this.#onSubmit, true);
-    this.element.removeEventListener("focusout", this.#onFocusOut);
-    this.element.removeEventListener("input", this.#onInput);
-    this.element.removeEventListener("change", this.#onChange);
+    this.#listenerDocument?.removeEventListener("submit", this.#onSubmit, true);
+    this.#listenerDocument?.removeEventListener("focusout", this.#onFocusOut);
+    this.#listenerDocument?.removeEventListener("input", this.#onInput);
+    this.#listenerDocument?.removeEventListener("change", this.#onChange);
+    this.#listenerDocument = null;
+    for (const [control, message] of this.#ownedCustomErrors) {
+      if (control.validationMessage === message) control.setCustomValidity("");
+    }
+    this.#ownedCustomErrors.clear();
+    this.#touchedRadioGroups.clear();
     if (this.element.hasAttribute(_FormValidationController.#NOVALIDATE_MARKER)) {
       this.element.removeAttribute("novalidate");
       this.element.removeAttribute(_FormValidationController.#NOVALIDATE_MARKER);
@@ -107,8 +196,8 @@ var FormValidationController = class _FormValidationController extends Controlle
   }
   /**
    * Validates every control now, rendering or clearing each field's message, and
-   * returns whether the whole form is valid. Marks every control touched so a
-   * later input re-validates it. Bound via `data-action`
+   * returns whether the whole form is valid. Marks every field/group touched so
+   * a later input from any sibling re-validates it. Bound via `data-action`
    * (`#validate`) or callable directly (e.g. before a programmatic submit).
    */
   validate() {
@@ -122,33 +211,42 @@ var FormValidationController = class _FormValidationController extends Controlle
    * Each group's first invalid control supplies the message and the focus target.
    */
   #validateAll() {
+    const invalid = [];
+    for (const group of this.#snapshot().groups.values()) {
+      this.#markTouched(group.key);
+      const firstInvalid = this.#applyGroup(group);
+      if (firstInvalid) invalid.push(firstInvalid);
+    }
+    return invalid;
+  }
+  /** Builds the current field table in one pass over form controls and DOM depth. */
+  #snapshot() {
+    const fields = this.#fieldOutlets();
     const groups = /* @__PURE__ */ new Map();
+    const groupByControl = /* @__PURE__ */ new Map();
     for (const control of this.#controls) {
-      this.#touched.add(control);
-      const field = this.#fieldFor(control);
+      const field = this.#fieldFor(control, fields);
       const key = this.#keyFor(control, field);
-      const group = groups.get(key);
-      if (group) {
-        group.controls.push(control);
-      } else {
-        groups.set(key, { field, controls: [control] });
+      let group = groups.get(key);
+      if (!group) {
+        group = { key, field, controls: [] };
+        groups.set(key, group);
       }
+      group.controls.push(control);
+      groupByControl.set(control, group);
     }
-    const invalid = [];
-    for (const group of groups.values()) {
-      const firstInvalid = this.#applyGroup(group);
-      if (firstInvalid) invalid.push(firstInvalid);
+    return { groups, groupByControl };
+  }
+  /** Records that a whole field/group, rather than one sibling control, was visited. */
+  #markTouched(key) {
+    if (typeof key === "string") {
+      this.#touchedRadioGroups.add(key);
+    } else {
+      this.#touchedGroups.add(key);
     }
-    return invalid;
   }
-  /** Re-validates the whole field a single control belongs to (or that control). */
-  #validateControl(control) {
-    const field = this.#fieldFor(control);
-    const key = this.#keyFor(control, field);
-    const controls = this.#controls.filter(
-      (other) => this.#keyFor(other, this.#fieldFor(other)) === key
-    );
-    this.#applyGroup({ field, controls });
+  #isTouched(key) {
+    return typeof key === "string" ? this.#touchedRadioGroups.has(key) : this.#touchedGroups.has(key);
   }
   /**
    * Runs native constraint validation across a field's controls and routes the
@@ -162,51 +260,63 @@ var FormValidationController = class _FormValidationController extends Controlle
     const firstInvalid = group.controls.find((control) => !control.checkValidity()) ?? null;
     if (group.field) {
       if (firstInvalid) {
-        group.field.setError(this.#messageFor(firstInvalid));
-      } else {
+        const message = this.#messageFor(firstInvalid);
+        const alreadyReported = group.field.element.hasAttribute(FORM_FIELD_INVALID_ATTR) && this.#reportedErrors.get(group.field) === message;
+        if (!alreadyReported) group.field.setError(message, { focus: false });
+        this.#reportedErrors.set(group.field, message);
+      } else if (group.field.element.hasAttribute(FORM_FIELD_INVALID_ATTR) || this.#reportedErrors.has(group.field)) {
         group.field.clearError();
+        this.#reportedErrors.delete(group.field);
       }
     }
     return firstInvalid;
   }
   /**
    * Resolves the message to show for an invalid control: a per-constraint
-   * override (`data-stimeo--form-field-message-<constraint>`) for the first failing
-   * `ValidityState` flag, then a generic `data-stimeo--form-field-message`
+   * override (`data-stimeo--form-validation-message-<constraint>`) for the first failing
+   * `ValidityState` flag, then a generic `data-stimeo--form-validation-message`
    * override, then the browser's native `validationMessage`. Authoring an override
    * gives controlled, localizable, theme-able wording with **no consumer JS** —
    * and sidesteps headless browsers that return an empty native message.
    */
   #messageFor(control) {
+    if (control.validity.customError) return control.validationMessage;
     for (const [flag, key] of CONSTRAINT_MESSAGE_KEYS) {
       if (control.validity[flag]) {
-        return control.getAttribute(`${MESSAGE_ATTR_PREFIX}${key}`) ?? control.getAttribute(MESSAGE_ATTR_GENERIC) ?? control.validationMessage;
+        return this.#authoredMessage(control, `${MESSAGE_ATTR_PREFIX}${key}`) ?? this.#authoredMessage(control, MESSAGE_ATTR_GENERIC) ?? control.validationMessage;
       }
     }
-    return control.validationMessage || control.getAttribute(MESSAGE_ATTR_GENERIC) || "";
+    return control.validationMessage || this.#authoredMessage(control, MESSAGE_ATTR_GENERIC) || "";
   }
   /**
    * Applies (or clears) a declarative custom constraint via `setCustomValidity`,
-   * for controls that opt in with `data-stimeo--form-field-disallow`. The supported
+   * for controls that opt in with `data-stimeo--form-validation-disallow`. The supported
    * rule is `"whitespace"` — a value that is non-empty but blank
    * after trimming (which slips past `required` / `minlength`); its message follows
-   * the per-constraint (`value-missing`) → generic → default chain.
+   * the whitespace-specific → generic → default chain.
    *
-   * Don't-clobber-authored-state: an unknown/absent rule is never touched, and a
-   * custom error is only cleared when *we* set it (tracked in {@link #ownedCustomError}),
-   * so a consumer's own `setCustomValidity` on the same control survives.
+   * Don't-clobber-authored-state: an unknown/absent rule is never written, an
+   * existing consumer custom error wins, and a controller error is only cleared
+   * while the live message still equals the recorded controller write.
    */
   #syncCustomValidity(control) {
+    const recorded = this.#ownedCustomErrors.get(control);
+    const ownsCurrent = recorded !== void 0 && control.validationMessage === recorded;
     const violates = control.getAttribute(DISALLOW_ATTR) === "whitespace" && control.value.length > 0 && control.value.trim() === "";
-    if (violates) {
-      control.setCustomValidity(
-        control.getAttribute(`${MESSAGE_ATTR_PREFIX}value-missing`) ?? control.getAttribute(MESSAGE_ATTR_GENERIC) ?? DISALLOW_WHITESPACE_DEFAULT
-      );
-      this.#ownedCustomError.add(control);
-    } else if (this.#ownedCustomError.has(control)) {
-      this.#ownedCustomError.delete(control);
-      control.setCustomValidity("");
+    if (!violates) {
+      if (ownsCurrent) control.setCustomValidity("");
+      this.#ownedCustomErrors.delete(control);
+      return;
     }
+    if (control.validity.customError && !ownsCurrent) return;
+    const message = this.#authoredMessage(control, DISALLOW_WHITESPACE_MESSAGE) ?? this.#authoredMessage(control, MESSAGE_ATTR_GENERIC) ?? DISALLOW_WHITESPACE_DEFAULT;
+    if (!ownsCurrent || recorded !== message) control.setCustomValidity(message);
+    this.#ownedCustomErrors.set(control, message);
+  }
+  /** Returns a non-blank authored message, otherwise falls through to a fallback. */
+  #authoredMessage(control, attribute) {
+    const message = control.getAttribute(attribute);
+    return message && message.trim().length > 0 ? message : null;
   }
   /**
    * A grouping key that collects controls belonging to the same field: the owning
@@ -230,18 +340,32 @@ var FormValidationController = class _FormValidationController extends Controlle
    * is deterministic and CSS-independent.
    */
   #focusTargetFor(control) {
-    if (!control.hidden) return control;
-    const field = this.#fieldFor(control);
+    if (canTakeFocus(control)) return control;
+    const field = this.#fieldFor(control, this.#fieldOutlets());
     if (!field?.hasControlTarget) return null;
     const root = field.controlTarget;
-    if (root.matches(FOCUSABLE)) return root;
-    return root.querySelector(FOCUSABLE);
+    if (isTabStop(root)) return root;
+    return firstTabStop(root);
   }
-  /** The `stimeo--form-field` outlet whose element contains `control`, if any. */
-  #fieldFor(control) {
+  /** Pairs each live outlet element with its controller once per operation. */
+  #fieldOutlets() {
+    const fields = /* @__PURE__ */ new Map();
     const elements = this.stimeoFormFieldOutletElements;
+    const outlets = this.stimeoFormFieldOutlets;
     for (let index = 0; index < elements.length; index++) {
-      if (elements[index]?.contains(control)) return this.stimeoFormFieldOutlets[index];
+      const element = elements[index];
+      const outlet = outlets[index];
+      if (element && outlet) fields.set(element, outlet);
+    }
+    return fields;
+  }
+  /** The nearest configured field ancestor of `control`, if any. */
+  #fieldFor(control, fields) {
+    let ancestor = control;
+    while (ancestor) {
+      const field = fields.get(ancestor);
+      if (field) return field;
+      ancestor = ancestor.parentElement;
     }
     return void 0;
   }
@@ -255,11 +379,12 @@ var FormValidationController = class _FormValidationController extends Controlle
   }
   /** Narrows an event target to a validatable control. */
   #controlFrom(target) {
-    return target instanceof Element && this.#isValidatable(target) ? target : null;
+    return target instanceof Element && this.#isValidatable(target) && target.form === this.element ? target : null;
   }
   #isValidatable(element) {
-    return (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) && // `willValidate` already excludes disabled, read-only, hidden, and button
-    // controls — the exact set barred from constraint validation.
+    return (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) && // `willValidate` already excludes disabled, read-only, input[type=hidden],
+    // and button-type controls. The `hidden` attribute intentionally does not
+    // bar a text mirror from constraint validation.
     element.willValidate;
   }
 };

data/dist/controllers/number_input_controller.js

@@ -27,17 +27,21 @@ var AttributeLease = class {
         written: value
       });
     }
-    if (value === null) element.removeAttribute(this.#attribute);
-    else element.setAttribute(this.#attribute, value);
+    this.#reflect(element, value);
   }
   /** Returns one lease without overwriting a value subsequently authored by a consumer. */
   return(element) {
     const record = this.#records.get(element);
     if (!record) return;
     this.#records.delete(element);
-    if (element.getAttribute(this.#attribute) !== record.written) return;
-    if (record.original === null) element.removeAttribute(this.#attribute);
-    else element.setAttribute(this.#attribute, record.original);
+    const stillOwned = element.getAttribute(this.#attribute) === record.written;
+    if (stillOwned) this.#reflect(element, record.original);
+  }
+  /** Reflects only a real value transition, avoiding self-triggered mutation work. */
+  #reflect(element, value) {
+    if (element.getAttribute(this.#attribute) === value) return;
+    if (value === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, value);
   }
   /** Returns every outstanding lease using the same ownership check as {@link return}. */
   returnAll() {
@@ -45,6 +49,35 @@ var AttributeLease = class {
   }
 };
 
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
 // src/utils/composition_tracker.ts
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
@@ -328,6 +361,7 @@ var NumberInputController = class _NumberInputController extends Controller {
   /** Tracks IME lifecycle on the current input, including confirming keys without a signal. */
   #composition = new CompositionTracker();
   /** Restores authored custom-spinbutton ARIA when a target leaves or the controller stops. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #ariaValueNow = new AttributeLease("aria-valuenow");
   #ariaValueMin = new AttributeLease("aria-valuemin");
   #ariaValueMax = new AttributeLease("aria-valuemax");
@@ -351,6 +385,7 @@ var NumberInputController = class _NumberInputController extends Controller {
   /** Normalizes any initial value and wires the focus/hold pointer guards. */
   connect() {
     this.#repaint.activate();
+    this.#beforeCache.activate();
     this.#globalGuards = new AbortController();
     const { signal } = this.#globalGuards;
     for (const button of this.incrementTargets) this.#wireButton(button, 1);
@@ -364,6 +399,7 @@ var NumberInputController = class _NumberInputController extends Controller {
   disconnect() {
     this.#repaint.cancel();
     this.#composition.disconnect();
+    this.#beforeCache.deactivate();
     this.#globalGuards?.abort();
     this.#globalGuards = null;
     const buttons = /* @__PURE__ */ new Set([
@@ -697,6 +733,12 @@ var NumberInputController = class _NumberInputController extends Controller {
   get #steppedRange() {
     return { min: this.minValue, max: this.maxValue, step: this.stepValue };
   }
+  /** Returns borrowed range ARIA before Turbo snapshots the page. */
+  #rewindForCache() {
+    this.#ariaValueNow.returnAll();
+    this.#ariaValueMin.returnAll();
+    this.#ariaValueMax.returnAll();
+  }
 };
 
 export { NumberInputController };

data/dist/controllers/overflow_menu_controller.js

@@ -42,7 +42,8 @@ function inheritsFieldsetDisabled(control) {
   return false;
 }
 function canTakeFocus(element) {
-  if (element.closest("[hidden]")) return false;
+  if (element.closest("[hidden], [inert]")) return false;
+  if (element instanceof HTMLInputElement && element.type === "hidden") return false;
   if (!("disabled" in element)) return true;
   if (element.disabled) return false;
   return !inheritsFieldsetDisabled(element);

data/dist/controllers/pagination_controller.js

@@ -13,7 +13,8 @@ function inheritsFieldsetDisabled(control) {
   return false;
 }
 function canTakeFocus(element) {
-  if (element.closest("[hidden]")) return false;
+  if (element.closest("[hidden], [inert]")) return false;
+  if (element instanceof HTMLInputElement && element.type === "hidden") return false;
   if (!("disabled" in element)) return true;
   if (element.disabled) return false;
   return !inheritsFieldsetDisabled(element);