gridsmith-ui 0.17.3 → 0.19.0

package/dist/index.js

@@ -1,25 +1,25 @@
-import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-CIVSNXFG.js';
-export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-CIVSNXFG.js';
-import { Skeleton } from './chunk-Z63OSN64.js';
-export { Skeleton } from './chunk-Z63OSN64.js';
+import { Button, useAppShell, REACT_VERSION_PROBLEM, ControlSizeContext, useDirtyGuard, OverlayCloseCtx, DiscardConfirm, Spinner, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-5PDTHKW3.js';
+export { AppShell, Button, ButtonSizeContext, ControlSizeContext, Drawer, Sheet, SkipLink, Spinner, useAppShell, useUnsavedChanges } from './chunk-5PDTHKW3.js';
+import { Skeleton, TITLE_TEXT } from './chunk-NCIZQYXQ.js';
+export { Skeleton } from './chunk-NCIZQYXQ.js';
 import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, focusAfterRemoval, rovingTabStop, useGridKeyboard, useNonModalDialog, usePressMarks, useReturnFocus, useCloseOnFocusOut } from './chunk-JXANCXK6.js';
 export { useGridKeyboard } from './chunk-JXANCXK6.js';
-import { Link } from './chunk-XGSQOMEY.js';
-export { CodeBlock, Divider, Link } from './chunk-XGSQOMEY.js';
-import { Badge } from './chunk-PVTGMCVR.js';
-export { Badge } from './chunk-PVTGMCVR.js';
-import { inferColumnKinds, CardValue } from './chunk-OENJCGTJ.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 { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
-import { useTextOverflow, Tooltip, usePosition } from './chunk-EMCSARQO.js';
-export { Tooltip, useTextOverflow } from './chunk-EMCSARQO.js';
+import { useTextOverflow, Tooltip, usePosition } from './chunk-ILIODA7W.js';
+export { Tooltip, useTextOverflow } from './chunk-ILIODA7W.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
 import { Icon } from './chunk-4LDYR7QP.js';
-import { cn, GLASS_SURFACE, ACTIVE_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, GLASS_OVERLAY, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ERROR_FOCUS_WITHIN_RING, FOCUS_WITHIN_RING } from './chunk-4KVFH5KC.js';
-import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, useId, memo, useEffect, useImperativeHandle, Children, isValidElement, cloneElement, Fragment as Fragment$1, useSyncExternalStore } from 'react';
+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 { createPortal, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -184,7 +184,7 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
         ) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2", children: actions.map((action, i) => /* @__PURE__ */ jsx(
           Button,
           {
-            variant: action.variant === "destructive" ? "destructive" : "secondary",
+            variant: "secondary",
             size: "sm",
             onClick: action.onClick,
             children: action.label
@@ -407,6 +407,155 @@ function Toggle({ checked, onChange, label, disabled, error = false, layout = "f
     }
   );
 }
+var FormCtx = createContext(null);
+function useFormContext() {
+  const ctx = useContext(FormCtx);
+  if (!ctx) throw new Error("useFormContext must be used within FormWrapper");
+  return ctx;
+}
+function useOptionalFormContext() {
+  return useContext(FormCtx);
+}
+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
+  };
+}
+function Field({ label, children, hint, error, required, labelAction, id: idProp, validate, className }) {
+  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 });
+  }
+  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: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
+            /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
+            ] }),
+            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)]",
@@ -427,9 +576,16 @@ function Dropdown({
   container,
   error = false,
   showChips = true,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  ...wiring
 }) {
   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("");
@@ -597,11 +753,13 @@ 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 });
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative", className), children: [
-    label && /* @__PURE__ */ jsx("span", { className: "block mb-ds-1.5 text-sm font-medium text-[var(--ds-text-secondary)]", children: label }),
+    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) => {
@@ -612,22 +770,24 @@ function Dropdown({
           }
         },
         disabled,
-        "aria-invalid": error || void 0,
+        "aria-invalid": invalid || void 0,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
-        "aria-label": ariaLabel,
+        "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)]",
-          error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
-          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && (error ? ERROR_ACTIVE_RING : ACTIVE_RING),
-          error ? ERROR_FOCUS_RING : FOCUS_RING,
+          !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)]"
         ),
