@zeyos/zx 5.2.0 → 5.3.0

package/dist/zx.esm.js

@@ -4130,7 +4130,7 @@ function updateFallback(anchor, floating, { placement, offset, flip, matchWidth
   if (matchWidth) floating.style.minWidth = `${anchorRect.width}px`;
   const floatingRect = floating.getBoundingClientRect();
   const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-  const viewportHeight = document.documentElement.clientHeight || window.innerHeight;
+  const viewportHeight2 = document.documentElement.clientHeight || window.innerHeight;
   let actualPlacement = placement;
   const side = placementSide(placement);
   const bottomY = anchorRect.bottom + offset;
@@ -4138,9 +4138,9 @@ function updateFallback(anchor, floating, { placement, offset, flip, matchWidth
   const rightX = anchorRect.right + offset;
   const leftX = anchorRect.left - offset - floatingRect.width;
   if (flip) {
-    if (side === "bottom" && bottomY + floatingRect.height > viewportHeight && topY >= 0) {
+    if (side === "bottom" && bottomY + floatingRect.height > viewportHeight2 && topY >= 0) {
       actualPlacement = flipPlacement(placement, "bottom", "top");
-    } else if (side === "top" && topY < 0 && bottomY + floatingRect.height <= viewportHeight) {
+    } else if (side === "top" && topY < 0 && bottomY + floatingRect.height <= viewportHeight2) {
       actualPlacement = flipPlacement(placement, "top", "bottom");
     } else if (side === "right" && rightX + floatingRect.width > viewportWidth && leftX >= 0) {
       actualPlacement = flipPlacement(placement, "right", "left");
@@ -4166,7 +4166,7 @@ function updateFallback(anchor, floating, { placement, offset, flip, matchWidth
     else top = anchorRect.top + (anchorRect.height - floatingRect.height) / 2;
   }
   floating.style.left = `${Math.round(clamp(left, 0, Math.max(0, viewportWidth - floatingRect.width)))}px`;
-  floating.style.top = `${Math.round(clamp(top, 0, Math.max(0, viewportHeight - floatingRect.height)))}px`;
+  floating.style.top = `${Math.round(clamp(top, 0, Math.max(0, viewportHeight2 - floatingRect.height)))}px`;
 }
 function placementSide(placement) {
   return (
@@ -35167,7 +35167,11 @@ var CardView = class extends RecordView {
     variant: "outlined",
     loadingCount: 6,
     headingLevel: 3,
-    label: null
+    label: null,
+    keyboard: "tabs",
+    collapsibleGroups: false,
+    collapsedGroups: [],
+    renderGroupHeading: null
   };
   /**
    * Creates or enhances a card view.
@@ -35196,6 +35200,19 @@ var CardView = class extends RecordView {
     this._cardVariant = normalizeCardVariant(options.variant);
     this._cardLoadingCount = normalizeLoadingCount3(options.loadingCount);
     this._cardHeadingLevel = normalizeHeadingLevel5(options.headingLevel);
+    this._cardRoving = options.keyboard === "roving";
+    this._cardIdPrefix = uid("zx-card-view");
+    this._cardCollapsed = new Set(normalizeGroupOrder(options.collapsedGroups));
+    this._cardCurrent = null;
+    this._cardCurrentIndex = 0;
+    this._cardTabStop = null;
+    this._cardStickyX = null;
+    this._cardMoving = false;
+    this._cardHeadersById = /* @__PURE__ */ new Map();
+    this._cardGroupOfId = /* @__PURE__ */ new Map();
+    this._cardSectionIds = /* @__PURE__ */ new Map();
+    this._cardIdOfNode = /* @__PURE__ */ new WeakMap();
+    if (this._cardRoving) root.dataset.keyboard = "roving";
     try {
       this._initRecordView(root);
       root.setAttribute("aria-label", String(options.label || this.msg("cardView.label")));
@@ -35220,10 +35237,22 @@ var CardView = class extends RecordView {
         /** @type {MouseEvent} */
         event
       ));
-      this.listen(content, "keydown", (event) => this._cardKeydown(
-        /** @type {KeyboardEvent} */
-        event
-      ));
+      this.listen(content, "keydown", (event) => {
+        if (this._cardRoving) this._cardRovingKeydown(
+          /** @type {KeyboardEvent} */
+          event
+        );
+        else this._cardKeydown(
+          /** @type {KeyboardEvent} */
+          event
+        );
+      });
+      if (this._cardRoving) {
+        this.listen(content, "focusin", (event) => this._cardFocusIn(
+          /** @type {FocusEvent} */
+          event
+        ));
+      }
       this.listen(content, "error", (event) => this._cardPreviewError(event), true);
       this._applyCardLayout();
       this._renderCardSort();
@@ -35242,7 +35271,8 @@ var CardView = class extends RecordView {
       groupOrder: [...this._cardGroupOrder],
       minCardWidth: this._cardMinWidth,
       maxColumns: this._cardMaxColumns,
-      variant: this._cardVariant
+      variant: this._cardVariant,
+      collapsedGroups: [...this._cardCollapsed]
     };
   }
   /**
@@ -35265,9 +35295,36 @@ var CardView = class extends RecordView {
     if (Object.prototype.hasOwnProperty.call(source, "variant")) {
       this._cardVariant = normalizeCardVariant(source.variant);
     }
+    if (Object.prototype.hasOwnProperty.call(source, "collapsedGroups")) {
+      this._cardCollapsed = new Set(normalizeGroupOrder(source.collapsedGroups));
+    }
     this._applyCardLayout();
     return super.setViewState(source, options);
   }
+  /**
+   * Collapses or expands one group. A collapsed group keeps its heading and hides its cards.
+   * @param {unknown} id Group id, as `groupBy` produces it.
+   * @param {boolean} [collapsed=true] Next state.
+   * @param {{silent?:boolean}} [options={}] Set `silent` to suppress `groupcollapse` and `statechange`.
+   * @returns {this}
+   * @fires CardView#groupcollapse
+   */
+  setGroupCollapsed(id, collapsed = true, options = {}) {
+    const groupId = normalizeGroupId(id);
+    if (this._cardCollapsed.has(groupId) === Boolean(collapsed)) return this;
+    if (collapsed) this._cardCollapsed.add(groupId);
+    else this._cardCollapsed.delete(groupId);
+    this._renderCards();
+    if (!options.silent) {
+      this.emit("groupcollapse", { id: groupId, collapsed: Boolean(collapsed), collapsedGroups: [...this._cardCollapsed] });
+      this.emit("statechange", { state: this.getViewState(), reason: "groupcollapse" });
+    }
+    return this;
+  }
+  /** Returns the collapsed group ids. @returns {string[]} */
+  getCollapsedGroups() {
+    return [...this._cardCollapsed];
+  }
   /** Restores an enhanced target exactly, or removes an owned root. @returns {void} */
   destroy() {
     if (this._cardCleaned) return;
@@ -35337,22 +35394,30 @@ var CardView = class extends RecordView {
       /** @type {HTMLElement} */
       this.refs.content
     );
+    const documentRef = content.ownerDocument;
+    const activeElement = documentRef?.activeElement ?? null;
+    const hadFocus = Boolean(activeElement && activeElement !== documentRef.body && content.contains(activeElement));
     const active = (
       /** @type {Element|null} */
       content.querySelector(".zx-record-card:focus")
     );
-    const activeIndex = active ? Number(
-      /** @type {HTMLElement} */
-      active.dataset.recordIndex
-    ) : -1;
-    const activeRecord = activeIndex >= 0 ? this._viewData[activeIndex] : null;
-    const activeId = activeRecord ? this._viewRecordId(activeRecord) : null;
+    const activeId = active && this._cardIdOfNode.has(active) ? this._cardIdOfNode.get(active) : null;
     this._cardNodesById = /* @__PURE__ */ new Map();
+    this._cardHeadersById = /* @__PURE__ */ new Map();
+    this._cardGroupOfId = /* @__PURE__ */ new Map();
+    this._cardSectionIds = /* @__PURE__ */ new Map();
+    this._cardTabStop = null;
+    if (this._cardRoving) {
+      content.removeAttribute("role");
+      content.removeAttribute("aria-label");
+      content.removeAttribute("aria-multiselectable");
+    }
     if (
       /** @type {HTMLElement} */
       this.el.dataset.loading === "true"
     ) {
       content.replaceChildren(this._createCardSkeletons());
+      this._syncCardEmptyFocus(hadFocus);
       return;
     }
     const groups = groupCardRecords(
@@ -35364,12 +35429,25 @@ var CardView = class extends RecordView {
     );
     if (this._viewData.length === 0 && groups.length === 0) {
       content.replaceChildren(this._createCardEmpty());
+      this._syncCardEmptyFocus(hadFocus);
       return;
     }
     const fields = this.getFields();
     const visibleFields = this.getVisibleFields();
     const sections = groups.map((group, groupIndex) => this._createCardGroup(group, fields, visibleFields, groupIndex));
     content.replaceChildren(...sections);
+    if (this._cardRoving) {
+      content.setAttribute("role", "grid");
+      content.setAttribute(
+        "aria-label",
+        /** @type {HTMLElement} */
+        this.el.getAttribute("aria-label") ?? ""
+      );
+      if (this.options.selectable === "multi") content.setAttribute("aria-multiselectable", "true");
+      this._syncCardEmptyFocus(false);
+      this._syncCardRoving(hadFocus);
+      return;
+    }
     if (activeId !== null) {
       const next = this._cardNodesById.get(activeId);
       if (next) queueMicrotask(() => next.isConnected && next.focus());
@@ -35378,14 +35456,25 @@ var CardView = class extends RecordView {
   /** @private @param {CardRecordGroup} group @param {ViewField[]} fields @param {ViewField[]} visibleFields @param {number} groupIndex @returns {HTMLElement} */
   _createCardGroup(group, fields, visibleFields, groupIndex) {
     const options = this._cardOptions();
-    const headingId = group.id === null ? null : `zx-card-view-group-${safeDomPart(group.id)}-${groupIndex}`;
+    const roving = this._cardRoving;
+    const headingId = group.id === null ? null : `${this._cardIdPrefix}-group-${safeDomPart(group.id)}-${groupIndex}`;
+    const collapsible = group.id !== null && Boolean(options.collapsibleGroups);
+    const collapsed = collapsible && this._cardCollapsed.has(
+      /** @type {string} */
+      group.id
+    );
     const list = h("ul", {
       class: "zx-card-view__list",
-      ariaLabelledby: headingId ?? void 0
+      id: headingId ? `${headingId}-list` : void 0,
+      role: roving ? group.id === null ? "rowgroup" : "none" : void 0,
+      ariaLabelledby: headingId ?? void 0,
+      hidden: collapsed
     });
     for (const record of group.records) {
-      const index = this._viewData.indexOf(record);
       const id = this._viewRecordId(record);
+      if (group.id !== null) this._cardGroupOfId.set(id, group.id);
+      if (collapsed) continue;
+      const index = this._viewData.indexOf(record);
       const card = createRecordCard(record, index, {
         fields,
         visibleFields,
@@ -35402,19 +35491,287 @@ var CardView = class extends RecordView {
         headingLevel: this._cardHeadingLevel,
         message: (key, ...args) => this.msg(key, ...args)
       });
+      if (roving) this._makeCardRow(card, id);
       this._cardNodesById.set(id, card);
+      this._cardIdOfNode.set(card, id);
       list.append(card);
     }
-    if (group.records.length === 0) {
-      list.append(h("li", { class: "zx-card-view__group-empty" }, this.msg("cardView.groupEmpty")));
+    if (group.records.length === 0 && !collapsed) {
+      const text4 = this.msg("cardView.groupEmpty");
+      list.append(roving ? h("li", { class: "zx-card-view__group-empty", role: "row" }, h("span", { role: "gridcell" }, text4)) : h("li", { class: "zx-card-view__group-empty" }, text4));
     }
     if (group.id === null) return list;
-    return h(
-      "section",
-      { class: "zx-card-view__group", ariaLabelledby: headingId },
-      h("h2", { class: "zx-card-view__group-heading", id: headingId }, group.label),
-      list
+    const header = this._createGroupHeader(
+      group,
+      /** @type {string} */
+      headingId,
+      collapsible,
+      collapsed
+    );
+    const section = h("section", {
+      class: "zx-card-view__group",
+      role: roving ? "rowgroup" : void 0,
+      ariaLabelledby: headingId,
+      dataset: { collapsed: collapsible ? String(collapsed) : null }
+    }, header, list);
+    this._cardSectionIds.set(section, group.id);
+    return section;
+  }
+  /**
+   * Builds a group heading: the label (or `renderGroupHeading` content), inside an APG
+   * disclosure button when the group can collapse.
+   * @private
+   * @param {CardRecordGroup} group Group.
+   * @param {string} headingId Heading id.
+   * @param {boolean} collapsible Whether the group can collapse.
+   * @param {boolean} collapsed Whether it is collapsed.
+   * @returns {HTMLElement}
+   */
+  _createGroupHeader(group, headingId, collapsible, collapsed) {
+    const id = (
+      /** @type {string} */
+      group.id
+    );
+    const render = this._cardOptions().renderGroupHeading;
+    const custom = typeof render === "function" ? render({
+      id,
+      label: group.label,
+      count: group.records.length,
+      records: [...group.records],
+      collapsed,
+      toggle: () => this.setGroupCollapsed(id, !this._cardCollapsed.has(id))
+    }) : null;
+    const label = custom == null ? group.label : isNode5(custom) ? custom : String(custom);
+    const labelNode = h("span", { class: "zx-card-view__group-label" }, label);
+    const roving = this._cardRoving;
+    const content = collapsible ? h("button", {
+      class: "zx-card-view__group-toggle",
+      type: "button",
+      tabindex: roving ? -1 : void 0,
+      ariaExpanded: String(!collapsed),
+      ariaControls: `${headingId}-list`,
+      dataset: { groupToggle: "" }
+    }, icon("chevron-down", { size: 14 }), labelNode) : labelNode;
+    const heading = h("h2", { class: "zx-card-view__group-heading", id: headingId }, content);
+    const header = h("div", {
+      class: "zx-card-view__group-header",
+      role: roving ? "row" : void 0,
+      ariaExpanded: roving && collapsible ? String(!collapsed) : void 0,
+      ariaLabelledby: roving ? headingId : void 0,
+      tabindex: roving && collapsible ? -1 : void 0,
+      dataset: { cardItem: roving && collapsible ? "group" : null }
+    }, h("div", { class: "zx-card-view__group-cell", role: roving ? "rowheader" : void 0 }, heading));
+    if (roving && collapsible) this._cardHeadersById.set(id, header);
+    return header;
+  }
+  /**
+   * Turns a rendered card into a grid row for the roving model: row focus, `aria-selected` when
+   * selectable, and the controls inside it out of the Tab order.
+   * @private
+   * @param {HTMLElement} card Card element.
+   * @param {unknown} id Record id.
+   * @returns {void}
+   */
+  _makeCardRow(card, id) {
+    card.setAttribute("role", "row");
+    card.tabIndex = -1;
+    card.dataset.cardItem = "card";
+    card.removeAttribute("aria-description");
+    card.removeAttribute("aria-keyshortcuts");
+    if (this.options.selectable) card.setAttribute("aria-selected", String(this._isViewSelected(id)));
+    for (const child of card.children) child.setAttribute("role", "gridcell");
+    for (const control of card.querySelectorAll(FOCUSABLE3)) {
+      if (control !== card) control.tabIndex = -1;
+    }
+  }
+  /**
+   * Moves the single Tab stop to the current item after a render — the same record or group by
+   * id; else the heading of the collapsed group that now hides the card; else the item now at its
+   * old position — and focuses it again, without scrolling, when the collection had focus.
+   * @private
+   * @param {boolean} hadFocus Whether focus was inside the collection before the render.
+   * @returns {void}
+   */
+  _syncCardRoving(hadFocus) {
+    const items = this._cardItems();
+    if (items.length === 0) {
+      this._syncCardEmptyFocus(hadFocus);
+      return;
+    }
+    let item = this._cardItemFor(this._cardCurrent);
+    if (!item && this._cardCurrent?.kind === "card") {
+      const groupId = this._cardGroupOfId.get(this._cardCurrent.id);
+      item = groupId === void 0 ? null : this._cardHeadersById.get(groupId) ?? null;
+    }
+    if (!item) item = items[Math.min(Math.max(this._cardCurrentIndex, 0), items.length - 1)];
+    this._setCardTabStop(item, items);
+    if (hadFocus) item.focus({ preventScroll: true });
+  }
+  /**
+   * @private
+   * @param {HTMLElement} item New Tab stop.
+   * @param {HTMLElement[]} [items] Every item, when already collected.
+   * @returns {void}
+   */
+  _setCardTabStop(item, items = this._cardItems()) {
+    for (const candidate of items) if (candidate !== item) candidate.tabIndex = -1;
+    item.tabIndex = 0;
+    this._cardTabStop = item;
+    const key = this._cardItemKey(item);
+    if (key) this._cardCurrent = key;
+    this._cardCurrentIndex = Math.max(0, items.indexOf(item));
+  }
+  /**
+   * While loading or empty there is no card to hold focus: the content takes it rather than
+   * letting it fall to the document, and gives the Tab order its old shape back afterwards.
+   * @private
+   * @param {boolean} hold Whether focus was inside and there is nothing to put it on.
+   * @returns {void}
+   */
+  _syncCardEmptyFocus(hold) {
+    if (!this._cardRoving) return;
+    const content = (
+      /** @type {HTMLElement} */
+      this.refs.content
+    );
+    if (hold) {
+      if (!content.hasAttribute("tabindex")) {
+        content.tabIndex = -1;
+        content.setAttribute("data-empty-focus", "");
+      }
+      content.focus({ preventScroll: true });
+    } else if (content.hasAttribute("data-empty-focus")) {
+      content.removeAttribute("tabindex");
+      content.removeAttribute("data-empty-focus");
+    }
+  }
+  /** @private @returns {HTMLElement[]} Roving items in display order. */
+  _cardItems() {
+    return (
+      /** @type {HTMLElement[]} */
+      [...this.refs.content.querySelectorAll("[data-card-item]")]
+    );
+  }
+  /** @private @param {HTMLElement} item @returns {{kind:'card'|'group', id:unknown}|null} */
+  _cardItemKey(item) {
+    if (item.dataset.cardItem === "group") {
+      for (const [id, header] of this._cardHeadersById) if (header === item) return { kind: "group", id };
+      return null;
+    }
+    return this._cardIdOfNode.has(item) ? { kind: "card", id: this._cardIdOfNode.get(item) } : null;
+  }
+  /** @private @param {{kind:'card'|'group', id:unknown}|null} key @returns {HTMLElement|null} */
+  _cardItemFor(key) {
+    if (!key) return null;
+    if (key.kind === "group") return this._cardHeadersById.get(
+      /** @type {string} */
+      key.id
+    ) ?? null;
+    return (
+      /** @type {HTMLElement|undefined} */
+      this._cardNodesById.get(key.id) ?? null
+    );
+  }
+  /** @private @param {FocusEvent} event @returns {void} */
+  _cardFocusIn(event) {
+    const target = (
+      /** @type {Element|null} */
+      event.target
+    );
+    const item = (
+      /** @type {HTMLElement|null} */
+      target?.closest?.("[data-card-item]") ?? null
     );
+    if (!item || !this.refs.content.contains(item)) return;
+    if (this._cardTabStop !== item) this._setCardTabStop(item);
+    if (!this._cardMoving) this._cardStickyX = item.getBoundingClientRect().left;
+  }
+  /**
+   * The roving keyboard model; see the class description.
+   * @private
+   * @param {KeyboardEvent} event Key event.
+   * @returns {void}
+   */
+  _cardRovingKeydown(event) {
+    const target = (
+      /** @type {Element|null} */
+      event.target
+    );
+    const item = (
+      /** @type {HTMLElement|null} */
+      target?.closest?.("[data-card-item]") ?? null
+    );
+    if (!item || !this.refs.content.contains(item)) return;
+    const onItem = target === item;
+    if (!onItem && target?.matches?.(TEXT_ENTRY)) return;
+    const items = this._cardItems();
+    const index = items.indexOf(item);
+    const kind = item.dataset.cardItem;
+    const key = event.key;
+    const multi = this.options.selectable === "multi";
+    if ((event.ctrlKey || event.metaKey) && (key === "a" || key === "A")) {
+      if (!multi) return;
+      event.preventDefault();
+      this.setSelection(this._cardIdsOf(items));
+      return;
+    }
+    if (onItem && (key === "Enter" || key === " ")) {
+      event.preventDefault();
+      if (kind === "group") {
+        const groupId = (
+          /** @type {string} */
+          this._cardItemKey(item)?.id
+        );
+        this.setGroupCollapsed(groupId, !this._cardCollapsed.has(groupId));
+        return;
+      }
+      const record = this._viewData[Number(item.dataset.recordIndex)];
+      if (!record) return;
+      const id = this._viewRecordId(record);
+      if (key === " " && this.options.selectable) {
+        this.toggleSelection(id);
+        return;
+      }
+      this._activateCard(record, id, Number(item.dataset.recordIndex), event);
+      if (this.options.selectable === "single") this.toggleSelection(id, { selected: true });
+      return;
+    }
+    if (kind === "group" && onItem && (key === "ArrowLeft" || key === "ArrowRight")) {
+      event.preventDefault();
+      const groupId = (
+        /** @type {string} */
+        this._cardItemKey(item)?.id
+      );
+      this.setGroupCollapsed(groupId, key === "ArrowLeft");
+      return;
+    }
+    if (!NAVIGATION_KEYS.has(key)) return;
+    const rects = items.map((candidate) => candidate.getBoundingClientRect());
+    const vertical = key === "ArrowUp" || key === "ArrowDown" || key === "PageUp" || key === "PageDown";
+    const x = vertical ? this._cardStickyX ?? rects[index].left : rects[index].left;
+    const page = cardPageSize(viewportHeight(this.refs.content), rects[index].height);
+    const next = cardGridTarget(rects, index, key, { page, x });
+    if (next === null) return;
+    event.preventDefault();
+    if (next === index) return;
+    const destination = items[next];
+    if (!vertical) this._cardStickyX = rects[next].left;
+    this._cardMoving = true;
+    try {
+      this._setCardTabStop(destination, items);
+      destination.focus({ preventScroll: true });
+      destination.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    } finally {
+      this._cardMoving = false;
+    }
+    if (event.shiftKey && multi) {
+      const span = items.slice(Math.min(index, next), Math.max(index, next) + 1);
+      this.setSelection([...this.getSelectionIds(), ...this._cardIdsOf(span)]);
+    }
+  }
+  /** @private @param {HTMLElement[]} items @returns {unknown[]} Record ids of the card items. */
+  _cardIdsOf(items) {
+    return items.filter((item) => item.dataset.cardItem === "card").map((item) => this._viewData[Number(item.dataset.recordIndex)]).filter(Boolean).map((record) => this._viewRecordId(record));
   }
   /** @private @returns {HTMLElement} */
   _createCardSkeletons() {
@@ -35445,10 +35802,14 @@ var CardView = class extends RecordView {
     for (const [id, card] of this._cardNodesById) {
       const selected = this._isViewSelected(id);
       card.dataset.selected = String(selected);
-      if (this.options.selectable) card.setAttribute(
-        "aria-description",
-        this.msg(selected ? "recordCard.selected" : "recordCard.notSelected")
-      );
+      if (this._cardRoving) {
+        if (this.options.selectable) card.setAttribute("aria-selected", String(selected));
+      } else if (this.options.selectable) {
+        card.setAttribute(
+          "aria-description",
+          this.msg(selected ? "recordCard.selected" : "recordCard.notSelected")
+        );
+      }
       const checkbox = (
         /** @type {HTMLInputElement|null} */
         card.querySelector("[data-record-selection]")
@@ -35462,6 +35823,16 @@ var CardView = class extends RecordView {
       /** @type {Element|null} */
       event.target
     );
+    const toggle = (
+      /** @type {HTMLElement|null} */
+      target?.closest?.("[data-group-toggle]")
+    );
+    if (toggle && this.refs.content.contains(toggle)) {
+      const section = toggle.closest(".zx-card-view__group");
+      const id2 = section ? this._cardSectionIds.get(section) : void 0;
+      if (id2 !== void 0) this.setGroupCollapsed(id2, !this._cardCollapsed.has(id2));
+      return;
+    }
     const card = (
       /** @type {HTMLElement|null} */
       target?.closest?.(".zx-record-card")
@@ -35569,6 +35940,58 @@ var CardView = class extends RecordView {
     );
   }
 };
+var FOCUSABLE3 = 'a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]';
+var TEXT_ENTRY = 'input:not([type="checkbox"]):not([type="radio"]),select,textarea,[contenteditable="true"]';
+var NAVIGATION_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"]);
+function cardGridRows(rects, tolerance = 4) {
+  const order = rects.map((rect, index) => ({ index, top: Number(rect.top) || 0, left: Number(rect.left) || 0 })).sort((a, b) => a.top - b.top || a.left - b.left);
+  const rows = [];
+  for (const entry of order) {
+    const row2 = rows.at(-1);
+    if (row2 && Math.abs(entry.top - row2.top) <= tolerance) row2.items.push(entry);
+    else rows.push({ top: entry.top, items: [entry] });
+  }
+  return rows.map((row2) => row2.items.sort((a, b) => a.left - b.left).map((entry) => entry.index));
+}
+function cardGridTarget(rects, index, key, options = {}) {
+  if (rects.length === 0) return null;
+  const current = Math.min(Math.max(Math.trunc(Number(index) || 0), 0), rects.length - 1);
+  if (key === "Home") return 0;
+  if (key === "End") return rects.length - 1;
+  const rows = cardGridRows(rects);
+  const rowIndex = rows.findIndex((row3) => row3.includes(current));
+  const row2 = rows[rowIndex];
+  if (key === "ArrowLeft" || key === "ArrowRight") {
+    const position2 = row2.indexOf(current) + (key === "ArrowLeft" ? -1 : 1);
+    return position2 < 0 || position2 >= row2.length ? current : row2[position2];
+  }
+  const page = Math.max(1, Math.trunc(Number(options.page) || 10));
+  const step = { ArrowUp: -1, ArrowDown: 1, PageUp: -page, PageDown: page }[key];
+  if (step === void 0) return null;
+  const targetRow = rows[Math.min(Math.max(rowIndex + step, 0), rows.length - 1)];
+  if (targetRow === row2) return current;
+  const x = Number.isFinite(Number(options.x)) ? Number(options.x) : Number(rects[current].left) || 0;
+  let best = targetRow[0];
+  for (const candidate of targetRow) {
+    if (Math.abs((Number(rects[candidate].left) || 0) - x) < Math.abs((Number(rects[best].left) || 0) - x)) best = candidate;
+  }
+  return best;
+}
+function cardPageSize(viewport, rowHeight, fallback = 10) {
+  const visible = Number(viewport);
+  const height = Number(rowHeight);
+  if (!(visible > 0) || !(height > 0)) return Math.max(1, Math.trunc(fallback) || 10);
+  return Math.max(1, Math.floor(visible / height) - 1);
+}
+function viewportHeight(element) {
+  let node = element.parentElement;
+  while (node && node !== element.ownerDocument.body) {
+    const overflow = getComputedStyle(node).overflowY;
+    if (/(auto|scroll|overlay)/.test(overflow) && node.scrollHeight > node.clientHeight) return node.clientHeight;
+    node = node.parentElement;
+  }
+  return element.ownerDocument.defaultView?.innerHeight ?? 0;
+}
 function groupCardRecords(records, groupBy2, groupOrder = [], fields = [], ungroupedLabel = "Ungrouped") {
   if (!Array.isArray(records)) throw new TypeError("Card view records must be an array");
   if (groupBy2 == null) return records.length ? [{ id: null, label: "", records: [...records] }] : [];