gridsmith-ui 0.21.0 → 0.22.0

package/dist/index.js

@@ -1,25 +1,28 @@
-import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, triggerType, useOverlayMark, useDirtyGuard, OverlayMarkScope, OverlayCloseCtx, DiscardConfirm, OVERLAY_ROOT_ATTR, Spinner, OverlayMarkCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-GGVASDXT.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-GGVASDXT.js';
+import { useAppShell, REACT_VERSION_PROBLEM, useOverlayMark, useDirtyGuard, OverlayMarkScope, OverlayCloseCtx, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-AAYCQXZQ.js';
+export { AppShell, Drawer, Sheet, SkipLink, useAppShell, useUnsavedChanges } from './chunk-AAYCQXZQ.js';
 import { Skeleton, TITLE_TEXT } from './chunk-NCIZQYXQ.js';
 export { Skeleton } from './chunk-NCIZQYXQ.js';
-import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, FormChangeCtx, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, useReportedChange, focusAfterRemoval, useOptionalFormContext, rovingTabStop, useGridKeyboard, FormCtx, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-RT7RYGC3.js';
-export { useFormContext, useGridKeyboard } from './chunk-RT7RYGC3.js';
-import { Link } from './chunk-EQDR57AM.js';
-export { CodeBlock, Divider, Link } from './chunk-EQDR57AM.js';
-import { Badge } from './chunk-XYDIBW3J.js';
-export { Badge } from './chunk-XYDIBW3J.js';
-import { inferColumnKinds, CardValue } from './chunk-JN37OVTP.js';
-import { SplitPaneCtx, useShellPreferences, TableCardCtx, PREFERENCE_HOUSE_DEFAULTS, preferenceActionKey } from './chunk-TKVTZWBN.js';
-export { PreferencesContext, preferenceActionKey, usePreferences } from './chunk-TKVTZWBN.js';
+import { Link } from './chunk-EYMGLK4M.js';
+export { CodeBlock, Divider, Link } from './chunk-EYMGLK4M.js';
+import { Badge } from './chunk-SBTBMAIU.js';
+export { Badge } from './chunk-SBTBMAIU.js';
+import { inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, CardValue } from './chunk-IVCVNAXG.js';
+import { useWholeListCheck, pagerPart, Pagination, Dropdown, useFieldControl, useField, warnOnce, Label, InlineFieldError, AddAnotherRowCtx, Input, Field } from './chunk-2RV23OBK.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-2RV23OBK.js';
+import { SplitPaneCtx, TableCardCtx } from './chunk-RG4KUCRS.js';
+import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, preferenceActionKey } from './chunk-7TOJ4G7S.js';
+export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, preferenceActionKey, usePreferences } from './chunk-7TOJ4G7S.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
-import { useTextOverflow, Tooltip, usePosition } from './chunk-ILIODA7W.js';
-export { Tooltip, useTextOverflow } from './chunk-ILIODA7W.js';
+import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, FormChangeCtx, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, useReportedChange, rovingTabStop, useGridKeyboard, useOptionalFormContext, focusAfterRemoval, FormCtx, useNonModalDialog, useReturnFocus, useCloseOnFocusOut } from './chunk-RT7RYGC3.js';
+export { useFormContext, useGridKeyboard } from './chunk-RT7RYGC3.js';
+import { useTextOverflow, Tooltip, usePosition } from './chunk-CXMV7SXJ.js';
+export { Tooltip, useTextOverflow } from './chunk-CXMV7SXJ.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-4LDYR7QP.js';
-import { cn, GLASS_SURFACE, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING } from './chunk-M2QRNBDQ.js';
-import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, Children, isValidElement, useId, memo, useEffect, useImperativeHandle, Fragment as Fragment$1, cloneElement, useSyncExternalStore } from 'react';
+import { cn, GLASS_SURFACE, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ACTIVE_RING, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-M2QRNBDQ.js';
+import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, isValidElement, useId, memo, useEffect, useImperativeHandle, Children, Fragment as Fragment$1, cloneElement, useSyncExternalStore } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -83,6 +86,8 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
       Slot,
       {
         ...triggerType(trigger),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
         ref: triggerRef,
         onClick: () => {
           setOpen(!open);
@@ -208,733 +213,6 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
     }
   );
 }