@@ -642,9 +802,10 @@ function Dropdown({
         "div",
         {
           ref: menuRef,
+          tabIndex: -1,
           onClick: (e) => e.stopPropagation(),
           className: cn(
-            "fixed z-[var(--ds-z-popover)]",
+            "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)]",
@@ -771,8 +932,9 @@ var TEXT_SIZE = {
   md: "text-sm",
   lg: "text-base"
 };
-function Combobox({ value, onChange, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp }) {
+function Combobox({ value, onChange, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp, ...wiring }) {
   const contextSize = useContext(ControlSizeContext);
+  const control = useFieldControl({ ...wiring, error: error || void 0 });
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   useOverlayLayer(open);
@@ -883,12 +1045,12 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
           "flex items-center",
           CONTROL_HEIGHT[size],
           "border-[length:var(--ds-border-width)]",
-          error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors duration-[var(--ds-transition-speed)]",
-          !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-          error ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
+          !control.invalid && !disabled && "hover:border-[var(--ds-input-border-hover)]",
+          control.invalid ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
           disabled && "opacity-disabled pointer-events-none"
         ),
         children: [
@@ -898,8 +1060,12 @@ function Combobox({ value, onChange, options, placeholder = "Search\u2026", disa
             {
               ref: mergeInputRefs,
               type: "text",
+              id: control.id,
               role: "combobox",
-              "aria-invalid": error || void 0,
+              "aria-labelledby": wiring["aria-labelledby"],
+              "aria-describedby": control.describedBy,
+              "aria-invalid": control.invalid || void 0,
+              "aria-required": control.required || void 0,
               "aria-expanded": open,
               "aria-controls": listboxId,
               "aria-autocomplete": "list",
@@ -1312,7 +1478,7 @@ function parseTypedDate(text, dayFirst = localeDayFirst()) {
   }
   return null;
 }
-function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range: range2 }) {
+function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range: range2, ...wiring }) {
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
@@ -1323,7 +1489,8 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   const panelRef = useRef(null);
   const gridRef = useRef(null);
   const generatedId = useId();
-  const inputId = id ?? generatedId;
+  const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
+  const inputId = control.id ?? generatedId;
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const year = viewDate.getFullYear();
   const month = viewDate.getMonth();
@@ -1508,6 +1675,7 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
   for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
     label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm font-medium text-[var(--ds-text-primary)] mb-ds-1", children: label }),
+    control.requiredNote,
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1515,9 +1683,11 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
         "data-date-field": "",
         role: "group",
         id: inputId,
-        "aria-label": label ?? "Date",
+        "aria-label": control.labelId ? void 0 : label ?? "Date",
+        "aria-labelledby": control.labelId,
+        "aria-describedby": control.describedBy,
         "aria-description": !value ? placeholder : void 0,
-        "aria-invalid": error || typedInvalid || void 0,
+        "aria-invalid": control.invalid || typedInvalid || void 0,
         onPaste: (e) => {
           const text = e.clipboardData.getData("text");
           if (text) {
@@ -1530,12 +1700,12 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
           CONTROL_HEIGHT2[size],
           TEXT_SIZE2[size],
           "border-[length:var(--ds-border-width)]",
-          error || typedInvalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          control.invalid || typedInvalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
           "px-ds-3 py-ds-2",
-          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
+          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
           open && ACTIVE_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           "text-[var(--ds-text-primary)]"
@@ -1592,8 +1762,9 @@ function DatePicker({ value, onChange, placeholder = "Pick a date", disabled, cl
           ref: panelRef,
           role: "dialog",
           "aria-label": "Choose a date",
+          tabIndex: -1,
           className: cn(
-            "fixed z-[var(--ds-z-popover)] w-[280px]",
+            "fixed z-[var(--ds-z-popover)] w-[280px] 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)]",
@@ -1925,7 +2096,8 @@ function DateRangePicker({
   max,
   presets = DEFAULT_DATE_RANGE_PRESETS,
   weekStartsOn = 0,
-  size: sizeProp
+  size: sizeProp,
+  ...wiring
 }) {
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
@@ -1935,7 +2107,9 @@ function DateRangePicker({
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
   const generatedId = useId();
-  const triggerId = id ?? generatedId;
+  const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
+  const triggerId = control.id ?? generatedId;
+  const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : void 0;
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const today = useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
   const dayNames = getOrderedDayNamesShort(weekStartsOn);
@@ -2018,6 +2192,7 @@ function DateRangePicker({
   const summary = value.start && value.end ? `${fmt(value.start)} \u2013 ${fmt(value.end)}` : value.start ? `${fmt(value.start)} \u2013 \u2026` : null;
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
     label && /* @__PURE__ */ jsx("label", { htmlFor: triggerId, className: "block text-sm font-medium text-[var(--ds-text-primary)] mb-ds-1", children: label }),
+    control.requiredNote,
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -2026,7 +2201,9 @@ function DateRangePicker({
         type: "button",
         onClick: () => !disabled && setOpen((o) => !o),
         disabled,
-        "aria-invalid": error || void 0,
+        "aria-labelledby": labelledBy,
+        "aria-describedby": control.describedBy,
+        "aria-invalid": control.invalid || void 0,
         "aria-haspopup": "dialog",
         "aria-expanded": open,
         className: cn(
@@ -2034,14 +2211,14 @@ function DateRangePicker({
           CONTROL_HEIGHT3[size],
           TEXT_SIZE3[size],
           "border-[length:var(--ds-border-width)]",
-          error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors cursor-pointer",
           "px-ds-3 py-ds-2",
-          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && (error ? ERROR_ACTIVE_RING : ACTIVE_RING),
-          error ? ERROR_FOCUS_RING : FOCUS_RING,
+          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
+          open && (control.invalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
+          control.invalid ? ERROR_FOCUS_RING : FOCUS_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           summary ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
         ),
@@ -2058,8 +2235,9 @@ function DateRangePicker({
           ref: panelRef,
           role: "dialog",
           "aria-label": "Choose a date range",
+          tabIndex: -1,
           className: cn(
-            "fixed z-[var(--ds-z-popover)] flex",
+            "fixed z-[var(--ds-z-popover)] flex 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)]",
@@ -2264,7 +2442,7 @@ function Progress({ value, max = 100, variant = "default", size = "md", indeterm
           {
             className: cn(
               "h-full rounded-[var(--ds-radius-full)]",
-              indeterminate ? "animate-[indeterminate_1.5s_ease-in-out_infinite] w-1/3" : "transition-all",
+              indeterminate ? "animate-[gs-indeterminate_1.5s_ease-in-out_infinite] w-1/3" : "transition-all",
               variantFills[variant]
             ),
             style: indeterminate ? void 0 : { width: `${pct}%` }
@@ -2278,69 +2456,6 @@ function Progress({ value, max = 100, variant = "default", size = "md", indeterm
     ] })
   ] });
 }
-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 Field({ label, children, hint, error, required, labelAction, id: idProp, className }) {
-  const generated = useId();
-  const id = idProp ?? `field-${generated}`;
-  const hintId = `${id}-hint`;
-  const errorId = `${id}-error`;
-  const hasError = typeof error === "string" && error.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 }), [id, labelId, describedBy]);
-  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 {
-    const child = Children.only(children);
-    if (!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;
-    control = cloneElement(child, isNative ? ariaOnly : { ...ariaOnly, ...errorFlag ? { error: true } : {} });
-  }
-  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), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-2", children: [
-        /* @__PURE__ */ jsxs(Label, { id: labelId, htmlFor: id, children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 text-[var(--ds-status-error)]", children: "*" })
-        ] }),
-        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: error, className: "mt-0" })
-    ] })
-  );
-}
 function TruncFileName({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("p", { ref, className: cn("truncate", className), children });
@@ -2726,9 +2841,11 @@ function TimePicker({
   container,
   error = false,
   id,
-  size: sizeProp
+  size: sizeProp,
+  ...wiring
 }) {
   const contextSize = useContext(ControlSizeContext);
+  const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
@@ -2912,15 +3029,18 @@ function TimePicker({
     return segs[k] === null ? spec.placeholder : pad2(segs[k]);
   };
   return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), children: [
+    control.requiredNote,
     /* @__PURE__ */ jsxs(
       "div",
       {
         ref: triggerRef,
         "data-time-field": "",
         role: "group",
-        id,
-        "aria-label": "Time",
-        "aria-invalid": error || void 0,
+        id: control.id,
+        "aria-label": control.labelId ? void 0 : "Time",
+        "aria-labelledby": control.labelId,
+        "aria-describedby": control.describedBy,
+        "aria-invalid": control.invalid || void 0,
         onPaste: (e) => {
           const text = e.clipboardData.getData("text");
           if (text) {
@@ -2933,12 +3053,12 @@ function TimePicker({
           CONTROL_HEIGHT4[size],
           TEXT_SIZE4[size],
           "border-[length:var(--ds-border-width)]",
-          error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
           "px-ds-3 py-ds-2",
-          !error && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
+          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
           open && ACTIVE_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           "text-[var(--ds-text-primary)]"
@@ -3019,9 +3139,10 @@ function TimePicker({
           id: listboxId,
           role: "dialog",
           "aria-label": "Choose a time",
+          tabIndex: -1,
           onKeyDown: handlePanelKeyDown,
           className: cn(
-            "fixed z-[var(--ds-z-popover)]",
+            "fixed z-[var(--ds-z-popover)] outline-none",
             "bg-[var(--ds-bg-surface-elevated)]",
             GLASS_DROPDOWN,
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -4189,23 +4310,21 @@ function stampFormId(node, formId) {
     return cloneElement(child, { form: formId });
   });
 }
-var FormCtx = createContext(null);
-function useFormContext() {
-  const ctx = useContext(FormCtx);
-  if (!ctx) throw new Error("useFormContext must be used within FormWrapper");
-  return ctx;
-}
 function collectInvalidFields(form) {
   const out = [];
   for (const el of Array.from(form.querySelectorAll("[aria-invalid='true']"))) {
     const id = el.id || "";
     const label = id && form.querySelector(`label[for="${CSS.escape(id)}"]`)?.textContent?.replace(/\*\s*$/, "").trim() || el.getAttribute("aria-label") || el.closest("[data-field]")?.querySelector("label")?.textContent?.trim() || id || "A field";
-    const described = (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean);
-    const message = described.map((d) => document.getElementById(d)?.textContent?.trim()).find((t) => t && /error|invalid|required|must|enter|choose|select|please/i.test(t)) ?? described.map((d) => document.getElementById(d)?.textContent?.trim()).filter(Boolean).pop() ?? "Needs attention";
+    const described = (el.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean).map((d) => document.getElementById(d)).filter((d) => !!d);
+    const message = described.find((d) => d.getAttribute("role") === "alert")?.textContent?.trim() || described.map((d) => d.textContent?.trim()).find((t) => t && t !== "Required" && /error|invalid|required|must|enter|choose|select|please/i.test(t)) || described.map((d) => d.textContent?.trim()).filter(Boolean).pop() || "Needs attention";
     out.push({ id, label, message });
   }
   return out;
 }
+function focusTarget(el) {
+  if (el.tabIndex >= 0 || /^(?:INPUT|SELECT|TEXTAREA|BUTTON)$/.test(el.tagName)) return el;
+  return el.querySelector("[aria-checked='true'], [aria-selected='true']:not([tabindex='-1'])") ?? el.querySelector("input, select, textarea, button, [tabindex]:not([tabindex='-1'])") ?? el;
+}
 function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions: actionsProp, actionsAlign: actionsAlignProp, onCancel, cancelLabel = "Cancel", focusFirstError = true, errorSummary = true, className, ref }) {
   const preferences = useShellPreferences();
   const validationMode = validationModeProp ?? preferences.validationTiming ?? "onSubmit";
@@ -4246,21 +4365,41 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
       onSubmitRef.current(errorsRef.current);
     }
   }, [submitted, submitCount, errors, errorsRef, onSubmitRef]);
+  const submittedRef = useLatest(submitted);
+  const errorSummaryRef = useLatest(errorSummary);
+  const summaryRef = useRef(null);
+  const pendingSummaryFocus = useRef(false);
+  const focusSummary = useCallback(() => {
+    const el = summaryRef.current;
+    if (!el) return;
+    if (typeof el.scrollIntoView === "function") el.scrollIntoView({ block: "center", behavior: "smooth" });
+    el.focus({ preventScroll: true });
+  }, []);
   const settle = useCallback(() => {
     const form = formRef.current;
     if (!form) return;
     const invalid = collectInvalidFields(form);
-    const next = invalid.length >= 2 ? invalid : [];
+    const next = submittedRef.current && invalid.length >= 2 ? invalid : [];
     setSummary((prev) => prev.length === next.length && prev.every((f, i) => f.id === next[i].id && f.message === next[i].message && f.label === next[i].label) ? prev : next);
     if (pendingFocus.current && invalid.length > 0) {
       pendingFocus.current = false;
+      if (errorSummaryRef.current && next.length >= 2) {
+        if (summaryRef.current) focusSummary();
+        else pendingSummaryFocus.current = true;
+        return;
+      }
       const first = form.querySelector("[aria-invalid='true']");
       if (first) {
         if (typeof first.scrollIntoView === "function") first.scrollIntoView({ block: "center", behavior: "smooth" });
-        first.focus({ preventScroll: true });
+        focusTarget(first).focus({ preventScroll: true });
       }
     }
-  }, []);
+  }, [submittedRef, errorSummaryRef, focusSummary]);
+  useLayoutEffect(() => {
+    if (!pendingSummaryFocus.current || summary.length < 2) return;
+    pendingSummaryFocus.current = false;
+    focusSummary();
+  }, [summary, focusSummary]);
   useLayoutEffect(() => {
     if (!submitted) return;
     settle();
@@ -4279,7 +4418,21 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     pendingFocus.current = false;
   }, []);
   const setError = useCallback((field, message) => {
-    setErrors((prev) => ({ ...prev, [field]: message }));
+    setErrors((prev) => prev[field] === message ? prev : { ...prev, [field]: message });
+  }, []);
+  const checks = useRef(/* @__PURE__ */ new Map());
+  const register = useCallback((field, check) => {
+    checks.current.set(field, check);
+    return () => {
+      if (checks.current.get(field) !== check) return;
+      checks.current.delete(field);
+      setErrors((prev) => {
+        if (!(field in prev)) return prev;
+        const next = { ...prev };
+        delete next[field];
+        return next;
+      });
+    };
   }, []);
   const clearErrors = useCallback(() => {
     setErrors({});
@@ -4289,6 +4442,11 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
   const handleSubmit = useCallback(
     (e) => {
       e.preventDefault();
+      if (checks.current.size > 0) {
+        const found = {};
+        for (const [field, check] of checks.current) found[field] = check();
+        setErrors((prev) => ({ ...prev, ...found }));
+      }
       pendingSubmit.current = true;
       pendingFocus.current = focusFirstError;
       setSubmitted(true);
@@ -4301,7 +4459,7 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     const el = id ? document.getElementById(id) : null;
     if (el) {
       el.scrollIntoView?.({ block: "center" });
-      el.focus();
+      focusTarget(el).focus();
     }
   };
   const summaryNode = errorSummary && summary.length >= 2 ? typeof errorSummary === "function" ? errorSummary(summary) : /* @__PURE__ */ jsx(Alert, { variant: "error", title: `${summary.length} fields need attention`, className: "mb-ds-4", children: /* @__PURE__ */ jsx("ul", { className: "list-disc pl-ds-5 flex flex-col gap-ds-1", children: summary.map((f) => /* @__PURE__ */ jsxs("li", { children: [
@@ -4310,8 +4468,8 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     f.message
   ] }, f.id || f.label)) }) }) : null;
   const actionsNode = actions && !drawerFooter ? /* @__PURE__ */ jsx("div", { "data-form-actions": "", className: cn("flex flex-wrap items-center gap-ds-2 pt-ds-2", actionsAlign === "end" ? "justify-end" : "justify-start"), children: actions }) : null;
-  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5 max-w-[var(--ds-form-max,none)]", className), noValidate: true, children: [
-    summaryNode && /* @__PURE__ */ jsx("div", { "data-form-error-summary": "", children: summaryNode }),
+  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted, register }, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5 max-w-[var(--ds-form-max,none)]", className), noValidate: true, children: [
+    summaryNode && /* @__PURE__ */ jsx("div", { ref: summaryRef, "data-form-error-summary": "", tabIndex: -1, className: "rounded-[var(--ds-radius-md)] outline-none focus-visible:shadow-[var(--ds-shadow-focus)]", children: summaryNode }),
     children,
     actionsNode
   ] }) });
@@ -4907,6 +5065,42 @@ 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 CardCtx = createContext(false);
 var CardActionCtx = createContext(null);
 var CARD_ACTION_ATTR = "data-card-action";
@@ -5027,7 +5221,6 @@ var Card = forwardRef(function Card2({
   ...props
 }, ref) {
   const isSelectable = selectable || !!selectType;
-  const isToggle = selectType === "toggle";
   const hasSelectType = !!selectType;
   const isAction = !isSelectable && variant === "interactive" && !!onClick;
   const rootRef = useRef(null);
@@ -5081,7 +5274,6 @@ var Card = forwardRef(function Card2({
   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 showRing = isSelectable && !isToggle && !hasSelectType && 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;
   return /* @__PURE__ */ jsxs(
@@ -5100,7 +5292,10 @@ var Card = forwardRef(function Card2({
         isSelectable && !disabled && "cursor-pointer select-none transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
         isSelectable && !disabled && !selected && "hover:border-[var(--ds-accent-primary)]",
         isButton && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        (showRing || hasSelectType && selected) && ACTIVE_RING,
+        // Selected is the accent border, with the accent-subtle fill on a card with a selectType. No ring: a ring round the
+        // whole card is the focus state (focus-visible:shadow-[var(--ds-shadow-focus)] above), and the active halo other
+        // controls take (ACTIVE_RING, since Sprint 20.6) made a selected card look focused (the owner, 27 September 2026).
+        isSelectable && selected && "border-[var(--ds-border-focus)]",
         hasSelectType && selected && "bg-[var(--ds-accent-subtle)]",
         disabled && "opacity-disabled cursor-not-allowed",
         className
@@ -5149,7 +5344,7 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
   const isCheckable = useContext(CardCtx);
   const hasActions = actions || menuItems;
   const pl = isCheckable ? "pl-ds-10" : "pl-ds-5";
-  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 shrink-0 ml-auto", children: [
+  const actionsBlock = hasActions ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.actions, children: [
     actions,
     menuItems && /* @__PURE__ */ jsx(
       DropdownMenu,
@@ -5173,9 +5368,23 @@ var CardHeader = forwardRef(function CardHeader2({ className, children, actions,
     )
   ] }) : 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) {
-    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: "flex flex-wrap items-start justify-between gap-ds-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 grow basis-1/2 [min-width:min-content] break-words", children: [
+    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
       ] }),
@@ -5210,7 +5419,8 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, lines = 2,
       },
       id: id ?? generatedId,
       "data-card-title": "",
-      className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", !action && lines > 0 && lineClampClass, className),
+      ...lines === 1 ? { "data-title-one-line": "" } : {},
+      className: cn(TITLE_TEXT, !action && lines > 0 && lineClampClass, 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
@@ -5378,6 +5588,58 @@ function DataList({ items, columns = 1, className }) {
     }
   );
 }
+var COUNT_FROM_PAGE = [
+  "[&: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]",
+  "[&:has(>:nth-child(5):last-child)]:[--gs-cards:5]",
+  "[&:has(>:nth-child(6):last-child)]:[--gs-cards:6]",
+  "[&:has(>:nth-child(7):last-child)]:[--gs-cards:7]",
+  "[&:has(>:nth-child(8):last-child)]:[--gs-cards:8]",
+  "[&:has(>:nth-child(9):last-child)]:[--gs-cards:9]",
+  "[&:has(>:nth-child(10):last-child)]:[--gs-cards:10]",
+  "[&:has(>:nth-child(11):last-child)]:[--gs-cards:11]",
+  "[&:has(>:nth-child(12))]:[--gs-cards:12]"
+].join(" ");
+function countCards(children) {
+  let n = 0;
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === Fragment$1) n += countCards(child.props.children);
+    else if (child !== null && child !== void 0 && typeof child !== "boolean" && child !== "") n += 1;
+  });
+  return n;
+}
+function CardGrid({ minWidth = "14rem", maxColumns = 4, compare = false, gap = "var(--ds-space-4)", 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 template = {
+    "--gs-card-gap": gap,
+    ...compare ? { "--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
+    ...compare ? { gridAutoRows: "auto 1fr auto" } : {}
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-card-grid": compare ? "compare" : "",
+      className: cn(
+        "grid",
+        compare && 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
+      ),
+      style: { ...template, ...style },
+      ...props,
+      children
+    }
+  );
+}
 var sizeStyles3 = {
   sm: { gap: "gap-ds-0.5", label: "text-[length:var(--ds-font-size-xs)]", value: "text-[length:var(--ds-font-size-xs)]", iconSize: 12, py: "py-ds-1.5" },
   md: { gap: "gap-ds-1", label: "text-[length:var(--ds-font-size-sm)]", value: "text-[length:var(--ds-font-size-sm)]", iconSize: 14, py: "py-ds-2.5" },
@@ -5507,7 +5769,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("dd", { className: cn("font-normal text-[var(--ds-text-primary)] text-right flex-1 min-w-0", s.value), children: item.value })
+            /* @__PURE__ */ jsx("dd", { className: cn("font-normal text-[var(--ds-text-primary)] text-right flex-1 min-w-0 [overflow-wrap:anywhere] [:where(&)>*]:[justify-content:safe_flex-end] [:where(&)>*]:flex-wrap", s.value), children: item.value })
           ]
         },
         i
@@ -5599,6 +5861,69 @@ function Accordion({ items, type = "single", defaultOpen = [], open: controlledO
     ] }, i);
   }) });
 }
+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 elRef = useRef(null);
+  const observer = useRef(null);
+  const borders = useRef({ x: 0, y: 0 });
+  const [state, setState] = useState(NONE);
+  const measure = useCallback(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const next = {
+      left: el.scrollLeft > 1,
+      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
+      vertical: el.scrollHeight > el.clientHeight + 1,
+      gutterRight: Math.max(0, el.offsetWidth - el.clientWidth - borders.current.x),
+      gutterBottom: Math.max(0, el.offsetHeight - el.clientHeight - borders.current.y)
+    };
+    setState((prev) => same(prev, next) ? prev : next);
+  }, []);
+  const ref = useCallback((el) => {
+    observer.current?.disconnect();
+    observer.current = null;
+    elRef.current = el;
+    if (!el || !enabled) return;
+    const style = getComputedStyle(el);
+    const px = (v) => parseFloat(v) || 0;
+    borders.current = { x: px(style.borderLeftWidth) + px(style.borderRightWidth), y: px(style.borderTopWidth) + px(style.borderBottomWidth) };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const o = new ResizeObserver(measure);
+    o.observe(el);
+    for (const child of Array.from(el.children)) o.observe(child);
+    observer.current = o;
+  }, [enabled, measure]);
+  const shown = enabled && (state.left || state.right);
+  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 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(", "),
+    size: ["100% 100%", ...gutters.map((g) => g.size)].join(", "),
+    position: ["0 0", ...gutters.map((g) => g.position)].join(", ")
+  } : void 0;
+  return {
+    /** The scroller's ref (a callback). */
+    ref,
+    /** 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,
+    /** 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,
+      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
+    }
+  };
+}
 function TruncCell({ children, lines }) {
   const { ref, isTruncated } = useTextOverflow({ lines });
   const clampClass = lines === 1 ? "truncate" : `line-clamp-${lines}`;
@@ -5606,7 +5931,7 @@ function TruncCell({ children, lines }) {
   if (!isTruncated) return cell;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: cell });
 }
-var TITLE_CLASSES = "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] break-words";
+var TITLE_CLASSES = TITLE_TEXT;
 var FRAME_CLASSES = cn(
   "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
   "rounded-[var(--ds-radius-md)]",
@@ -5614,13 +5939,25 @@ var FRAME_CLASSES = cn(
   "bg-[var(--ds-bg-surface)]"
 );
 function TableHeading({ title, description, actions, titleId, descriptionId, inset }) {
-  return /* @__PURE__ */ jsxs("div", { "data-table-heading": "", className: cn("flex flex-wrap items-start justify-between gap-ds-4", inset ? "px-ds-5 py-ds-4" : "pb-ds-4"), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-ds-1.5 grow basis-1/2 [min-width:min-content] break-words", children: [
-      /* @__PURE__ */ jsx("h3", { id: titleId, className: TITLE_CLASSES, children: title }),
-      description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-[var(--ds-text-muted)]", children: description })
+  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;
+  const titleLeads = !actions || actionsAreBadges(actions);
+  const leadRowRef = useRef(null);
+  const leadFloorFits = useTitleFloorFits(leadRowRef, titleLeads);
+  const descriptionText = (className) => description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: cn(className, "text-sm text-[var(--ds-text-muted)] break-words"), children: description }) : null;
+  return /* @__PURE__ */ jsx("div", { "data-table-heading": "", className: cn(inset ? "px-ds-5 py-ds-4" : "pb-ds-4"), children: !titleLeads ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+    /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.block, children: [
+      heading,
+      descriptionText()
     ] }),
-    actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0 ml-auto", children: actions })
-  ] });
+    actionsBlock
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { ref: leadRowRef, className: HEADER_LAYOUT.row, children: [
+      /* @__PURE__ */ jsx("div", { className: cn(HEADER_LAYOUT.titleLeads, !leadFloorFits && HEADER_LAYOUT.floorOff), children: heading }),
+      actionsBlock
+    ] }),
+    descriptionText(HEADER_LAYOUT.below)
+  ] }) });
 }
 function Table({
   columns,
@@ -5645,6 +5982,7 @@ function Table({
   title,
   description,
   actions,
+  "aria-label": ariaLabel,
   ref
 }) {
   const headingId = useId();
@@ -5716,6 +6054,8 @@ function Table({
   const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
   const isMobile = useBreakpoint(mobileBreakpoint);
+  const { ref: scrollRef, measure: measureScroll, scrollable, fadeProps } = useScrollEdges({ enabled: !isMobile });
+  const [regionFocused, setRegionFocused] = useState(false);
   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: [
     cardHeading,
@@ -5766,7 +6106,7 @@ function Table({
     }) }) });
     return title ? titledCards(cards) : cards;
   }
-  const table = /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : {}, children: [
+  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(
         Checkbox,
@@ -5917,26 +6257,37 @@ function Table({
       ] }, i);
     }) })
   ] });
