@zeyos/zx 5.2.0 → 5.3.0

package/dist/zx.global.js

@@ -4434,7 +4434,7 @@ var zx = (() => {
     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;
@@ -4442,9 +4442,9 @@ var zx = (() => {
     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");
@@ -4470,7 +4470,7 @@ var zx = (() => {
       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 (
@@ -35471,7 +35471,11 @@ var zx = (() => {
       variant: "outlined",
       loadingCount: 6,
       headingLevel: 3,
-      label: null
+      label: null,
+      keyboard: "tabs",
+      collapsibleGroups: false,
+      collapsedGroups: [],
+      renderGroupHeading: null
     };
     /**
      * Creates or enhances a card view.
@@ -35500,6 +35504,19 @@ var zx = (() => {
       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")));
@@ -35524,10 +35541,22 @@ var zx = (() => {
           /** @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();
@@ -35546,7 +35575,8 @@ var zx = (() => {
         groupOrder: [...this._cardGroupOrder],
         minCardWidth: this._cardMinWidth,
         maxColumns: this._cardMaxColumns,
-        variant: this._cardVariant
+        variant: this._cardVariant,
+        collapsedGroups: [...this._cardCollapsed]
       };
     }
     /**
@@ -35569,9 +35599,36 @@ var zx = (() => {
       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;
@@ -35641,22 +35698,30 @@ var zx = (() => {
         /** @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(
@@ -35668,12 +35733,25 @@ var zx = (() => {
       );
       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());
@@ -35682,14 +35760,25 @@ var zx = (() => {
     /** @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,
@@ -35706,19 +35795,287 @@ var zx = (() => {
           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() {
@@ -35749,10 +36106,14 @@ var zx = (() => {
       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]")
@@ -35766,6 +36127,16 @@ var zx = (() => {
         /** @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")
@@ -35873,6 +36244,58 @@ var zx = (() => {
       );
     }
   };
+  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] }] : [];