-var UNCONTROLLED = /* @__PURE__ */ Symbol("uncontrolled");
-var valueOf = (e) => {
-  const t = e.target;
-  if (!t) return void 0;
-  return t instanceof HTMLInputElement && (t.type === "checkbox" || t.type === "radio") ? t.checked : t.value;
-};
-var INPUT_HEIGHT = {
-  sm: "h-[var(--ds-control-height-sm)]",
-  md: "h-[var(--ds-control-height-md)]",
-  lg: "h-[var(--ds-control-height-lg)]"
-};
-var INPUT_TEXT = {
-  sm: "px-ds-2 py-ds-1 text-xs",
-  md: "px-ds-3 py-ds-2 text-sm",
-  lg: "px-ds-4 py-ds-3 text-base"
-};
-function Input({ className, size: sizeProp, error = false, prefix, suffix, ...props }) {
-  const contextSize = useContext(ControlSizeContext);
-  const size = sizeProp ?? contextSize ?? "md";
-  const onChange = useReportedChange(props.onChange, props.value === void 0 ? UNCONTROLLED : props.value, valueOf);
-  const borderColor = error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]";
-  const hoverBorder = !error && !props.disabled && !props.readOnly ? "hover:border-[var(--ds-input-border-hover)]" : "";
-  if (prefix || suffix) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex items-center w-full",
-          INPUT_HEIGHT[size],
-          "bg-[var(--ds-input-bg)]",
-          "border-[length:var(--ds-border-width)]",
-          borderColor,
-          "rounded-[var(--ds-radius-md)]",
-          "shadow-[var(--ds-input-shadow)]",
-          hoverBorder,
-          error ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
-          "transition-colors duration-[var(--ds-transition-speed)]",
-          props.disabled && "cursor-not-allowed opacity-disabled",
-          props.readOnly && "bg-[var(--ds-bg-muted)] cursor-default",
-          className
-        ),
-        children: [
-          prefix && /* @__PURE__ */ jsx("span", { className: "shrink-0 pl-ds-3 text-[var(--ds-text-muted)] flex items-center", children: prefix }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              "aria-invalid": error || void 0,
-              className: cn(
-                "flex-1 min-w-0 bg-transparent outline-none",
-                INPUT_TEXT[size],
-                "text-[var(--ds-text-primary)]",
-                "placeholder:text-[var(--ds-text-muted)]",
-                "disabled:cursor-not-allowed",
-                "read-only:text-[var(--ds-text-secondary)] read-only:cursor-default"
-              ),
-              ...props,
-              onChange: props.onChange || props.value === void 0 ? onChange : void 0
-            }
-          ),
-          suffix && /* @__PURE__ */ jsx("span", { className: "shrink-0 pr-ds-3 text-[var(--ds-text-muted)] flex items-center", children: suffix })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      "aria-invalid": error || void 0,
-      className: cn(
-        "flex w-full",
-        INPUT_TEXT[size],
-        INPUT_HEIGHT[size],
-        "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
-        "border-[length:var(--ds-border-width)]",
-        borderColor,
-        "rounded-[var(--ds-radius-md)]",
-        "shadow-[var(--ds-input-shadow)]",
-        "placeholder:text-[var(--ds-text-muted)]",
-        hoverBorder,
-        error ? ERROR_FOCUS_RING : FOCUS_RING,
-        "disabled:cursor-not-allowed disabled:opacity-disabled",
-        "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        className
-      ),
-      ...props,
-      onChange: props.onChange || props.value === void 0 ? onChange : void 0
-    }
-  );
-}
-function Textarea({ className, autoResize, maxRows, error = false, ref, ...props }) {
-  const onChange = useReportedChange(props.onChange, props.value === void 0 ? UNCONTROLLED : props.value, valueOf);
-  const internalRef = useRef(null);
-  const textareaRef = ref ?? internalRef;
-  const resize = useCallback(() => {
-    const el = textareaRef.current;
-    if (!el || !autoResize) return;
-    el.style.height = "auto";
-    let target = el.scrollHeight;
-    if (maxRows) {
-      const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 20;
-      const maxHeight = lineHeight * maxRows + parseFloat(getComputedStyle(el).paddingTop) + parseFloat(getComputedStyle(el).paddingBottom);
-      target = Math.min(target, maxHeight);
-    }
-    el.style.height = `${target}px`;
-  }, [autoResize, maxRows, textareaRef]);
-  useEffect(() => {
-    resize();
-  }, [resize, props.value, props.defaultValue]);
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      ref: textareaRef,
-      "aria-invalid": error || void 0,
-      className: cn(
-        "flex min-h-[var(--ds-control-height-md)] w-full px-ds-3 py-ds-2 text-sm",
-        "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
-        "border-[length:var(--ds-border-width)]",
-        error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)] hover:border-[var(--ds-input-border-hover)]",
-        "rounded-[var(--ds-radius-md)]",
-        "shadow-[var(--ds-input-shadow)]",
-        "placeholder:text-[var(--ds-text-muted)]",
-        error ? ERROR_FOCUS_RING : FOCUS_RING,
-        "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
-        "read-only:bg-[var(--ds-bg-muted)] read-only:text-[var(--ds-text-secondary)] read-only:cursor-default read-only:hover:border-[var(--ds-input-border)]",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        autoResize && "resize-none overflow-hidden",
-        className
-      ),
-      onInput: autoResize ? resize : void 0,
-      ...props,
-      onChange: props.onChange || props.value === void 0 ? onChange : void 0
-    }
-  );
-}
-function Label({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "label",
-    {
-      className: cn(
-        "text-sm font-medium leading-none text-[var(--ds-text-secondary)]",
-        "peer-disabled:cursor-not-allowed peer-disabled:opacity-disabled",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
-var TOGGLE_SIZES = {
-  sm: { w: 32, h: 18, thumb: 12 },
-  md: { w: 44, h: 24, thumb: 16 }
-};
-function Toggle({ checked, onChange, label, disabled, error = false, layout = "full", size = "md", "aria-labelledby": ariaLabelledBy, ...rest }) {
-  const change = useReportedChange(onChange, checked);
-  const dims = TOGGLE_SIZES[size];
-  const travel = dims.w - dims.thumb - 3;
-  const switchButton = /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      role: "switch",
-      "aria-checked": checked,
-      "aria-label": !label && !ariaLabelledBy ? "Toggle" : void 0,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-invalid": error || void 0,
-      disabled,
-      onClick: () => !disabled && change(!checked),
-      ...rest,
-      className: cn(
-        "relative inline-flex shrink-0 items-center overflow-hidden",
-        "border-[length:var(--ds-border-width)]",
-        "rounded-[var(--ds-radius-full)]",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        disabled ? "cursor-not-allowed" : "cursor-pointer",
-        checked ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-muted)]",
-        error ? "border-[var(--ds-status-error)]" : checked ? "border-transparent" : "border-[var(--ds-border-default)]"
-      ),
-      style: { width: dims.w, height: dims.h },
-      children: /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "pointer-events-none inline-block shrink-0",
-            "bg-[var(--ds-bg-surface)]",
-            "border-[length:var(--ds-border-width)] border-transparent",
-            "rounded-[var(--ds-radius-full)]",
-            "transition-transform"
-          ),
-          style: {
-            width: dims.thumb,
-            height: dims.thumb,
-            transform: checked ? `translateX(calc(${travel}px - var(--ds-border-width)))` : "translateX(calc(1px + var(--ds-border-width)))"
-          }
-        }
-      )
-    }
-  );
-  if (!label) {
-    return /* @__PURE__ */ jsx("div", { className: cn(disabled && "opacity-disabled"), children: switchButton });
-  }
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: cn(
-        layout === "full" ? "flex items-center justify-between gap-ds-4" : "inline-flex items-center gap-ds-3",
-        disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: label }),
-        switchButton
-      ]
-    }
-  );
-}
-function InlineFieldError({ message, id, className }) {
-  return /* @__PURE__ */ jsxs(
-    "p",
-    {
-      id,
-      role: "alert",
-      className: cn(
-        "flex items-center gap-ds-1.5 text-xs text-[var(--ds-status-error)]",
-        "mt-ds-1.5",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: "error", size: 14, className: "shrink-0" }),
-        /* @__PURE__ */ jsx("span", { children: message })
-      ]
-    }
-  );
-}
-var FieldContext = createContext(null);
-function useField() {
-  return useContext(FieldContext);
-}
-function useFieldControl(own, options = {}) {
-  const field = useField();
-  const id = own.id ?? field?.controlId;
-  const invalid = !!own.error || own["aria-invalid"] === true || own["aria-invalid"] === "true" || !!field?.invalid;
-  const required = !!own.required || own["aria-required"] === true || own["aria-required"] === "true" || !!field?.required;
-  const noteId = options.requiredInDescription && required && id ? `${id}-required` : void 0;
-  const ids = [own["aria-describedby"], field?.describedBy, noteId].filter(Boolean).join(" ").split(/\s+/).filter(Boolean);
-  return {
-    id,
-    labelId: own["aria-labelledby"] ?? field?.labelId,
-    describedBy: [...new Set(ids)].join(" ") || void 0,
-    invalid,
-    required,
-    requiredNote: noteId ? /* @__PURE__ */ jsx("span", { id: noteId, hidden: true, children: "Required" }) : null
-  };
-}
-var AddAnotherRowCtx = createContext(false);
-function Field({ label, children, hint, error, required, labelAction, hideLabel = false, id: idProp, validate, className }) {
-  const inGroupRow = useContext(AddAnotherRowCtx);
-  const generated = useId();
-  const id = idProp ?? `field-${generated}`;
-  const hintId = `${id}-hint`;
-  const errorId = `${id}-error`;
-  const form = useOptionalFormContext();
-  const mode = form?.validationMode ?? "onBlur";
-  const [localError, setLocalError] = useState(void 0);
-  const [left, setLeft] = useState(false);
-  const checkError = validate ? form ? form.errors[id] : localError : void 0;
-  const child = typeof children === "function" ? null : Children.only(children);
-  const childProps = child && isValidElement(child) ? child.props : null;
-  const latest = useLatest({ validate, childProps, id, mode, left, showing: !!checkError, form });
-  const check = useCallback(() => {
-    const { validate: fn, childProps: props, id: controlId } = latest.current;
-    if (!fn) return void 0;
-    const value = props && "value" in props ? props.value : props && "checked" in props ? props.checked : document.getElementById(controlId)?.value;
-    const message = fn(value);
-    return typeof message === "string" && message.length > 0 ? message : void 0;
-  }, [latest]);
-  const show = useCallback((message) => {
-    const { form: f, id: controlId } = latest.current;
-    if (f) f.setError(controlId, message);
-    else setLocalError(message);
-  }, [latest]);
-  const register = form?.register;
-  const checks = !!validate;
-  useEffect(() => register && checks ? register(id, check) : void 0, [register, checks, id, check]);
-  const leaving = useRef(null);
-  useEffect(() => () => {
-    if (leaving.current) clearTimeout(leaving.current);
-  }, []);
-  const onFocusCapture = () => {
-    if (leaving.current) {
-      clearTimeout(leaving.current);
-      leaving.current = null;
-    }
-  };
-  const onBlurCapture = () => {
-    if (!validate) return;
-    if (leaving.current) clearTimeout(leaving.current);
-    leaving.current = setTimeout(() => {
-      leaving.current = null;
-      setLeft(true);
-      if (latest.current.mode !== "onSubmit" || latest.current.showing) show(check());
-    }, 0);
-  };
-  const recheck = () => {
-    if (!validate) return;
-    setTimeout(() => {
-      const { mode: m, left: wasLeft, showing } = latest.current;
-      if (m === "onChange" && wasLeft || showing) show(check());
-    }, 0);
-  };
-  const shownError = typeof error === "string" && error.length > 0 ? error : checkError;
-  const hasError = typeof shownError === "string" && shownError.length > 0;
-  const describedBy = [hint ? hintId : null, hasError ? errorId : null].filter(Boolean).join(" ") || void 0;
-  const labelId = `${id}-label`;
-  const fieldContext = useMemo(() => ({ controlId: id, labelId, describedBy, invalid: hasError, required: !!required }), [id, labelId, describedBy, hasError, required]);
-  const controlProps = {
-    id,
-    "aria-describedby": describedBy,
-    ...hasError ? { "aria-invalid": true, error: true } : {},
-    ...required ? { "aria-required": true, required: true } : {}
-  };
-  let control;
-  if (typeof children === "function") {
-    control = children(controlProps);
-  } else {
-    if (!child || !isValidElement(child)) throw new Error("Field expects a single form control as its child");
-    const isNative = typeof child.type === "string";
-    const { error: errorFlag, ...ariaOnly } = controlProps;
-    const ownOnChange = childProps?.onChange;
-    const onChange = validate && !isNative ? { onChange: (...args) => {
-      ownOnChange?.(...args);
-      recheck();
-    } } : {};
-    control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {}, ...onChange });
-  }
-  const labelNode = /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, className: cn(hideLabel && "sr-only", hideLabel && inGroupRow && "@max-[30rem]:not-sr-only"), children: [
-    label,
-    required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
-  ] });
-  return (
-    // In a settings panel a field keeps the narrow reading width however wide the page is (--ds-form-max, Sprint 25.9 A4)
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn("flex flex-col gap-ds-1.5 max-w-[var(--ds-form-max,none)]", className),
-        ...validate ? { onFocusCapture, onBlurCapture, onInputCapture: recheck } : {},
-        children: [
-          hideLabel && !labelAction ? labelNode : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
-            labelNode,
-            labelAction
-          ] }),
-          /* @__PURE__ */ jsx(FieldContext.Provider, { value: fieldContext, children: control }),
-          hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--ds-text-muted)]", children: hint }),
-          hasError && /* @__PURE__ */ jsx(InlineFieldError, { id: errorId, message: shownError, className: "mt-0" })
-        ]
-      }
-    )
-  );
-}
-var DROPDOWN_HEIGHT = {
-  sm: "px-ds-2 py-ds-1 text-xs h-[var(--ds-control-height-sm)]",
-  md: "px-ds-3 py-ds-2 text-sm h-[var(--ds-control-height-md)]",
-  lg: "px-ds-4 py-ds-3 text-base h-[var(--ds-control-height-lg)]"
-};
-function Dropdown({
-  options,
-  value,
-  onChange: onChangeProp,
-  label,
-  disabled,
-  placeholder = "Select...",
-  multiple,
-  searchable,
-  size: sizeProp,
-  className,
-  ref,
-  container,
-  error = false,
-  showChips = true,
-  "aria-label": ariaLabel,
-  ...wiring
-}) {
-  const onChange = useReportedChange(onChangeProp, value);
-  const contextSize = useContext(ControlSizeContext);
-  const generatedId = useId();
-  const control = useFieldControl({ ...wiring, error: error || void 0 }, { requiredInDescription: true });
-  const triggerId = control.id ?? generatedId;
-  const labelSpanId = `${triggerId}-label`;
-  const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : label && !ariaLabel ? `${labelSpanId} ${triggerId}` : void 0;
-  const invalid = control.invalid;
-  const size = sizeProp ?? contextSize ?? "md";
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState("");
-  const [positioned, setPositioned] = useState(false);
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
-  const searchRef = useRef(null);
-  const [pos, setPos] = useState({ top: 0, left: 0, width: 0 });
-  const selectedValues = Array.isArray(value) ? value : [value].filter(Boolean);
-  const updatePos = useCallback(() => {
-    if (!triggerRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    let top = rect.bottom + 4;
-    let left = rect.left;
-    const width = rect.width;
-    if (menuRef.current) {
-      const menuRect = menuRef.current.getBoundingClientRect();
-      const vw = window.innerWidth;
-      const vh = window.innerHeight;
-      if (left + menuRect.width > vw) left = Math.max(0, vw - menuRect.width - 8);
-      if (top + menuRect.height > vh) {
-        const above = rect.top - 4 - menuRect.height;
-        if (above >= 0) top = above;
-        else top = Math.max(0, vh - menuRect.height - 8);
-      }
-    }
-    setPos({ top, left, width });
-  }, []);
-  const [prevOpen, setPrevOpen] = useState(open);
-  if (open !== prevOpen) {
-    setPrevOpen(open);
-    if (open) setSearch("");
-    else setPositioned(false);
-  }
-  useEffect(() => {
-    if (!open) return;
-    updatePos();
-    const raf = requestAnimationFrame(() => {
-      updatePos();
-      setPositioned(true);
-    });
-    const onScroll = () => updatePos();
-    window.addEventListener("scroll", onScroll, true);
-    window.addEventListener("resize", updatePos);
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("resize", updatePos);
-    };
-  }, [open, updatePos]);
-  const moved = useRef(false);
-  useLayoutEffect(() => {
-    if (!open || !positioned) return;
-    moved.current = false;
-    if (searchRef.current) {
-      searchRef.current.focus();
-      return;
-    }
-    const els = Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
-    (els.find((el) => el.getAttribute("aria-selected") === "true") ?? els[0])?.focus();
-  }, [open, positioned]);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const target = e.target;
-      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  const commitMoved = () => {
-    if (multiple || !moved.current) return;
-    const el = document.activeElement;
-    const id = el instanceof HTMLElement && menuRef.current?.contains(el) ? el.getAttribute("data-option-id") : null;
-    if (id) onChange(id);
-  };
-  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: menuRef, close: () => setOpen(false), tabExits: "any", onTabOut: commitMoved });
-  const typeahead = useRef({ buffer: "", at: 0 });
-  useEffect(() => {
-    if (!open) return;
-    const optionButtons = () => Array.from(menuRef.current?.querySelectorAll('[role="option"]') ?? []);
-    const focusOption = (idx) => {
-      const els = optionButtons();
-      if (els.length === 0) return;
-      els[(idx % els.length + els.length) % els.length].focus();
-      moved.current = true;
-    };
-    const onKey = (e) => {
-      const inMenu = menuRef.current?.contains(document.activeElement) || triggerRef.current === document.activeElement;
-      if (!inMenu) return;
-      const els = optionButtons();
-      const current = els.findIndex((el) => el === document.activeElement);
-      if (e.key === "Escape") {
-        if (e.defaultPrevented || !isTopLayer()) return;
-        e.preventDefault();
-        returnFocus();
-        setOpen(false);
-        return;
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        focusOption(current < 0 ? 0 : current + 1);
-        return;
-      }
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        focusOption(current < 0 ? els.length - 1 : current - 1);
-        return;
-      }
-      const inSearch = document.activeElement === searchRef.current;
-      if (e.key === "Home" && !inSearch) {
-        e.preventDefault();
-        focusOption(0);
-        return;
-      }
-      if (e.key === "End" && !inSearch) {
-        e.preventDefault();
-        focusOption(els.length - 1);
-        return;
-      }
-      if (!searchable && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
-        const now = Date.now();
-        typeahead.current.buffer = now - typeahead.current.at > 700 ? e.key : typeahead.current.buffer + e.key;
-        typeahead.current.at = now;
-        const q = typeahead.current.buffer.toLowerCase();
-        const hit = els.findIndex((el) => (el.textContent ?? "").trim().toLowerCase().startsWith(q));
-        if (hit >= 0) {
-          e.preventDefault();
-          focusOption(hit);
-        }
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open, searchable, isTopLayer, returnFocus]);
-  const filtered = searchable && search ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : options;
-  const groups = /* @__PURE__ */ new Map();
-  for (const opt of filtered) {
-    const g = opt.group ?? "";
-    if (!groups.has(g)) groups.set(g, []);
-    groups.get(g).push(opt);
-  }
-  const hasGroups = Array.from(groups.keys()).some((k) => k !== "");
-  const handleSelect = (id) => {
-    if (multiple) {
-      const arr = selectedValues.includes(id) ? selectedValues.filter((v) => v !== id) : [...selectedValues, id];
-      onChange(arr);
-    } else {
-      returnFocus();
-      onChange(id);
-      setOpen(false);
-    }
-  };
-  const chipsRef = useRef(null);
-  const pendingChipFocus = useRef(null);
-  useLayoutEffect(() => {
-    const pending = pendingChipFocus.current;
-    if (pending === null) return;
-    pendingChipFocus.current = null;
-    if (selectedValues.includes(pending.value)) return;
-    const chips = Array.from(chipsRef.current?.querySelectorAll("[data-chip-remove]") ?? []);
-    focusAfterRemoval(chips, pending.index, triggerRef.current);
-  });
-  const displayLabel = multiple ? selectedValues.length > 0 ? `${selectedValues.length} selected` : placeholder : options.find((o) => o.id === selectedValues[0])?.label ?? placeholder;
-  const { ref: overflowRef, isTruncated } = useTextOverflow({ lines: 1, content: displayLabel });
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), children: [
-    label && /* @__PURE__ */ jsx("span", { id: labelSpanId, className: "block mb-ds-1.5 text-sm font-medium text-[var(--ds-text-secondary)]", children: label }),
-    control.requiredNote,
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref: triggerRef,
-        id: triggerId,
-        type: "button",
-        onClick: () => !disabled && setOpen(!open),
-        onKeyDown: (e) => {
-          if (disabled || open) return;
-          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-            e.preventDefault();
-            setOpen(true);
-          }
-        },
-        disabled,
-        "aria-invalid": invalid || void 0,
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "aria-label": labelledBy ? void 0 : ariaLabel,
-        "aria-labelledby": labelledBy,
-        "aria-describedby": control.describedBy,
-        className: cn(
-          "w-full flex items-center justify-between gap-ds-2",
-          DROPDOWN_HEIGHT[size],
-          "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
-          "border-[length:var(--ds-border-width)]",
-          invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
-          "rounded-[var(--ds-radius-md)]",
-          "shadow-[var(--ds-input-shadow)]",
-          "transition-colors",
-          !invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && (invalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
-          invalid ? ERROR_FOCUS_RING : FOCUS_RING,
-          "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
-          !selectedValues.length && "text-[var(--ds-text-muted)]"
-        ),
-        children: [
-          isTruncated ? /* @__PURE__ */ jsx(Tooltip, { content: displayLabel, children: /* @__PURE__ */ jsx("span", { ref: overflowRef, className: "truncate", children: displayLabel }) }) : /* @__PURE__ */ jsx("span", { ref: overflowRef, className: "truncate", children: displayLabel }),
-          /* @__PURE__ */ jsx("span", { className: cn("transition-transform", open && "rotate-180"), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-90" }) })
-        ]
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: menuRef,
-          tabIndex: -1,
-          onClick: (e) => e.stopPropagation(),
-          className: cn(
-            "fixed z-[var(--ds-z-popover)] outline-none",
-            "bg-[var(--ds-bg-surface-elevated)]",
-            "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "rounded-[var(--ds-radius-md)] overflow-hidden",
-            "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]"
-          ),
-          style: { top: pos.top, left: pos.left, minWidth: pos.width, width: "max-content", maxWidth: "calc(100vw - 16px)", visibility: positioned ? "visible" : "hidden" },
-          children: [
-            searchable && /* @__PURE__ */ jsx("div", { className: "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", style: { padding: "var(--ds-space-2)" }, children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: searchRef,
-                type: "text",
-                value: search,
-                onChange: (e) => setSearch(e.target.value),
-                placeholder: "Search\u2026",
-                className: cn("w-full bg-transparent text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)] outline-none", size === "sm" ? "text-xs" : "text-sm")
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { role: "listbox", className: "overflow-y-auto", style: { padding: "var(--ds-space-1)", maxHeight: "var(--ds-dropdown-max-height)" }, children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: cn("text-[var(--ds-text-muted)] text-center py-ds-4", size === "sm" ? "text-xs" : "text-sm"), children: "No options found" }) : hasGroups ? Array.from(groups.entries()).map(([group, opts]) => /* @__PURE__ */ jsxs("div", { children: [
-              group && /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium uppercase tracking-wider text-[var(--ds-text-muted)] px-ds-2 pt-ds-2 pb-ds-1", children: group }),
-              opts.map((opt) => /* @__PURE__ */ jsx(
-                OptionButton,
-                {
-                  opt,
-                  isSelected: selectedValues.includes(opt.id),
-                  multiple,
-                  onSelect: handleSelect,
-                  size
-                },
-                opt.id
-              ))
-            ] }, group)) : filtered.map((opt) => /* @__PURE__ */ jsx(
-              OptionButton,
-              {
-                opt,
-                isSelected: selectedValues.includes(opt.id),
-                multiple,
-                onSelect: handleSelect,
-                size
-              },
-              opt.id
-            )) })
-          ]
-        }
-      ),
-      container ?? document.body
-    ),
-    multiple && showChips && selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { ref: chipsRef, className: "flex flex-wrap gap-ds-1 mt-ds-1.5", children: selectedValues.map((v, i) => {
-      const opt = options.find((o) => o.id === v);
-      return opt ? /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: "inline-flex items-center gap-ds-1 text-xs rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)] px-ds-1.5 py-ds-0.5",
-          children: [
-            opt.label,
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "data-chip-remove": "",
-                onClick: () => {
-                  pendingChipFocus.current = { index: i, value: v };
-                  handleSelect(v);
-                },
-                className: "hover:text-[var(--ds-text-primary)] cursor-pointer",
-                "aria-label": `Remove ${opt.label}`,
-                children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 10 })
-              }
-            )
-          ]
-        },
-        v
-      ) : null;
-    }) })
-  ] });
-}
-function OptionButton({
-  opt,
-  isSelected,
-  multiple,
-  onSelect,
-  size = "md"
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      role: "option",
-      "data-option-id": opt.id,
-      "aria-selected": isSelected,
-      tabIndex: -1,
-      onClick: () => onSelect(opt.id),
-      className: cn(
-        "w-full text-left cursor-pointer rounded-[var(--ds-radius-sm)]",
-        "transition-colors flex items-center gap-ds-2",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        size === "sm" ? "px-ds-2 py-ds-1 text-xs" : "px-ds-2 py-ds-1.5 text-sm",
-        isSelected && !multiple ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)]"
-      ),
-      children: [
-        multiple && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "w-[var(--ds-icon-size-sm)] h-[var(--ds-icon-size-sm)] rounded-[var(--ds-radius-sm)] border-[length:var(--ds-border-width)] shrink-0 flex items-center justify-center",
-              isSelected ? "bg-[var(--ds-accent-primary)] border-[var(--ds-accent-primary)]" : "border-[var(--ds-border-default)]"
-            ),
-            children: isSelected && /* @__PURE__ */ jsx(Icon, { name: "check", size: 10, className: "text-[var(--ds-text-on-primary)]" })
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children: opt.label }),
-        isSelected && !multiple && /* @__PURE__ */ jsx(Icon, { name: "check", size: size === "sm" ? 12 : 14 })
-      ]
-    }
-  );
-}
 var CONTROL_HEIGHT = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -2488,21 +1766,6 @@ function Progress({ value, max = 100, variant = "default", size = "md", indeterm
     ] })
   ] });
 }