-  if (!title) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        "data-ds-list": "",
-        "data-gs": "table",
-        className: cn(
-          "w-full overflow-x-auto",
-          FRAME_CLASSES,
-          className
-        ),
-        children: table
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("div", { ref, "data-ds-list": "", "data-gs": "table", className: cn("w-full flex flex-col", FRAME_CLASSES, className), children: [
-    /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
-    /* @__PURE__ */ jsx("div", { "data-table-scroll": "", className: "min-h-0 overflow-x-auto rounded-b-[inherit]", children: table })
-  ] });
+  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
+          }
+        )
+      ]
+    }
+  );
 }
 function optionsKeyForFit(options) {
   return options.map((o) => `${o.value}:${o.label}`).join("|");
@@ -5969,9 +6320,12 @@ function SegmentedControl({
   onHoverChange,
   className,
   "aria-label": ariaLabel,
-  maxOptions = 6
+  maxOptions = 6,
+  ...wiring
 }) {
   const contextSize = useContext(ControlSizeContext);
+  const control = useFieldControl(wiring);
+  const named = !ariaLabel && control.labelId ? { "aria-labelledby": control.labelId } : {};
   const size = sizeProp ?? contextSize ?? "md";
   const containerRef = useRef(null);
   const [indicator, setIndicator] = useState({ left: 0, width: 0 });
@@ -6067,6 +6421,7 @@ function SegmentedControl({
       Dropdown,
       {
         "aria-label": ariaLabel,
+        ...wiring,
         size: size === "md" || size === "lg" ? "md" : "sm",
         options: options.filter((o) => !o.disabled).map((o) => ({ id: o.value, label: o.label })),
         value,
@@ -6080,7 +6435,12 @@ function SegmentedControl({
     {
       ref: containerRef,
       role: "radiogroup",
+      id: control.id,
       "aria-label": ariaLabel,
+      ...named,
+      "aria-describedby": control.describedBy,
+      "aria-invalid": control.invalid || void 0,
+      "aria-required": control.required || void 0,
       onKeyDown: handleKeyDown,
       className: cn(
         "relative items-center",
@@ -6090,6 +6450,7 @@ function SegmentedControl({
         "bg-[var(--ds-bg-muted)]",
         "rounded-[var(--ds-radius-lg)]",
         variant === "default" && "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+        control.invalid && "border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]",
         className
       ),
       children: [
@@ -6600,7 +6961,7 @@ function WeekView({
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
       /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]" }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "grid",
@@ -6640,7 +7001,7 @@ function WeekView({
     ] }),
     hasAllDay && /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]/30", children: [
       /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-2xs text-[var(--ds-text-muted)] px-ds-1 py-ds-1 text-right", children: "all-day" }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "grid",
@@ -6677,7 +7038,7 @@ function WeekView({
         },
         h
       )) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "relative",
@@ -7690,7 +8051,7 @@ function AvatarGroup({ items, max = 4, size = "sm", ring = "canvas", onOverflowC
   const shown = items.slice(0, Math.max(0, max));
   const hidden = items.slice(shown.length);
   const ringClass = cn(
-    "rounded-[var(--ds-radius-full)] ring-2",
+    "relative rounded-[var(--ds-radius-full)] ring-2",
     ring === "canvas" ? "ring-[var(--ds-bg-canvas)]" : "ring-[var(--ds-bg-surface)]"
   );
   const hiddenNames = hidden.map((i) => i.name ?? i.initials).filter(Boolean).join(", ");
@@ -7990,11 +8351,38 @@ function HorizontalLayout({ items, minItemWidth, className }) {
       /* @__PURE__ */ jsxs("div", { className: "text-center mt-ds-2 px-ds-3", children: [
         /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: item.title }),
         item.description && /* @__PURE__ */ jsx(ExpandableDescription, { className: "text-center", children: item.description }),
-        item.timestamp && /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: item.timestamp })
+        /* @__PURE__ */ jsx(ItemTime, { item })
       ] })
     ] }, i);
   }) });
 }
