gridsmith-ui 0.30.1 → 0.31.0

package/dist/{chunk-SLRTSBCJ.js → chunk-BKYWKMUN.js}

@@ -1,18 +1,13 @@
 "use client";
-import { useShellPreferences, PREFERENCE_HOUSE_DEFAULTS } from './chunk-TYNDXMBV.js';
 import { useInputModality } from './chunk-7RKC5C7G.js';
-import { useReportedChange, useOptionalFormContext, FormChangeCtx } from './chunk-72SDAX54.js';
-import { ControlSizeContext, triggerType, RowsCtx, Button } from './chunk-ULCACQSA.js';
-import { useRevealFocus } from './chunk-HTXP5BMM.js';
-import { useFocusLeave, usePopupFocus, focusAfterRemoval, usePressMarks, focusInitial, focusAfterSelfRemoval } from './chunk-R5QXMNW7.js';
-import { useTextOverflow } from './chunk-IELIF4PJ.js';
-import { AutoTooltip } from './chunk-UDJOIVKQ.js';
-import { Icon, warnOnce } from './chunk-L6HWACK7.js';
-import { Slot } from './chunk-7Q46JXSK.js';
-import { useLatest, usePosition } from './chunk-WIUGPZOH.js';
-import { cn, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, ERROR_FOCUS_RING, FIELD_FOCUS_RING, FOCUS_RING, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, GLASS_DROPDOWN } from './chunk-YL5KD5RC.js';
-import { createContext, useContext, useRef, useCallback, useEffect, useId, useState, Children, isValidElement, useMemo, cloneElement, useLayoutEffect } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useReportedChange, useOptionalFormContext } from './chunk-72SDAX54.js';
+import { ControlSizeContext } from './chunk-2Q4HOGEI.js';
+import { useTextOverflow } from './chunk-HUNEJIKV.js';
+import { useRevealFocus, AutoTooltip } from './chunk-XSQD3UGY.js';
+import { warnNameLeftOut, Icon } from './chunk-53F7GVBQ.js';
+import { cn, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, ERROR_FOCUS_RING, FIELD_FOCUS_RING, FOCUS_RING, useLatest, useFocusLeave, usePopupFocus, focusAfterRemoval, ERROR_ACTIVE_RING, ACTIVE_RING } from './chunk-OWQ7M6R7.js';
+import { createContext, useContext, useRef, useCallback, useEffect, useId, useState, Children, isValidElement, useLayoutEffect, useMemo, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 // ../../showcase/src/lib/control-looks.ts
@@ -182,7 +177,14 @@ 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 }) {
+function Toggle({ checked, onChange, label, disabled, error = false, layout = "full", size = "md", "aria-label": pageLabel, "aria-labelledby": pageLabelledBy, ...rest }) {
+  useEffect(() => {
+    if (!label) return;
+    if (pageLabel) warnNameLeftOut("Toggle", "aria-label", pageLabel, "its own label");
+    if (pageLabelledBy) warnNameLeftOut("Toggle", "aria-labelledby", pageLabelledBy, "its own label");
+  }, [label, pageLabel, pageLabelledBy]);
+  const ariaLabel = label ? void 0 : pageLabel;
+  const ariaLabelledBy = label ? void 0 : pageLabelledBy;
   const change = useReportedChange(onChange, checked);
   const dims = TOGGLE_SIZES[size];
   const travel = dims.w - dims.thumb - 3;
@@ -192,7 +194,7 @@ function Toggle({ checked, onChange, label, disabled, error = false, layout = "f
       type: "button",
       role: "switch",
       "aria-checked": checked,
-      "aria-label": !label && !ariaLabelledBy ? "Toggle" : void 0,
+      "aria-label": ariaLabel ?? (!label && !ariaLabelledBy && !rest.id ? "Toggle" : void 0),
       "aria-labelledby": ariaLabelledBy,
       "aria-invalid": error || void 0,
       disabled,
@@ -279,10 +281,24 @@ function useFieldControl(own, options = {}) {
   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);
+  const { ownLabel, component } = options;
+  const fieldShown = !!field && !field.labelHidden;
+  const shown = !!ownLabel || fieldShown;
+  const pageLabel = own["aria-label"], pageLabelledBy = own["aria-labelledby"];
+  useEffect(() => {
+    if (!shown) return;
+    const whose = ownLabel ? "its own label" : "its Field's label";
+    for (const [attr, value] of [["aria-label", pageLabel], ["aria-labelledby", pageLabelledBy]]) {
+      if (value) warnNameLeftOut(component ?? "A Field's control", attr, value, whose);
+    }
+  }, [shown, ownLabel, component, pageLabel, pageLabelledBy]);
   return {
     id,
-    label: own["aria-label"],
-    labelId: own["aria-labelledby"] ?? field?.labelId,
+    label: shown ? void 0 : pageLabel,
+    // with none on screen, ARIA's own order: the page's aria-labelledby, its aria-label, then a Field label that isn't shown
+    // (the final review of 0.31.0, 3: a hidden "Select" had named every row's box, over the page's "Select Alice")
+    labelId: shown ? typeof ownLabel === "string" ? ownLabel : ownLabel ? void 0 : field?.labelId : pageLabelledBy ?? (pageLabel ? void 0 : field?.labelId),
+    shown,
     describedBy: [...new Set(ids)].join(" ") || void 0,
     invalid,
     required,
@@ -335,10 +351,32 @@ function Field({ label, children, hint, error, required, labelAction, hideLabel
   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 [rowShowsLabel, setRowShowsLabel] = useState(false);
+  useLayoutEffect(() => {
+    const el = document.getElementById(labelId);
+    if (!hideLabel || !inGroupRow || !el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      const box = el.getBoundingClientRect();
+      setRowShowsLabel(box.width > 1 && box.height > 1);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [hideLabel, inGroupRow, labelId]);
+  const labelShown = !hideLabel || inGroupRow && rowShowsLabel;
+  const fieldContext = useMemo(() => ({ controlId: id, labelId, describedBy, invalid: hasError, required: !!required, labelHidden: !labelShown }), [id, labelId, describedBy, hasError, required, labelShown]);
+  const childType = child && isValidElement(child) ? child.type : null;
+  const childName = typeof childType === "string" ? childType : childType ? childType.displayName ?? childType.name ?? "A Field's control" : "A Field's control";
+  const pageLabel = labelShown ? childProps?.["aria-label"] : void 0;
+  const pageLabelledBy = labelShown ? childProps?.["aria-labelledby"] : void 0;
+  useEffect(() => {
+    if (pageLabel) warnNameLeftOut(childName, "aria-label", pageLabel, "its Field's label");
+    if (pageLabelledBy) warnNameLeftOut(childName, "aria-labelledby", pageLabelledBy, "its Field's label");
+  }, [childName, pageLabel, pageLabelledBy]);
+  const ownDescribedBy = childProps?.["aria-describedby"];
+  const allDescribedBy = [...new Set([ownDescribedBy, describedBy].filter(Boolean).join(" ").split(/\s+/).filter(Boolean))].join(" ") || void 0;
   const controlProps = {
     id,
-    "aria-describedby": describedBy,
+    "aria-describedby": allDescribedBy,
     ...hasError ? { "aria-invalid": true, error: true } : {},
     ...required ? { "aria-required": true, required: true } : {}
   };
@@ -354,7 +392,8 @@ function Field({ label, children, hint, error, required, labelAction, hideLabel
       ownOnChange?.(...args);
       recheck();
     } } : {};
-    control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {}, ...onChange });
+    const names = labelShown ? { "aria-label": void 0, "aria-labelledby": void 0 } : {};
+    control = cloneElement(child, isNative ? { ...ariaOnly, ...names } : { ...ariaOnly, ...names, ...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,
@@ -407,11 +446,11 @@ function Dropdown({
   useInputModality();
   const contextSize = useContext(ControlSizeContext);
   const generatedId = useId();
-  const control = useFieldControl({ ...wiring, error: error || void 0 }, { requiredInDescription: true });
+  const labelSpanId = `${generatedId}-label`;
+  const nameSpanId = `${generatedId}-name`;
+  const control = useFieldControl({ ...wiring, "aria-label": ariaLabel, error: error || void 0 }, { requiredInDescription: true, component: "Dropdown", ownLabel: label ? labelSpanId : void 0 });
   const triggerId = control.id ?? generatedId;
-  const labelSpanId = `${triggerId}-label`;
-  const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : label && !ariaLabel ? `${labelSpanId} ${triggerId}` : void 0;
-  const listLabelledBy = control.labelId ?? (label && !ariaLabel ? labelSpanId : void 0);
+  const listLabelledBy = control.labelId;
   const invalid = control.invalid;
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
@@ -583,9 +622,15 @@ function Dropdown({
   });
   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 });
+  const shows = String(displayLabel).trim();
+  const name = control.label?.trim() ?? "";
+  const repeats = !!name && new RegExp(`^${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?!\\p{L})`, "iu").test(shows);
+  const nameSpan = !control.labelId && !!control.label && !repeats;
+  const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : nameSpan ? `${nameSpanId} ${triggerId}` : void 0;
   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,
+    nameSpan && /* @__PURE__ */ jsx("span", { id: nameSpanId, hidden: true, children: shows && !/[,.:;!?]$/.test(control.label.trim()) ? `${control.label},` : control.label }),
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -604,7 +649,6 @@ function Dropdown({
         "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(
@@ -657,7 +701,7 @@ function Dropdown({
                 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", { ref: setListbox, role: "listbox", "aria-labelledby": listLabelledBy, "aria-label": listLabelledBy ? void 0 : ariaLabel, "aria-multiselectable": multiple || void 0, className: "overflow-y-auto scroll-p-[4px]", style: { padding: "max(var(--ds-space-1), 4px)", 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: [
+            /* @__PURE__ */ jsx("div", { ref: setListbox, role: "listbox", "aria-labelledby": listLabelledBy, "aria-label": listLabelledBy ? void 0 : control.label, "aria-multiselectable": multiple || void 0, className: "overflow-y-auto scroll-p-[4px]", style: { padding: "max(var(--ds-space-1), 4px)", 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,
@@ -759,656 +803,7 @@ function OptionButton({
     }
   );
 }
-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,
-  "aria-label": ariaLabel
-}) {
-  const onChange = useReportedChange(onChangeProp, value);
-  useInputModality();
-  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();
-      }
-      const plain = !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey;
-      if (e.key === "Home" && plain && Number.isFinite(min)) {
-        e.preventDefault();
-        commitValue(min);
-      }
-      if (e.key === "End" && plain && Number.isFinite(max)) {
-        e.preventDefault();
-        commitValue(max);
-      }
-    },
-    [increment, decrement, commitValue, min, max]
-  );
-  const s = sizes[size];
-  const atMin = value <= min;
-  const atMax = value >= max;
-  const shown = focused ? draft : String(value);
-  const holdsNumber = Number.isFinite(parseFloat(shown)) && Number.isFinite(value);
-  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 : FIELD_FOCUS_WITHIN_RING,
-        disabled && "opacity-disabled cursor-not-allowed",
-        className
-      ),
-      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)]",
-              // kept out of the Tab order (the field's arrows step it) and never focused by a press: the outline all the same
-              // if anything focuses it (Sprint 30)
-              FOCUS_RING,
-              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",
-              role: "spinbutton",
-              "aria-label": ariaLabel,
-              "aria-valuenow": holdsNumber ? value : void 0,
-              "aria-valuemin": Number.isFinite(min) ? min : void 0,
-              "aria-valuemax": Number.isFinite(max) ? max : void 0,
-              inputMode: decimals ? "decimal" : "numeric",
-              "aria-invalid": error || void 0,
-              value: shown,
-              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)]",
-              FOCUS_RING,
-              s.btn,
-              s.input,
-              (disabled || atMax) && "opacity-disabled cursor-not-allowed hover:bg-transparent hover:text-[var(--ds-text-muted)]"
-            ),
-            "aria-label": "Increase",
-            children: "+"
-          }
-        )
-      ]
-    }
-  );
-}
-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: /* @__PURE__ */ jsx(RowsCtx, { value: false, children })
-        }
-      ),
-      container ?? document.body
-    )
-  ] });
-}
-var controlsDrawn = /* @__PURE__ */ new WeakMap();
-function Pagination(props) {
-  const { pagerToken } = props;
-  useEffect(() => {
-    if (!pagerToken) return;
-    const count = (controlsDrawn.get(pagerToken) ?? 0) + 1;
-    controlsDrawn.set(pagerToken, count);
-    if (count > 1) warnOnce("Pagination", "this list's pager already draws its control: a list given the pager (<Table pager={pager}>) draws it beneath the rows, so remove the separate <Pagination {...pager.props} />.");
-    return () => {
-      controlsDrawn.set(pagerToken, (controlsDrawn.get(pagerToken) ?? 1) - 1);
-    };
-  }, [pagerToken]);
-  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 scrollerOf(el) {
-  for (let n = el.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
-    const { overflowY } = getComputedStyle(n);
-    if ((overflowY === "auto" || overflowY === "scroll") && n.scrollHeight > n.clientHeight) return n;
-  }
-  return null;
-}
-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 button = useRef(null);
-  const load = useLatest(onLoadMore);
-  const loadedAt = useRef(null);
-  const [held, setHeld] = useState(false);
-  useEffect(() => {
-    const el = marker.current;
-    if (!scroll || !hasMore || !el || held || 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();
-    }, { root: scrollerOf(el), 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, held]);
-  useEffect(() => {
-    const b = button.current;
-    if (b && document.activeElement === b) b.scrollIntoView?.({ block: "nearest" });
-  }, [currentPage]);
-  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,
-      {
-        ref: button,
-        type: "button",
-        variant: "secondary",
-        onClick: onLoadMore,
-        onFocus: (e) => setHeld(scroll && byKeyboard(e.currentTarget)),
-        onBlur: () => setHeld(false),
-        children: loadMoreLabel ?? "Load more"
-      }
-    )
-  ] });
-}
-function byKeyboard(el) {
-  try {
-    return el.matches(":focus-visible");
-  } catch {
-    return true;
-  }
-}
-function PageNumbers({ currentPage, totalPages, onPageChange, pageSize: pageSizeProp, pageSizeOptions, onPageSizeChange, className }) {
-  const pages = buildPageRange(currentPage, totalPages);
-  const preferences = useShellPreferences();
-  const pageSize = pageSizeProp ?? preferences.itemsPerPage;
-  const sizeChoice = !!(pageSizeOptions && pageSize != null && onPageSizeChange);
-  if (totalPages <= 1 && !sizeChoice) return null;
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", "data-ds-pager": "", className: cn("flex flex-wrap items-center gap-ds-3", className), children: [
-    sizeChoice && 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,
-        {
-          "aria-label": `Rows per page, ${pageSize}`,
-          options: pageSizeOptions.map((n) => ({ id: String(n), label: String(n) })),
-          value: String(pageSize),
-          onChange: (v) => onPageSizeChange(Number(v)),
-          size: "sm",
-          className: "w-[4.5rem]"
-        }
-      ) })
-    ] }),
-    totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1", children: [
-      /* @__PURE__ */ jsx(AutoTooltip, { content: "Previous page", children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: (e) => {
-            focusAfterSelfRemoval(e.currentTarget);
-            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",
-            FOCUS_RING
-          ),
-          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)]",
-              FOCUS_RING,
-              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(AutoTooltip, { content: "Next page", children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: (e) => {
-            focusAfterSelfRemoval(e.currentTarget);
-            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",
-            FOCUS_RING
-          ),
-          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)]",
-            FOCUS_RING
-          ),
-          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",
-                FOCUS_RING
-              ),
-              children: "Go"
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-}
-function firstKey(item) {
-  if (item !== null && typeof item === "object") return "id" in item ? item.id : void 0;
-  return item;
-}
-function resetKey(resetOn) {
-  try {
-    return JSON.stringify(resetOn ?? null);
-  } catch {
-    return String(resetOn);
-  }
-}
-function signature(list, resetOn) {
-  let first = "";
-  try {
-    first = JSON.stringify(firstKey(list[0]) ?? null);
-  } catch {
-    first = "";
-  }
-  return `${list.length}|${first}|${resetKey(resetOn)}`;
-}
-function grewAtAnEnd(seen, list, reset) {
-  if (reset !== seen.reset || list.length <= seen.length || seen.first === void 0 || seen.length === 0) return false;
-  return firstKey(list[0]) === seen.first || firstKey(list[list.length - seen.length]) === seen.first;
-}
-function usePagination(list, options = {}) {
-  const shell = useShellPreferences();
-  const style = options.style ?? shell.paginationStyle ?? PREFERENCE_HOUSE_DEFAULTS.paginationStyle;
-  const [chosenSize, setChosenSize] = useState(null);
-  const [pagerToken] = useState(() => ({}));
-  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 reset = resetKey(options.resetOn);
-  const [seen, setSeen] = useState(() => ({ sig, length: list.length, first: firstKey(list[0]), reset }));
-  const changed = seen.sig !== sig;
-  const startsAgain = changed && !grewAtAnEnd(seen, list, reset);
-  if (changed) {
-    setSeen({ sig, length: list.length, first: firstKey(list[0]), reset });
-    if (startsAgain && page !== 1) setPageState(1);
-  }
-  const totalItems = list.length;
-  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
-  const current = Math.min(Math.max(1, startsAgain ? 1 : page), totalPages);
-  const grows = style !== "pagination";
-  const start = grows ? 0 : (current - 1) * pageSize;
-  const items = list.slice(start, current * pageSize);
-  const range = 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,
-    shown: items.length,
-    hasMore,
-    loadMore,
-    setPage,
-    setPageSize,
-    props: { currentPage: current, totalPages, onPageChange: setPage, pageSize, onPageSizeChange: setPageSize, mode: style, hasMore, onLoadMore: loadMore, pagerToken, ...options.pageSizeOptions ? { pageSizeOptions: options.pageSizeOptions } : {} }
-  };
-}
-function pagerPart(list, pager) {
-  if (!pager) return list;
-  return pager.range[0] === 0 ? [] : list.slice(pager.range[0] - 1, pager.range[1]);
-}
-function useWholeListCheck(component, length, pager) {
-  const total = pager?.totalItems;
-  useEffect(() => {
-    if (total !== void 0 && length !== total) warnOnce(component, `the pager counts ${total} items but the list holds ${length}: give the list and usePagination the same items, every item of the list, and the list draws the pager's part (Sprint 25.13 A3).`);
-  }, [component, length, total]);
-}
 
-export { AddAnotherRowCtx, CHECK_FILL, Dropdown, Field, FilterRowContext, InlineFieldError, Input, Label, NumberInput, OutsideField, Pagination, Popover, SWITCH_KNOB_MOTION, SWITCH_KNOB_OFF, SWITCH_KNOB_ON, SWITCH_TRACK_OFF, SWITCH_TRACK_ON, Textarea, Toggle, pagerPart, useField, useFieldControl, usePagination, useWholeListCheck };
-//# sourceMappingURL=chunk-SLRTSBCJ.js.map
-//# sourceMappingURL=chunk-SLRTSBCJ.js.map
+export { AddAnotherRowCtx, CHECK_FILL, Dropdown, Field, FilterRowContext, InlineFieldError, Input, Label, OutsideField, SWITCH_KNOB_MOTION, SWITCH_KNOB_OFF, SWITCH_KNOB_ON, SWITCH_TRACK_OFF, SWITCH_TRACK_ON, Textarea, Toggle, useField, useFieldControl };
+//# sourceMappingURL=chunk-BKYWKMUN.js.map
+//# sourceMappingURL=chunk-BKYWKMUN.js.map