-
-// ../../showcase/src/lib/dev-warn.ts
-var warned = /* @__PURE__ */ new Set();
-function warnOnce(component, message) {
-  let dev = false;
-  try {
-    dev = process.env.NODE_ENV !== "production";
-  } catch {
-    dev = false;
-  }
-  const text = `${component}: ${message}`;
-  if (!dev || warned.has(text)) return;
-  warned.add(text);
-  console.warn(text);
-}
 function TruncFileName({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("p", { ref, className: cn("truncate", className), children });
@@ -2631,9 +1894,9 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
     if (new Set(ids).size !== ids.length) warnOnce("FileUpload", "two files in the list share an id: give each file its own (the same file picked twice is two files).");
   }, [controlled, onFiles, upload, onRemove, shown]);
   const [heard, setHeard] = useState({ text: "", n: 0 });
-  const signature2 = shown.map((i) => `${i.id}\0${i.status}`).join("
");
-  const [seen, setSeen] = useState(() => ({ signature: signature2, statuses: new Map(shown.map((i) => [i.id, i.status])) }));
-  if (signature2 !== seen.signature) {
+  const signature = shown.map((i) => `${i.id}\0${i.status}`).join("
");
+  const [seen, setSeen] = useState(() => ({ signature, statuses: new Map(shown.map((i) => [i.id, i.status])) }));
+  if (signature !== seen.signature) {
     const said = [];
     for (const item of shown) {
       const before = seen.statuses.get(item.id);
@@ -2641,7 +1904,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
       if (item.status === "done") said.push(`${item.name} uploaded`);
       else if (item.status === "error") said.push(`${item.name} didn't upload: ${item.error ?? "the upload failed"}`);
     }
-    setSeen({ signature: signature2, statuses: new Map(shown.map((i) => [i.id, i.status])) });
+    setSeen({ signature, statuses: new Map(shown.map((i) => [i.id, i.status])) });
     if (said.length) setHeard((h) => ({ text: said.join(". "), n: h.n + 1 }));
   }
   const pendingFocus = useRef(null);
@@ -3394,237 +2657,21 @@ function TimePicker({
                   onMouseDown: (e) => e.preventDefault(),
                   onClick: () => emitChange(parsed.hour, parsed.minute, p),
                   className: cn(
-                    "text-xs font-medium py-ds-1 rounded-[var(--ds-radius-sm)] cursor-pointer",
-                    "transition-colors text-center focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                    p === parsed.period ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]"
-                  ),
-                  children: p
-                },
-                p
-              )) })
-            ] })
-          ] })
-        }
-      ),
-      container ?? document.body
-    )
-  ] });
-}
-var sizes = {
-  sm: { box: "h-[var(--ds-control-height-sm)]", input: "text-xs self-stretch", btn: "w-7 text-xs" },
-  md: { box: "h-[var(--ds-control-height-md)]", input: "text-sm self-stretch", btn: "w-9 text-sm" },
-  lg: { box: "h-[var(--ds-control-height-lg)]", input: "text-base self-stretch", btn: "w-10 text-base" }
-};
-function NumberInput({
-  value,
-  onChange: onChangeProp,
-  min = -Infinity,
-  max = Infinity,
-  step = 1,
-  disabled = false,
-  placeholder = "0",
-  prefix,
-  suffix,
-  size: sizeProp,
-  className,
-  error = false,
-  allowDecimals,
-  id
-}) {
-  const onChange = useReportedChange(onChangeProp, value);
-  const contextSize = useContext(ControlSizeContext);
-  const size = sizeProp ?? contextSize ?? "md";
-  const intervalRef = useRef(void 0);
-  const timeoutRef = useRef(void 0);
-  const inputRef = useRef(null);
-  const [focused, setFocused] = useState(false);
-  const [draft, setDraft] = useState(String(value));
-  const decimals = allowDecimals ?? step % 1 !== 0;
-  const [prevSync, setPrevSync] = useState({ value, focused });
-  if (value !== prevSync.value || focused !== prevSync.focused) {
-    setPrevSync({ value, focused });
-    if (!focused) setDraft(String(value));
-  }
-  const clamp = useCallback(
-    (v) => Math.min(max, Math.max(min, v)),
-    [min, max]
-  );
-  const valueRef = useLatest(value);
-  const commitValue = useCallback((v, own = false) => {
-    const clamped = clamp(v);
-    valueRef.current = clamped;
-    setDraft(String(clamped));
-    (own ? onChangeProp : onChange)(clamped);
-    return clamped;
-  }, [onChange, onChangeProp, clamp, valueRef]);
-  const increment = useCallback(() => commitValue(valueRef.current + step), [commitValue, step, valueRef]);
-  const decrement = useCallback(() => commitValue(valueRef.current - step), [commitValue, step, valueRef]);
-  const startRepeat = useCallback(
-    (fn) => {
-      fn();
-      timeoutRef.current = setTimeout(() => {
-        intervalRef.current = setInterval(fn, 75);
-      }, 400);
-    },
-    []
-  );
-  const stopRepeat = useCallback(() => {
-    clearTimeout(timeoutRef.current);
-    clearInterval(intervalRef.current);
-  }, []);
-  const handleInput = useCallback(
-    (e) => {
-      const raw = e.target.value;
-      if (raw === "" || raw === "-") {
-        setDraft(raw);
-        return;
-      }
-      if (!decimals && raw.includes(".")) return;
-      const validPattern = decimals ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
-      if (!validPattern.test(raw)) return;
-      setDraft(raw);
-      const parsed = parseFloat(raw);
-      if (!isNaN(parsed) && isFinite(parsed)) {
-        onChange(clamp(parsed));
-      }
-    },
-    [onChange, clamp, decimals]
-  );
-  const handleBlur = useCallback(() => {
-    setFocused(false);
-    const parsed = parseFloat(draft);
-    if (!isNaN(parsed) && isFinite(parsed)) {
-      const committed = commitValue(parsed, draft === String(value));
-      setDraft(String(committed));
-    } else {
-      const fallback = isFinite(min) ? min : 0;
-      const committed = commitValue(value !== void 0 ? value : fallback, true);
-      setDraft(String(committed));
-    }
-  }, [draft, commitValue, min, value]);
-  const handleFocus = useCallback(() => {
-    setFocused(true);
-  }, []);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-        increment();
-      }
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-        decrement();
-      }
-    },
-    [increment, decrement]
-  );
-  const s = sizes[size];
-  const atMin = value <= min;
-  const atMax = value >= max;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center w-full",
-        s.box,
-        "border-[length:var(--ds-border-width)]",
-        error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
-        "rounded-[var(--ds-radius-md)]",
-        "shadow-[var(--ds-input-shadow)]",
-        "bg-[var(--ds-input-bg)]",
-        "transition-colors duration-[var(--ds-transition-speed)]",
-        !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-        error ? ERROR_FOCUS_WITHIN_RING : cn(FOCUS_WITHIN_RING, "focus-within:hover:border-[var(--ds-border-focus)]"),
-        disabled && "opacity-disabled cursor-not-allowed",
-        className
+                    "text-xs font-medium py-ds-1 rounded-[var(--ds-radius-sm)] cursor-pointer",
+                    "transition-colors text-center focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                    p === parsed.period ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]"
+                  ),
+                  children: p
+                },
+                p
+              )) })
+            ] })
+          ] })
+        }
       ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            tabIndex: -1,
-            disabled: disabled || atMin,
-            onMouseDown: (e) => {
-              e.preventDefault();
-              inputRef.current?.focus();
-              if (!disabled && !atMin) startRepeat(decrement);
-            },
-            onMouseUp: stopRepeat,
-            onMouseLeave: stopRepeat,
-            className: cn(
-              "inline-flex items-center justify-center shrink-0",
-              "border-r-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
-              "transition-colors cursor-pointer",
-              "rounded-l-[var(--ds-radius-md)]",
-              s.btn,
-              s.input,
-              (disabled || atMin) && "opacity-disabled cursor-not-allowed hover:bg-transparent hover:text-[var(--ds-text-muted)]"
-            ),
-            "aria-label": "Decrease",
-            children: "\u2212"
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center flex-1 min-w-0 px-ds-2 gap-ds-1", s.input), children: [
-          prefix && /* @__PURE__ */ jsx("span", { className: "text-[var(--ds-text-muted)] shrink-0 text-xs", children: prefix }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              id,
-              type: "text",
-              inputMode: decimals ? "decimal" : "numeric",
-              "aria-invalid": error || void 0,
-              value: focused ? draft : String(value),
-              onChange: handleInput,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              onKeyDown: handleKeyDown,
-              disabled,
-              placeholder,
-              className: cn(
-                "w-full min-w-0 bg-transparent text-center outline-none",
-                "text-[var(--ds-text-primary)]",
-                "placeholder:text-[var(--ds-text-muted)]",
-                "font-[family-name:var(--ds-font-mono)]",
-                s.input,
-                disabled && "cursor-not-allowed"
-              )
-            }
-          ),
-          suffix && /* @__PURE__ */ jsx("span", { className: "text-[var(--ds-text-muted)] shrink-0 text-xs", children: suffix })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            tabIndex: -1,
-            disabled: disabled || atMax,
-            onMouseDown: (e) => {
-              e.preventDefault();
-              inputRef.current?.focus();
-              if (!disabled && !atMax) startRepeat(increment);
-            },
-            onMouseUp: stopRepeat,
-            onMouseLeave: stopRepeat,
-            className: cn(
-              "inline-flex items-center justify-center shrink-0",
-              "border-l-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
-              "transition-colors cursor-pointer",
-              "rounded-r-[var(--ds-radius-md)]",
-              s.btn,
-              s.input,
-              (disabled || atMax) && "opacity-disabled cursor-not-allowed hover:bg-transparent hover:text-[var(--ds-text-muted)]"
-            ),
-            "aria-label": "Increase",
-            children: "+"
-          }
-        )
-      ]
-    }
-  );
+      container ?? document.body
+    )
+  ] });
 }
 var variantStyles = {
   default: "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-primary)]",
@@ -3867,7 +2914,7 @@ function TagInput({
     }
   );
 }
-var sizes2 = {
+var sizes = {
   sm: "w-[var(--ds-control-height-sm)] h-[var(--ds-control-height-sm)] text-sm",
   md: "w-[var(--ds-control-height-md)] h-[var(--ds-control-height-md)] text-base",
   lg: "w-[var(--ds-control-height-lg)] h-[var(--ds-control-height-lg)] text-lg"
@@ -3971,7 +3018,7 @@ function PinInput({
             !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
             error ? ERROR_FOCUS_RING : FOCUS_RING,
             "placeholder:text-[var(--ds-text-muted)]",
-            sizes2[size],
+            sizes[size],
             disabled && "opacity-disabled cursor-not-allowed"
           )
         },
@@ -5312,43 +4359,18 @@ function MentionInput({
     )
   ] });
 }