+var EXACT = new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" });
+var EXACT_DAY = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+var DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+function exactTime(value) {
+  if (typeof value === "string") {
+    const day = DATE_ONLY.exec(value.trim());
+    if (day) {
+      const [y, m, d] = [Number(day[1]), Number(day[2]) - 1, Number(day[3])];
+      const date2 = new Date(y, m, d);
+      return date2.getFullYear() === y && date2.getMonth() === m && date2.getDate() === d ? { iso: value.trim(), text: EXACT_DAY.format(date2) } : null;
+    }
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? null : { iso: date.toISOString(), text: EXACT.format(date) };
+}
+function ItemTime({ item }) {
+  const exact = item.dateTime ? exactTime(item.dateTime) : null;
+  if (!item.timestamp && !exact) return null;
+  return /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: exact ? /* @__PURE__ */ jsxs("time", { dateTime: exact.iso, title: exact.text, children: [
+    item.timestamp ?? exact.text,
+    item.timestamp && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      " (",
+      exact.text,
+      ")"
+    ] })
+  ] }) : item.timestamp });
+}
 function VerticalLayout({ items, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-ds-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
@@ -8004,7 +8392,7 @@ function VerticalLayout({ items, className }) {
     /* @__PURE__ */ jsxs("div", { className: cn("pb-ds-6 min-w-0", i === items.length - 1 && "pb-0"), style: item.icon ? { paddingTop: ICON_TEXT_OFFSET } : void 0, children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: item.title }),
       item.description && /* @__PURE__ */ jsx(ExpandableDescription, { children: item.description }),
-      item.timestamp && /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: item.timestamp })
+      /* @__PURE__ */ jsx(ItemTime, { item })
     ] })
   ] }, i)) });
 }