-var HEADER_LAYOUT = {
-  row: "flex flex-wrap items-start justify-between gap-ds-4",
-  block: "flex flex-col space-y-ds-1.5 grow basis-1/2 break-words max-w-full has-[[data-title-one-line]]:min-w-0",
-  titleLeads: "grow basis-1/2 max-w-max break-words has-[[data-title-one-line]]:min-w-0",
-  floorOff: "min-w-0",
-  actions: "flex items-center gap-ds-2 shrink-0 ml-auto",
-  below: "mt-ds-1.5"
-};
-function useTitleFloorFits(rowRef, active) {
-  const [fits, setFits] = useState(true);
-  useLayoutEffect(() => {
-    const row = rowRef.current;
-    if (!active || !row) return;
-    const measure = () => {
-      const title = row.querySelector("h1, h2, h3, h4, h5, h6");
-      if (!title) return;
-      const width = title.style.width;
-      title.style.width = "min-content";
-      const longest = title.getBoundingClientRect().width;
-      title.style.width = width;
-      if (longest === 0) return;
-      const next = longest <= row.clientWidth + 0.5;
-      setFits((was) => was === next ? was : next);
-    };
-    measure();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(measure);
-    observer.observe(row);
-    return () => observer.disconnect();
-  }, [rowRef, active]);
-  return fits;
-}
-function actionsAreBadges(actions) {
-  const items = Children.toArray(actions);
-  return items.length > 0 && items.every((item) => isValidElement(item) && (item.type === Fragment$1 ? actionsAreBadges(item.props.children) : item.type === Badge));
+var CardRowCtx = createContext(null);
+var TITLE_LINE = "h-[calc(var(--ds-font-size-lg)*var(--ds-line-height-lg))]";
+var HeaderRowCtx = createContext(false);
+function holdsHeader(children) {
+  let found = false;
+  Children.forEach(children, (child) => {
+    if (found || !isValidElement(child)) return;
+    if (child.type === Fragment$1) found = holdsHeader(child.props.children);
+    else if (child.type === CardHeader) found = true;
+  });
+  return found;
 }
-var CardCtx = createContext(false);
 var CardActionCtx = createContext(null);
 var CARD_ACTION_ATTR = "data-card-action";
 var CardSurfaceCtx = createContext(false);
@@ -5499,7 +4521,7 @@ var Card = forwardRef(function Card2({
   const handleKeyDown = isSelectable && !disabled ? (e) => {
     if (e.key === "Enter" || e.key === " ") {
       e.preventDefault();
-      onSelectedChange?.(!selected);
+      if (!e.repeat) onSelectedChange?.(!selected);
     }
   } : isAction && !disabled ? (e) => {
     if (e.target !== e.currentTarget) return;
@@ -5516,13 +4538,84 @@ var Card = forwardRef(function Card2({
   } : void 0;
   const handleCheckableClick = (e) => {
     e.stopPropagation();
-    onSelectedChange?.(!selected);
+    if (!disabled) onSelectedChange?.(!selected);
   };
   const isButton = isSelectable || isAction && !holdsControls;
   const role = selectType === "radio" ? "radio" : selectType === "checkbox" ? "checkbox" : selectType === "toggle" ? "switch" : isButton ? "button" : void 0;
   const ariaAttr = selectType === "radio" || selectType === "checkbox" || selectType === "toggle" ? { "aria-checked": !!selected } : isSelectable ? { "aria-pressed": !!selected } : {};
   const indicator = selectType === "radio" ? /* @__PURE__ */ jsx(RadioIndicator, { checked: !!selected, disabled }) : selectType === "checkbox" ? /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected, indeterminate, disabled }) : selectType === "toggle" ? /* @__PURE__ */ jsx(ToggleIndicator, { checked: !!selected, disabled }) : null;
-  const defaultCheckBadge = !hasSelectType && !checkable && selected && !loading ? /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 w-5 h-5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, className: "text-[var(--ds-text-on-primary)]" }) }) : null;
+  const defaultCheckBadge = !hasSelectType && !checkable && selected && !loading ? /* @__PURE__ */ jsx("span", { "data-card-check": "", className: "w-5 h-5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, className: "text-[var(--ds-text-on-primary)]" }) }) : null;
+  const checkboxes = useRef(/* @__PURE__ */ new Set());
+  const checkboxFocused = useRef(false);
+  const checkboxRef = useCallback((node) => {
+    if (!node) return;
+    checkboxes.current.add(node);
+    return () => {
+      checkboxes.current.delete(node);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!checkboxFocused.current) return;
+    const active = document.activeElement;
+    if (active && active !== document.body) return;
+    for (const node of checkboxes.current) {
+      if (node.isConnected) {
+        node.focus({ preventScroll: true });
+        return;
+      }
+    }
+  });
+  const checkbox = checkable ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: checkboxRef,
+      "data-card-checkbox": "",
+      className: cn(
+        "rounded-[calc(var(--ds-radius-sm)*0.6)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      ),
+      onClick: handleCheckableClick,
+      role: "checkbox",
+      "aria-checked": !!selected,
+      "aria-disabled": disabled || void 0,
+      ...inner.titleId ? { "aria-labelledby": inner.titleId } : { "aria-label": "Select" },
+      tabIndex: 0,
+      onFocus: () => {
+        checkboxFocused.current = true;
+      },
+      onBlur: (e) => {
+        const node = e.currentTarget;
+        queueMicrotask(() => {
+          if (node.isConnected) checkboxFocused.current = false;
+        });
+      },
+      onKeyDown: (e) => {
+        if (e.key !== " ") return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (!e.repeat && !disabled) onSelectedChange?.(!selected);
+      },
+      children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected, disabled })
+    }
+  ) : null;
+  const check = indicator ?? defaultCheckBadge;
+  const headers = useRef([]);
+  const [owner, setOwner] = useState(null);
+  const [guess, setGuess] = useState(() => holdsHeader(children));
+  const register = useCallback((header) => {
+    headers.current = [...headers.current, header];
+    setOwner(headers.current[0]);
+    return () => {
+      headers.current = headers.current.filter((h) => h !== header);
+      setOwner(headers.current[0] ?? null);
+      setGuess(false);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (headers.current.length === 0) setGuess(false);
+  }, []);
+  const hasHeader = owner !== null || guess;
+  const rowParts = { checkbox, check, owner, register };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -5553,32 +4646,22 @@ var Card = forwardRef(function Card2({
       ...ariaAttr,
       ...props,
       children: [
-        defaultCheckBadge,
-        indicator && /* @__PURE__ */ jsx("div", { className: "absolute top-ds-3 right-ds-3 z-[1]", children: indicator }),
-        checkable && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute top-ds-3 left-ds-3 z-[1] cursor-pointer",
-            onClick: handleCheckableClick,
-            role: "checkbox",
-            "aria-checked": !!selected,
-            ...inner.titleId ? { "aria-labelledby": inner.titleId } : { "aria-label": "Select" },
-            tabIndex: 0,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                e.stopPropagation();
-                onSelectedChange?.(!selected);
-              }
-            },
-            children: /* @__PURE__ */ jsx(CheckboxIndicator, { checked: !!selected })
-          }
-        ),
-        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardActionCtx, { value: action, children: /* @__PURE__ */ jsx(CardCtx, { value: checkable, children: loading ? (
+        !loading && !hasHeader && checkbox && /* @__PURE__ */ jsxs("div", { "data-card-header-row": "", className: "flex items-center gap-ds-2 px-ds-5 pt-ds-4", children: [
+          checkbox,
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "grow" }),
+          check && /* @__PURE__ */ jsx("span", { "data-card-selection": "", className: "shrink-0 flex", children: check })
+        ] }),
+        !loading && !hasHeader && !checkbox && check && /* @__PURE__ */ jsx("div", { "data-card-selection": "", className: "absolute top-ds-3 right-ds-3 z-[1] flex", children: check }),
+        /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardActionCtx, { value: action, children: /* @__PURE__ */ jsx(CardRowCtx, { value: rowParts, children: loading ? (
           // Round 15 (the owner's 52.1): a placeholder stands where the content will stand — inside the card's
           // content inset (CardContent's padding), a title-height line then two body lines — never flush against the border.
-          /* @__PURE__ */ jsx("div", { "data-card-loading": "", "aria-busy": "true", className: cn("pr-ds-5 py-ds-4", checkable ? "pl-ds-10" : "pl-ds-5"), children: /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
-            /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-5 w-1/3" }),
+          // Its header holds a badge-sized block (A2), so a grid of item cards keeps its columns when they load.
+          /* @__PURE__ */ jsx("div", { "data-card-loading": "", "aria-busy": "true", className: "px-ds-5 py-ds-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-ds-3", children: [
+            /* @__PURE__ */ jsxs("div", { "data-card-header-row": "", className: "flex items-center gap-ds-2", children: [
+              checkbox,
+              /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-5 w-1/3" }),
+              /* @__PURE__ */ jsx("div", { "data-header-actions": "", className: "contents", children: /* @__PURE__ */ jsx("div", { "data-gs-badge": "", className: "shrink-0", children: /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-5 w-14 rounded-[var(--ds-radius-full)]" }) }) })
+            ] }),
             /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-full" }),
             /* @__PURE__ */ jsx(Skeleton, { variant: "custom", className: "h-3 w-2/3" })
           ] }) })
@@ -5587,60 +4670,95 @@ var Card = forwardRef(function Card2({
     }
   );
 });
-var CardHeader = forwardRef(function CardHeader2({ className, children, actions, icon, menuItems, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
-  const hasActions = actions || menuItems;
-  const pl = isCheckable ? "pl-ds-10" : "pl-ds-5";
-  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.actions, children: [
-    actions,
-    menuItems && /* @__PURE__ */ jsx(
-      DropdownMenu,
-      {
-        trigger: /* @__PURE__ */ jsx(
-          "button",
+function partsOf(children) {
+  const parts = [];
+  const open = (node) => Children.toArray(node).forEach((child) => {
+    if (isValidElement(child) && child.type === Fragment$1) open(child.props.children);
+    else if (child !== "") parts.push(child);
+  });
+  open(children);
+  return parts;
+}
+function splitTitle(children) {
+  const parts = partsOf(children);
+  const at = parts.findIndex((p) => isValidElement(p) && p.type === CardTitle);
+  if (at < 0) return { lead: [], title: parts[0] ?? null, rest: parts.slice(1) };
+  return { lead: parts.slice(0, at), title: parts[at], rest: parts.slice(at + 1) };
+}
+var TITLE_FLOOR = "basis-[calc(var(--ds-font-size-lg)*4.5)]";
+var TITLE_ROW = cn(
+  "flex flex-wrap items-start justify-end gap-x-ds-2 gap-y-ds-2 min-w-0 grow basis-0",
+  "[&>[data-header-actions]>*]:order-5",
+  "[&>[data-header-actions]>:has([data-gs-badge]):not(:has(a,button,input,select,textarea,[role=button],[tabindex]:not([tabindex='-1'])))]:order-2",
+  "[&>[data-header-actions]>:has([aria-haspopup])]:order-6"
+);
+var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
+  const { className, children, actions, icon, menuItems, ...props } = allProps;
+  const row = useContext(CardRowCtx);
+  const [self] = useState(() => ({}));
+  const register = row?.register;
+  useLayoutEffect(() => register?.(self), [register, self]);
+  const owns = !!row && row.owner === self;
+  const iconBlock = icon ? (
+    // the icon stays where it was, a tile above the title (28 of 66 headers with actions have one)
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 h-10 w-10 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-muted)] flex items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) })
+  ) : null;
+  const menu = menuItems ? /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      trigger: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "More actions",
+          className: cn(
+            "inline-flex items-center justify-center h-8 w-8 rounded-[var(--ds-radius-md)]",
+            "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
+            "transition-colors duration-[var(--ds-transition-speed)]"
+          ),
+          onClick: (e) => e.stopPropagation(),
+          children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
+        }
+      ),
+      items: menuItems
+    }
+  ) : null;
+  const band = (order) => cn("shrink-0 self-start flex items-center", TITLE_LINE, order);
+  const checkbox = owns && row.checkbox ? /* @__PURE__ */ jsx("span", { className: band("order-0"), children: row.checkbox }) : null;
+  const check = owns && row.check ? /* @__PURE__ */ jsx("span", { "data-card-selection": "", className: band("order-4"), children: row.check }) : null;
+  const menuPart = menu ? /* @__PURE__ */ jsx("span", { className: band("order-6"), children: menu }) : null;
+  const { lead, title, rest } = splitTitle(children);
+  const leadBlock = lead.length > 0 ? /* @__PURE__ */ jsx("div", { "data-card-lead": "", className: "flex flex-col space-y-ds-1.5 min-w-0 grow", children: lead }) : null;
+  const topLine = iconBlock ?? leadBlock;
+  const ownBlock = title !== null && !(isValidElement(title) && title.type === CardTitle);
+  const actionsSlot = "actions" in allProps ? /* @__PURE__ */ jsx("div", { "data-header-actions": "", className: "contents", children: partsOf(actions).map((item, i) => /* @__PURE__ */ jsx("span", { className: cn("flex items-center shrink-0", TITLE_LINE), children: item }, isValidElement(item) && item.key !== null ? item.key : i)) }) : null;
+  return /* @__PURE__ */ jsxs("div", { ref, "data-card-header": "", className: cn("flex flex-col px-ds-5 pt-ds-4 last:pb-ds-4 min-w-0", className), ...props, children: [
+    topLine && /* @__PURE__ */ jsxs("div", { "data-card-icon-row": iconBlock ? "" : void 0, "data-card-lead-row": iconBlock ? void 0 : "", className: cn("flex items-start gap-ds-2", iconBlock ? "mb-ds-2.5" : "mb-ds-1.5"), children: [
+      checkbox,
+      topLine,
+      iconBlock && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "grow -ml-ds-2" }),
+      check,
+      menuPart
+    ] }),
+    iconBlock && leadBlock && /* @__PURE__ */ jsx("div", { className: "flex mb-ds-1.5", children: leadBlock }),
+    /* @__PURE__ */ jsxs("div", { "data-card-header-row": "", className: "flex items-start gap-ds-2 min-w-0", children: [
+      !topLine && checkbox,
+      /* @__PURE__ */ jsxs("div", { "data-card-title-line": "", className: TITLE_ROW, children: [
+        title && /* @__PURE__ */ jsx(
+          "div",
           {
-            type: "button",
-            "aria-label": "More actions",
-            className: cn(
-              "inline-flex items-center justify-center h-8 w-8 rounded-[var(--ds-radius-md)]",
-              "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
-              "transition-colors duration-[var(--ds-transition-speed)]"
-            ),
-            onClick: (e) => e.stopPropagation(),
-            children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
+            "data-card-title-row": "",
+            className: cn("order-1 min-w-0 me-auto", TITLE_FLOOR, ownBlock ? "grow" : "grow-[999] max-w-max"),
+            children: /* @__PURE__ */ jsx(HeaderRowCtx, { value: true, children: title })
           }
         ),
-        items: menuItems
-      }
-    )
-  ] }) : null;
-  const iconBlock = icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 h-10 w-10 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-muted)] flex items-center justify-center mb-ds-1", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 20, className: "text-[var(--ds-text-secondary)]" }) }) : null;
-  const parts = Children.toArray(children);
-  const titleLeads = !!hasActions && !iconBlock && !menuItems && actionsAreBadges(actions) && parts.length > 0 && isValidElement(parts[0]) && parts[0].type === CardTitle;
-  const leadRowRef = useRef(null);
-  const leadFloorFits = useTitleFloorFits(leadRowRef, titleLeads);
-  if (hasActions) {
-    if (titleLeads) {
-      const below = parts.slice(1);
-      return /* @__PURE__ */ jsxs("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: [
-        /* @__PURE__ */ jsxs("div", { ref: leadRowRef, className: HEADER_LAYOUT.row, children: [
-          /* @__PURE__ */ jsx("div", { "data-card-title-row": "", className: cn(HEADER_LAYOUT.titleLeads, !leadFloorFits && HEADER_LAYOUT.floorOff), children: parts[0] }),
-          actionsBlock
-        ] }),
-        below.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-ds-1.5 break-words", HEADER_LAYOUT.below), children: below })
-      ] });
-    }
-    return /* @__PURE__ */ jsx("div", { ref, className: cn(pl, "pr-ds-5 pt-ds-4 last:pb-ds-4", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
-      /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.block, children: [
-        iconBlock,
-        children
+        actionsSlot,
+        !ownBlock && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "order-3 grow basis-0 -ml-ds-2" })
       ] }),
-      actionsBlock
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex flex-col space-y-ds-1.5 pr-ds-5 pt-ds-4 last:pb-ds-4", pl, className), ...props, children: [
-    iconBlock,
-    children
+      !topLine && check,
+      !topLine && menuPart
+    ] }),
+    rest.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-ds-1.5 break-words mt-ds-1.5 min-w-0", children: rest })
   ] });
 });
 var cardLineClampClasses = {
@@ -5651,7 +4769,10 @@ var cardLineClampClasses = {
   5: "line-clamp-5",
   6: "line-clamp-6"
 };
-var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2, id, ...props }, forwardedRef) {
+var WHOLE_ON_KEYBOARD = "[[data-card]:has(:focus-visible)_&]:whitespace-normal [[data-card]:has(:focus-visible)_&]:line-clamp-none";
+var CardTitle = forwardRef(function CardTitle2({ className, children, lines: linesProp, id, ...props }, forwardedRef) {
+  const inHeaderRow = useContext(HeaderRowCtx);
+  const lines = linesProp ?? (inHeaderRow ? 1 : 2);
   const action = useContext(CardActionCtx);
   const generatedId = useId();
   const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
@@ -5667,7 +4788,7 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2,
       id: id ?? generatedId,
       "data-card-title": "",
       ...lines === 1 ? { "data-title-one-line": "" } : {},
-      className: cn(TITLE_TEXT, !action && lines > 0 && lineClampClass, action && lines === 1 && "text-ellipsis", className),
+      className: cn(TITLE_TEXT, !action && lines > 0 && [lineClampClass, WHOLE_ON_KEYBOARD], action && lines === 1 && "text-ellipsis", className),
       ...props,
       children: action ? (
         // The card's action when the card holds controls of its own (Sprint 25.7): a real button, which a click
@@ -5684,14 +4805,13 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2,
               "block w-full text-left cursor-pointer [text-overflow:inherit] focus-visible:outline-none disabled:cursor-not-allowed",
               "after:absolute after:inset-0 after:rounded-[var(--ds-radius-md)] after:pointer-events-none focus-visible:after:shadow-[var(--ds-shadow-focus)]"
             ),
-            children: /* @__PURE__ */ jsx("span", { ref: (node) => overflowRef(lines > 0 ? node : null), className: cn("block [text-overflow:inherit]", lines > 0 && lineClampClass), children })
+            children: /* @__PURE__ */ jsx("span", { ref: (node) => overflowRef(lines > 0 ? node : null), className: cn("block [text-overflow:inherit]", lines > 0 && [lineClampClass, WHOLE_ON_KEYBOARD]), children })
           }
         )
       ) : children
     }
   );
-  if (!isTruncated || lines === 0) return heading;
-  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: heading });
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, disabled: !isTruncated, children: heading });
 });
 var CardDescription = forwardRef(function CardDescription2({ className, children, lines = 2, ...props }, forwardedRef) {
   const { ref: overflowRef, isTruncated } = useTextOverflow({ lines, disabled: lines === 0 });
@@ -5709,18 +4829,15 @@ var CardDescription = forwardRef(function CardDescription2({ className, children
       children
     }
   );
-  if (!isTruncated || lines === 0) return el;
-  return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
+  return /* @__PURE__ */ jsx(Tooltip, { content: children, disabled: !isTruncated, children: el });
 });
 var CardContent = forwardRef(function CardContent2({ className, children, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 pr-ds-5 py-ds-4", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 px-ds-5 py-ds-4", className), ...props, children });
 });
 var CardFooter = forwardRef(function CardFooter2({ className, children, ...props }, ref) {
-  const isCheckable = useContext(CardCtx);
   return (
     // a footer that holds only buttons puts them at the end (round 11: a lone Save sat on the left); text keeps the start
-    /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-ds-2 pr-ds-5 pb-ds-4 pt-ds-2 mt-auto min-w-0 [&:not(:has(>:not(button)))]:justify-end", isCheckable ? "pl-ds-10" : "pl-ds-5", className), ...props, children })
+    /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-ds-2 px-ds-5 pb-ds-4 pt-ds-2 mt-auto min-w-0 [&:not(:has(>:not(button)))]:justify-end", className), ...props, children })
   );
 });
 function TruncLabel({ children }) {
@@ -5836,6 +4953,9 @@ function DataList({ items, columns = 1, className }) {
   );
 }
 var COUNT_FROM_PAGE = [
+  // one card counts too: a lone card fell back to React's count, which counts components that draw nothing, and a grid
+  // with one card inside another took the outer grid's count (the review of 30 September)
+  "[&:has(>:only-child)]:[--gs-cards:1]",
   "[&:has(>:nth-child(2):last-child)]:[--gs-cards:2]",
   "[&:has(>:nth-child(3):last-child)]:[--gs-cards:3]",
   "[&:has(>:nth-child(4):last-child)]:[--gs-cards:4]",
@@ -5848,6 +4968,7 @@ var COUNT_FROM_PAGE = [
   "[&:has(>:nth-child(11):last-child)]:[--gs-cards:11]",
   "[&:has(>:nth-child(12))]:[--gs-cards:12]"
 ].join(" ");
+var MIN_FROM_HEADERS = "[--gs-card-min:14rem] has-[[data-header-actions]]:[--gs-card-min:20rem]";
 function countCards(children) {
   let n = 0;
   Children.forEach(children, (child) => {
@@ -5856,14 +4977,18 @@ function countCards(children) {
   });
   return n;
 }
-function CardGrid({ minWidth = "14rem", maxColumns = 4, compare = false, gap = "var(--ds-space-4)", className, style, children, ref, ...props }) {
+function CardGrid({ minWidth, maxColumns = 4, compare = false, gap = "var(--ds-space-4)", fill: fill2 = true, className, style, children, ref, ...props }) {
   const most = Math.max(1, Math.floor(maxColumns));
-  const n = compare ? "var(--gs-cards, var(--gs-cards-counted))" : String(most);
-  const share = `calc((100% - (${n} - 1) * var(--gs-card-gap)) / ${n})`;
-  const column = compare ? `max(${share}, min(100%, calc((${n} * ${minWidth} + (${n} - 1) * var(--gs-card-gap) - 100%) * 999)))` : `max(min(${minWidth}, 100%), ${share})`;
+  const drawn = "var(--gs-cards, var(--gs-cards-counted))";
+  const min = "var(--gs-card-min)";
+  const shareOf = (n) => `calc((100% - (${n} - 1) * var(--gs-card-gap)) / ${n})`;
+  const collection = `max(min(${min}, 100%), ${shareOf(String(most))})`;
+  const column = compare ? `max(${shareOf(drawn)}, min(100%, calc((${drawn} * ${min} + (${drawn} - 1) * var(--gs-card-gap) - 100%) * 999)))` : fill2 ? `max(${shareOf(`max(${drawn}, 2)`)}, ${collection})` : collection;
   const template = {
     "--gs-card-gap": gap,
-    ...compare ? { "--gs-cards-counted": Math.max(1, countCards(children)) } : {},
+    // A2: a width passed wins; a comparison keeps 14rem; a collection's comes from its headers (MIN_FROM_HEADERS)
+    ...minWidth ? { "--gs-card-min": minWidth } : compare ? { "--gs-card-min": "14rem" } : {},
+    ...compare || fill2 ? { "--gs-cards-counted": Math.max(1, countCards(children)) } : {},
     gap: "var(--gs-card-gap)",
     gridTemplateColumns: `repeat(auto-fill, minmax(${column}, 1fr))`,
     // a comparison's cards share their rows: the headers, the contents and the footers line up across the row
@@ -5876,7 +5001,8 @@ function CardGrid({ minWidth = "14rem", maxColumns = 4, compare = false, gap = "
       "data-card-grid": compare ? "compare" : "",
       className: cn(
         "grid",
-        compare && COUNT_FROM_PAGE,
+        !minWidth && !compare && MIN_FROM_HEADERS,
+        (compare || fill2) && COUNT_FROM_PAGE,
         // each card spans its three rows and lays its parts in them; anything else just fills them
         compare && "[&>*]:row-span-3 [&>[data-card]]:grid [&>[data-card]]:grid-rows-subgrid [&>[data-card]]:gap-y-0",
         className
@@ -6164,7 +5290,7 @@ var EDGE_FADE = 24;
 var NONE = { left: false, right: false, vertical: false, gutterRight: 0, gutterBottom: 0 };
 var same = (a, b) => a.left === b.left && a.right === b.right && a.vertical === b.vertical && a.gutterRight === b.gutterRight && a.gutterBottom === b.gutterBottom;
 function useScrollEdges(options = {}) {
-  const { enabled = true, fade = EDGE_FADE } = options;
+  const { enabled = true, fade = EDGE_FADE, noFade } = options;
   const elRef = useRef(null);
   const observer = useRef(null);
   const borders = useRef({ x: 0, y: 0 });
@@ -6196,9 +5322,11 @@ function useScrollEdges(options = {}) {
     for (const child of Array.from(el.children)) o.observe(child);
     observer.current = o;
   }, [enabled, measure]);
-  const shown = enabled && (state.left || state.right);
+  const fadeLeft = state.left && !noFade?.left;
+  const fadeRight = state.right && !noFade?.right;
+  const shown = enabled && (fadeLeft || fadeRight);
   const { gutterRight: gr, gutterBottom: gb } = state;
-  const fadeLayer = `linear-gradient(to right, ${state.left ? `transparent 0, black ${fade}px` : "black 0"}, ${state.right ? `black calc(100% - ${gr + fade}px), transparent calc(100% - ${gr}px)` : "black 100%"})`;
+  const fadeLayer = `linear-gradient(to right, ${fadeLeft ? `transparent 0, black ${fade}px` : "black 0"}, ${fadeRight ? `black calc(100% - ${gr + fade}px), transparent calc(100% - ${gr}px)` : "black 100%"})`;
   const gutters = [gb > 0 && { size: `100% ${gb}px`, position: "0 100%" }, gr > 0 && { size: `${gr}px 100%`, position: "100% 0" }].filter(Boolean);
   const mask = shown ? {
     image: [fadeLayer, ...gutters.map(() => "linear-gradient(black, black)")].join(", "),
@@ -6211,18 +5339,54 @@ function useScrollEdges(options = {}) {
     /** The scroller itself, for code that moves it. */
     elRef,
     measure,
-    /** Content hides past a side edge: the scroller moves sideways, and its edges fade. */
-    overflowing: shown,
+    /** Content hides past a side edge: the scroller moves sideways, and its edges fade (but those in `noFade`). */
+    overflowing: enabled && (state.left || state.right),
     /** It scrolls either way, sideways or up and down: a keyboard needs to reach it. */
     scrollable: enabled && (state.left || state.right || state.vertical),
     edges: { left: state.left, right: state.right },
     /** For the scroller: `data-fade` names the faded edges ("left", "right" or "left right"), the style masks them. */
     fadeProps: {
-      "data-fade": shown ? [state.left && "left", state.right && "right"].filter(Boolean).join(" ") : void 0,
+      "data-fade": shown ? [fadeLeft && "left", fadeRight && "right"].filter(Boolean).join(" ") : void 0,
       style: mask ? { maskImage: mask.image, WebkitMaskImage: mask.image, maskSize: mask.size, WebkitMaskSize: mask.size, maskPosition: mask.position, WebkitMaskPosition: mask.position, maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat" } : void 0
     }
   };
 }
+var HEADER_LAYOUT = {
+  row: "flex flex-wrap items-start justify-between gap-ds-4",
+  block: "flex flex-col space-y-ds-1.5 grow basis-1/2 break-words max-w-full has-[[data-title-one-line]]:min-w-0",
+  titleLeads: "grow basis-1/2 max-w-max break-words has-[[data-title-one-line]]:min-w-0",
+  floorOff: "min-w-0",
+  actions: "flex items-center gap-ds-2 shrink-0 ml-auto",
+  below: "mt-ds-1.5"
+};
+function useTitleFloorFits(rowRef, active) {
+  const [fits, setFits] = useState(true);
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    if (!active || !row) return;
+    const measure = () => {
+      const title = row.querySelector("h1, h2, h3, h4, h5, h6");
+      if (!title) return;
+      const width = title.style.width;
+      title.style.width = "min-content";
+      const longest = title.getBoundingClientRect().width;
+      title.style.width = width;
+      if (longest === 0) return;
+      const next = longest <= row.clientWidth + 0.5;
+      setFits((was) => was === next ? was : next);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(row);
+    return () => observer.disconnect();
+  }, [rowRef, active]);
+  return fits;
+}
+function actionsAreBadges(actions) {
+  const items = Children.toArray(actions);
+  return items.length > 0 && items.every((item) => isValidElement(item) && (item.type === Fragment$1 ? actionsAreBadges(item.props.children) : item.type === Badge));
+}
 function TruncCell({ children, lines }) {
   const { ref, isTruncated } = useTextOverflow({ lines });
   const clampClass = lines === 1 ? "truncate" : `line-clamp-${lines}`;
@@ -6237,6 +5401,95 @@ var FRAME_CLASSES = cn(
   GLASS_SURFACE,
   "bg-[var(--ds-bg-surface)]"
 );
+var PINNED_BACKGROUND = "linear-gradient(var(--gs-row-tint, transparent), var(--gs-row-tint, transparent)), linear-gradient(var(--gs-pinned-surface), var(--gs-pinned-surface)), var(--gs-pinned-canvas)";
+var PINNED_LAYERS = cn(
+  "[--gs-pinned-surface:var(--ds-bg-surface)] [--gs-pinned-canvas:var(--ds-bg-canvas)]",
+  "supports-[color:oklch(from_red_l_c_h)]:[--gs-pinned-surface:oklch(from_var(--ds-bg-surface)_l_c_h_/_max(alpha,min(1,alpha*1000)))]",
+  "supports-[color:oklch(from_red_l_c_h)]:[--gs-pinned-canvas:oklch(from_var(--ds-bg-canvas)_l_c_h_/_1)]"
+);
+var PIN_SHADOW = "oklch(0 0 0 / 0.18)";
+var ROW_CONTROL = `${FOCUSABLE}, label, [role="button"], [role="checkbox"], [role="switch"], [role="menuitem"], [role="link"]`;
+function clickIsRows(e) {
+  const target = e.target;
+  if (!(target instanceof Element) || !e.currentTarget.contains(target)) return false;
+  const selection = typeof window !== "undefined" ? window.getSelection() : null;
+  if (selection && !selection.isCollapsed && selection.anchorNode && e.currentTarget.contains(selection.anchorNode)) return false;
+  const control = target.closest(ROW_CONTROL);
+  return !control || control === e.currentTarget || !e.currentTarget.contains(control);
+}
+function sortableValue(v) {
+  if (v === null || v === void 0 || v === "") return void 0;
+  if (v instanceof Date) return v.getTime();
+  if (typeof v === "string" || typeof v === "number") return v;
+  if (typeof v === "boolean") return v ? 1 : 0;
+  return isValidElement(v) || typeof v === "object" ? null : String(v);
+}
+var COLLATOR = new Intl.Collator(void 0, { numeric: true });
+function compareValues(a, b) {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return COLLATOR.compare(String(a), String(b));
+}
+var UNIT_SCALE = {
+  "": 1,
+  "%": 1,
+  b: 1,
+  byte: 1,
+  bytes: 1,
+  kb: 1e3,
+  kib: 1024,
+  mb: 1e6,
+  mib: 1024 ** 2,
+  gb: 1e9,
+  gib: 1024 ** 3,
+  tb: 1e12,
+  tib: 1024 ** 4,
+  pb: 1e15,
+  pib: 1024 ** 5,
+  ms: 1,
+  s: 1e3,
+  sec: 1e3,
+  min: 6e4,
+  h: 36e5,
+  hr: 36e5,
+  hrs: 36e5,
+  g: 1,
+  kg: 1e3,
+  m: 1,
+  km: 1e3,
+  "\xB0c": 1,
+  "\xB0f": 1
+};
+function numberOf(text) {
+  const m = /^\s*([-\u2212])?\s*[$€£¥]?\s*([-\u2212])?\s*(\d[\d,]*\.?\d*|\.\d+)\s*(%|°[CF]|[a-z]*)\s*$/i.exec(text);
+  const scale = m ? UNIT_SCALE[m[4].toLowerCase()] : void 0;
+  if (!m || scale === void 0) return void 0;
+  const n = parseFloat(m[3].replace(/,/g, ""));
+  return Number.isFinite(n) ? (m[1] || m[2] ? -1 : 1) * n * scale : void 0;
+}
+function timeOf(text) {
+  const t = Date.parse(text);
+  return Number.isNaN(t) ? void 0 : t;
+}
+function rowIdsOf(data, field) {
+  const seen = /* @__PURE__ */ new Set();
+  let repeated = null;
+  const ids = data.map((row, index) => {
+    const v = row[field];
+    if (typeof v !== "string" && typeof v !== "number") return index;
+    if (!seen.has(String(v))) {
+      seen.add(String(v));
+      return v;
+    }
+    repeated ??= String(v);
+    return `${v}~${index}`;
+  });
+  return { ids, repeated };
+}
+function rowMarks(row, index, field, id) {
+  const v = row[field];
+  return typeof v === "string" || typeof v === "number" ? { "data-row-key": String(id) } : { "data-row-index": String(index) };
+}
+var idPart = (id) => String(id).replace(/\s+/g, "_");
 function TableHeading({ title, description, actions, titleId, descriptionId, inset }) {
   const heading = /* @__PURE__ */ jsx("h3", { id: titleId, className: TITLE_CLASSES, children: title });
   const actionsBlock = actions ? /* @__PURE__ */ jsx("div", { className: HEADER_LAYOUT.actions, children: actions }) : null;
@@ -6258,8 +5511,10 @@ function TableHeading({ title, description, actions, titleId, descriptionId, ins
     descriptionText(HEADER_LAYOUT.below)
   ] }) });
 }
+var NO_PINS = { start: [], end: [], nameFits: false, frame: 0 };
+var samePins = (a, b) => a.nameFits === b.nameFits && a.frame === b.frame && a.start.join() === b.start.join() && a.end.join() === b.end.join();
 function Table({
-  columns,
+  columns: columnsProp,
   data,
   className,
   sortable,
@@ -6271,6 +5526,10 @@ function Table({
   onSelectionChange,
   expandable,
   renderExpanded,
+  rowKey = "id",
+  expandedRows: expandedRowsProp,
+  defaultExpandedRows,
+  onExpandedChange,
   density = "default",
   stickyHeader = false,
   striped = false,
@@ -6278,6 +5537,8 @@ function Table({
   emptyState,
   onRowClick,
   mobileBreakpoint: mobileBreakpointProp,
+  cardsBelow = CARDS_BELOW,
+  pager,
   title,
   description,
   actions,
@@ -6289,7 +5550,10 @@ function Table({
   const descriptionId = `${headingId}-description`;
   const [internalSortKey, setInternalSortKey] = useState(null);
   const [internalSortDir, setInternalSortDir] = useState(null);
-  const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
+  const columns = useMemo(
+    () => [...columnsProp.filter((c) => c.pin === "start"), ...columnsProp.filter((c) => !c.pin), ...columnsProp.filter((c) => c.pin === "end")],
+    [columnsProp]
+  );
   const isControlled = controlledSortKey !== void 0;
   const sortKey = isControlled ? controlledSortKey : internalSortKey;
   const sortDir = isControlled ? controlledSortDir ?? null : internalSortDir;
@@ -6309,6 +5573,7 @@ function Table({
         nextKey = key;
         nextDir = "asc";
       }
+      pager?.setPage(1);
       if (onSortChange) {
         onSortChange(nextKey, nextDir);
       } else {
@@ -6316,139 +5581,348 @@ function Table({
         setInternalSortDir(nextDir);
       }
     },
-    [sortKey, sortDir, onSortChange]
+    [sortKey, sortDir, onSortChange, pager]
+  );
+  const columnKeys = useMemo(() => columns.map((c) => c.key), [columns]);
+  const inferredKinds = useMemo(() => inferColumnKinds(data, columnKeys), [data, columnKeys]);
+  const kindOf = useCallback(
+    (col) => col.kind ?? inferredKinds.get(col.key),
+    [inferredKinds]
+  );
+  const sortColumn = sortKey ? columns.find((c) => c.key === sortKey) : void 0;
+  const sortKind = sortColumn ? kindOf(sortColumn) : void 0;
+  const { sortedAll, unsortable } = useMemo(() => {
+    const indexed = data.map((row, i) => ({ row, originalIdx: i }));
+    if (!sortKey || !sortDir) return { sortedAll: indexed, unsortable: null };
+    const read = (row) => {
+      if (sortColumn?.sortValue) return sortableValue(sortColumn.sortValue(row));
+      const v = sortableValue(row[sortKey]);
+      if (typeof v !== "string") return v;
+      return (sortKind === "number" ? numberOf(v) : sortKind === "date" ? timeOf(v) : void 0) ?? v;
+    };
+    const valued = indexed.map((entry) => ({ ...entry, value: read(entry.row) }));
+    const elements = valued.some((v) => v.value === null);
+    const sorted = elements ? indexed : valued.sort((a, b) => {
+      if (a.value === void 0 || b.value === void 0) return a.value === b.value ? 0 : a.value === void 0 ? 1 : -1;
+      const cmp = compareValues(a.value, b.value);
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+    return { sortedAll: sorted, unsortable: elements ? sortKey : null };
+  }, [data, sortKey, sortDir, sortColumn, sortKind]);
+  const canSort = useMemo(() => {
+    const can = /* @__PURE__ */ new Set();
+    for (const col of columns) if (col.sortValue || data.every((row) => sortableValue(row[col.key]) !== null)) can.add(col.key);
+    return can;
+  }, [columns, data]);
+  useEffect(() => {
+    if (unsortable) warnOnce("Table", `the column "${unsortable}" is sortable, but its cells are elements, which can't be compared: give it a sortValue, (row) => the name, number or date it shows (data_display#1).`);
+  }, [unsortable]);
+  useEffect(() => {
+    if (pager && data.length !== pager.totalItems) warnOnce("Table", `the pager counts ${pager.totalItems} rows but data holds ${data.length}: give the table and usePagination the same rows, every row of the list, and the table draws the pager's part (Sprint 25.13 A3).`);
+  }, [pager, data.length]);
+  const rangeStart = pager ? pager.range[0] : null;
+  const rangeEnd2 = pager ? pager.range[1] : null;
+  const drawn = useMemo(
+    () => rangeStart === null ? sortedAll : rangeStart === 0 ? [] : sortedAll.slice(rangeStart - 1, rangeEnd2 ?? void 0),
+    [sortedAll, rangeStart, rangeEnd2]
   );
-  const sortedWithIndices = sortKey && sortDir ? data.map((row, i) => ({ row, originalIdx: i })).sort((a, b) => {
-    const aVal = a.row[sortKey];
-    const bVal = b.row[sortKey];
-    if (aVal == null || bVal == null) return 0;
-    const cmp = String(aVal).localeCompare(String(bVal), void 0, { numeric: true });
-    return sortDir === "asc" ? cmp : -cmp;
-  }) : data.map((row, i) => ({ row, originalIdx: i }));
+  const drawnStart = rangeStart ? rangeStart - 1 : 0;
   const selectedSet = new Set(selectedRows);
-  const allSelected = data.length > 0 && selectedRows.length === data.length;
-  const someSelected = selectedRows.length > 0 && !allSelected;
+  const drawnIdx = drawn.map((d) => d.originalIdx);
+  const allSelected = drawnIdx.length > 0 && drawnIdx.every((i) => selectedSet.has(i));
+  const someSelected = !allSelected && drawnIdx.some((i) => selectedSet.has(i));
   const toggleAll = () => {
-    if (allSelected) onSelectionChange?.([]);
-    else onSelectionChange?.(data.map((_, i) => i));
+    const shown = new Set(drawnIdx);
+    if (allSelected) onSelectionChange?.(selectedRows.filter((r) => !shown.has(r)));
+    else onSelectionChange?.([...selectedRows.filter((r) => !shown.has(r)), ...drawnIdx]);
   };
   const toggleRow = (idx) => {
     if (selectedSet.has(idx)) onSelectionChange?.(selectedRows.filter((r) => r !== idx));
     else onSelectionChange?.([...selectedRows, idx]);
   };
-  const toggleExpand = (idx) => {
-    setExpandedRows((prev) => {
-      const next = new Set(prev);
-      if (next.has(idx)) next.delete(idx);
-      else next.add(idx);
-      return next;
-    });
+  const expandControlled = expandedRowsProp !== void 0;
+  const [ownExpanded, setOwnExpanded] = useState(defaultExpandedRows ?? []);
+  const expanded = expandControlled ? expandedRowsProp : ownExpanded;
+  const expandedSet = new Set(expanded.map(String));
+  const { ids: rowIds, repeated } = useMemo(() => rowIdsOf(data, rowKey), [data, rowKey]);
+  useEffect(() => {
+    if (repeated !== null) warnOnce("Table", `two rows share the ${rowKey} "${repeated}": give each row its own, or name a field that is one (rowKey), so an opened row and focus stay on their row.`);
+  }, [repeated, rowKey]);
+  const idOf = (_row, index) => rowIds[index] ?? index;
+  const marksOf = (row, index) => rowMarks(row, index, rowKey, idOf(row, index));
+  const openedHere = useRef(null);
+  const toggleExpand = (id) => {
+    const opening = !expandedSet.has(String(id));
+    const next = opening ? [...expanded, id] : expanded.filter((x) => String(x) !== String(id));
+    openedHere.current = opening ? String(id) : null;
+    if (!expandControlled) setOwnExpanded(next);
+    onExpandedChange?.(next);
   };
-  const columnKeys = useMemo(() => columns.map((c) => c.key), [columns]);
-  const inferredKinds = useMemo(() => inferColumnKinds(data, columnKeys), [data, columnKeys]);
-  const kindOf = useCallback(
-    (col) => col.kind ?? inferredKinds.get(col.key),
-    [inferredKinds]
-  );
+  const canOpenByClick = !!expandable && !!renderExpanded && !onRowClick;
   const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
-  const isMobile = useBreakpoint(mobileBreakpoint);
-  const { ref: scrollRef, measure: measureScroll, scrollable, fadeProps } = useScrollEdges({ enabled: !isMobile });
+  const narrowScreen = useBreakpoint(mobileBreakpoint);
+  const { cards: isMobile, rootRef } = useCardsSwitch(narrowScreen, cardsBelow, title);
+  const setRoot = useCallback((node) => {
+    rootRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref, rootRef]);
+  const tableRef = useRef(null);
+  const [pins, setPins] = useState(NO_PINS);
+  const lead = (selectable ? 1 : 0) + (expandable ? 1 : 0);
+  const endCount = columns.filter((c) => c.pin === "end").length;
+  const nameIndex = columns.length > endCount ? lead : -1;
+  const { ref: scrollRef, elRef: scrollEl, measure: measureScroll, scrollable, edges, fadeProps } = useScrollEdges({
+    enabled: !isMobile,
+    noFade: { left: lead + (pins.nameFits ? 1 : 0) > 0, right: endCount > 0 }
+  });
   const [regionFocused, setRegionFocused] = useState(false);
+  useLayoutEffect(() => {
+    const table2 = tableRef.current;
+    const scroller = scrollEl.current;
+    if (!table2 || !scroller || isMobile) return;
+    const measure = () => {
+      const cells = Array.from(table2.querySelectorAll(":scope > thead > tr > th"));
+      if (!cells.length) return;
+      const widths = cells.map((c) => c.getBoundingClientRect().width);
+      const start = [];
+      let at = 0;
+      for (let i = 0; i < lead; i++) {
+        start.push(at);
+        at += widths[i] ?? 0;
+      }
+      const nameWidth = nameIndex >= 0 ? widths[nameIndex] ?? 0 : 0;
+      const end = [];
+      let fromRight = 0;
+      for (let i = cells.length - 1; i >= cells.length - endCount; i--) {
+        end.unshift(fromRight);
+        fromRight += widths[i] ?? 0;
+      }
+      const frame = scroller.clientWidth;
+      const nameFits = nameIndex >= 0 && frame > 0 && at + nameWidth + fromRight <= frame / 2;
+      if (nameFits) start.push(at);
+      const next = { start, end, nameFits, frame };
+      setPins((prev) => samePins(prev, next) ? prev : next);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(table2);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, [isMobile, lead, endCount, nameIndex, scrollEl, columns, drawn.length]);
+  const pinnedStart = lead + (pins.nameFits ? 1 : 0);
+  const pinStyle = (position, total) => {
+    if (position < pinnedStart && pins.start[position] !== void 0) {
+      const inner = position === pinnedStart - 1;
+      return { position: "sticky", left: pins.start[position], zIndex: 1, background: PINNED_BACKGROUND, boxShadow: inner && edges.left ? `6px 0 6px -6px ${PIN_SHADOW}` : void 0 };
+    }
+    const fromEnd = total - 1 - position;
+    if (fromEnd < endCount && pins.end[endCount - 1 - fromEnd] !== void 0) {
+      const inner = fromEnd === endCount - 1;
+      return { position: "sticky", right: pins.end[endCount - 1 - fromEnd], zIndex: 1, background: PINNED_BACKGROUND, boxShadow: inner && edges.right ? `-6px 0 6px -6px ${PIN_SHADOW}` : void 0 };
+    }
+    return void 0;
+  };
+  const fade = fadeProps;
+  const [renderedKinds, setRenderedKinds] = useState(() => /* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    const table2 = tableRef.current;
+    if (!table2 || isMobile) return;
+    const next = /* @__PURE__ */ new Map();
+    for (const col of columns) {
+      if (kindOf(col)) continue;
+      const texts = Array.from(table2.querySelectorAll(`:scope > tbody > tr > td[data-col="${CSS.escape(col.key)}"]`)).slice(0, 50).map((td) => td.textContent ?? "");
+      const kind = texts.length ? kindOfRenderedText(texts) : void 0;
+      if (kind) next.set(col.key, kind);
+    }
+    setRenderedKinds((prev) => prev.size === next.size && [...next].every(([k, v]) => prev.get(k) === v) ? prev : next);
+  }, [columns, kindOf, drawn, isMobile]);
+  const expandedKey = expanded.map(String).join("
");
+  const shownBefore = useRef(/* @__PURE__ */ new Set());
+  const pendingScroll = useRef(null);
+  const scrollToRow = useCallback((key) => {
+    const row = rootRef.current?.querySelector(`[data-row-key="${CSS.escape(key)}"], [data-row-index="${CSS.escape(key)}"]`);
+    if (row && typeof row.scrollIntoView === "function") row.scrollIntoView({ block: "nearest" });
+  }, [rootRef]);
+  useEffect(() => {
+    const now = new Set(expanded.map(String));
+    const added = [...now].filter((k) => !shownBefore.current.has(k) && k !== openedHere.current);
+    shownBefore.current = now;
+    openedHere.current = null;
+    if (!expandControlled) return;
+    const key = added[added.length - 1];
+    if (key === void 0) return;
+    if (pager) {
+      const position = sortedAll.findIndex((r) => String(idOf(r.row, r.originalIdx)) === key);
+      if (position >= 0 && (position < drawnStart || position >= drawnStart + drawn.length)) {
+        pendingScroll.current = key;
+        pager.setPage(Math.floor(position / pager.pageSize) + 1);
+        return;
+      }
+    }
+    scrollToRow(key);
+  }, [expandedKey]);
+  useEffect(() => {
+    const key = pendingScroll.current;
+    if (!key || !drawn.some((r) => String(idOf(r.row, r.originalIdx)) === key)) return;
+    pendingScroll.current = null;
+    scrollToRow(key);
+  }, [drawnStart, drawn.length, scrollToRow]);
   const cardHeading = title ? /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: false }) : null;
-  const titledCards = (body) => /* @__PURE__ */ jsxs("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("flex flex-col", className), children: [
+  const titledCards = (body) => /* @__PURE__ */ jsxs("div", { ref: listRoot, "data-ds-list": "", "data-gs": "table", className: cn("flex flex-col", listClass), onFocus: noteFocus, onBlur: forgetFocus, children: [
     cardHeading,
     body
   ] });
+  const control = pager && !loading && data.length > 0 ? /* @__PURE__ */ jsx(Pagination, { ...pager.props }) : null;
+  const listRoot = control ? void 0 : setRoot;
+  const listClass = control ? void 0 : className;
+  const withControl = (list) => control ? /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
+    list,
+    control
+  ] }) : list;
+  const focusWas = useRef(null);
+  const noteFocus = (e) => {
+    const target = e.target;
+    const row = target.closest("[data-row-key], [data-row-index]");
+    if (!row) {
+      focusWas.current = null;
+      return;
+    }
+    const control2 = target === row ? null : target.getAttribute("aria-labelledby") ?? target.getAttribute("aria-label") ?? target.textContent;
+    focusWas.current = { row: row.hasAttribute("data-row-key") ? `[data-row-key="${CSS.escape(row.getAttribute("data-row-key"))}"]` : `[data-row-index="${CSS.escape(row.getAttribute("data-row-index"))}"]`, control: control2 };
+  };
+  const forgetFocus = (e) => {
+    const node = e.target;
+    queueMicrotask(() => {
+      if (node.isConnected && !rootRef.current?.contains(document.activeElement)) focusWas.current = null;
+    });
+  };
+  useLayoutEffect(() => {
+    const was = focusWas.current;
+    const active = document.activeElement;
+    if (!was || active && active !== document.body) return;
+    const row = rootRef.current?.querySelector(was.row);
+    if (!row) return;
+    const controls = Array.from(row.querySelectorAll(FOCUSABLE));
+    const same2 = was.control === null ? null : controls.find((el) => (el.getAttribute("aria-labelledby") ?? el.getAttribute("aria-label") ?? el.textContent) === was.control);
+    (same2 ?? (row.tabIndex >= 0 ? row : controls[0]))?.focus({ preventScroll: true });
+  }, [isMobile, rootRef]);
   if (isMobile) {
     if (loading) {
       if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-ds-10", children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) }));
-      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
+      return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
     }
     if (data.length === 0 && emptyState) {
       if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", children: emptyState }));
-      return /* @__PURE__ */ jsx("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
+      return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
     }
-    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx("div", { ref: title ? void 0 : ref, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("flex flex-col gap-ds-3 overflow-y-auto", title ? "min-h-0" : className), children: sortedWithIndices.map(({ row, originalIdx }, i) => {
-      const isSelected = selectedSet.has(originalIdx);
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          "data-row": "",
-          className: cn(
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-            "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
-            "p-ds-4 space-y-ds-3",
-            isSelected && ACTIVE_RING,
-            onRowClick && "cursor-pointer hover:bg-[var(--ds-bg-muted)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
-          ),
-          onClick: onRowClick ? () => onRowClick(row, originalIdx) : void 0,
-          tabIndex: onRowClick ? 0 : void 0,
-          onKeyDown: onRowClick ? (e) => {
-            if (e.target !== e.currentTarget) return;
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onRowClick(row, originalIdx);
-            }
-          } : void 0,
-          children: [
-            selectable && /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), label: "Select" }),
-            columns.map((col) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-ds-2 text-sm", children: [
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
-              /* @__PURE__ */ jsx(CardValue, { value: row[col.key] })
-            ] }, col.key)),
-            expandable && renderExpanded && /* @__PURE__ */ jsx("div", { className: "pt-ds-2 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-sm text-[var(--ds-text-secondary)]", children: renderExpanded(row, i) })
-          ]
-        },
-        i
-      );
-    }) }) });
-    return title ? titledCards(cards) : cards;
+    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsxs("div", { ref: title ? void 0 : listRoot, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("flex flex-col gap-ds-3 overflow-y-auto", title ? "min-h-0" : listClass), onFocus: title ? void 0 : noteFocus, onBlur: title ? void 0 : forgetFocus, children: [
+      selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select`, children: "Select" }),
+      drawn.map(({ row, originalIdx }) => {
+        const isSelected = selectedSet.has(originalIdx);
+        const id = idOf(row, originalIdx);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-row": "",
+            ...marksOf(row, originalIdx),
+            className: cn(
+              "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+              "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
+              "p-ds-4 space-y-ds-3",
+              isSelected && ACTIVE_RING,
+              onRowClick && "cursor-pointer hover:bg-[var(--ds-bg-muted)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+            ),
+            onClick: onRowClick ? (e) => {
+              if (clickIsRows(e)) onRowClick(row, originalIdx);
+            } : void 0,
+            tabIndex: onRowClick ? 0 : void 0,
+            onKeyDown: onRowClick ? (e) => {
+              if (e.target !== e.currentTarget) return;
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onRowClick(row, originalIdx);
+              }
+            } : void 0,
+            children: [
+              selectable && // "Select" and the row's name, as in the table (T15)
+              /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-card-name-${idPart(id)}` : `${headingId}-select` }),
+              columns.map((col, c) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-ds-2 text-sm", children: [
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
+                /* @__PURE__ */ jsx(CardValue, { value: row[col.key], id: lead + c === nameIndex ? `${headingId}-card-name-${idPart(id)}` : void 0 })
+              ] }, col.key)),
+              expandable && renderExpanded && /* @__PURE__ */ jsx("div", { className: "pt-ds-2 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-sm text-[var(--ds-text-secondary)]", children: renderExpanded(row, originalIdx) })
+            ]
+          },
+          String(id)
+        );
+      })
+    ] }) });
+    return withControl(title ? titledCards(cards) : cards);
   }