@@ -9387,7 +9775,7 @@ var StackedList = forwardRef(function StackedList2({
 });
 var TIME_ZOOMS = ["day", "week", "month", "quarter"];
 var DAY_MS = 864e5;
-var DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+var DATE_ONLY2 = /^(\d{4})-(\d{2})-(\d{2})$/;
 var utcDay = (y, m, d) => Math.round(Date.UTC(y, m, d) / DAY_MS);
 function dayOfDate(d) {
   const t = d.getTime();
@@ -9403,7 +9791,7 @@ function dayOf(value) {
   if (typeof value === "number") return Number.isFinite(value) ? value : NaN;
   if (value instanceof Date) return dayOfDate(value);
   if (typeof value !== "string") return NaN;
-  const m = DATE_ONLY.exec(value.trim());
+  const m = DATE_ONLY2.exec(value.trim());
   if (!m) return dayOfDate(new Date(value));
   const [y, mo, d] = [Number(m[1]), Number(m[2]) - 1, Number(m[3])];
   const day = utcDay(y, mo, d);
@@ -9416,7 +9804,7 @@ function dateOfDay(day) {
   return new Date(u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate(), 0, 0, 0, Math.round((day - whole) * DAY_MS));
 }
 function isWholeDay(value) {
-  return typeof value === "string" ? DATE_ONLY.test(value.trim()) : Number.isInteger(dayOf(value));
+  return typeof value === "string" ? DATE_ONLY2.test(value.trim()) : Number.isInteger(dayOf(value));
 }
 function endDayOf(value) {
   const day = dayOf(value);
@@ -11121,40 +11509,22 @@ function trackClasses(orientation) {
     "border-b-[length:var(--ds-nav-h-track-border)] border-[var(--ds-border-default)]"
   );
 }
-var FADE = 24;
 function useScrollTrack(activeTab, enabled) {
-  const ref = useRef(null);
-  const [edges, setEdges] = useState({ left: false, right: false });
-  const measure = useCallback(() => {
-    const el = ref.current;
-    if (!el) return;
-    const left = el.scrollLeft > 1;
-    const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
-    setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
-  }, []);
+  const { ref, elRef, measure, fadeProps } = useScrollEdges({ enabled });
   useLayoutEffect(() => {
     if (!enabled) return;
-    measure();
-    const el = ref.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(measure);
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [enabled, measure]);
-  useLayoutEffect(() => {
-    if (!enabled) return;
-    const el = ref.current;
+    const el = elRef.current;
     const tab = el?.querySelector('[role="tab"][aria-selected="true"]');
     if (!el || !tab) return;
     const start = tab.offsetLeft;
     const end = start + tab.offsetWidth;
-    if (start < el.scrollLeft + FADE) el.scrollLeft = Math.max(0, start - FADE);
-    else if (end > el.scrollLeft + el.clientWidth - FADE) el.scrollLeft = end - el.clientWidth + FADE;
+    if (start < el.scrollLeft + EDGE_FADE) el.scrollLeft = Math.max(0, start - EDGE_FADE);
+    else if (end > el.scrollLeft + el.clientWidth - EDGE_FADE) el.scrollLeft = end - el.clientWidth + EDGE_FADE;
     measure();
-  }, [activeTab, enabled, measure]);
+  }, [activeTab, enabled, measure, elRef]);
   useEffect(() => {
     if (!enabled) return;
-    const el = ref.current;
+    const el = elRef.current;
     if (!el) return;
     const onWheel = (e) => {
       if (el.scrollWidth <= el.clientWidth || Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
@@ -11204,14 +11574,11 @@ function useScrollTrack(activeTab, enabled) {
       el.removeEventListener("pointercancel", onUp);
       el.removeEventListener("click", onClick, true);
     };
-  }, [enabled]);
-  const fade = enabled ? [edges.left && "left", edges.right && "right"].filter(Boolean).join(" ") : "";
-  const mask = fade ? `linear-gradient(to right, ${edges.left ? `transparent 0, black ${FADE}px` : "black 0"}, ${edges.right ? `black calc(100% - ${FADE}px), transparent 100%` : "black 100%"})` : void 0;
+  }, [enabled, elRef]);
   return {
     ref,
     onScroll: measure,
-    "data-fade": fade || void 0,
-    style: mask ? { maskImage: mask, WebkitMaskImage: mask } : void 0
+    ...fadeProps
   };
 }
 var SCROLL_TRACK = "overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-w-full";
@@ -14925,7 +15292,8 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                     className: cn(
                       "relative z-10 w-full",
                       isMobile ? "max-w-none h-full" : sizeClasses[size],
-                      "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+                      OVERLAY_SURFACE,
+                      "text-[var(--ds-text-primary)]",
                       GLASS_OVERLAY,
                       "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
                       isMobile ? "rounded-none" : "rounded-[var(--ds-radius-xl)]",
@@ -15444,7 +15812,8 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
           "aria-label": "Command palette",
           className: cn(
             "relative z-10 w-full max-w-lg",
-            "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
+            OVERLAY_SURFACE,
+            "text-[var(--ds-text-primary)]",
             "[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-xl)] overflow-hidden",
@@ -16718,6 +17087,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, 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, useFormContext, usePagination, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, 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, useFormContext, usePagination, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map