-  const table = /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : ariaLabel ? { "aria-label": ariaLabel } : {}, children: [
-    /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
-      selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(
+  const cellCount = columns.length + lead;
+  const table = /* @__PURE__ */ jsxs("table", { ref: tableRef, className: cn("w-full text-sm", PINNED_LAYERS), ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : ariaLabel ? { "aria-label": ariaLabel } : {}, children: [
+    /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] [--gs-row-tint:var(--ds-bg-muted)]", children: [
+      selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(
         Checkbox,
         {
           checked: allSelected,
           indeterminate: someSelected,
-          onChange: toggleAll
+          onChange: toggleAll,
+          "aria-labelledby": `${headingId}-select-all`
         }
       ) }),
-      expandable && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3") }),
-      columns.map((col) => {
-        const isSortable = sortable || col.sortable;
-        const isActiveSort = sortKey === col.key;
+      expandable && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), style: pinStyle(selectable ? 1 : 0, cellCount) }),
+      columns.map((col, c) => {
+        const isSortable = col.header.trim() !== "" && (col.sortable ?? (!!sortable && canSort.has(col.key)));
+        const isActiveSort = sortKey === col.key && !!sortDir && unsortable !== col.key;
         const headerKind = kindOf(col);
         const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
         const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
+        const style = { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth, ...pinStyle(lead + c, cellCount) };
         return /* @__PURE__ */ jsx(
           "th",
           {
+            "aria-sort": isSortable && isActiveSort ? sortDir === "asc" ? "ascending" : "descending" : void 0,
             className: cn(
               density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
               shrink && "w-px whitespace-nowrap",
               "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
               "text-xs uppercase tracking-wider",
-              headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left",
-              isSortable && "cursor-pointer select-none hover:text-[var(--ds-text-primary)]"
+              headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left"
             ),
-            style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
-            onClick: isSortable ? () => handleSort(col.key) : void 0,
-            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1", children: [
-              col.header,
-              isSortable && isActiveSort && /* @__PURE__ */ jsx(
-                Icon,
+            style,
+            children: isSortable ? (
+              // A47: a button with the column's name, reached with Tab and pressed with Enter or Space
+              /* @__PURE__ */ jsxs(
+                "button",
                 {
-                  name: "chevron-right",
-                  size: 12,
+                  type: "button",
+                  onClick: () => handleSort(col.key),
                   className: cn(
-                    "transition-transform",
-                    sortDir === "asc" ? "-rotate-90" : "rotate-90"
-                  )
+                    "inline-flex items-center gap-ds-1 uppercase tracking-wider cursor-pointer select-none",
+                    "[font:inherit] text-inherit hover:text-[var(--ds-text-primary)]",
+                    "rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+                  ),
+                  children: [
+                    col.header,
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: "chevron-right",
+                        size: 12,
+                        className: cn(
+                          "transition-transform",
+                          !isActiveSort ? "invisible" : sortDir === "asc" ? "-rotate-90" : "rotate-90"
+                        )
+                      }
+                    )
+                  ]
                 }
               )
-            ] })
+            ) : /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-ds-1", children: col.header })
           },
           col.key
         );
@@ -6457,31 +5931,44 @@ function Table({
     /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
       "td",
       {
-        colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
+        colSpan: cellCount,
         className: "px-ds-4 py-ds-10 text-center",
         children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" })
       }
     ) }) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
       "td",
       {
-        colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0),
+        colSpan: cellCount,
         className: "px-ds-4 py-ds-10 text-center text-sm text-[var(--ds-text-muted)]",
         children: emptyState
       }
-    ) }) : sortedWithIndices.map(({ row, originalIdx }, i) => {
+    ) }) : drawn.map(({ row, originalIdx }, i) => {
       const isSelected = selectedSet.has(originalIdx);
-      const isExpanded = expandedRows.has(i);
+      const id = idOf(row, originalIdx);
+      const isExpanded = expandedSet.has(String(id));
+      const clickable = !!onRowClick || canOpenByClick;
       return /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsxs(
           "tr",
           {
+            ...marksOf(row, originalIdx),
             className: cn(
               "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
-              "transition-colors",
-              isSelected ? "bg-[var(--ds-accent-subtle)]" : striped && i % 2 === 1 ? "bg-[var(--ds-bg-muted)]/50" : "hover:bg-[var(--ds-bg-muted)]",
-              onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:shadow-[inset_var(--ds-shadow-focus)]"
+              // the row's background and its tint change together, so its pinned cells and the rest fade as one
+              // (roots.css registers --gs-row-tint as a colour so it can)
+              "transition-[background-color,--gs-row-tint]",
+              // the row's tint, as a variable too, so its pinned cells draw it over their solid ground (A35)
+              isSelected ? "bg-[var(--ds-accent-subtle)] [--gs-row-tint:var(--ds-accent-subtle)]" : striped && i % 2 === 1 ? "bg-[var(--ds-bg-muted)]/50 [--gs-row-tint:color-mix(in_oklab,var(--ds-bg-muted)_50%,transparent)]" : "hover:bg-[var(--ds-bg-muted)] hover:[--gs-row-tint:var(--ds-bg-muted)]",
+              clickable && "cursor-pointer",
+              // an outline inside the row: it shows over the pinned cells, whose solid ground hid the inset
+              // shadow the row drew before (the review of 30 September)
+              onRowClick && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--ds-border-focus)]"
             ),
-            onClick: onRowClick ? () => onRowClick(row, originalIdx) : void 0,
+            onClick: clickable ? (e) => {
+              if (!clickIsRows(e)) return;
+              if (onRowClick) onRowClick(row, originalIdx);
+              else toggleExpand(id);
+            } : void 0,
             tabIndex: onRowClick ? 0 : void 0,
             onKeyDown: onRowClick ? (e) => {
               if (e.target !== e.currentTarget) return;
@@ -6491,15 +5978,15 @@ function Table({
               }
             } : void 0,
             children: [
-              selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx) }) }),
-              expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), children: /* @__PURE__ */ jsx(
+              selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-name-${idPart(id)}` : `${headingId}-select` }) }),
+              expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), style: pinStyle(selectable ? 1 : 0, cellCount), children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: () => toggleExpand(i),
+                  onClick: () => toggleExpand(id),
                   className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer",
                   "aria-expanded": isExpanded,
-                  "aria-label": "Expand row",
+                  ...nameIndex >= 0 ? { "aria-labelledby": `${headingId}-details ${headingId}-name-${idPart(id)}` } : { "aria-label": "Details" },
                   children: /* @__PURE__ */ jsx(
                     Icon,
                     {
@@ -6510,12 +5997,13 @@ function Table({
                   )
                 }
               ) }),
-              columns.map((col) => {
+              columns.map((col, c) => {
                 const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
                 const kind = kindOf(col);
                 const alignClass = col.align ? col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left" : kind === "number" ? "text-right" : "text-left";
                 const cellContent = row[col.key];
                 const shrink = (kind === "number" || kind === "date") && !col.maxWidth;
+                const whole = !kind && renderedKinds.has(col.key);
                 let inner;
                 if (truncLines > 0) {
                   inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: cellContent });
@@ -6531,13 +6019,17 @@ function Table({
                 return /* @__PURE__ */ jsx(
                   "td",
                   {
+                    id: lead > 0 && lead + c === nameIndex ? `${headingId}-name-${idPart(id)}` : void 0,
+                    "data-col": col.key,
                     className: cn(
                       density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
                       "text-[var(--ds-text-primary)]",
                       alignClass,
-                      shrink && "w-px whitespace-nowrap"
+                      shrink && "w-px whitespace-nowrap",
+                      whole && "whitespace-nowrap",
+                      kind === "identifier" && "[overflow-wrap:anywhere]"
                     ),
-                    style: col.maxWidth || col.width || col.minWidth ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth } : void 0,
+                    style: col.maxWidth || col.width || col.minWidth || c + lead < pinnedStart || c >= columns.length - endCount ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth, ...pinStyle(lead + c, cellCount) } : void 0,
                     children: inner
                   },
                   col.key
@@ -6549,50 +6041,57 @@ function Table({
         expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
           "td",
           {
-            colSpan: columns.length + (selectable ? 1 : 0) + 1,
+            colSpan: cellCount,
             className: "bg-[var(--ds-bg-muted)] px-ds-6 py-ds-4 text-sm text-[var(--ds-text-primary)]",
-            children: renderExpanded(row, i)
+            children: /* @__PURE__ */ jsx("div", { "data-row-panel": "", className: "sticky left-ds-6", style: pins.frame ? { maxWidth: `calc(${pins.frame}px - 2 * var(--ds-space-6))` } : void 0, children: renderExpanded(row, originalIdx) })
           }
         ) })
-      ] }, i);
+      ] }, String(id));
     }) })
   ] });
   const region = scrollable || regionFocused ? { tabIndex: 0, role: "region", ...title ? { "aria-labelledby": titleId } : { "aria-label": ariaLabel ?? "Table" } } : {};
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      "data-ds-list": "",
-      "data-gs": "table",
-      className: cn("w-full min-w-0 flex flex-col", FRAME_CLASSES, "has-[>[data-table-scroll]:focus-visible]:shadow-[var(--ds-shadow-focus)]", className),
-      children: [
-        title && /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: scrollRef,
-            "data-table-scroll": "",
-            onScroll: measureScroll,
-            onFocus: (e) => {
-              if (e.target === e.currentTarget) setRegionFocused(true);
-            },
-            onBlur: (e) => {
-              if (e.target === e.currentTarget) setRegionFocused(false);
-            },
-            ...fadeProps,
-            ...region,
-            className: cn("min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
-            children: table
-          }
-        )
-      ]
-    }
+  return withControl(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: listRoot,
+        "data-ds-list": "",
+        "data-gs": "table",
+        className: cn("w-full min-w-0 flex flex-col", FRAME_CLASSES, "has-[>[data-table-scroll]:focus-visible]:shadow-[var(--ds-shadow-focus)]", control && "min-h-0", listClass),
+        onFocus: noteFocus,
+        onBlur: forgetFocus,
+        children: [
+          title && /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
+          selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select-all`, children: "Select all rows shown" }),
+          selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select`, children: "Select" }),
+          expandable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-details`, children: "Details" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: scrollRef,
+              "data-table-scroll": "",
+              onScroll: measureScroll,
+              onFocus: (e) => {
+                if (e.target === e.currentTarget) setRegionFocused(true);
+              },
+              onBlur: (e) => {
+                if (e.target === e.currentTarget) setRegionFocused(false);
+              },
+              ...fade,
+              ...region,
+              className: cn("min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
+              children: table
+            }
+          )
+        ]
+      }
+    )
   );
 }
 function optionsKeyForFit(options) {
   return options.map((o) => `${o.value}:${o.label}`).join("|");
 }
-var sizes3 = {
+var sizes2 = {
   xs: "text-xs px-ds-2",
   sm: "text-xs px-ds-3",
   md: "text-sm px-ds-3",
@@ -6794,7 +6293,7 @@ function SegmentedControl({
               "rounded-[var(--ds-radius-md)]",
               "transition-colors cursor-pointer",
               "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-              sizes3[size],
+              sizes2[size],
               opt.value === value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]",
               opt.disabled && "opacity-disabled cursor-not-allowed"
             ),
@@ -8701,7 +8200,9 @@ function VerticalLayout({ items, className }) {
     ] })
   ] }, i)) });
 }
-function Timeline({ items, orientation = "vertical", minItemWidth = 200, className, ref }) {
+function Timeline({ items: allItems, orientation = "vertical", minItemWidth = 200, className, ref, pager }) {
+  useWholeListCheck("Timeline", allItems.length, pager);
+  const items = pagerPart(allItems, pager);
   const measureRef = useRef(null);
   const width = useElementWidth(measureRef);
   const setRefs = useCallback((node) => {
@@ -8711,7 +8212,12 @@ function Timeline({ items, orientation = "vertical", minItemWidth = 200, classNa
   }, [ref]);
   const fits = width === 0 || width >= items.length * minItemWidth;
   const horizontal = orientation === "horizontal" || orientation === "responsive" && fits;
-  return /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) });
+  const list = /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className: pager ? void 0 : className, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) });
+  if (!pager) return list;
+  return /* @__PURE__ */ jsxs("div", { "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
+    list,
+    allItems.length > 0 && /* @__PURE__ */ jsx(Pagination, { ...pager.props })
+  ] });
 }
 var CollapsibleContext = createContext(null);
 function useCollapsible() {
@@ -9966,7 +9472,8 @@ var StackedList = forwardRef(function StackedList2({
   selectedId,
   className,
   flush,
-  hover
+  hover,
+  pager
 }, ref) {
   const isPhone = useBreakpoint("sm");
   const inCard = useContext(CardSurfaceCtx);
@@ -9979,20 +9486,22 @@ var StackedList = forwardRef(function StackedList2({
     console.warn('StackedList: `flush` and `hover` are deprecated \u2014 pass variant="articles" for an article list; the default variant takes its inset from the pane or card it sits in.');
   }, [legacy]);
   const articles = variant === "articles";
+  useWholeListCheck("StackedList", items.length, pager);
+  const shown = pagerPart(items, pager);
   const stackMeta = isPhone && articles;
   const selectable = selectedId !== void 0 || items.some((i) => i.selected !== void 0);
   const inset = articles ? inCard ? "px-ds-5" : "px-0" : inCard ? "px-ds-5" : inPane ? "pl-ds-3 pr-ds-4" : selectable ? "pl-ds-3 pr-0" : "px-0";
-  return /* @__PURE__ */ jsx(
+  const list = /* @__PURE__ */ jsx(
     "ul",
     {
       ref,
       "data-ds-list": "",
       className: cn(
         divided && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
-        className
+        !pager && className
       ),
       role: "list",
-      children: items.map((item) => {
+      children: shown.map((item) => {
         const isSelected = item.selected ?? (selectedId !== void 0 && item.id === selectedId);
         const interactive = !!item.onClick;
         const hasEmphasis = item.unread !== void 0;
@@ -10084,6 +9593,11 @@ var StackedList = forwardRef(function StackedList2({
       })
     }
   );
+  if (!pager) return list;
+  return /* @__PURE__ */ jsxs("div", { "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
+    list,
+    items.length > 0 && /* @__PURE__ */ jsx(Pagination, { ...pager.props })
+  ] });
 });
 var TIME_ZOOMS = ["day", "week", "month", "quarter"];
 var DAY_MS = 864e5;
@@ -11119,7 +10633,7 @@ var SELECTED = "outline-solid outline-2 outline-offset-2 outline-[var(--ds-text-
 var UNDATED_INSET = 16;
 var NO_GROUPS = [];
 var NO_STATUSES = {};
-var warned2 = /* @__PURE__ */ new Set();
+var warned = /* @__PURE__ */ new Set();
 function warnOnce2(message) {
   let dev = false;
   try {
@@ -11127,8 +10641,8 @@ function warnOnce2(message) {
   } catch {
     dev = false;
   }
-  if (!dev || warned2.has(message)) return;
-  warned2.add(message);
+  if (!dev || warned.has(message)) return;
+  warned.add(message);
   console.warn(`Gantt: ${message}`);
 }
 function GanttArrows({ arrows, width, height }) {
@@ -12485,281 +11999,6 @@ var Breadcrumbs = forwardRef(function Breadcrumbs2({
     dropdown
   ] });
 });
-function Popover({ open, onOpenChange, trigger, children, side = "bottom", align = "center", width, className, container }) {
-  const triggerRef = useRef(null);
-  const floatingRef = useRef(null);
-  const [triggerWidth, setTriggerWidth] = useState(void 0);
-  const setTriggerNode = useCallback((node) => {
-    triggerRef.current = node;
-    setTriggerWidth(node?.offsetWidth);
-  }, []);
-  const pos = usePosition(triggerRef, floatingRef, open, { side, align, offset: 8, flip: true });
-  const onOpenChangeRef = useLatest(onOpenChange);
-  const { props: pressMarks, marked } = usePressMarks();
-  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: floatingRef, close: () => onOpenChangeRef.current(false), tabExits: "edges", marked });
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
-      const active = document.activeElement;
-      if (active && active !== document.body && !triggerRef.current?.contains(active) && !floatingRef.current?.contains(active)) return;
-      e.preventDefault();
-      returnFocus();
-      onOpenChangeRef.current(false);
-    };
-    const onPress = (e) => {
-      const target = e.target;
-      if (marked(e) || triggerRef.current?.contains(target) || floatingRef.current?.contains(target)) return;
-      onOpenChangeRef.current(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    document.addEventListener("mousedown", onPress);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("mousedown", onPress);
-    };
-  }, [open, onOpenChangeRef, isTopLayer, returnFocus, marked]);
-  useEffect(() => {
-    if (open) focusInitial(floatingRef.current);
-  }, [open]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ...triggerType(trigger),
-        ref: setTriggerNode,
-        onClick: () => {
-          setTriggerWidth(triggerRef.current?.offsetWidth);
-          onOpenChange(!open);
-        },
-        children: trigger
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: floatingRef,
-          "data-gs": "popover",
-          ...pressMarks,
-          onClick: (e) => e.stopPropagation(),
-          className: cn(
-            "fixed z-[var(--ds-z-popover)]",
-            "bg-[var(--ds-bg-surface-elevated)]",
-            GLASS_DROPDOWN,
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "rounded-[var(--ds-radius-md)]",
-            className
-          ),
-          style: {
-            top: pos.top,
-            left: pos.left,
-            width: width === "trigger" ? triggerWidth : width === "auto" ? void 0 : width
-          },
-          children
-        }
-      ),
-      container ?? document.body
-    )
-  ] });
-}
-function Pagination(props) {
-  if ((props.mode === "load-more" || props.mode === "infinite-scroll") && props.onLoadMore) return /* @__PURE__ */ jsx(LoadMore, { ...props, onLoadMore: props.onLoadMore, scroll: props.mode === "infinite-scroll" });
-  return /* @__PURE__ */ jsx(PageNumbers, { ...props });
-}
-function contentTop(el) {
-  let top = el.getBoundingClientRect().top + window.scrollY;
-  for (let n = el.parentElement; n && n !== document.documentElement; n = n.parentElement) top += n.scrollTop;
-  return top;
-}
-function LoadMore({ hasMore, onLoadMore, loadMoreLabel, currentPage, scroll, className }) {
-  const marker = useRef(null);
-  const load = useLatest(onLoadMore);
-  const loadedAt = useRef(null);
-  useEffect(() => {
-    const el = marker.current;
-    if (!scroll || !hasMore || !el || typeof IntersectionObserver === "undefined") return;
-    const observer = new IntersectionObserver((entries) => {
-      if (!entries.some((e) => e.isIntersecting)) return;
-      const at = contentTop(el);
-      if (loadedAt.current !== null && Math.abs(at - loadedAt.current) < 1) return;
-      loadedAt.current = at;
-      load.current();
-    }, { rootMargin: "200px 0px" });
-    observer.observe(el);
-    const rearm = () => {
-      loadedAt.current = null;
-    };
-    window.addEventListener("scroll", rearm, { capture: true, passive: true });
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("scroll", rearm, { capture: true });
-    };
-  }, [scroll, hasMore, currentPage, load]);
-  if (!hasMore) return null;
-  return /* @__PURE__ */ jsxs("div", { "data-ds-pager": "", "data-pagination-mode": scroll ? "infinite-scroll" : "load-more", className: cn("flex flex-col items-center", className), children: [
-    scroll && /* @__PURE__ */ jsx("div", { ref: marker, "data-load-more-trigger": "", "aria-hidden": "true", className: "h-px w-full" }),
-    /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: onLoadMore, children: loadMoreLabel ?? "Load more" })
-  ] });
-}
-function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, className }) {
-  const pages = buildPageRange(currentPage, totalPages);
-  const preferences = useShellPreferences();
-  const pageSize = pageSizeProp ?? preferences.itemsPerPage;
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", "data-ds-pager": "", className: cn("flex flex-wrap items-center gap-ds-3", className), children: [
-    pageSizeOptions && pageSize != null && onPageSizeChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ds-text-muted)] whitespace-nowrap", children: "Rows per page" }),
-      /* @__PURE__ */ jsx(FormChangeCtx, { value: null, children: /* @__PURE__ */ jsx(
-        Dropdown,
-        {
-          options: pageSizeOptions.map((n) => ({ id: String(n), label: String(n) })),
-          value: String(pageSize),
-          onChange: (v) => onPageSizeChange(Number(v)),
-          size: "sm",
-          className: "w-[4.5rem]"
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onPageChange(currentPage - 1),
-          disabled: currentPage <= 1,
-          "aria-label": "Previous page",
-          className: cn(
-            "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm cursor-pointer",
-            "rounded-[var(--ds-radius-md)]",
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)]",
-            "transition-colors duration-[var(--ds-transition-speed)]",
-            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]",
-            "disabled:opacity-disabled disabled:cursor-not-allowed"
-          ),
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, className: "rotate-180" })
-        }
-      ),
-      pages.map(
-        (p, i) => p === "..." ? /* @__PURE__ */ jsx(EllipsisJumper, { totalPages, onPageChange }, `ellipsis-${i}`) : /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onPageChange(p),
-            "aria-current": p === currentPage ? "page" : void 0,
-            className: cn(
-              "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm font-medium cursor-pointer",
-              "rounded-[var(--ds-radius-md)]",
-              "border-[length:var(--ds-border-width)]",
-              "transition-colors duration-[var(--ds-transition-speed)]",
-              p === currentPage ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)] border-[var(--ds-accent-primary)]" : "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)] border-[var(--ds-border-default)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
-            ),
-            children: p
-          },
-          p
-        )
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onPageChange(currentPage + 1),
-          disabled: currentPage >= totalPages,
-          "aria-label": "Next page",
-          className: cn(
-            "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm cursor-pointer",
-            "rounded-[var(--ds-radius-md)]",
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)]",
-            "transition-colors duration-[var(--ds-transition-speed)]",
-            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]",
-            "disabled:opacity-disabled disabled:cursor-not-allowed"
-          ),
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
-        }
-      )
-    ] })
-  ] });
-}
-function buildPageRange(current, total) {
-  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
-  const pages = [1];
-  if (current > 3) pages.push("...");
-  const start = Math.max(2, current - 1);
-  const end = Math.min(total - 1, current + 1);
-  for (let i = start; i <= end; i++) pages.push(i);
-  if (current < total - 2) pages.push("...");
-  pages.push(total);
-  return pages;
-}
-function EllipsisJumper({ totalPages, onPageChange }) {
-  const [open, setOpen] = useState(false);
-  const [jumpPage, setJumpPage] = useState(1);
-  const handleOpenChange = (next) => {
-    if (next) setJumpPage(1);
-    setOpen(next);
-  };
-  const handleGo = () => {
-    const clamped = Math.min(totalPages, Math.max(1, jumpPage));
-    onPageChange(clamped);
-    setOpen(false);
-  };
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      open,
-      onOpenChange: handleOpenChange,
-      trigger: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": "Go to page",
-          onClick: () => handleOpenChange(true),
-          className: cn(
-            "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-sm cursor-pointer",
-            "rounded-[var(--ds-radius-md)]",
-            "text-[var(--ds-text-muted)]",
-            "transition-colors duration-[var(--ds-transition-speed)]",
-            "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
-          ),
-          children: "\u2026"
-        }
-      ),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-ds-2 p-ds-3", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-[var(--ds-text-secondary)]", children: "Go to page" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-          /* @__PURE__ */ jsx(
-            NumberInput,
-            {
-              value: jumpPage,
-              onChange: setJumpPage,
-              min: 1,
-              max: totalPages,
-              step: 1,
-              size: "sm",
-              className: "w-[5rem]"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: handleGo,
-              className: cn(
-                "px-ds-2.5 h-[var(--ds-control-height-sm)] text-xs font-medium cursor-pointer",
-                "rounded-[var(--ds-radius-md)]",
-                "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
-                "transition-colors duration-[var(--ds-transition-speed)]",
-                "hover:opacity-90"
-              ),
-              children: "Go"
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
 var HeaderTabRowContext = createContext(null);
 function useHeaderTabRow() {
   return useContext(HeaderTabRowContext);
@@ -17468,67 +16707,6 @@ function getPopoverPosition(rect, placement, padding) {
   top = Math.max(8, Math.min(top, window.innerHeight - popH - 8));
   return { top, left };
 }
-function firstKey(item) {
-  if (item !== null && typeof item === "object") return "id" in item ? item.id : void 0;
-  return item;
-}
-function signature(list, resetOn) {
-  let reset = "";
-  try {
-    reset = JSON.stringify(resetOn ?? null);
-  } catch {
-    reset = String(resetOn);
-  }
-  let first = "";
-  try {
-    first = JSON.stringify(firstKey(list[0]) ?? null);
-  } catch {
-    first = "";
-  }
-  return `${list.length}|${first}|${reset}`;
-}
-function usePagination(list, options = {}) {
-  const shell = useShellPreferences();
-  const style = options.style ?? shell.paginationStyle ?? PREFERENCE_HOUSE_DEFAULTS.paginationStyle;
-  const [chosenSize, setChosenSize] = useState(null);
-  const pageSize = Math.max(1, Math.floor(chosenSize ?? options.pageSize ?? shell.itemsPerPage ?? PREFERENCE_HOUSE_DEFAULTS.itemsPerPage));
-  const [page, setPageState] = useState(1);
-  const sig = signature(list, options.resetOn);
-  const [seen, setSeen] = useState(sig);
-  if (seen !== sig) {
-    setSeen(sig);
-    if (page !== 1) setPageState(1);
-  }
-  const totalItems = list.length;
-  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
-  const current = Math.min(Math.max(1, seen !== sig ? 1 : page), totalPages);
-  const grows = style !== "pagination";
-  const start = grows ? 0 : (current - 1) * pageSize;
-  const items = list.slice(start, current * pageSize);
-  const range2 = items.length === 0 ? [0, 0] : [start + 1, start + items.length];
-  const hasMore = current < totalPages;
-  const setPage = (next) => setPageState(Math.min(Math.max(1, Math.floor(next)), totalPages));
-  const loadMore = () => setPageState((p) => Math.min(p + 1, totalPages));
-  const setPageSize = (size) => {
-    setChosenSize(Math.max(1, Math.floor(size)));
-    setPageState(1);
-  };
-  return {
-    style,
-    items,
-    page: current,
-    pageSize,
-    totalItems,
-    totalPages,
-    range: range2,
-    shown: items.length,
-    hasMore,
-    loadMore,
-    setPage,
-    setPageSize,
-    props: { currentPage: current, totalPages, onPageChange: setPage, pageSize, onPageSizeChange: setPageSize, mode: style, hasMore, onLoadMore: loadMore }
-  };
-}
 function useDestructiveAction(options) {
   const { action, title, description, confirmLabel, typeToConfirm, onConfirm, onUndo, doneMessage, undoMessage, restoredMessage, severity } = options;
   const preferences = useShellPreferences();
@@ -17675,7 +16853,7 @@ var PAST_TENSE = {
   reject: "Rejected",
   decline: "Declined"
 };
-var warned3 = /* @__PURE__ */ new Set();
+var warned2 = /* @__PURE__ */ new Set();
 function pastTenseOf(label) {
   const words = label.trim().toLowerCase().split(/\s+/);
   const found = PAST_TENSE[words.slice(0, 2).join(" ")] ?? PAST_TENSE[words[0] ?? ""];
@@ -17686,8 +16864,8 @@ function pastTenseOf(label) {
   } catch {
     dev = false;
   }
-  if (dev && !warned3.has(label)) {
-    warned3.add(label);
+  if (dev && !warned2.has(label)) {
+    warned2.add(label);
     console.warn(`useDestructiveAction: "${label}" isn't a verb the hook knows; pass doneMessage so the confirmation says what happened.`);
   }
   return "Done";
@@ -17832,6 +17010,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, Dropdown, DropdownMenu, EmptyState, EntityCell, Field, FileUpload, FormWrapper, Gantt, HoverCard, InlineFieldError, Input, Kbd, Label, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, NumberInput, PageContainer, PageHeader, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, Textarea, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Toggle, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, usePagination, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, DropdownMenu, EmptyState, EntityCell, FileUpload, FormWrapper, Gantt, HoverCard, Kbd, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map