gridsmith-ui 0.29.1 → 0.30.1

package/dist/index.js

@@ -1,171 +1,59 @@
 "use client";
-import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useCornerInset, NAVBAR_INSET_PRIORITY, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, besideRoom, PANEL_INSET_PRIORITY, Drawer, useRememberedWidth, pxOf, ResizeEdge, LAUNCHER_INSET_PRIORITY, defaultMaxWidth } from './chunk-4TUJXDRU.js';
-export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-4TUJXDRU.js';
-import { Skeleton, TITLE_TEXT, useFormatLocale, useHydrated, useToday, LocaleContext } from './chunk-MFAWJSMJ.js';
-export { Skeleton, useFormatLocale, useHydrated } from './chunk-MFAWJSMJ.js';
+import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useCornerInset, NAVBAR_INSET_PRIORITY, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, besideRoom, PANEL_INSET_PRIORITY, Drawer, useRememberedWidth, pxOf, ResizeEdge, LAUNCHER_INSET_PRIORITY, defaultMaxWidth } from './chunk-KMKBOTFR.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-KMKBOTFR.js';
+import { Skeleton, TITLE_TEXT } from './chunk-6C2IUMY7.js';
+export { Skeleton } from './chunk-6C2IUMY7.js';
 import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
-import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-6A5RHW2W.js';
-export { Avatar } from './chunk-6A5RHW2W.js';
-import { Link } from './chunk-I3MTQ3CS.js';
-export { CodeBlock, Divider, Link } from './chunk-I3MTQ3CS.js';
-import { useFillHeight, FillContext, useKeyboardScroll } from './chunk-FD4YED7O.js';
-import { Badge } from './chunk-RECCCA7Z.js';
-export { Badge } from './chunk-RECCCA7Z.js';
-import { inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, CardValue } from './chunk-QNHVPE2B.js';
-import { useWholeListCheck, pagerPart, Pagination, Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, OutsideField, NumberInput, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-FUKSLQ77.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-FUKSLQ77.js';
-import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, formatRelativeTime, thresholdOf, toMillis, formatFullTime, preferenceActionKey, DAY, HOUR, MINUTE } from './chunk-RJEUQ7RL.js';
-export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, formatFullTime, formatRelativeTime, preferenceActionKey, usePreferences } from './chunk-RJEUQ7RL.js';
-import { elementType, formatLocale, localeChoice } from './chunk-OYNUU346.js';
-import { useInputModality } from './chunk-7RKC5C7G.js';
+import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-NEUWZUK6.js';
+export { Avatar } from './chunk-NEUWZUK6.js';
+import { Link } from './chunk-OX3NNMWG.js';
+export { CodeBlock, Divider, Link } from './chunk-OX3NNMWG.js';
+import { DropdownMenu } from './chunk-ISONVOA7.js';
+export { DropdownMenu } from './chunk-ISONVOA7.js';
+import { useFillHeight, FillContext } from './chunk-DBHVJ7Z3.js';
+import { useKeyboardScroll } from './chunk-SJZWEBHL.js';
+import { Badge } from './chunk-OVHBQT3Z.js';
+export { Badge } from './chunk-OVHBQT3Z.js';
+import { localeCache, startOfDay, addDays, useWeekStart, useDateWords, localeDayFirst, dayKey, moveDay, addMonths, DateSegmentFields, getMonthGrid, isSameMonth, isSameDay, DatePicker, timeSegments, pad2, inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, Checkbox, CardValue, SortIndicator, startOfWeek, endOfWeek, addMonthsClamped, isExcludedDay, CutCell, CutEmail, stepValue, separatorMovesOn, TIME_SEPARATORS, typeDigit, getEventsForDay, layoutWeek, isWeekend, getWeekDays, isBarEvent, layoutPieces, dayPieces, groupEventsByDay, timeToFraction } from './chunk-T52LAFKG.js';
+export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-T52LAFKG.js';
+import { useWholeListCheck, pagerPart, Pagination, Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, OutsideField, NumberInput, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-SLRTSBCJ.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-SLRTSBCJ.js';
+import { useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, formatRelativeTime, thresholdOf, toMillis, formatFullTime, datedMillis, preferenceActionKey, DAY, HOUR, MINUTE } from './chunk-TYNDXMBV.js';
+export { PreferencesContext, formatFullTime, formatRelativeTime, preferenceActionKey, usePreferences } from './chunk-TYNDXMBV.js';
+import { useFormatLocale, useHydrated, useToday, LocaleContext } from './chunk-LJYSVZMI.js';
+export { useFormatLocale, useHydrated } from './chunk-LJYSVZMI.js';
+import { formatLocale, localeChoice } from './chunk-7QLXYRPD.js';
+import { useInputModality, inputModality } from './chunk-7RKC5C7G.js';
 export { INPUT_MODALITY_ATTR, inputModality, installInputModality, useInputModality } from './chunk-7RKC5C7G.js';
-import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
-export { BreakpointWidthProvider, useBreakpoint } from './chunk-ZHUVLBCC.js';
 import { FormChangeCtx, useReportedChange, useOptionalFormContext, FormCtx } from './chunk-72SDAX54.js';
 export { useFormContext } from './chunk-72SDAX54.js';
-import { CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, SurfaceBoundary, useFramesItself, TableCardCtx } from './chunk-QM4SJKWV.js';
+import { Button, CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, ControlSizeContext, triggerType, SurfaceBoundary, Spinner, useFramesItself, TableCardCtx } from './chunk-ULCACQSA.js';
+export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-ULCACQSA.js';
+import { elementType } from './chunk-NKUCS67T.js';
+import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
+export { BreakpointWidthProvider, useBreakpoint } from './chunk-ZHUVLBCC.js';
 import { useRevealFocus } from './chunk-HTXP5BMM.js';
 export { useRevealFocus } from './chunk-HTXP5BMM.js';
-import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, rovingTabStop, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus } from './chunk-ZI3OQDET.js';
-export { useGridKeyboard } from './chunk-ZI3OQDET.js';
-import { useTextOverflow, AutoTooltip } from './chunk-37WOC7F7.js';
-export { Tooltip, useTextOverflow } from './chunk-37WOC7F7.js';
-import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
-import { Icon, slotIcon, warnOnce } from './chunk-MKFWHWBK.js';
-import { usePosition } from './chunk-HP7WUZPK.js';
-import { useLatest } from './chunk-WH2FUFAC.js';
-import { cn, FOCUS_RING, GLASS_SURFACE, FOCUS_INSET, PEER_FOCUS_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, GROUP_FOCUS_RING, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, ERROR_FOCUS_RING, FIELD_FOCUS_RING, atLeastFocusRoom, FOCUS_ROOM } from './chunk-JTU7OBYJ.js';
-import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, isValidElement, useId, memo, useImperativeHandle, useEffect, Children, Fragment as Fragment$1, cloneElement, useSyncExternalStore } from 'react';
-import { createPortal, flushSync } from 'react-dom';
+import { focusAfterSelfRemoval, FOCUSABLE, useFocusKeptInList, FIELD, ZOOM_KEYS, rovingTabStop, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberOpener, focusInitial, OVERLAY_CLOSE_ATTR, usePopupFocus, CONTROL_ANCESTOR, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus } from './chunk-R5QXMNW7.js';
+export { useGridKeyboard } from './chunk-R5QXMNW7.js';
+import { useTextOverflow } from './chunk-IELIF4PJ.js';
+export { useTextOverflow } from './chunk-IELIF4PJ.js';
+import { AutoTooltip } from './chunk-UDJOIVKQ.js';
+export { Tooltip } from './chunk-UDJOIVKQ.js';
+import { Icon, slotIcon, warnOnce } from './chunk-L6HWACK7.js';
+import { mergeRefs } from './chunk-7Q46JXSK.js';
+import { useLatest, usePosition } from './chunk-WIUGPZOH.js';
+import { cn, FOCUS_RING, GLASS_SURFACE, FOCUS_INSET, PEER_FOCUS_RING, GLASS_BACKDROP, FOCUS_ROOM, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, GROUP_FOCUS_RING, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, GLASS_DROPDOWN, ERROR_FOCUS_RING, FIELD_FOCUS_RING, atLeastFocusRoom } from './chunk-YL5KD5RC.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useId, useEffect, useState, createContext, useCallback, useLayoutEffect, useMemo, useContext, isValidElement, memo, useImperativeHandle, useSyncExternalStore, Children, Fragment as Fragment$1, cloneElement, useReducer } from 'react';
+import { createPortal, flushSync } from 'react-dom';
 
-function isDivider(entry) {
-  return "type" in entry && entry.type === "divider";
-}
-function DropdownMenu({ trigger, items, align = "end", className, container }) {
-  const [open, setOpen] = useState(false);
-  const [focusedIdx, setFocusedIdx] = useState(-1);
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
-  const pos = usePosition(triggerRef, menuRef, open, { side: "bottom", align, offset: 4, flip: true });
-  const enabledIndices = items.reduce((acc, item, i) => {
-    if (!isDivider(item) && !item.disabled) acc.push(i);
-    return acc;
-  }, []);
-  const [prevOpen, setPrevOpen] = useState(open);
-  if (open !== prevOpen) {
-    setPrevOpen(open);
-    if (!open) setFocusedIdx(-1);
-  }
-  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: menuRef, close: () => setOpen(false), tabExits: "any" });
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
-      e.preventDefault();
-      returnFocus();
-      setOpen(false);
-    };
-    const onClick = (e) => {
-      const target = e.target;
-      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) return;
-      setOpen(false);
-    };
-    document.addEventListener("keydown", onKeyDown);
-    document.addEventListener("mousedown", onClick);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("mousedown", onClick);
-    };
-  }, [open, isTopLayer, returnFocus]);
-  useEffect(() => {
-    if (open && focusedIdx >= 0) {
-      menuRef.current?.querySelector(`[data-index="${focusedIdx}"]`)?.focus();
-    }
-  }, [open, focusedIdx]);
-  function handleMenuKeyDown(e) {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      const curPos = enabledIndices.indexOf(focusedIdx);
-      setFocusedIdx(enabledIndices[(curPos + 1) % enabledIndices.length]);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      const curPos = enabledIndices.indexOf(focusedIdx);
-      setFocusedIdx(enabledIndices[(curPos - 1 + enabledIndices.length) % enabledIndices.length]);
-    }
+function selectAllFor(bar) {
+  for (let box = bar?.parentElement; bar && box && box !== document.body; box = box.parentElement) {
+    const all = Array.from(box.querySelectorAll("[data-ds-select-all] input"));
+    if (all.length) return all.find((el) => bar.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) ?? all[all.length - 1];
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ...triggerType(trigger),
-        "aria-haspopup": "menu",
-        "aria-expanded": open,
-        ref: triggerRef,
-        onClick: () => {
-          setOpen(!open);
-          if (!open && enabledIndices.length) setFocusedIdx(enabledIndices[0]);
-        },
-        children: trigger
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: menuRef,
-          role: "menu",
-          "data-gs": "menu",
-          onKeyDown: handleMenuKeyDown,
-          className: cn(
-            // the items' outline has its 4 px of room at any density (Sprint 30, P3)
-            "fixed z-[var(--ds-z-popover)] min-w-[180px] p-[max(var(--ds-space-1),4px)]",
-            "bg-[var(--ds-bg-surface-elevated)]",
-            GLASS_DROPDOWN,
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "rounded-[var(--ds-radius-md)] overflow-hidden",
-            className
-          ),
-          style: { top: pos.top, left: pos.left },
-          onClick: (e) => e.stopPropagation(),
-          children: items.map((item, i) => {
-            if (isDivider(item)) {
-              return /* @__PURE__ */ jsx("div", { role: "separator", className: "my-ds-1 h-px bg-[var(--ds-border-default)]" }, i);
-            }
-            return /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                "data-index": i,
-                role: "menuitem",
-                disabled: item.disabled,
-                tabIndex: focusedIdx === i ? 0 : -1,
-                onClick: () => {
-                  if (!item.disabled) {
-                    returnFocus();
-                    item.onClick();
-                    setOpen(false);
-                  }
-                },
-                className: cn(
-                  "flex items-center gap-ds-2 w-full text-left px-ds-3 py-ds-2 text-sm cursor-pointer",
-                  "transition-colors rounded-[var(--ds-radius-sm)]",
-                  FOCUS_RING,
-                  item.disabled ? "opacity-disabled cursor-not-allowed" : item.variant === "destructive" ? "text-[var(--ds-status-error-text)] hover:bg-[var(--ds-status-error-bg)] focus-visible:bg-[var(--ds-status-error-bg)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)] focus-visible:bg-[var(--ds-bg-emphasis)]"
-                ),
-                children: [
-                  item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 16, className: "shrink-0" }),
-                  /* @__PURE__ */ jsx("span", { children: item.label })
-                ]
-              },
-              i
-            );
-          })
-        }
-      ),
-      container ?? document.body
-    )
-  ] });
+  return null;
 }
 function BulkActionBar({ selectedCount, actions, onClearSelection, className }) {
   const isMobile = useBreakpoint("sm");
@@ -217,7 +105,11 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
           "button",
           {
             type: "button",
-            onClick: onClearSelection,
+            onClick: (e) => {
+              const bar = e.currentTarget.closest('[role="toolbar"]');
+              focusAfterSelfRemoval(e.currentTarget, { item: bar, to: selectAllFor(bar) });
+              onClearSelection();
+            },
             className: cn("ml-auto text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer", FOCUS_RING),
             "aria-label": "Clear selection",
             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
@@ -468,25 +360,6 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
   return /* @__PURE__ */ jsx(AutoTooltip, { content: selectedLabel, disabled: !labelTruncated || open, children: triggerContent });
 }
 
-// ../../showcase/src/lib/locale-cache.ts
-var caches = /* @__PURE__ */ new Set();
-function localeCache(limit) {
-  const map = /* @__PURE__ */ new Map();
-  caches.add(map);
-  return (key, make) => {
-    const hit = map.get(key);
-    if (hit !== void 0) {
-      map.delete(key);
-      map.set(key, hit);
-      return hit;
-    }
-    const made = make();
-    map.set(key, made);
-    if (map.size > limit) map.delete(map.keys().next().value);
-    return made;
-  };
-}
-
 // ../../showcase/src/lib/time-zones.ts
 function canonicalTimeZone(zone) {
   try {
@@ -566,7 +439,6 @@ function TimezoneSelect({ value, onChange, placeholder = "Search time zones\u202
   return /* @__PURE__ */ jsx(Combobox, { value: stored, onChange, options, placeholder, ...rest });
 }
 var LONGEST_WAIT = DAY;
-var CONTROL_ANCESTOR = 'a[href], button, summary, label, [role="button"], [role="link"], [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="treeitem"], [role="row"], [role="gridcell"], [role="checkbox"], [role="radio"], [role="switch"]';
 var noChange = () => () => {
 };
 var inBrowser = () => true;
@@ -635,109 +507,6 @@ function RelativeTimeAt({ at, hours, className }) {
     mounted ? "browser" : "first"
   ) });
 }
-var CHECKBOX_SIZES = {
-  sm: { box: "h-[16px] w-[16px]", glyph: 10, label: "text-xs" },
-  md: { box: "h-[18px] w-[18px]", glyph: 12, label: "text-sm" }
-};
-function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disabled = false, indeterminate = false, className, ref, ...wiring }) {
-  const onChange = useReportedChange(onChangeProp, checked);
-  const internalRef = useRef(null);
-  const dims = CHECKBOX_SIZES[size];
-  const control = useFieldControl(wiring);
-  const mergedRef = useCallback(
-    (node) => {
-      internalRef.current = node;
-      if (typeof ref === "function") ref(node);
-      else if (ref) ref.current = node;
-    },
-    [ref]
-  );
-  useEffect(() => {
-    if (internalRef.current) internalRef.current.indeterminate = indeterminate;
-  }, [indeterminate]);
-  const showDash = indeterminate;
-  const filled = checked || indeterminate;
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: cn(
-        "flex items-center gap-ds-2.5 cursor-pointer select-none py-ds-1",
-        disabled && "opacity-disabled cursor-not-allowed",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: mergedRef,
-            type: "checkbox",
-            id: control.id,
-            "aria-labelledby": wiring["aria-labelledby"],
-            "aria-describedby": control.describedBy,
-            "aria-invalid": control.invalid || void 0,
-            required: control.required || void 0,
-            checked,
-            disabled,
-            onChange: (e) => onChange(e.target.checked),
-            className: "peer sr-only"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn(
-              "flex items-center justify-center",
-              dims.box,
-              "shrink-0",
-              "rounded-[calc(var(--ds-radius-sm)*0.6)]",
-              "border-[2px]",
-              "transition-all",
-              PEER_FOCUS_RING,
-              filled ? cn(CHECK_FILL, "border-[var(--ds-check-border)]") : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
-              disabled && "pointer-events-none"
-            ),
-            children: /* @__PURE__ */ jsx(
-              "svg",
-              {
-                width: dims.glyph,
-                height: dims.glyph,
-                viewBox: "0 0 12 12",
-                fill: "none",
-                className: cn(
-                  "text-[var(--ds-check-fg)] transition-opacity",
-                  filled ? "opacity-100" : "opacity-0"
-                ),
-                children: showDash ? /* @__PURE__ */ jsx("path", { d: "M3 6H9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) : /* @__PURE__ */ jsx("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })
-              }
-            )
-          }
-        ),
-        label && /* @__PURE__ */ jsx("span", { className: cn(dims.label, "text-[var(--ds-text-primary)]"), children: label })
-      ]
-    }
-  );
-}
-var CheckboxGroupContext = createContext(null);
-function CheckboxGroup({ value, onChange, children, className }) {
-  return /* @__PURE__ */ jsx(CheckboxGroupContext, { value: { value, onChange }, children: /* @__PURE__ */ jsx("div", { role: "group", className: cn("flex flex-col gap-ds-2", className), children }) });
-}
-function CheckboxGroupItem({ value, label, disabled }) {
-  const ctx = useContext(CheckboxGroupContext);
-  const resolvedValue = ctx?.value ?? [];
-  const resolvedOnChange = ctx?.onChange;
-  const checked = resolvedValue.includes(value);
-  return /* @__PURE__ */ jsx(
-    Checkbox,
-    {
-      checked,
-      disabled,
-      label,
-      onChange: (c) => {
-        resolvedOnChange?.(c ? [...resolvedValue, value] : resolvedValue.filter((v) => v !== value));
-      }
-    }
-  );
-}
 function RadioGroup({ value, onChange: onChangeProp, options, orientation = "vertical", className, label, ...wiring }) {
   const onChange = useReportedChange(onChangeProp, value);
   const groupRef = useRef(null);
@@ -774,6 +543,7 @@ function RadioGroup({ value, onChange: onChangeProp, options, orientation = "ver
         ref: groupRef,
         role: "radiogroup",
         id: control.id,
+        "aria-label": label || control.labelId ? void 0 : control.label,
         "aria-labelledby": label ? groupId : control.labelId,
         "aria-describedby": control.describedBy,
         "aria-invalid": control.invalid || void 0,
@@ -833,400 +603,6 @@ function RadioGroup({ value, onChange: onChangeProp, options, orientation = "ver
     )
   ] });
 }
-
-// ../../showcase/src/lib/date-grid.ts
-function addDays(d, n) {
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
-}
-function addMonthsClamped(d, n) {
-  const first = new Date(d.getFullYear(), d.getMonth() + n, 1);
-  const last2 = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();
-  return new Date(first.getFullYear(), first.getMonth(), Math.min(d.getDate(), last2));
-}
-function dayKey(d) {
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-}
-function moveDay(from, key, shift, weekStartsOn = 0) {
-  const intoWeek = (from.getDay() - weekStartsOn + 7) % 7;
-  switch (key) {
-    case "ArrowLeft":
-      return addDays(from, -1);
-    case "ArrowRight":
-      return addDays(from, 1);
-    case "ArrowUp":
-      return addDays(from, -7);
-    case "ArrowDown":
-      return addDays(from, 7);
-    case "Home":
-      return addDays(from, -intoWeek);
-    case "End":
-      return addDays(from, 6 - intoWeek);
-    case "PageUp":
-      return addMonthsClamped(from, shift ? -12 : -1);
-    case "PageDown":
-      return addMonthsClamped(from, shift ? 12 : 1);
-    default:
-      return null;
-  }
-}
-
-// ../../showcase/src/lib/segments.ts
-function stepValue(spec, current, delta) {
-  if (current === null) return delta > 0 ? spec.min : spec.max;
-  const span = spec.max - spec.min + 1;
-  return spec.min + ((current - spec.min + delta) % span + span) % span;
-}
-function typeDigit(spec, buffer, digit) {
-  if (!/^\d$/.test(digit)) return { buffer, value: buffer ? Number(buffer) : null, advance: false };
-  let next = buffer + digit;
-  if (next.length > spec.maxDigits || Number(next) > spec.max) next = digit;
-  const n = Number(next);
-  const value = n >= spec.min && n <= spec.max ? n : null;
-  const full = next.length >= spec.maxDigits;
-  const noRoom = n > 0 && n * 10 > spec.max;
-  return { buffer: next, value, advance: full || noRoom };
-}
-var pad2 = (n) => String(n).padStart(2, "0");
-function timeSegments(use24Hour) {
-  return [
-    { key: "hour", label: "Hours", min: use24Hour ? 0 : 1, max: use24Hour ? 23 : 12, maxDigits: 2, placeholder: "--" },
-    { key: "minute", label: "Minutes", min: 0, max: 59, maxDigits: 2, placeholder: "--" }
-  ];
-}
-function dateSegments(dayFirst, daysInMonth = 31) {
-  const day = { key: "day", label: "Day", min: 1, max: daysInMonth, maxDigits: 2, placeholder: "dd" };
-  const month = { key: "month", label: "Month", min: 1, max: 12, maxDigits: 2, placeholder: "mm" };
-  const year = { key: "year", label: "Year", min: 1, max: 9999, maxDigits: 4, placeholder: "yyyy" };
-  return dayFirst ? [day, month, year] : [month, day, year];
-}
-var FIRST_DAY_BY_REGION = Object.fromEntries([
-  ...["AG", "AS", "BD", "BR", "BS", "BT", "BW", "BZ", "CA", "CO", "DM", "DO", "ET", "GT", "GU", "HK", "HN", "ID", "IL", "IN", "JM", "JP", "KE", "KH", "KR", "LA", "MH", "MM", "MO", "MT", "MX", "MZ", "NI", "NP", "PA", "PE", "PH", "PK", "PR", "PT", "PY", "SA", "SG", "SV", "TH", "TT", "TW", "UM", "US", "VE", "VI", "WS", "YE", "ZA", "ZW"].map((r) => [r, 0]),
-  ...["AF", "BH", "DJ", "DZ", "EG", "IQ", "IR", "JO", "KW", "LY", "OM", "QA", "SD", "SY"].map((r) => [r, 6]),
-  ["MV", 5]
-]);
-function weekStartOf(tag) {
-  if (!tag) return void 0;
-  try {
-    const locale = new Intl.Locale(tag);
-    const info = typeof locale.getWeekInfo === "function" ? locale.getWeekInfo() : locale.weekInfo;
-    if (info && typeof info.firstDay === "number" && info.firstDay >= 1 && info.firstDay <= 7) return info.firstDay % 7;
-    const region = locale.region ?? locale.maximize().region;
-    if (!region) return void 0;
-    return FIRST_DAY_BY_REGION[region] ?? 1;
-  } catch {
-    return void 0;
-  }
-}
-var last = null;
-function firstDayFor(spoken, page) {
-  for (const tag of [...spoken, page]) {
-    const found = weekStartOf(tag);
-    if (found !== void 0) return found;
-  }
-  return 1;
-}
-function regionWeekStart() {
-  if (typeof document === "undefined") return 1;
-  const spoken = typeof navigator === "undefined" ? [] : navigator.languages?.length ? navigator.languages : navigator.language ? [navigator.language] : [];
-  const page = formatLocale();
-  const key = `${spoken.join(",")}|${page ?? ""}`;
-  if (last?.key === key) return last.day;
-  const day = firstDayFor(spoken, page);
-  last = { key, day };
-  return day;
-}
-function useWeekStart(own, locale) {
-  const readable = useHydrated();
-  const choice = useContext(LocaleContext);
-  if (own !== void 0) return own;
-  if (locale !== void 0) return weekStartOf(locale) ?? 1;
-  if (readable) return regionWeekStart();
-  return choice?.hasHeader ? firstDayFor(choice.spoken, choice.server) : 1;
-}
-
-// ../../showcase/src/components/Calendar/calendar-utils.ts
-var formatters = localeCache(512);
-function dtfFor(locale, options) {
-  return formatters(`${locale ?? ""}|${JSON.stringify(options)}`, () => new Intl.DateTimeFormat(locale, options));
-}
-function isSameDay(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function isSameMonth(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
-}
-function isWeekend(d) {
-  const day = d.getDay();
-  return day === 0 || day === 6;
-}
-function startOfDay(d) {
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
-}
-function startOfWeek(d, weekStartsOn = 0) {
-  const date = new Date(d);
-  const day = date.getDay();
-  const diff = (day - weekStartsOn + 7) % 7;
-  date.setDate(date.getDate() - diff);
-  return startOfDay(date);
-}
-function endOfWeek(d, weekStartsOn = 0) {
-  const start = startOfWeek(d, weekStartsOn);
-  const end = new Date(start);
-  end.setDate(end.getDate() + 6);
-  end.setHours(23, 59, 59, 999);
-  return end;
-}
-function addDays2(d, n) {
-  const result = new Date(d);
-  result.setDate(result.getDate() + n);
-  return result;
-}
-function addMonths(d, n) {
-  const result = new Date(d);
-  const day = result.getDate();
-  result.setDate(1);
-  result.setMonth(result.getMonth() + n);
-  result.setDate(Math.min(day, new Date(result.getFullYear(), result.getMonth() + 1, 0).getDate()));
-  return result;
-}
-function getMonthGrid(year, month, weekStartsOn = 0) {
-  const firstOfMonth = new Date(year, month, 1);
-  const gridStart = startOfWeek(firstOfMonth, weekStartsOn);
-  const weeks = [];
-  const current = new Date(gridStart);
-  for (let w = 0; w < 6; w++) {
-    const week = [];
-    for (let d = 0; d < 7; d++) {
-      week.push(new Date(current));
-      current.setDate(current.getDate() + 1);
-    }
-    weeks.push(week);
-  }
-  return weeks;
-}
-function getWeekDays(date, weekStartsOn = 0) {
-  const start = startOfWeek(date, weekStartsOn);
-  const days = [];
-  for (let i = 0; i < 7; i++) {
-    days.push(addDays2(start, i));
-  }
-  return days;
-}
-var DAY_MS = 864e5;
-function daysBetween(a, b) {
-  return Math.round((startOfDay(b).getTime() - startOfDay(a).getTime()) / DAY_MS);
-}
-function eventSpan(e) {
-  const first = startOfDay(e.start);
-  if (!e.end) return { first, last: first };
-  const lastInstant = e.allDay ? e.end : new Date(e.end.getTime() - 1);
-  const last2 = startOfDay(lastInstant);
-  return { first, last: last2 < first ? first : last2 };
-}
-function isBarEvent(e) {
-  if (e.allDay) return true;
-  if (!e.end) return false;
-  const dayLater = new Date(e.start);
-  dayLater.setDate(dayLater.getDate() + 1);
-  return e.end.getTime() >= dayLater.getTime();
-}
-function getEventsForDay(events, date) {
-  const day = startOfDay(date).getTime();
-  return events.filter((e) => {
-    const { first, last: last2 } = eventSpan(e);
-    return first.getTime() <= day && day <= last2.getTime();
-  });
-}
-function groupEventsByDay(events, from, to) {
-  const out = /* @__PURE__ */ new Map();
-  const lo = startOfDay(from), hi = startOfDay(to);
-  for (const e of events) {
-    const { first, last: last2 } = eventSpan(e);
-    for (let day = first < lo ? lo : first; day <= last2 && day < hi; day = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1)) {
-      const key = dayKey(day);
-      const list2 = out.get(key);
-      if (list2) list2.push(e);
-      else out.set(key, [e]);
-    }
-  }
-  return out;
-}
-function dayPieces(events, date) {
-  const dayStart = startOfDay(date);
-  const next = new Date(dayStart.getFullYear(), dayStart.getMonth(), dayStart.getDate() + 1);
-  const pieces = [];
-  for (const event of events) {
-    if (isBarEvent(event)) continue;
-    const ownDayEnd = new Date(event.start.getFullYear(), event.start.getMonth(), event.start.getDate() + 1);
-    const end = event.end && event.end > event.start ? event.end : new Date(Math.min(event.start.getTime() + 36e5, ownDayEnd.getTime()));
-    const start = event.start < dayStart ? dayStart : event.start;
-    const stop = end > next ? next : end;
-    if (stop > start) pieces.push({ event, start, end: stop });
-  }
-  return pieces.sort((a, b) => a.start.getTime() - b.start.getTime() || b.end.getTime() - a.end.getTime());
-}
-function endDays(start, end) {
-  return end > start ? daysBetween(start, new Date(end.getTime() - 1)) : daysBetween(start, end);
-}
-function makeDateWords(locale) {
-  const dtf = (options) => dtfFor(locale, options);
-  const twelveHour = () => /^h1[12]$/.test(dtf({ hour: "numeric" }).resolvedOptions().hourCycle ?? "");
-  const timeOptions = () => ({ hour: twelveHour() ? "numeric" : "2-digit", minute: "2-digit" });
-  const dayOffset = (days) => new Intl.NumberFormat(locale, { signDisplay: "always" }).format(days);
-  function monthName2(month, width = "long") {
-    return dtf({ month: width }).format(new Date(2026, month, 1));
-  }
-  function weekdayNames(weekStartsOn, width = "short") {
-    const f = dtf({ weekday: width });
-    return Array.from({ length: 7 }, (_, i) => f.format(new Date(2026, 0, 4 + weekStartsOn + i)));
-  }
-  function formatTime2(d) {
-    return dtf(timeOptions()).format(d);
-  }
-  function formatHourLabel(hour) {
-    const at = new Date(2026, 0, 5, hour);
-    return twelveHour() ? dtf({ hour: "numeric" }).format(at) : dtf({ hour: "2-digit", minute: "2-digit" }).format(at);
-  }
-  function formatTimeRange(start, end) {
-    if (!end) return formatTime2(start);
-    const f = dtf(timeOptions());
-    if (daysBetween(start, end) === 0) return f.formatRange(start, end);
-    const sep = f.formatRangeToParts(start, end).find((p) => p.source === "shared" && p.type === "literal")?.value ?? " \u2013 ";
-    const days = endDays(start, end);
-    return days === 0 ? `${f.format(start)}${sep}${f.format(end)}` : `${f.format(start)}${sep}${f.format(end)} (${dayOffset(days)})`;
-  }
-  function speakTimeRange(start, end) {
-    if (!end) return formatTime2(start);
-    const days = endDays(start, end);
-    const to = `${formatTime2(start)} to ${formatTime2(end)}`;
-    return days === 0 ? to : days === 1 ? `${to} the next day` : `${to}, ${days} days later`;
-  }
-  function formatMonthYear(d) {
-    return dtf({ month: "long", year: "numeric" }).format(d);
-  }
-  function formatDayLong(d) {
-    return dtf({ weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(d);
-  }
-  function formatDayShort(d) {
-    return dtf({ weekday: "short", day: "numeric", month: "short" }).format(d);
-  }
-  function formatDayMedium(d) {
-    return dtf({ day: "numeric", month: "short", year: "numeric" }).format(d);
-  }
-  function formatDayRange(start, end) {
-    return dtf({ day: "numeric", month: "short", year: "numeric" }).formatRange(startOfDay(start), startOfDay(end));
-  }
-  function formatMonthRange(start, end) {
-    return dtf({ month: "long", year: "numeric" }).formatRange(new Date(start.getFullYear(), start.getMonth(), 1), new Date(end.getFullYear(), end.getMonth(), 1));
-  }
-  function formatWeekRange(d, weekStartsOn = 0) {
-    return dtf({ day: "numeric", month: "short", year: "numeric" }).formatRange(startOfWeek(d, weekStartsOn), startOfDay(endOfWeek(d, weekStartsOn)));
-  }
-  function formatEventWhen(e, spoken = false) {
-    const { first, last: last2 } = eventSpan(e);
-    const multiDay = last2 > first;
-    if (e.allDay) {
-      if (!multiDay) return spoken ? formatDayLong(first) : formatDayShort(first);
-      return dtf(spoken ? { weekday: "long", day: "numeric", month: "long" } : { day: "numeric", month: "short" }).formatRange(first, last2);
-    }
-    if (!e.end || !isBarEvent(e)) {
-      const day = spoken ? formatDayLong(e.start) : formatDayShort(e.start);
-      const end = e.end && e.end > e.start ? e.end : void 0;
-      return `${day}, ${spoken ? speakTimeRange(e.start, end) : formatTimeRange(e.start, end)}`;
-    }
-    return dtf({ weekday: "short", day: "numeric", month: "short", hour: "numeric", minute: "2-digit" }).formatRange(e.start, e.end);
-  }
-  return { monthName: monthName2, weekdayNames, formatTime: formatTime2, formatHourLabel, formatTimeRange, speakTimeRange, formatMonthYear, formatDayLong, formatDayShort, formatDayMedium, formatDayRange, formatMonthRange, formatWeekRange, formatEventWhen };
-}
-var wordsByLocale = localeCache(32);
-function dateWords(locale) {
-  return wordsByLocale(locale ?? "", () => makeDateWords(locale));
-}
-function useDateWords() {
-  return dateWords(useFormatLocale());
-}
-function layoutWeek(events, days, capacity) {
-  const weekStart = startOfDay(days[0]);
-  const weekEnd = startOfDay(days[days.length - 1]);
-  const items = [];
-  for (const event of events) {
-    const { first, last: last2 } = eventSpan(event);
-    if (last2 < weekStart || first > weekEnd) continue;
-    items.push({
-      event,
-      startCol: Math.max(0, daysBetween(weekStart, first)),
-      endCol: Math.min(days.length - 1, daysBetween(weekStart, last2)),
-      before: first < weekStart,
-      after: last2 > weekEnd,
-      length: daysBetween(first, last2) + 1
-    });
-  }
-  items.sort((a, b) => {
-    const barA = isBarEvent(a.event) || a.length > 1, barB = isBarEvent(b.event) || b.length > 1;
-    if (barA !== barB) return barA ? -1 : 1;
-    if (barA && a.length !== b.length) return b.length - a.length;
-    return a.event.start.getTime() - b.event.start.getTime() || a.event.title.localeCompare(b.event.title);
-  });
-  const taken = [];
-  const laneOf = /* @__PURE__ */ new Map();
-  for (const item of items) {
-    let lane = 0;
-    while (Array.from({ length: item.endCol - item.startCol + 1 }, (_, k) => taken[lane]?.[item.startCol + k]).some(Boolean)) lane++;
-    taken[lane] ??= [];
-    for (let c = item.startCol; c <= item.endCol; c++) taken[lane][c] = true;
-    laneOf.set(item, lane);
-  }
-  const cap = Math.max(1, capacity);
-  const overflow = days.map((_, c) => items.some((it) => laneOf.get(it) >= cap && it.startCol <= c && c <= it.endCol));
-  const more = days.map((_, c) => overflow[c] ? items.filter((it) => laneOf.get(it) >= cap - 1 && it.startCol <= c && c <= it.endCol).map((it) => it.event) : []);
-  const segments = [];
-  for (const item of items) {
-    const lane = laneOf.get(item);
-    if (lane >= cap) continue;
-    if (lane < cap - 1) {
-      segments.push({ event: item.event, startCol: item.startCol, span: item.endCol - item.startCol + 1, lane, continuesBefore: item.before, continuesAfter: item.after });
-      continue;
-    }
-    let runStart = -1;
-    for (let c = item.startCol; c <= item.endCol + 1; c++) {
-      const free = c <= item.endCol && !overflow[c];
-      if (free && runStart < 0) runStart = c;
-      if (!free && runStart >= 0) {
-        segments.push({ event: item.event, startCol: runStart, span: c - runStart, lane, continuesBefore: runStart > item.startCol || item.before, continuesAfter: c - 1 < item.endCol || item.after });
-        runStart = -1;
-      }
-    }
-  }
-  const lanes = Math.min(cap, taken.length);
-  return { segments, more, lanes };
-}
-function layoutPieces(pieces, minMinutes = 0) {
-  const out = [];
-  let group = [];
-  let columnEnds = [];
-  let groupEnd = -Infinity;
-  const close = () => {
-    for (const placed of group) placed.columns = columnEnds.length;
-    out.push(...group);
-    group = [];
-    columnEnds = [];
-  };
-  for (const piece of pieces) {
-    const at = piece.start.getTime();
-    const end = Math.max(piece.end.getTime(), at + minMinutes * 6e4);
-    if (group.length && at >= groupEnd) close();
-    let column = columnEnds.findIndex((e) => e <= at);
-    if (column < 0) column = columnEnds.push(0) - 1;
-    columnEnds[column] = end;
-    groupEnd = Math.max(group.length ? groupEnd : -Infinity, end);
-    group.push({ piece, column, columns: 0 });
-  }
-  if (group.length) close();
-  return out;
-}
-function timeToFraction(d) {
-  return (d.getHours() * 60 + d.getMinutes()) / (24 * 60);
-}
 var CONTROL_HEIGHT2 = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
@@ -1237,552 +613,88 @@ var TEXT_SIZE2 = {
   md: "text-sm",
   lg: "text-base"
 };
-var ENGLISH_MONTHS = [
-  "january",
-  "february",
-  "march",
-  "april",
-  "may",
-  "june",
-  "july",
-  "august",
-  "september",
-  "october",
-  "november",
-  "december"
+var DEFAULT_DATE_RANGE_PRESETS = [
+  { label: "Today", range: () => {
+    const t = startOfDay(/* @__PURE__ */ new Date());
+    return { start: t, end: t };
+  } },
+  { label: "Last 7 days", range: () => {
+    const t = startOfDay(/* @__PURE__ */ new Date());
+    return { start: addDays(t, -6), end: t };
+  } },
+  { label: "Last 30 days", range: () => {
+    const t = startOfDay(/* @__PURE__ */ new Date());
+    return { start: addDays(t, -29), end: t };
+  } },
+  { label: "This month", range: () => {
+    const t = /* @__PURE__ */ new Date();
+    return { start: new Date(t.getFullYear(), t.getMonth(), 1), end: startOfDay(t) };
+  } },
+  { label: "Last month", range: () => {
+    const t = /* @__PURE__ */ new Date();
+    return { start: new Date(t.getFullYear(), t.getMonth() - 1, 1), end: new Date(t.getFullYear(), t.getMonth(), 0) };
+  } }
 ];
-function getDaysInMonth(year, month) {
-  return new Date(year, month + 1, 0).getDate();
-}
-function getFirstDayOfWeek(year, month, weekStartsOn) {
-  return (new Date(year, month, 1).getDay() - weekStartsOn + 7) % 7;
-}
-function isSameDay2(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function localeDayFirst(locale = formatLocale()) {
-  try {
-    const parts = new Intl.DateTimeFormat(locale).formatToParts(new Date(2e3, 11, 25));
-    return parts.findIndex((p) => p.type === "day") < parts.findIndex((p) => p.type === "month");
-  } catch {
-    return true;
-  }
-}
-var NO_SEGMENTS = { day: null, month: null, year: null };
-function validDate(year, monthIndex2, day) {
-  if (monthIndex2 < 0 || monthIndex2 > 11 || day < 1) return null;
-  const d = new Date(year, monthIndex2, day);
-  return d.getFullYear() === year && d.getMonth() === monthIndex2 && d.getDate() === day ? d : null;
-}
-function monthIndex(name, locale) {
-  const typed = name.toLocaleLowerCase().replace(/\.$/, "");
-  const fold = (m) => m.toLocaleLowerCase().replace(/\.$/, "");
-  const { monthName: monthName2 } = dateWords(locale);
-  const lists = [ENGLISH_MONTHS, Array.from({ length: 12 }, (_, i) => fold(monthName2(i, "long"))), Array.from({ length: 12 }, (_, i) => fold(monthName2(i, "short")))];
-  for (const list2 of lists) {
-    const i = list2.findIndex((m) => m.startsWith(typed) || typed.length >= 3 && typed.startsWith(m));
-    if (i >= 0) return i;
-  }
-  return -1;
-}
-function parseTypedDate(text, dayFirst = localeDayFirst(), locale = formatLocale()) {
-  const t = text.trim().replace(/\s+/g, " ");
-  if (!t) return null;
-  let m = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(t);
-  if (m) return validDate(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
-  m = /^(\p{L}{3,})\.?\s+(\d{1,2}),?\s+(\d{4})$/u.exec(t);
-  if (m) {
-    const mi = monthIndex(m[1], locale);
-    return mi < 0 ? null : validDate(Number(m[3]), mi, Number(m[2]));
-  }
-  m = /^(\d{1,2})\.?\s+(\p{L}{3,})\.?,?\s+(\d{4})$/u.exec(t);
-  if (m) {
-    const mi = monthIndex(m[2], locale);
-    return mi < 0 ? null : validDate(Number(m[3]), mi, Number(m[1]));
-  }
-  m = /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{2,4})$/.exec(t);
-  if (m) {
-    const a = Number(m[1]), b = Number(m[2]);
-    const year = m[3].length === 2 ? 2e3 + Number(m[3]) : Number(m[3]);
-    const [day, month] = a > 12 ? [a, b] : b > 12 ? [b, a] : dayFirst ? [a, b] : [b, a];
-    return validDate(year, month - 1, day);
-  }
-  return null;
-}
-function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date", disabled, className, ref, container, error = false, label, id, size: sizeProp, min, max, range: range2, weekStartsOn: weekStartsOnProp, ...wiring }) {
+function DateRangePicker({
+  value,
+  onChange: onChangeProp,
+  placeholder = "Pick a date range",
+  disabled,
+  error = false,
+  label,
+  id,
+  className,
+  ref,
+  container,
+  min,
+  max,
+  disabledDates,
+  presets = DEFAULT_DATE_RANGE_PRESETS,
+  weekStartsOn: weekStartsOnProp,
+  size: sizeProp,
+  ...wiring
+}) {
   const weekStartsOn = useWeekStart(weekStartsOnProp);
-  const locale = useFormatLocale();
-  const { formatDayLong, formatMonthYear, weekdayNames } = useDateWords();
+  const { weekdayNames, formatDayLong, formatDayMedium, formatDayRange, formatMonthRange, formatMonthYear } = useDateWords();
   const hydrated = useHydrated();
-  const today = useToday();
+  const now = useToday();
   const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
+  const [viewDate, setViewDate] = useState(() => value.start ?? /* @__PURE__ */ new Date());
   const [hover, setHover] = useState(null);
-  const [viewDate, setViewDate] = useState(() => value ?? range2?.start ?? range2?.end ?? /* @__PURE__ */ new Date());
   const triggerRef = useRef(null);
   const buttonRef = useRef(null);
   const panelRef = useRef(null);
-  const gridRef = useRef(null);
+  const isPhone = useBreakpoint("sm");
+  const presetEdges = useScrollEdges({ enabled: isPhone });
+  useRevealFocus(presetEdges.elRef, isPhone);
   const generatedId = useId();
   const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
   useInputModality();
-  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();
-  const daysInMonth = getDaysInMonth(year, month);
-  const firstDay = getFirstDayOfWeek(year, month, weekStartsOn);
-  const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
-  const isDisabledDay = (d) => !!min && d < startOf(min) || !!max && d > startOf(max);
-  const [focusDate, setFocusDate] = useState(() => startOf(value ?? range2?.start ?? range2?.end ?? /* @__PURE__ */ new Date()));
-  const [prevOpen, setPrevOpen] = useState(open);
-  if (open !== prevOpen) {
-    setPrevOpen(open);
-    if (open) {
-      const start = startOf(value ?? range2?.start ?? range2?.end ?? today ?? /* @__PURE__ */ new Date());
-      setFocusDate(start);
-      setViewDate(new Date(start.getFullYear(), start.getMonth(), 1));
-    }
-  }
-  const showDay = (d) => {
-    setFocusDate(d);
-    if (d.getFullYear() !== year || d.getMonth() !== month) setViewDate(new Date(d.getFullYear(), d.getMonth(), 1));
-  };
-  const grid = useGridKeyboard({
-    container: gridRef,
-    active: focusDate,
-    setActive: showDay,
-    keyOf: dayKey,
-    move: (from, e) => moveDay(from, e.key, e.shiftKey, weekStartsOn)
-  });
-  const prevMonth = () => {
-    setViewDate(new Date(year, month - 1, 1));
-    setFocusDate(addMonthsClamped(focusDate, -1));
-  };
-  const nextMonth = () => {
-    setViewDate(new Date(year, month + 1, 1));
-    setFocusDate(addMonthsClamped(focusDate, 1));
-  };
-  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: buttonRef, panel: panelRef, close: () => setOpen(false), tabExits: "edges" });
-  const focusActiveDay = useLatest(grid.focusActive);
-  useEffect(() => {
-    if (!open) return;
-    const raf = requestAnimationFrame(() => focusActiveDay.current());
-    return () => cancelAnimationFrame(raf);
-  }, [open, focusActiveDay]);
-  const choose = (d) => {
-    returnFocus();
-    onChange(d);
-    setOpen(false);
-  };
+  const triggerId = control.id ?? generatedId;
+  const locale = useFormatLocale();
   const dayFirst = useMemo(() => localeDayFirst(locale), [locale]);
-  const [segs, setSegs] = useState(() => value ? { day: value.getDate(), month: value.getMonth() + 1, year: value.getFullYear() } : { day: null, month: null, year: null });
-  const [buffers, setBuffers] = useState({});
-  const lastCommitted = useRef(null);
-  useEffect(() => {
-    if (value && value.getTime() === lastCommitted.current) return;
-    setSegs(value ? { day: value.getDate(), month: value.getMonth() + 1, year: value.getFullYear() } : { day: null, month: null, year: null });
-    setBuffers({});
-  }, [value]);
-  const specs = dateSegments(dayFirst, hydrated && segs.month && segs.year ? getDaysInMonth(segs.year, segs.month - 1) : 31);
-  const segmentRefs = useRef([]);
-  const focusSegment = (i) => {
-    segmentRefs.current[Math.max(0, Math.min(specs.length - 1, i))]?.focus();
-  };
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const t = e.target;
-      if (triggerRef.current?.contains(t) || panelRef.current?.contains(t)) return;
-      setOpen(false);
-    };
-    const keyHandler = (e) => {
-      if (e.key !== "Escape" || e.defaultPrevented || !isTopLayer()) return;
-      e.preventDefault();
-      returnFocus();
-      setOpen(false);
+  const focusPart = useRef(() => {
+  });
+  const [typedInvalid, setTypedInvalid] = useState(false);
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!open || !isPhone || !panel) return;
+    const fit = () => {
+      const field = triggerRef.current;
+      if (field) panel.style.width = `${field.getBoundingClientRect().width}px`;
     };
-    document.addEventListener("mousedown", handler);
-    document.addEventListener("keydown", keyHandler);
+    fit();
+    window.addEventListener("resize", fit);
     return () => {
-      document.removeEventListener("mousedown", handler);
-      document.removeEventListener("keydown", keyHandler);
+      window.removeEventListener("resize", fit);
+      panel.style.width = "";
     };
-  }, [open, isTopLayer, returnFocus]);
-  const [typedInvalid, setTypedInvalid] = useState(false);
-  const commitIfComplete = (next) => {
-    if (next.day === null || next.month === null || next.year === null) {
-      setTypedInvalid(false);
-      return;
-    }
-    const d = validDate(next.year, next.month - 1, next.day);
-    const ok = !!d && (!min || d >= min) && (!max || d <= max);
-    setTypedInvalid(!ok);
-    if (d && ok && !(value && isSameDay2(value, d))) {
-      lastCommitted.current = d.getTime();
-      onChange(d);
-      setViewDate(d);
-    }
-  };
-  const setSegment = (key, v, commit2 = true) => {
-    setSegs((cur) => {
-      const next = { ...cur, [key]: v };
-      if (commit2) commitIfComplete(next);
-      return next;
-    });
-  };
-  const applyTyped = (text) => {
-    const d = parseTypedDate(text, dayFirst, locale);
-    if (!d) return;
-    const next = { day: d.getDate(), month: d.getMonth() + 1, year: d.getFullYear() };
-    setSegs(next);
-    setBuffers({});
-    commitIfComplete(next);
-  };
-  const onSegmentKeyDown = (e, index, spec) => {
-    const key = e.key;
-    if (key === "Tab" || key === "Shift" || key === "Escape" || key.startsWith("F")) return;
-    e.preventDefault();
-    const k = spec.key;
-    const clearBuffer = () => setBuffers((b) => ({ ...b, [k]: "" }));
-    if (key === "ArrowLeft") {
-      focusSegment(index - 1);
-      return;
-    }
-    if (key === "ArrowRight") {
-      focusSegment(index + 1);
-      return;
-    }
-    if (key === "ArrowUp" || key === "ArrowDown") {
-      clearBuffer();
-      setSegment(k, stepValue(spec, segs[k], key === "ArrowUp" ? 1 : -1));
-      return;
-    }
-    if (key === "Home") {
-      clearBuffer();
-      setSegment(k, spec.min);
-      return;
-    }
-    if (key === "End") {
-      clearBuffer();
-      setSegment(k, spec.max);
-      return;
-    }
-    if (key === "Backspace" || key === "Delete") {
-      if (segs[k] === null && !buffers[k]) {
-        focusSegment(index - 1);
-        return;
-      }
-      clearBuffer();
-      setSegment(k, null, false);
-      return;
-    }
-    if (/^\d$/.test(key)) {
-      const r = typeDigit(spec, buffers[k] ?? "", key);
-      setBuffers((b) => ({ ...b, [k]: r.advance ? "" : r.buffer }));
-      setSegment(k, r.value);
-      if (r.advance) focusSegment(index + 1);
-    }
-  };
-  const drawn = hydrated ? segs : NO_SEGMENTS;
-  const shown = (spec) => {
-    const k = spec.key;
-    const b = buffers[k];
-    if (b && drawn[k] === null) return b;
-    if (drawn[k] === null) return spec.placeholder;
-    return k === "year" ? String(drawn[k]) : pad2(drawn[k]);
-  };
-  const selectDay = (day) => {
-    const d = new Date(year, month, day);
-    if (isDisabledDay(d)) return;
-    choose(d);
-  };
-  const rangeA = range2?.start ?? null;
-  const rangeB = range2?.end ?? null;
-  const otherEnd = value ? rangeA && !isSameDay2(rangeA, value) ? rangeA : rangeB : rangeA ?? rangeB;
-  const thisEnd = value ?? (otherEnd && hover ? hover : null);
-  const [bandStart, bandEnd] = otherEnd && thisEnd ? otherEnd <= thisEnd ? [otherEnd, thisEnd] : [thisEnd, otherEnd] : [null, null];
-  const inBand = (d) => !!(bandStart && bandEnd && d > bandStart && d < bandEnd);
-  const cells = [];
-  for (let i = 0; i < firstDay; i++) cells.push(null);
-  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
-  while (cells.length % 7) cells.push(null);
-  const weeks = [];
-  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",
-      {
-        ref: triggerRef,
-        "data-date-field": "",
-        role: "group",
-        id: inputId,
-        "aria-label": control.labelId ? void 0 : label ?? "Date",
-        "aria-labelledby": control.labelId,
-        "aria-describedby": control.describedBy,
-        "aria-description": !value ? placeholder : void 0,
-        "aria-invalid": control.invalid || typedInvalid || void 0,
-        onPaste: (e) => {
-          const text = e.clipboardData.getData("text");
-          if (text) {
-            e.preventDefault();
-            applyTyped(text);
-          }
-        },
-        className: cn(
-          "flex items-center gap-ds-2 w-full",
-          CONTROL_HEIGHT2[size],
-          TEXT_SIZE2[size],
-          "border-[length:var(--ds-border-width)]",
-          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",
-          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && (control.invalid || typedInvalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
-          // the segments mark which part has focus (their tint); the field draws the focus (a hover keeps its border)
-          control.invalid || typedInvalid ? ERROR_FOCUS_WITHIN_RING : FIELD_FOCUS_WITHIN_RING,
-          disabled && "opacity-disabled cursor-not-allowed",
-          "text-[var(--ds-text-primary)]"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(Icon, { name: "calendar", size: 14, className: "text-[var(--ds-text-muted)] shrink-0" }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center min-w-0 flex-1 tabular-nums", onClick: () => focusSegment(0), children: specs.map((spec, i) => {
-            const k = spec.key;
-            return /* @__PURE__ */ jsxs("span", { className: "contents", children: [
-              i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "px-[1px] text-[var(--ds-text-muted)]", children: "/" }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  ref: (el) => {
-                    segmentRefs.current[i] = el;
-                  },
-                  role: "spinbutton",
-                  tabIndex: disabled ? -1 : 0,
-                  "data-segment": spec.key,
-                  "aria-label": spec.label,
-                  "aria-valuemin": spec.min,
-                  "aria-valuemax": spec.max,
-                  "aria-valuenow": drawn[k] ?? void 0,
-                  "aria-valuetext": drawn[k] === null ? "empty" : String(drawn[k]),
-                  onKeyDown: (e) => onSegmentKeyDown(e, i, spec),
-                  onClick: (e) => e.stopPropagation(),
-                  className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-ink)] cursor-text", drawn[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
-                  children: shown(spec)
-                }
-              )
-            ] }, spec.key);
-          }) }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              ref: buttonRef,
-              type: "button",
-              "aria-label": "Choose a date",
-              "aria-haspopup": "dialog",
-              "aria-expanded": open,
-              onClick: () => !disabled && setOpen(!open),
-              disabled,
-              className: cn("shrink-0 -mr-ds-1 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] disabled:cursor-not-allowed", FOCUS_RING),
-              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 14 })
-            }
-          )
-        ]
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: panelRef,
-          role: "dialog",
-          "aria-label": "Choose a date",
-          tabIndex: -1,
-          className: cn(
-            "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)]",
-            "rounded-[var(--ds-radius-md)]",
-            "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]"
-          ),
-          style: { top: pos.top, left: pos.left },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex items-center justify-between bg-[var(--ds-bg-muted)] rounded-t-[var(--ds-radius-md)]",
-                style: { padding: "var(--ds-space-2) var(--ds-space-3)" },
-                children: [
-                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: prevMonth, "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
-                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: formatMonthYear(viewDate) }),
-                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: nextMonth, "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                ref: gridRef,
-                role: "grid",
-                "aria-label": formatMonthYear(viewDate),
-                onKeyDown: grid.onKeyDown,
-                className: "flex flex-col gap-[4px] tabular-nums",
-                style: { padding: "var(--ds-space-2) var(--ds-space-3)" },
-                children: [
-                  /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-[4px] mb-ds-0.5", children: weekdayNames(weekStartsOn, "narrow").map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": weekdayNames(weekStartsOn, "long")[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, i)) }),
-                  weeks.map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-[4px]", onMouseLeave: () => setHover(null), children: week.map((day, i) => {
-                    if (day === null) return /* @__PURE__ */ jsx("div", { role: "gridcell" }, `empty-${i}`);
-                    const dateObj = new Date(year, month, day);
-                    const isSelected = !!value && isSameDay2(dateObj, value);
-                    const isOtherEnd = !!otherEnd && isSameDay2(dateObj, otherEnd);
-                    const isToday = today !== null && isSameDay2(dateObj, today);
-                    const between = inBand(dateObj);
-                    const dis = isDisabledDay(dateObj);
-                    return /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        role: "gridcell",
-                        "data-grid-key": dayKey(dateObj),
-                        tabIndex: grid.tabIndexOf(dateObj),
-                        "aria-disabled": dis || void 0,
-                        onClick: () => selectDay(day),
-                        onFocus: () => {
-                          if (!isSameDay2(dateObj, focusDate)) setFocusDate(dateObj);
-                        },
-                        onMouseEnter: () => setHover(dateObj),
-                        "aria-selected": isSelected,
-                        "aria-current": isToday ? "date" : void 0,
-                        "aria-label": formatDayLong(dateObj),
-                        className: cn(
-                          "w-full aspect-square flex items-center justify-center text-xs",
-                          "transition-colors cursor-pointer",
-                          FOCUS_RING,
-                          isSelected ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : isOtherEnd ? "bg-[var(--ds-accent-muted)] text-[var(--ds-accent-subtle-text)] font-semibold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : isToday ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-ink)] text-[var(--ds-accent-ink)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
-                          dis && "opacity-disabled cursor-not-allowed hover:bg-transparent"
-                        ),
-                        children: day
-                      },
-                      day
-                    );
-                  }) }, w))
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "flex justify-between items-center bg-[var(--ds-bg-muted)] border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-b-[var(--ds-radius-md)]",
-                style: { padding: "var(--ds-space-2) var(--ds-space-3)" },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "ghost",
-                      size: "sm",
-                      onClick: () => {
-                        const now = /* @__PURE__ */ new Date();
-                        setViewDate(now);
-                        choose(now);
-                      },
-                      children: "Today"
-                    }
-                  ),
-                  value && /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "ghost",
-                      size: "sm",
-                      onClick: () => choose(null),
-                      children: "Clear"
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      container ?? document.body
-    )
-  ] });
-}
-var CONTROL_HEIGHT3 = {
-  sm: "h-[var(--ds-control-height-sm)]",
-  md: "h-[var(--ds-control-height-md)]",
-  lg: "h-[var(--ds-control-height-lg)]"
-};
-var TEXT_SIZE3 = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-base"
-};
-var DEFAULT_DATE_RANGE_PRESETS = [
-  { label: "Today", range: () => {
-    const t = startOfDay(/* @__PURE__ */ new Date());
-    return { start: t, end: t };
-  } },
-  { label: "Last 7 days", range: () => {
-    const t = startOfDay(/* @__PURE__ */ new Date());
-    return { start: addDays2(t, -6), end: t };
-  } },
-  { label: "Last 30 days", range: () => {
-    const t = startOfDay(/* @__PURE__ */ new Date());
-    return { start: addDays2(t, -29), end: t };
-  } },
-  { label: "This month", range: () => {
-    const t = /* @__PURE__ */ new Date();
-    return { start: new Date(t.getFullYear(), t.getMonth(), 1), end: startOfDay(t) };
-  } },
-  { label: "Last month", range: () => {
-    const t = /* @__PURE__ */ new Date();
-    return { start: new Date(t.getFullYear(), t.getMonth() - 1, 1), end: new Date(t.getFullYear(), t.getMonth(), 0) };
-  } }
-];
-function DateRangePicker({
-  value,
-  onChange: onChangeProp,
-  placeholder = "Pick a date range",
-  disabled,
-  error = false,
-  label,
-  id,
-  className,
-  ref,
-  container,
-  min,
-  max,
-  presets = DEFAULT_DATE_RANGE_PRESETS,
-  weekStartsOn: weekStartsOnProp,
-  size: sizeProp,
-  ...wiring
-}) {
-  const weekStartsOn = useWeekStart(weekStartsOnProp);
-  const { weekdayNames, formatDayLong, formatDayMedium, formatDayRange, formatMonthRange, formatMonthYear } = useDateWords();
-  const hydrated = useHydrated();
-  const now = useToday();
-  const onChange = useReportedChange(onChangeProp, value);
-  const contextSize = useContext(ControlSizeContext);
-  const size = sizeProp ?? contextSize ?? "md";
-  const [open, setOpen] = useState(false);
-  const [viewDate, setViewDate] = useState(() => value.start ?? /* @__PURE__ */ new Date());
-  const [hover, setHover] = useState(null);
-  const triggerRef = useRef(null);
-  const panelRef = useRef(null);
-  const generatedId = useId();
-  const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
-  useInputModality();
-  const triggerId = control.id ?? generatedId;
-  const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : void 0;
+  }, [open, isPhone]);
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
+  const invalid = control.invalid || typedInvalid;
   const today = now && startOfDay(now);
   const dayNames = weekdayNames(weekStartsOn, "narrow");
   const dayNamesLong = weekdayNames(weekStartsOn, "long");
@@ -1799,8 +711,8 @@ function DateRangePicker({
   }
   const showDay = (d) => {
     setFocusDate(d);
-    const monthIndex2 = (x) => x.getFullYear() * 12 + x.getMonth();
-    const offset = monthIndex2(d) - monthIndex2(viewDate);
+    const monthIndex = (x) => x.getFullYear() * 12 + x.getMonth();
+    const offset = monthIndex(d) - monthIndex(viewDate);
     if (offset < 0) setViewDate(new Date(d.getFullYear(), d.getMonth(), 1));
     else if (offset > 1) setViewDate(new Date(d.getFullYear(), d.getMonth() - 1, 1));
   };
@@ -1815,7 +727,7 @@ function DateRangePicker({
     setViewDate(addMonths(viewDate, n));
     setFocusDate(addMonthsClamped(focusDate, n));
   };
-  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: triggerRef, panel: panelRef, close: () => setOpen(false), tabExits: "edges" });
+  const { isTop: isTopLayer, returnFocus } = usePopupFocus(open, { trigger: buttonRef, panel: panelRef, close: () => setOpen(false), tabExits: "edges" });
   const focusActiveDay = useLatest(grid.focusActive);
   useEffect(() => {
     if (!open) return;
@@ -1842,7 +754,20 @@ function DateRangePicker({
       document.removeEventListener("keydown", onKey);
     };
   }, [open, isTopLayer, returnFocus]);
-  const isDisabledDay = (d) => min && d < startOfDay(min) || max && d > startOfDay(max) || false;
+  const isDisabledDay = (d) => min && d < startOfDay(min) || max && d > startOfDay(max) || isExcludedDay(disabledDates, d);
+  const takeTyped = ([s, e], [fs, fe]) => {
+    const refused = (d, filled) => filled && (!d || isDisabledDay(d));
+    const start = fs ? s : value.start;
+    const end = fe ? e : value.end;
+    const bad = refused(s, fs) || refused(e, fe) || !!start && !!end && end < start;
+    setTypedInvalid(bad);
+    if (bad) return;
+    const same = (a, b) => a && b ? isSameDay(a, b) : a === b;
+    if (!same(start, value.start) || !same(end, value.end)) {
+      onChange({ start, end });
+      if (start) setViewDate(start);
+    }
+  };
   const selectDay = (d) => {
     if (isDisabledDay(d)) return;
     if (!value.start || value.start && value.end) {
@@ -1861,44 +786,70 @@ function DateRangePicker({
   const rangeStart = value.start;
   const rangeEnd2 = value.end ?? previewEnd;
   const inRange = (d) => !!(rangeStart && rangeEnd2 && d > rangeStart && d < rangeEnd2);
-  const months = [viewDate, addMonths(viewDate, 1)];
+  const months = isPhone ? [viewDate] : [viewDate, addMonths(viewDate, 1)];
   const summary = !hydrated ? null : value.start && value.end ? formatDayRange(value.start, value.end) : value.start ? `${formatDayMedium(value.start)} \u2013 \u2026` : null;
-  const pendingValue = !hydrated && !!value.start;
   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",
+      "div",
       {
-        id: triggerId,
         ref: triggerRef,
-        type: "button",
-        onClick: () => !disabled && setOpen((o) => !o),
-        disabled,
-        "aria-labelledby": labelledBy,
+        "data-date-range-field": "",
+        role: "group",
+        id: triggerId,
+        "aria-label": control.labelId ? void 0 : label ?? control.label ?? "Dates",
+        "aria-labelledby": control.labelId,
         "aria-describedby": control.describedBy,
-        "aria-invalid": control.invalid || void 0,
-        "aria-haspopup": "dialog",
-        "aria-expanded": open,
+        "aria-description": !value.start && !value.end ? placeholder : void 0,
+        "aria-invalid": invalid || void 0,
         className: cn(
           "flex items-center gap-ds-2 w-full",
-          CONTROL_HEIGHT3[size],
-          TEXT_SIZE3[size],
+          CONTROL_HEIGHT2[size],
+          TEXT_SIZE2[size],
           "border-[length:var(--ds-border-width)]",
-          control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
+          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",
+          "transition-colors",
           "px-ds-3 py-ds-2",
-          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
-          open && (control.invalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
-          control.invalid ? ERROR_FOCUS_RING : FIELD_FOCUS_RING,
+          !invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
+          open && (invalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
+          // the parts mark which has focus (their tint); the field draws the focus, as DatePicker's does
+          invalid ? ERROR_FOCUS_WITHIN_RING : FIELD_FOCUS_WITHIN_RING,
           disabled && "opacity-disabled cursor-not-allowed",
-          summary ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
+          "text-[var(--ds-text-primary)]"
         ),
         children: [
-          /* @__PURE__ */ jsx(Icon, { name: "calendar", size: 14, className: "text-[var(--ds-text-muted)]" }),
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: summary ?? (pendingValue ? "" : placeholder) })
+          /* @__PURE__ */ jsx(Icon, { name: "calendar", size: 14, className: "text-[var(--ds-text-muted)] shrink-0" }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center min-w-0 flex-1 tabular-nums overflow-hidden", onClick: () => focusPart.current(0), children: /* @__PURE__ */ jsx(
+            DateSegmentFields,
+            {
+              values: [value.start, value.end],
+              names: ["Start", "End"],
+              dayFirst,
+              hydrated,
+              disabled,
+              focusRef: (focus) => {
+                focusPart.current = focus;
+              },
+              onChange: takeTyped
+            }
+          ) }),
+          /* @__PURE__ */ jsx(AutoTooltip, { content: "Choose a date range", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: buttonRef,
+              type: "button",
+              "aria-label": "Choose a date range",
+              "aria-haspopup": "dialog",
+              "aria-expanded": open,
+              onClick: () => !disabled && setOpen((o) => !o),
+              disabled,
+              className: cn("shrink-0 -mr-ds-1 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] disabled:cursor-not-allowed", FOCUS_RING),
+              children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 14 })
+            }
+          ) })
         ]
       }
     ),
@@ -1912,6 +863,9 @@ function DateRangePicker({
           tabIndex: -1,
           className: cn(
             "fixed z-[var(--ds-z-popover)] flex outline-none",
+            // on a phone the panel stays inside the screen: its quick ranges above the month, the month scrolling under
+            // them if it must, and its footer, with Clear, always in view (item 35)
+            isPhone && "flex-col max-w-[calc(100vw-16px)] max-h-[calc(100dvh-16px)]",
             "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)]",
@@ -1920,57 +874,73 @@ function DateRangePicker({
           ),
           style: { top: pos.top, left: pos.left },
           children: [
-            presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-ds-0.5 p-ds-2 border-r-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] min-w-[140px]", children: presets.map((p) => /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "justify-start", onClick: () => {
-              const r = p.range();
-              returnFocus();
-              onChange(r);
-              setViewDate(r.start ?? /* @__PURE__ */ new Date());
-              setOpen(false);
-            }, children: p.label }, p.label)) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between bg-[var(--ds-bg-muted)] rounded-tr-[var(--ds-radius-md)] px-ds-3 py-ds-2", children: [
+            presets.length > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-range-presets": "",
+                ref: isPhone ? presetEdges.ref : void 0,
+                ...isPhone ? presetEdges.fadeProps : {},
+                className: cn(
+                  "border-[var(--ds-border-subtle)]",
+                  isPhone ? "flex flex-nowrap gap-ds-1.5 overflow-x-auto px-ds-3 py-ds-2.5 scroll-p-[4px] border-b-[length:var(--ds-border-width)] shrink-0 [scrollbar-width:none]" : "p-ds-2 flex flex-col gap-ds-0.5 border-r-[length:var(--ds-border-width)] min-w-[140px]"
+                ),
+                children: presets.map((p) => /* @__PURE__ */ jsx(Button, { type: "button", variant: isPhone ? "secondary" : "ghost", size: "sm", className: isPhone ? "shrink-0 whitespace-nowrap rounded-[var(--ds-radius-full)]" : "justify-start", onClick: () => {
+                  const r = p.range();
+                  returnFocus();
+                  onChange(r);
+                  setViewDate(r.start ?? /* @__PURE__ */ new Date());
+                  setOpen(false);
+                }, children: p.label }, p.label))
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", isPhone && "min-h-0"), children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between bg-[var(--ds-bg-muted)] px-ds-3 py-ds-2 shrink-0", !isPhone && "rounded-tr-[var(--ds-radius-md)]"), children: [
                 /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pageMonths(-1), "aria-label": "Previous month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" }) }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: formatMonthRange(months[0], months[1]) }),
-                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pageMonths(1), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
-              ] }),
-              /* @__PURE__ */ jsx("div", { ref: gridRef, onKeyDown: grid.onKeyDown, className: "flex gap-ds-4 px-ds-3 py-ds-2", onMouseLeave: () => setHover(null), children: months.map((m) => /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": formatMonthYear(m), className: "w-[224px] flex flex-col gap-[4px]", children: [
-                /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-[4px] mb-ds-0.5", children: dayNames.map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": dayNamesLong[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, i)) }),
-                getMonthGrid(m.getFullYear(), m.getMonth(), weekStartsOn).map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-[4px]", children: week.map((d) => {
-                  if (!isSameMonth(d, m)) return /* @__PURE__ */ jsx("div", { role: "gridcell" }, d.toISOString());
-                  const isStart = !!rangeStart && isSameDay(d, rangeStart);
-                  const isEnd = !!rangeEnd2 && isSameDay(d, rangeEnd2);
-                  const between = inRange(d);
-                  const dis = isDisabledDay(d);
-                  return /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      role: "gridcell",
-                      "data-grid-key": dayKey(d),
-                      tabIndex: grid.tabIndexOf(d),
-                      "aria-disabled": dis || void 0,
-                      onClick: () => selectDay(d),
-                      onFocus: () => {
-                        if (!isSameDay(d, focusDate)) setFocusDate(d);
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: months[1] ? formatMonthRange(months[0], months[1]) : formatMonthYear(months[0]) }),
+                /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pageMonths(1), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
+              ] }),
+              /* @__PURE__ */ jsx("div", { ref: gridRef, onKeyDown: grid.onKeyDown, className: cn("flex gap-ds-4 px-ds-3 py-ds-2", isPhone && "min-h-0 overflow-y-auto"), onMouseLeave: () => setHover(null), children: months.map((m) => (
+                // on a phone the one month fills the panel, its days a comfortable tap (the look check's second round)
+                /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": formatMonthYear(m), className: cn(isPhone ? "w-full" : "w-[224px]", "flex flex-col gap-[4px]"), children: [
+                  /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-[4px] mb-ds-0.5", children: dayNames.map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": dayNamesLong[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, i)) }),
+                  getMonthGrid(m.getFullYear(), m.getMonth(), weekStartsOn).map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-[4px]", children: week.map((d) => {
+                    if (!isSameMonth(d, m)) return /* @__PURE__ */ jsx("div", { role: "gridcell" }, d.toISOString());
+                    const isStart = !!rangeStart && isSameDay(d, rangeStart);
+                    const isEnd = !!rangeEnd2 && isSameDay(d, rangeEnd2);
+                    const between = inRange(d);
+                    const dis = isDisabledDay(d);
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "gridcell",
+                        "data-grid-key": dayKey(d),
+                        tabIndex: grid.tabIndexOf(d),
+                        "aria-disabled": dis || void 0,
+                        onClick: () => selectDay(d),
+                        onFocus: () => {
+                          if (!isSameDay(d, focusDate)) setFocusDate(d);
+                        },
+                        onMouseEnter: () => setHover(d),
+                        "aria-selected": isStart || isEnd || between,
+                        "aria-current": today !== null && isSameDay(d, today) ? "date" : void 0,
+                        "aria-label": formatDayLong(d),
+                        className: cn(
+                          "w-full aspect-square flex items-center justify-center",
+                          isPhone ? "text-sm" : "text-xs",
+                          "transition-colors cursor-pointer",
+                          FOCUS_RING,
+                          isStart || isEnd ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : today !== null && isSameDay(d, today) ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-ink)] text-[var(--ds-accent-ink)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
+                          dis && "opacity-disabled cursor-not-allowed hover:bg-transparent"
+                        ),
+                        children: d.getDate()
                       },
-                      onMouseEnter: () => setHover(d),
-                      "aria-selected": isStart || isEnd || between,
-                      "aria-current": today !== null && isSameDay(d, today) ? "date" : void 0,
-                      "aria-label": formatDayLong(d),
-                      className: cn(
-                        "w-full aspect-square flex items-center justify-center text-xs",
-                        "transition-colors cursor-pointer",
-                        FOCUS_RING,
-                        isStart || isEnd ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : today !== null && isSameDay(d, today) ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-ink)] text-[var(--ds-accent-ink)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
-                        dis && "opacity-disabled cursor-not-allowed hover:bg-transparent"
-                      ),
-                      children: d.getDate()
-                    },
-                    d.toISOString()
-                  );
-                }) }, w))
-              ] }, `${m.getFullYear()}-${m.getMonth()}`)) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center bg-[var(--ds-bg-muted)] border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-br-[var(--ds-radius-md)] px-ds-3 py-ds-2", children: [
+                      d.toISOString()
+                    );
+                  }) }, w))
+                ] }, `${m.getFullYear()}-${m.getMonth()}`)
+              )) }),
+              /* @__PURE__ */ jsxs("div", { className: cn("flex justify-between items-center bg-[var(--ds-bg-muted)] border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] px-ds-3 py-ds-2 shrink-0", isPhone ? "rounded-b-[var(--ds-radius-md)]" : "rounded-br-[var(--ds-radius-md)]"), children: [
                 /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)]", children: value.start && !value.end ? "Now pick an end date" : summary ?? "Pick a start date" }),
                 (value.start || value.end) && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
                   onChange({ start: null, end: null });
@@ -2103,10 +1073,10 @@ var atDay = (year, month, day, time) => new Date(year, month, day, time.getHours
 var dayIndex = (d) => Math.round(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()) / 864e5);
 var isMidnight = (d) => d.getHours() === 0 && d.getMinutes() === 0 && d.getSeconds() === 0 && d.getMilliseconds() === 0;
 function nthWeekdayOf(year, month, week, weekday2) {
-  const last2 = daysIn(year, month);
-  if (week === -1) return last2 - (new Date(year, month, last2).getDay() - weekday2 + 7) % 7;
+  const last = daysIn(year, month);
+  if (week === -1) return last - (new Date(year, month, last).getDay() - weekday2 + 7) % 7;
   const day = 1 + (weekday2 - new Date(year, month, 1).getDay() + 7) % 7 + (week - 1) * 7;
-  return day <= last2 ? day : null;
+  return day <= last ? day : null;
 }
 function nthOf(date) {
   const d = date.getDate();
@@ -2179,8 +1149,8 @@ function occurrenceAt(event, start) {
 }
 function stopOf(event) {
   if (event.allDay) {
-    const last2 = event.end ?? event.start;
-    return new Date(last2.getFullYear(), last2.getMonth(), last2.getDate() + 1);
+    const last = event.end ?? event.start;
+    return new Date(last.getFullYear(), last.getMonth(), last.getDate() + 1);
   }
   return event.end ?? new Date(event.start.getTime() + 36e5);
 }
@@ -2746,8 +1716,8 @@ var sizeClasses = {
   full: "max-w-[calc(100vw-2rem)]"
 };
 function Dialog({ open, onClose: onCloseProp, title, description, children, footer, variant = "default", size = "md", alert = false, container, onSubmit, dirty, onDiscard }) {
-  const { marked, mark } = useOverlayMark(open);
-  const guard = useDirtyGuard(dirty ?? marked, onCloseProp, onDiscard);
+  const { marked, pending, mark } = useOverlayMark(open);
+  const guard = useDirtyGuard((dirty ?? marked) || pending, onCloseProp, onDiscard);
   const onClose = guard.requestClose;
   const titleId = useId();
   const descriptionId = useId();
@@ -2756,7 +1726,13 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
   const dialogRef = useRef(null);
   const opener = useRef(null);
   const defaultButtonRef = useRef(null);
-  const bodyRef = useScrollbarInset();
+  const bodyInset = useScrollbarInset();
+  const [bodyEl, setBodyEl] = useState(null);
+  const bodyRef = useCallback((el) => {
+    bodyInset(el);
+    setBodyEl(el);
+  }, [bodyInset]);
+  useKeyboardScroll(bodyEl, title, open);
   const onCloseRef = useLatest(onClose);
   const onSubmitRef = useLatest(onSubmit);
   const isTopLayer = useOverlayLayer(open);
@@ -2764,8 +1740,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
   const before = useFocusBeforeOpen(open);
   useEffect(() => {
     if (!open) return;
-    const active = before.current;
-    opener.current = active instanceof HTMLElement && active !== document.body && active.isConnected ? rememberFocus(active) : null;
+    opener.current = rememberOpener(before.current, dialogRef.current);
   }, [open, before]);
   useEffect(() => {
     if (!open) return;
@@ -2880,7 +1855,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                           ),
                           description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description })
                         ] }),
-                        /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx(AutoTooltip, { content: "Close", children: /* @__PURE__ */ jsx(
                           "button",
                           {
                             type: "button",
@@ -2890,13 +1865,13 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                             "aria-label": "Close",
                             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
                           }
-                        )
+                        ) })
                       ] }),
                       children && /* @__PURE__ */ jsx(
                         "div",
                         {
                           ref: bodyRef,
-                          className: "min-h-0 flex-[0_1_auto] overflow-y-auto pb-ds-6",
+                          className: cn("min-h-0 flex-[0_1_auto] overflow-y-auto pb-ds-6", FOCUS_INSET),
                           style: {
                             paddingLeft: variant === "destructive" ? "calc(var(--ds-page-gutter) + 2.5rem + var(--ds-space-3))" : "var(--ds-page-gutter)",
                             paddingRight: insetLessScrollbar("var(--ds-page-gutter)")
@@ -3112,7 +2087,7 @@ var running = (item) => item.status === "queued" || item.status === "uploading";
 var failureOf = (err) => err instanceof Error && err.message ? err.message : "The upload didn't work.";
 var percentOf = (value) => typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
 var STILL_UPLOADING = "Wait for your files to finish uploading";
-function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accept, multiple = true, maxSize, className, error = false, label, id }) {
+function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accept, multiple = true, maxSize, className, error = false, label, id, "aria-label": ariaLabel }) {
   const controlled = files !== void 0;
   const [own, setOwn] = useState([]);
   const shown = controlled ? files : own;
@@ -3248,10 +2223,10 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
       focusAfterRemoval(rows, gone.index, inputRef.current);
       return;
     }
-    const last2 = lastAction.current;
+    const last = lastAction.current;
     const active = document.activeElement;
-    if (!last2 || last2.el.isConnected || active && active !== document.body) return;
-    const row = Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).find((li) => li.dataset.uploadId === last2.id);
+    if (!last || last.el.isConnected || active && active !== document.body) return;
+    const row = Array.from(listRef.current?.querySelectorAll(":scope > li") ?? []).find((li) => li.dataset.uploadId === last.id);
     row?.querySelector("button")?.focus();
   }, [shown]);
   const addFiles = useCallback(
@@ -3343,6 +2318,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
                 accept,
                 multiple,
                 className: "sr-only",
+                "aria-label": field ? void 0 : ariaLabel,
                 "aria-labelledby": field ? field.labelId : void 0,
                 "aria-describedby": describedBy,
                 "aria-invalid": invalid || void 0,
@@ -3566,12 +2542,12 @@ function fromValue(v, use24Hour) {
   const h24 = Number(m[1]);
   return use24Hour ? { hour: h24, minute: Number(m[2]), period: null } : { hour: h24 % 12 === 0 ? 12 : h24 % 12, minute: Number(m[2]), period: h24 >= 12 ? "PM" : "AM" };
 }
-var CONTROL_HEIGHT4 = {
+var CONTROL_HEIGHT3 = {
   sm: "h-[var(--ds-control-height-sm)]",
   md: "h-[var(--ds-control-height-md)]",
   lg: "h-[var(--ds-control-height-lg)]"
 };
-var TEXT_SIZE4 = {
+var TEXT_SIZE3 = {
   sm: "text-xs",
   md: "text-sm",
   lg: "text-base"
@@ -3664,7 +2640,7 @@ function TimePicker({
     if (!open) return;
     const id2 = requestAnimationFrame(() => {
       const panel = panelRef.current;
-      (panel?.querySelector('[data-selected="true"]') ?? panel?.querySelector("button"))?.focus();
+      (panel?.querySelector('[aria-selected="true"]') ?? panel?.querySelector("button"))?.focus();
     });
     return () => cancelAnimationFrame(id2);
   }, [open]);
@@ -3680,7 +2656,7 @@ function TimePicker({
       const columns2 = Array.from(panelRef.current?.querySelectorAll("[data-column]") ?? []);
       const idx = columns2.indexOf(column);
       const target = columns2[idx + (e.key === "ArrowRight" ? 1 : -1)];
-      next = target?.querySelector('[data-selected="true"]') ?? target?.querySelector("button") ?? null;
+      next = target?.querySelector('[aria-selected="true"]') ?? target?.querySelector("button") ?? null;
     } else return;
     if (next instanceof HTMLElement) {
       e.preventDefault();
@@ -3804,17 +2780,34 @@ function TimePicker({
       return;
     }
     if (/^\d$/.test(key)) {
-      const r = typeDigit(spec, buffers[k] ?? "", key);
-      setBuffers((b) => ({ ...b, [k]: r.advance ? "" : r.buffer }));
-      setSegment(k, r.value);
-      if (r.advance) focusSegment(index + 1);
+      typeInto(index, key);
       return;
     }
     if (!use24Hour && /^[aApP]$/.test(key)) {
       setSegment("period", /^[aA]$/.test(key) ? "AM" : "PM");
       return;
     }
+    if (separatorMovesOn(TIME_SEPARATORS, key, !!buffers[k] || segs[k] !== null)) focusSegment(index + 1);
   };
+  const typeInto = (index, digit) => {
+    const spec = specs[index];
+    const k = spec.key;
+    const r = typeDigit(spec, buffers[k] ?? "", digit);
+    if (r.kind === "here") {
+      setBuffers((b) => ({ ...b, [k]: r.buffer }));
+      setSegment(k, r.value);
+      return;
+    }
+    const nextSpec = specs[index + 1];
+    if (!nextSpec) return;
+    focusSegment(index + 1);
+    const carried = typeDigit(nextSpec, "", digit);
+    if (carried.kind !== "here") return;
+    const nk = nextSpec.key;
+    setBuffers((b) => ({ ...b, [nk]: carried.buffer }));
+    setSegment(nk, carried.value);
+  };
+  const freshSegment = (k) => setBuffers((b) => b[k] ? { ...b, [k]: "" } : b);
   const shown = (k, spec) => {
     const b = buffers[k];
     if (b && segs[k] === null) return b;
@@ -3829,7 +2822,7 @@ function TimePicker({
         "data-time-field": "",
         role: "group",
         id: control.id,
-        "aria-label": control.labelId ? void 0 : "Time",
+        "aria-label": control.labelId ? void 0 : control.label ?? "Time",
         "aria-labelledby": control.labelId,
         "aria-describedby": control.describedBy,
         "aria-invalid": control.invalid || void 0,
@@ -3842,8 +2835,8 @@ function TimePicker({
         },
         className: cn(
           "flex w-full items-center gap-ds-2",
-          CONTROL_HEIGHT4[size],
-          TEXT_SIZE4[size],
+          CONTROL_HEIGHT3[size],
+          TEXT_SIZE3[size],
           "border-[length:var(--ds-border-width)]",
           control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)]",
           "bg-[var(--ds-input-bg)] rounded-[var(--ds-radius-md)]",
@@ -3879,6 +2872,8 @@ function TimePicker({
                     "aria-valuenow": segs[k] ?? void 0,
                     "aria-valuetext": segs[k] === null ? "empty" : pad2(segs[k]),
                     onKeyDown: (e) => onSegmentKeyDown(e, i, spec),
+                    onFocus: () => freshSegment(k),
+                    onMouseDown: () => freshSegment(k),
                     onClick: (e) => e.stopPropagation(),
                     className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-ink)] cursor-text", segs[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
                     children: shown(k, spec)
@@ -3907,7 +2902,7 @@ function TimePicker({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(AutoTooltip, { content: "Choose a time", children: /* @__PURE__ */ jsx(
             "button",
             {
               ref: buttonRef,
@@ -3921,7 +2916,7 @@ function TimePicker({
               className: cn("shrink-0 -mr-ds-1 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] disabled:cursor-not-allowed", FOCUS_RING),
               children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 14 })
             }
-          )
+          ) })
         ]
       }
     ),
@@ -3944,13 +2939,14 @@ function TimePicker({
           ),
           style: { top: pos.top, left: pos.left },
           children: /* @__PURE__ */ jsxs("div", { ref: setColumns, className: "inline-flex p-ds-1 gap-ds-1 tabular-nums", children: [
-            /* @__PURE__ */ jsx("div", { "data-column": true, className: "flex max-h-48 w-[calc(var(--ds-space-10)+8px)] flex-col gap-[4px] overflow-y-auto p-[4px] scroll-p-[4px]", children: hours.map((h, i) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { "data-column": true, role: "listbox", "aria-label": "Hours", className: "flex max-h-48 w-[calc(var(--ds-space-10)+8px)] flex-col gap-[4px] overflow-y-auto p-[4px] scroll-p-[4px]", children: hours.map((h, i) => /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
+                role: "option",
                 tabIndex: i === stopOf2("hour", chosenHour) ? 0 : -1,
                 onFocus: () => holdStop("hour", i),
-                "data-selected": use24Hour ? h === parseInt(value) : h === parsed.hour,
+                "aria-selected": use24Hour ? h === parseInt(value) : h === parsed.hour,
                 onMouseDown: (e) => e.preventDefault(),
                 onClick: () => emitChange(h, parsed.minute, parsed.period),
                 className: cn(
@@ -3964,13 +2960,14 @@ function TimePicker({
               h
             )) }),
             /* @__PURE__ */ jsx("div", { className: "w-px bg-[var(--ds-border-subtle)]" }),
-            /* @__PURE__ */ jsx("div", { "data-column": true, className: "flex max-h-48 w-[calc(var(--ds-space-10)+8px)] flex-col gap-[4px] overflow-y-auto p-[4px] scroll-p-[4px]", children: minutes.map((m, i) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { "data-column": true, role: "listbox", "aria-label": "Minutes", className: "flex max-h-48 w-[calc(var(--ds-space-10)+8px)] flex-col gap-[4px] overflow-y-auto p-[4px] scroll-p-[4px]", children: minutes.map((m, i) => /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
+                role: "option",
                 tabIndex: i === stopOf2("minute", chosenMinute) ? 0 : -1,
                 onFocus: () => holdStop("minute", i),
-                "data-selected": m === parsed.minute,
+                "aria-selected": m === parsed.minute,
                 onMouseDown: (e) => e.preventDefault(),
                 onClick: () => emitChange(parsed.hour, m, parsed.period),
                 className: cn(
@@ -3985,13 +2982,14 @@ function TimePicker({
             )) }),
             !use24Hour && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("div", { className: "w-px bg-[var(--ds-border-subtle)]" }),
-              /* @__PURE__ */ jsx("div", { "data-column": true, className: "flex flex-col gap-[4px] w-ds-10", children: ["AM", "PM"].map((p, i) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { "data-column": true, role: "listbox", "aria-label": "AM or PM", className: "flex flex-col gap-[4px] w-ds-10", children: ["AM", "PM"].map((p, i) => /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
+                  role: "option",
                   tabIndex: i === stopOf2("period", chosenPeriod) ? 0 : -1,
                   onFocus: () => holdStop("period", i),
-                  "data-selected": p === parsed.period,
+                  "aria-selected": p === parsed.period,
                   onMouseDown: (e) => e.preventDefault(),
                   onClick: () => emitChange(parsed.hour, parsed.minute, p),
                   className: cn(
@@ -4054,6 +3052,9 @@ function getPaletteClasses(color, variant) {
   const styleFn = paletteByVariant[variant] ?? paletteByVariant.subtle;
   return styleFn(color);
 }
+var SELECTED = "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)]";
+var selectedEdge = (bordered) => bordered ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-ink)]" : "shadow-[inset_0_0_0_var(--ds-border-width)_var(--ds-accent-ink)]";
+var LABEL_FOCUS_RING = "has-[>[data-tag-label]:focus-visible]:outline-2 has-[>[data-tag-label]:focus-visible]:outline-solid has-[>[data-tag-label]:focus-visible]:outline-offset-2 has-[>[data-tag-label]:focus-visible]:outline-[var(--ds-focus)] has-[>[data-tag-label]:focus-visible]:shadow-none";
 var Tag = forwardRef(function Tag2({
   variant = "default",
   size = "md",
@@ -4061,44 +3062,62 @@ var Tag = forwardRef(function Tag2({
   maxWidth,
   onRemove,
   onClick,
+  selected,
   disabled = false,
   className,
   children
 }, ref) {
+  const chipRef = useRef(null);
+  const setChip = (el) => {
+    chipRef.current = el;
+    if (typeof ref === "function") ref(el);
+    else if (ref) ref.current = el;
+  };
   const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1 });
   const handleRemove = (e) => {
     e.stopPropagation();
+    focusAfterSelfRemoval(e.currentTarget, { item: chipRef.current });
     onRemove?.();
   };
-  const colorClasses = color ? getPaletteClasses(color, variant) : variantStyles[variant];
+  const clickable = !!onClick;
+  const isSelected = !!onClick && !!selected;
+  const bordered = variant === "outline" || !color && (variant === "success" || variant === "warning" || variant === "error");
+  const colorClasses = isSelected ? cn(SELECTED, selectedEdge(bordered)) : color ? getPaletteClasses(color, variant) : variantStyles[variant];
+  const label = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isSelected && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-flex shrink-0 mr-[calc(var(--ds-space-1)*0.5)]", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: size === "sm" ? 10 : 12 }) }),
+    /* @__PURE__ */ jsx("span", { ref: truncRef, className: "truncate min-w-0", children })
+  ] });
   const tag = /* @__PURE__ */ jsxs(
     "span",
     {
-      ref,
-      role: onClick ? "button" : void 0,
-      tabIndex: onClick && !disabled ? 0 : void 0,
-      "aria-disabled": disabled || void 0,
-      onClick: onClick && !disabled ? onClick : void 0,
-      onKeyDown: onClick && !disabled ? (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick();
-        }
-      } : void 0,
+      ref: setChip,
+      "aria-disabled": !clickable && disabled || void 0,
+      "data-selected": isSelected ? "" : void 0,
       className: cn(
         "inline-flex items-center font-medium max-w-full min-w-0 whitespace-nowrap",
         "rounded-[var(--ds-radius-sm)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
         sizeStyles[size],
         colorClasses,
-        onClick && !disabled && cn("cursor-pointer select-none hover:opacity-80", FOCUS_RING),
+        clickable && !disabled && cn("relative cursor-pointer select-none hover:opacity-80", LABEL_FOCUS_RING),
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
       style: maxWidth ? { maxWidth } : void 0,
       children: [
-        /* @__PURE__ */ jsx("span", { ref: truncRef, className: "truncate min-w-0", children }),
-        onRemove && !disabled && /* @__PURE__ */ jsx(
+        clickable ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-tag-label": "",
+            disabled,
+            "aria-pressed": selected,
+            onClick,
+            className: "flex min-w-0 max-w-full items-center cursor-[inherit] outline-none after:absolute after:inset-0 after:content-['']",
+            children: label
+          }
+        ) : label,
+        onRemove && !disabled && /* @__PURE__ */ jsx(AutoTooltip, { content: typeof children === "string" ? `Remove ${children}` : "Remove", children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -4106,7 +3125,7 @@ var Tag = forwardRef(function Tag2({
             "data-tag-remove": "",
             "aria-label": typeof children === "string" ? `Remove ${children}` : "Remove",
             className: cn(
-              "inline-flex items-center justify-center shrink-0",
+              "relative inline-flex items-center justify-center shrink-0",
               "rounded-[var(--ds-radius-sm)]",
               "opacity-60 hover:opacity-100",
               "transition-opacity duration-[var(--ds-transition-speed)] cursor-pointer",
@@ -4114,7 +3133,7 @@ var Tag = forwardRef(function Tag2({
             ),
             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: size === "sm" ? 10 : 12 })
           }
-        )
+        ) })
       ]
     }
   );
@@ -4163,6 +3182,12 @@ function TagInput({
     const buttons = Array.from(containerRef.current?.querySelectorAll("[data-tag-remove]") ?? []);
     focusAfterRemoval(buttons, pending.index, inputRef.current);
   });
+  const overlayMark = useContext(OverlayMarkCtx);
+  const holdsText = input.trim() !== "";
+  useEffect(() => {
+    if (!holdsText || !overlayMark) return;
+    return overlayMark.pend();
+  }, [holdsText, overlayMark]);
   const handleKeyDown = useCallback(
     (e) => {
       if ((e.key === "Enter" || e.key === ",") && input.trim()) {
@@ -4268,7 +3293,8 @@ function PinInput({
   size: sizeProp,
   className,
   error = false,
-  id
+  id,
+  "aria-label": ariaLabel
 }) {
   const onChange = useReportedChange(onChangeProp, value);
   useInputModality();
@@ -4327,7 +3353,7 @@ function PinInput({
     "div",
     {
       role: "group",
-      "aria-label": "PIN input",
+      "aria-label": ariaLabel ?? "PIN input",
       "aria-invalid": error || void 0,
       className: cn("inline-flex w-fit items-center gap-ds-2", className),
       children: digits.map((digit, i) => /* @__PURE__ */ jsx(
@@ -4487,7 +3513,7 @@ function Rating({
     {
       role: readOnly ? "img" : "radiogroup",
       id: control.id,
-      "aria-label": readOnly || !control.labelId ? `Rating: ${value} out of ${max}` : void 0,
+      "aria-label": readOnly ? `${control.label ?? "Rating"}: ${value} out of ${max}` : control.labelId ? void 0 : control.label ?? `Rating: ${value} out of ${max}`,
       "aria-labelledby": readOnly ? void 0 : control.labelId,
       "aria-describedby": control.describedBy,
       "aria-invalid": readOnly ? void 0 : control.invalid || void 0,
@@ -4575,7 +3601,8 @@ function ColorPicker({
   swatches = DEFAULT_SWATCHES,
   disabled = false,
   className,
-  error = false
+  error = false,
+  "aria-label": ariaLabel
 }) {
   const onChange = useReportedChange(onChangeProp, value);
   useInputModality();
@@ -4640,6 +3667,8 @@ function ColorPicker({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      role: "group",
+      "aria-label": ariaLabel,
       "aria-invalid": error || void 0,
       className: cn(
         "w-full max-w-64 p-ds-3 space-y-ds-3",
@@ -4789,18 +3818,33 @@ var Alert = forwardRef(function Alert2({
   actions,
   placement = "inline",
   expandableContent,
+  consent,
+  confirmation,
   className
 }, ref) {
+  const titleId = useId();
+  const confirmationRef = useRef(null);
+  const confirming = !!consent && confirmation != null;
+  useEffect(() => {
+    if (confirming) confirmationRef.current?.focus();
+  }, [confirming]);
+  const rootRef = useRef(null);
+  const setRoot = (el) => {
+    rootRef.current = el;
+    if (typeof ref === "function") ref(el);
+    else if (ref) ref.current = el;
+  };
   const [detailsExpanded, setDetailsExpanded] = useState(false);
   const isMobile = useBreakpoint("sm");
-  const resolvedActions = actions ?? (action ? [action] : []);
+  const resolvedActions = consent || confirming ? [] : actions ?? (action ? [action] : []);
   const shouldCollapseActions = isMobile && resolvedActions.length > 1;
-  const placementClasses = placement === "page-top" ? "sticky top-0 z-[var(--ds-z-sticky)] rounded-none" : placement === "section-top" ? "rounded-[var(--ds-radius-md)] my-ds-4" : "rounded-[var(--ds-radius-md)]";
+  const placementClasses = placement === "page-top" && !consent ? "sticky top-0 z-[var(--ds-z-sticky)] rounded-none" : placement === "section-top" ? "rounded-[var(--ds-radius-md)] my-ds-4" : "rounded-[var(--ds-radius-md)]";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref,
-      role: "alert",
+      ref: setRoot,
+      role: consent ? "region" : variant === "error" || variant === "warning" ? "alert" : "status",
+      "aria-labelledby": consent ? titleId : void 0,
       className: cn(
         "flex items-start gap-ds-3 p-ds-4",
         "border-[length:var(--ds-border-width)]",
@@ -4814,7 +3858,7 @@ var Alert = forwardRef(function Alert2({
         /* @__PURE__ */ jsx("div", { className: cn("mt-[0.3125em] w-3 h-3 shrink-0 rounded-[var(--ds-radius-sm)]", indicators[variant]) }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-ds-3", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
+            /* @__PURE__ */ jsx("p", { id: titleId, className: "text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
             resolvedActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: shouldCollapseActions ? /* @__PURE__ */ jsx(
               DropdownMenu,
               {
@@ -4864,7 +3908,34 @@ var Alert = forwardRef(function Alert2({
               );
             }) })
           ] }),
-          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-1 text-xs text-[var(--ds-text-secondary)]", children }),
+          confirming ? (
+            // GOV.UK's cookie banner: the confirmation in the choices' place, announced, with focus on it
+            /* @__PURE__ */ jsx("div", { ref: confirmationRef, role: "alert", tabIndex: -1, className: "mt-ds-1 text-xs text-[var(--ds-text-secondary)] outline-none", children: confirmation })
+          ) : children && /* @__PURE__ */ jsx("div", { className: "mt-ds-1 text-xs text-[var(--ds-text-secondary)]", children }),
+          consent && !confirming && // two choices of equal weight, the alert's own action look, side by side at any width (sharing a phone's row);
+          // never a menu
+          /* @__PURE__ */ jsx("div", { "data-alert-consent": "", className: "mt-ds-3 flex flex-wrap gap-ds-2", children: [consent.accept, consent.reject].map((choice) => choice.primary ? (
+            // a page that insists on one primary choice: the library's primary Button in the other choice's box, its
+            // padding, corners and height, wrapping as it does, so the two share a row's height and a phone's row
+            // equally. Its height and padding go in its style: its size's classes set them, and a class can't be relied on
+            // to undo another
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "xs", onClick: choice.onClick, style: { height: "auto", paddingBlock: "var(--ds-space-1)", paddingInline: "var(--ds-space-2\\.5)" }, className: "min-h-ds-6 whitespace-normal rounded-[var(--ds-radius-sm)] max-sm:flex-1 max-sm:min-h-[var(--ds-control-height-sm)]", children: choice.label }, choice.label)
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: choice.onClick,
+              className: cn(
+                "text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
+                "transition-colors cursor-pointer max-sm:flex-1 max-sm:min-h-[var(--ds-control-height-sm)]",
+                "border-[length:var(--ds-border-width)] border-current",
+                actionColorsByVariant[variant],
+                FOCUS_RING
+              ),
+              children: choice.label
+            },
+            choice.label
+          )) }),
           expandableContent && /* @__PURE__ */ jsxs("div", { className: "mt-ds-2", children: [
             /* @__PURE__ */ jsxs(
               "button",
@@ -4895,13 +3966,21 @@ var Alert = forwardRef(function Alert2({
             detailsExpanded && /* @__PURE__ */ jsx("div", { className: "mt-ds-2 text-xs text-[var(--ds-text-secondary)] border-l-2 border-current/20 pl-ds-3", children: expandableContent })
           ] })
         ] }),
-        dismissible && /* @__PURE__ */ jsx(
-          "button",
+        dismissible && (!consent || confirming) && // Sprint 25.8.7 item 33: the library's icon Button, so its name shows as its one tooltip, with a 24 px target; at
+        // rest the muted cross where it was (the margin takes back the box's room), on hover the alert's own buttons'
+        // tint. Its alert goes with it, so focus goes to a neighbour (focusAfterSelfRemoval), never to the page
+        /* @__PURE__ */ jsx(
+          Button,
           {
             type: "button",
-            onClick: onDismiss,
-            className: cn("shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer", FOCUS_RING),
+            variant: "ghost",
+            size: "icon-xs",
             "aria-label": "Dismiss",
+            onClick: (e) => {
+              focusAfterSelfRemoval(e.currentTarget, { item: rootRef.current });
+              onDismiss?.();
+            },
+            className: cn("-m-ds-1 shrink-0", actionColorsByVariant[variant], "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"),
             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
           }
         )
@@ -5256,7 +4335,10 @@ function TransferList({
         "button",
         {
           type: "button",
-          onClick: moveAllRight,
+          onClick: (e) => {
+            focusAfterSelfRemoval(e.currentTarget);
+            moveAllRight();
+          },
           disabled: !available.filter((i) => !i.disabled).length,
           "aria-label": isStacked ? "Move all down" : "Move all right",
           className: cn(actionButtonClass),
@@ -5267,7 +4349,10 @@ function TransferList({
         "button",
         {
           type: "button",
-          onClick: moveRight,
+          onClick: (e) => {
+            focusAfterSelfRemoval(e.currentTarget);
+            moveRight();
+          },
           disabled: !checkedAvailable.size,
           "aria-label": isStacked ? "Move selected down" : "Move selected right",
           className: cn(actionButtonClass),
@@ -5278,7 +4363,10 @@ function TransferList({
         "button",
         {
           type: "button",
-          onClick: moveLeft,
+          onClick: (e) => {
+            focusAfterSelfRemoval(e.currentTarget);
+            moveLeft();
+          },
           disabled: !checkedSelected.size,
           "aria-label": isStacked ? "Move selected up" : "Move selected left",
           className: cn(actionButtonClass),
@@ -5289,7 +4377,10 @@ function TransferList({
         "button",
         {
           type: "button",
-          onClick: moveAllLeft,
+          onClick: (e) => {
+            focusAfterSelfRemoval(e.currentTarget);
+            moveAllLeft();
+          },
           disabled: !selected.filter((i) => !i.disabled).length,
           "aria-label": isStacked ? "Move all up" : "Move all left",
           className: cn(actionButtonClass),
@@ -5949,7 +5040,7 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
   const menu = menuItems ? /* @__PURE__ */ jsx(
     DropdownMenu,
     {
-      trigger: /* @__PURE__ */ jsx(
+      trigger: /* @__PURE__ */ jsx(AutoTooltip, { content: "More actions", children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -5963,7 +5054,7 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
           onClick: (e) => e.stopPropagation(),
           children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
         }
-      ),
+      ) }),
       items: menuItems
     }
   ) : null;
@@ -6574,12 +5665,14 @@ 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) : elementType(item.type) === Badge));
 }
-function TruncCell({ children, lines }) {
-  const { ref, isTruncated } = useTextOverflow({ lines });
-  const clampClass = lines === 1 ? "truncate" : `line-clamp-${lines}`;
-  const cell = /* @__PURE__ */ jsx("span", { ref, className: cn(clampClass, "block"), children });
-  if (!isTruncated) return cell;
-  return /* @__PURE__ */ jsx(AutoTooltip, { content: children, children: cell });
+var SKELETON_ROWS = 5;
+var SKELETON_WIDTHS = ["72%", "48%", "60%", "36%", "54%"];
+var LOADING_LABEL = "Loading table data";
+function RefreshLine({ className }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", "data-table-refreshing": "", className: cn("pointer-events-none absolute top-0 z-20 h-[2px] overflow-hidden", className), children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 bg-[var(--ds-accent-primary)] animate-[gs-indeterminate_1.5s_ease-in-out_infinite] motion-reduce:animate-none motion-reduce:w-full motion-reduce:opacity-50" }) });
+}
+function SkeletonLine({ width, end = false, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex h-5 items-center", end && "justify-end", className), children: /* @__PURE__ */ jsx(Skeleton, { variant: "custom", width, height: "0.75rem" }) });
 }
 var TITLE_CLASSES = TITLE_TEXT;
 var FRAME_CLASSES = cn(
@@ -6824,6 +5917,11 @@ function Table({
   useEffect(() => {
     if (unsortable) warnOnce("Table", `the column "${unsortable}" is sortable, but its cells are elements, which can't be compared: give it a sortValue, (row) => the name, number or date it shows (data_display#1).`);
   }, [unsortable]);
+  const pageSorts = !!onSortChange;
+  const refused = pageSorts ? "" : columns.filter((col) => col.sortable && !canSort.has(col.key)).map((col) => col.key).join(", ");
+  useEffect(() => {
+    if (refused) warnOnce("Table", `the column "${refused}" is marked sortable, but its cells are elements the Table can't compare, so it draws no sort button: give it a sortValue, (row) => the name, number or date it shows, or sort the rows yourself with sortKey and onSortChange (data_display#1).`);
+  }, [refused]);
   useEffect(() => {
     if (pager && data.length !== pager.totalItems) warnOnce("Table", `the pager counts ${pager.totalItems} rows but data holds ${data.length}: give the table and usePagination the same rows, every row of the list, and the table draws the pager's part (Sprint 25.13 A3).`);
   }, [pager, data.length]);
@@ -6843,7 +5941,16 @@ function Table({
     if (allSelected) onSelectionChange?.(selectedRows.filter((r) => !shown.has(r)));
     else onSelectionChange?.([...selectedRows.filter((r) => !shown.has(r)), ...drawnIdx]);
   };
-  const toggleRow = (idx) => {
+  const anchor = useRef(null);
+  const toggleRow = (idx, shiftKey2 = false) => {
+    const from = anchor.current === null ? -1 : drawnIdx.indexOf(anchor.current);
+    const to = drawnIdx.indexOf(idx);
+    anchor.current = idx;
+    if (shiftKey2 && from >= 0 && to >= 0 && from !== to) {
+      const run = drawnIdx.slice(Math.min(from, to), Math.max(from, to) + 1);
+      onSelectionChange?.([...selectedRows.filter((r) => !run.includes(r)), ...run]);
+      return;
+    }
     if (selectedSet.has(idx)) onSelectionChange?.(selectedRows.filter((r) => r !== idx));
     else onSelectionChange?.([...selectedRows, idx]);
   };
@@ -6871,6 +5978,9 @@ function Table({
   const narrowScreen = useBreakpoint(mobileBreakpoint);
   const { cards: isMobile, rootRef } = useCardsSwitch(narrowScreen, cardsBelow, title);
   useRevealFocus(rootRef, isMobile);
+  useFocusKeptInList(rootRef);
+  const [cardsEl, setCardsEl] = useState(null);
+  useKeyboardScroll(cardsEl, title ?? ariaLabel ?? "Table", isMobile);
   const setRoot = useCallback((node) => {
     rootRef.current = node;
     if (typeof ref === "function") ref(node);
@@ -6998,8 +6108,14 @@ function Table({
     cardHeading,
     body
   ] });
-  const control = pager && !loading && data.length > 0 ? /* @__PURE__ */ jsx(Pagination, { ...pager.props }) : null;
+  const paged = !!pager && data.length > 0;
+  const control = paged ? /* @__PURE__ */ jsx(Pagination, { ...pager.props }) : null;
   const listRoot = control ? void 0 : setRoot;
+  const cardsAreRoot = !title && !paged;
+  const setCards = useCallback((el) => {
+    setCardsEl(el);
+    if (cardsAreRoot) setRoot(el);
+  }, [cardsAreRoot, setRoot]);
   const listClass = control ? void 0 : className;
   const withControl = (list2) => control ? /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
     list2,
@@ -7033,15 +6149,23 @@ function Table({
     (same ?? (row.tabIndex >= 0 ? row : controls[0]))?.focus({ preventScroll: true });
   }, [isMobile, rootRef]);
   if (isMobile) {
-    if (loading) {
-      if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-ds-10", children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) }));
-      return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", className: cn("flex items-center justify-center py-ds-10", className), children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" }) });
+    if (loading && data.length === 0) {
+      const skeletonCards = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: LOADING_LABEL }),
+        /* @__PURE__ */ jsx("div", { "data-table-skeleton": "", className: "flex flex-col gap-ds-3", "aria-busy": "true", children: Array.from({ length: 3 }, (_, r) => /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)] p-ds-4 space-y-ds-3", children: columns.slice(0, 4).map((col, c) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-ds-2", children: [
+          /* @__PURE__ */ jsx(SkeletonLine, { width: "56%", className: "flex-1" }),
+          /* @__PURE__ */ jsx(SkeletonLine, { width: SKELETON_WIDTHS[(r + c) % SKELETON_WIDTHS.length], end: true, className: "flex-1" })
+        ] }, col.key)) }, r)) })
+      ] });
+      if (title) return titledCards(skeletonCards);
+      return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", className, children: skeletonCards });
     }
     if (data.length === 0 && emptyState) {
       if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", children: emptyState }));
       return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
     }
-    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: /* @__PURE__ */ jsxs("div", { ref: title ? void 0 : listRoot, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("flex flex-col gap-ds-3 overflow-y-auto -m-[4px] p-[4px] scroll-p-[4px]", title ? "min-h-0" : listClass), onFocus: title ? void 0 : noteFocus, onBlur: title ? void 0 : forgetFocus, children: [
+    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: /* @__PURE__ */ jsxs("div", { ref: setCards, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("relative flex flex-col gap-ds-3 overflow-y-auto -m-[4px] p-[4px] scroll-p-[4px]", FOCUS_INSET, title ? "min-h-0" : listClass), onFocus: title ? void 0 : noteFocus, onBlur: title ? void 0 : forgetFocus, children: [
+      loading && data.length > 0 && /* @__PURE__ */ jsx(RefreshLine, { className: "inset-x-[4px] rounded-full" }),
       selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select`, children: "Select" }),
       drawn.map(({ row, originalIdx }) => {
         const isSelected = selectedSet.has(originalIdx);
@@ -7085,7 +6209,7 @@ function Table({
             } : void 0,
             children: [
               selectable && // "Select" and the row's name, as in the table (T15)
-              /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-card-name-${idPart(id)}` : `${headingId}-select` }),
+              /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: (_, { shiftKey: shiftKey2 }) => toggleRow(originalIdx, shiftKey2), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-card-name-${idPart(id)}` : `${headingId}-select` }),
               columns.map((col, c) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-ds-2 text-sm", children: [
                 /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
                 /* @__PURE__ */ jsx(CardValue, { value: row[col.key], id: lead + c === nameIndex ? `${headingId}-card-name-${idPart(id)}` : void 0 })
@@ -7129,9 +6253,10 @@ function Table({
     return withControl(title ? titledCards(cards) : cards);
   }
   const cellCount = columns.length + lead;
-  const table = /* @__PURE__ */ jsxs("table", { ref: tableRef, className: cn("w-full text-sm", PINNED_LAYERS), ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : ariaLabel ? { "aria-label": ariaLabel } : {}, children: [
+  const table = /* @__PURE__ */ jsxs("table", { ref: tableRef, "aria-busy": loading || void 0, className: cn("w-full text-sm", PINNED_LAYERS), ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : ariaLabel ? { "aria-label": ariaLabel } : {}, children: [
     /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] [--gs-row-tint:var(--ds-bg-muted)]", children: [
-      selectable && /* @__PURE__ */ jsx("th", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(
+      selectable && // data-ds-select-all: the selection's own control, where a BulkActionBar's Clear selection sends focus
+      /* @__PURE__ */ jsx("th", { "data-ds-select-all": "", className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(
         Checkbox,
         {
           checked: allSelected,
@@ -7142,8 +6267,8 @@ function Table({
       ) }),
       expandable && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), style: pinStyle(selectable ? 1 : 0, cellCount) }),
       columns.map((col, c) => {
-        const isSortable = col.header.trim() !== "" && (col.sortable ?? (!!sortable && canSort.has(col.key)));
-        const isActiveSort = sortKey === col.key && !!sortDir && unsortable !== col.key;
+        const isSortable = col.header.trim() !== "" && (pageSorts ? col.sortable ?? (!!sortable && canSort.has(col.key)) : (col.sortable ?? !!sortable) && canSort.has(col.key));
+        const isActiveSort = sortKey === col.key && !!sortDir && (pageSorts || unsortable !== col.key);
         const headerKind = kindOf2(col);
         const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
         const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
@@ -7171,21 +6296,18 @@ function Table({
                     "inline-flex items-center gap-ds-1 uppercase tracking-wider cursor-pointer select-none",
                     "[font:inherit] text-inherit hover:text-[var(--ds-text-primary)]",
                     "rounded-[var(--ds-radius-sm)]",
+                    // in a right-aligned column the indicator goes before the label, so the label ends where the
+                    // column's values end; the sorted column's label in full colour (the look check, 14 October).
+                    // Set at the line's top, not its baseline: reversed, the button takes its baseline from the
+                    // indicator, which has no text, and stood 2 px above the other headers' labels
+                    headerAlign === "right" && "flex-row-reverse",
+                    "align-top",
+                    isActiveSort && "text-[var(--ds-text-primary)]",
                     FOCUS_RING
                   ),
                   children: [
                     col.header,
-                    /* @__PURE__ */ jsx(
-                      Icon,
-                      {
-                        name: "chevron-right",
-                        size: 12,
-                        className: cn(
-                          "transition-transform",
-                          !isActiveSort ? "invisible" : sortDir === "asc" ? "-rotate-90" : "rotate-90"
-                        )
-                      }
-                    )
+                    /* @__PURE__ */ jsx(SortIndicator, { sorted: isActiveSort ? sortDir : false })
                   ]
                 }
               )
@@ -7195,14 +6317,15 @@ function Table({
         );
       })
     ] }) }),
-    /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-      "td",
-      {
-        colSpan: cellCount,
-        className: "px-ds-4 py-ds-10 text-center",
-        children: /* @__PURE__ */ jsx(Spinner, { label: "Loading table data" })
-      }
-    ) }) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: loading && data.length === 0 ? (
+      // the rows' shape on a first load (item 16), each cell's bar where its text will be; the rows are hidden
+      // from a screen reader, which hears the status beside the table
+      Array.from({ length: SKELETON_ROWS }, (_, r) => /* @__PURE__ */ jsxs("tr", { "data-table-skeleton": "", className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0", children: [
+        selectable && /* @__PURE__ */ jsx("td", { "aria-hidden": true, className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(SkeletonLine, { width: "16px" }) }),
+        expandable && /* @__PURE__ */ jsx("td", { "aria-hidden": true, className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3") }),
+        columns.map((col, c) => /* @__PURE__ */ jsx("td", { className: density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3", children: /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: /* @__PURE__ */ jsx(SkeletonLine, { width: SKELETON_WIDTHS[(r + c) % SKELETON_WIDTHS.length], end: (col.align ?? (kindOf2(col) === "number" ? "right" : "left")) === "right" }) }) }, col.key))
+      ] }, `skeleton-${r}`))
+    ) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
       "td",
       {
         colSpan: cellCount,
@@ -7246,8 +6369,8 @@ function Table({
               }
             } : void 0,
             children: [
-              selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3", pinFocus(0, cellCount)), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-name-${idPart(id)}` : `${headingId}-select` }) }),
-              expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3", pinFocus(selectable ? 1 : 0, cellCount)), style: pinStyle(selectable ? 1 : 0, cellCount), children: /* @__PURE__ */ jsx(
+              selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3", pinFocus(0, cellCount)), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: (_, { shiftKey: shiftKey2 }) => toggleRow(originalIdx, shiftKey2), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-name-${idPart(id)}` : `${headingId}-select` }) }),
+              expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3", pinFocus(selectable ? 1 : 0, cellCount)), style: pinStyle(selectable ? 1 : 0, cellCount), children: /* @__PURE__ */ jsx(AutoTooltip, { content: "Details", children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -7264,7 +6387,7 @@ function Table({
                     }
                   )
                 }
-              ) }),
+              ) }) }),
               columns.map((col, c) => {
                 const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
                 const kind = kindOf2(col);
@@ -7274,9 +6397,9 @@ function Table({
                 const whole2 = !kind && renderedKinds.has(col.key);
                 let inner;
                 if (truncLines > 0) {
-                  inner = /* @__PURE__ */ jsx(TruncCell, { lines: truncLines, children: cellContent });
+                  inner = /* @__PURE__ */ jsx(CutCell, { lines: truncLines, children: cellContent });
                 } else if (kind === "email") {
-                  inner = /* @__PURE__ */ jsx("span", { className: "max-w-[40ch] truncate inline-block align-bottom", title: typeof cellContent === "string" ? cellContent : void 0, children: cellContent });
+                  inner = /* @__PURE__ */ jsx(CutEmail, { children: cellContent });
                 } else {
                   inner = cellContent;
                 }
@@ -7335,10 +6458,12 @@ function Table({
         ref: listRoot,
         "data-ds-list": "",
         "data-gs": "table",
-        className: cn("w-full min-w-0 flex flex-col", FRAME_CLASSES, FRAME_FOCUS_RING, control && "min-h-0", listClass),
+        className: cn("relative w-full min-w-0 flex flex-col", FRAME_CLASSES, FRAME_FOCUS_RING, control && "min-h-0", listClass),
         onFocus: noteFocus,
         onBlur: forgetFocus,
         children: [
+          loading && data.length > 0 && /* @__PURE__ */ jsx(RefreshLine, { className: "inset-x-0 rounded-t-[inherit]" }),
+          loading && data.length === 0 && /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: LOADING_LABEL }),
           title && /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
           selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select-all`, children: "Select all rows shown" }),
           selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select`, children: "Select" }),
@@ -8144,6 +7269,12 @@ function WeekView({ date, events, categories, selectedDate, onDayClick, onOpenEv
   useRevealFocus(allDayRef);
   useRevealFocus(scrollerRef);
   const { ref: edgesRef, measure: measureEdges, fadeProps: edgeFade } = useScrollEdges();
+  const [dayStrip, setDayStrip] = useState(null);
+  const setDays = useCallback((el) => {
+    edgesRef(el);
+    setDayStrip(el);
+  }, [edgesRef]);
+  useKeyboardScroll(dayStrip, "Days", true, false, "x");
   const [list2, setList] = useState(null);
   const handleScroll = useCallback((e) => {
     if (syncingScroll.current) return;
@@ -8246,9 +7377,9 @@ function WeekView({ date, events, categories, selectedDate, onDayClick, onOpenEv
         case "End":
           return cellKey(days[days.length - 1], hour);
         case "PageUp":
-          return cellKey(addDays2(day, -7), hour);
+          return cellKey(addDays(day, -7), hour);
         case "PageDown":
-          return cellKey(addDays2(day, 7), hour);
+          return cellKey(addDays(day, 7), hour);
         default:
           return null;
       }
@@ -8268,7 +7399,7 @@ function WeekView({ date, events, categories, selectedDate, onDayClick, onOpenEv
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: "flex flex-col h-full overflow-hidden", onKeyDown: grid.onKeyDown, 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", { ref: edgesRef, onScroll: measureEdges, ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: dayGridColumns, minWidth: stripWidth }, children: days.map((day, i) => /* @__PURE__ */ jsxs("div", { className: cn("text-center py-ds-2", i > 0 && "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", selectedDate && isSameDay(day, selectedDate) && "bg-[var(--ds-accent-whisper)]"), children: [
+      /* @__PURE__ */ jsx("div", { ref: setDays, onScroll: measureEdges, ...edgeFade, className: cn("flex-1 overflow-x-auto gs-scrollbar-none", FOCUS_INSET), "data-week-scroll": true, children: /* @__PURE__ */ jsx("div", { className: "grid", style: { gridTemplateColumns: dayGridColumns, minWidth: stripWidth }, children: days.map((day, i) => /* @__PURE__ */ jsxs("div", { className: cn("text-center py-ds-2", i > 0 && "border-l-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", selectedDate && isSameDay(day, selectedDate) && "bg-[var(--ds-accent-whisper)]"), children: [
         /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] font-medium", children: names[i] }),
         /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold mt-ds-0.5 mx-auto w-8 h-8 flex items-center justify-center rounded-[var(--ds-radius-full)]", isToday(day) ? TODAY_CIRCLE : "text-[var(--ds-text-primary)]"), children: day.getDate() })
       ] }, i)) }) })
@@ -9056,9 +8187,9 @@ function Calendar({
     return getMonthGrid(currentDate.getFullYear(), currentDate.getMonth(), weekStartsOn)[0][0];
   }, [currentView, currentDate, weekStartsOn]);
   const drawnTo = useMemo(() => {
-    if (currentView === "week") return addDays2(drawnFrom, 7);
+    if (currentView === "week") return addDays(drawnFrom, 7);
     if (currentView === "year") return new Date(drawnFrom.getFullYear() + 1, 0, 1);
-    return addDays2(drawnFrom, 42);
+    return addDays(drawnFrom, 42);
   }, [currentView, drawnFrom]);
   const { drawnEvents, unreadableRepeats } = useMemo(() => {
     const out = [];
@@ -9096,7 +8227,7 @@ function Calendar({
       if (currentView === "month") {
         setCurrentDate(addMonths(currentDate, direction));
       } else if (currentView === "week") {
-        setCurrentDate(addDays2(currentDate, direction * 7));
+        setCurrentDate(addDays(currentDate, direction * 7));
       } else {
         setCurrentDate(new Date(currentDate.getFullYear() + direction, currentDate.getMonth(), 1));
       }
@@ -9956,7 +9087,9 @@ function TreeView({
   defaultChecked = [],
   onSelect,
   onCheck,
-  className
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
 }) {
   const [ownSelected, setOwnSelected] = useState(() => new Set(defaultSelected));
   const selected = useMemo(() => selectedProp ? new Set(selectedProp) : ownSelected, [selectedProp, ownSelected]);
@@ -10073,7 +9206,7 @@ function TreeView({
     },
     [flatNodes, baseId, expanded, toggleExpand, checkable, handleCheck, selectable, handleSelect]
   );
-  return /* @__PURE__ */ jsx("div", { role: "tree", className: cn("text-sm", className), children: nodes.map((node) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { role: "tree", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: cn("text-sm", className), children: nodes.map((node) => /* @__PURE__ */ jsx(
     TreeNodeRow,
     {
       node,
@@ -10166,6 +9299,7 @@ function TreeNodeRow({
             CheckboxIndicator2,
             {
               state: checkState,
+              label: node.label,
               onClick: (e) => {
                 e.stopPropagation();
                 handleCheck(node);
@@ -10199,12 +9333,13 @@ function TreeNodeRow({
     )) })
   ] });
 }
-function CheckboxIndicator2({ state, onClick }) {
+function CheckboxIndicator2({ state, label, onClick }) {
   const filled = state !== "unchecked";
   return /* @__PURE__ */ jsx(
     "span",
     {
       role: "checkbox",
+      "aria-label": label,
       "aria-checked": state === "indeterminate" ? "mixed" : state === "checked",
       className: cn(
         "flex items-center justify-center shrink-0 h-[18px] w-[18px] rounded-[calc(var(--ds-radius-sm)*0.6)] border-[2px] transition-all cursor-pointer",
@@ -10215,6 +9350,32 @@ function CheckboxIndicator2({ state, onClick }) {
     }
   );
 }
+function useMediaQuery(query) {
+  const subscribe = useCallback((onChange) => {
+    const mql = window.matchMedia(query);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false
+  );
+}
+var ROUND_BUTTON = cn(
+  "flex items-center justify-center w-8 h-8",
+  "rounded-[var(--ds-radius-full)]",
+  "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+  "text-[var(--ds-text-primary)] shadow-[var(--ds-shadow-sm)]",
+  "transition-opacity cursor-pointer hover:bg-[var(--ds-bg-muted)]",
+  FOCUS_RING
+);
+var ROTATION_BUTTON = cn(
+  "flex items-center justify-center w-6 h-6 rounded-[var(--ds-radius-full)]",
+  "bg-[color-mix(in_oklab,var(--ds-bg-surface-elevated)_70%,transparent)] [backdrop-filter:blur(6px)] [-webkit-backdrop-filter:blur(6px)]",
+  "text-[var(--ds-text-primary)] transition-colors cursor-pointer hover:bg-[var(--ds-bg-surface-elevated)]",
+  FOCUS_RING
+);
 function Carousel({
   children,
   autoPlay = false,
@@ -10222,6 +9383,8 @@ function Carousel({
   loop = false,
   showIndicators = true,
   showArrows = true,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   className,
   ref
 }) {
@@ -10230,32 +9393,45 @@ function Carousel({
   const [dragOffset, setDragOffset] = useState(0);
   const trackRef = useRef(null);
   const dragStart = useRef(null);
-  const pauseRef = useRef(false);
   const count = children.length;
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const [stopped, setStopped] = useState(null);
+  const playing = autoPlay && count > 1 && !(stopped ?? reducedMotion);
+  const [hovered, setHovered] = useState(false);
+  const [focusInSlide, setFocusInSlide] = useState(false);
+  const rotating = playing && !hovered && !dragging && !focusInSlide;
+  const [said, setSaid] = useState("");
   const goTo = useCallback(
     (index) => {
-      if (loop) {
-        setCurrent((index % count + count) % count);
-      } else {
-        setCurrent(Math.max(0, Math.min(index, count - 1)));
-      }
+      const to = loop ? (index % count + count) % count : Math.max(0, Math.min(index, count - 1));
+      setCurrent(to);
+      setSaid(`Slide ${to + 1} of ${count}`);
     },
     [count, loop]
   );
   const next = useCallback(() => goTo(current + 1), [goTo, current]);
   const prev = useCallback(() => goTo(current - 1), [goTo, current]);
   useEffect(() => {
-    if (!autoPlay || count <= 1) return;
-    const interval = setInterval(() => {
-      if (!pauseRef.current) goTo(current + 1);
-    }, autoPlayInterval);
+    if (!rotating) return;
+    const interval = setInterval(() => setCurrent((c) => (c + 1) % count), autoPlayInterval);
     return () => clearInterval(interval);
-  }, [autoPlay, autoPlayInterval, current, count, goTo]);
+  }, [rotating, autoPlayInterval, count, current]);
+  const onFocus = () => {
+    if (playing && inputModality() !== "pointer") setStopped(true);
+  };
+  const onSlidesBlur = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) setFocusInSlide(false);
+  };
+  const onPointerEnter = (e) => {
+    if (e.pointerType !== "touch") setHovered(true);
+  };
+  const onPointerLeave = (e) => {
+    if (e.pointerType !== "touch") setHovered(false);
+  };
   const handlePointerDown = useCallback((e) => {
     if (e.pointerType === "mouse" && e.button !== 0) return;
     dragStart.current = { x: e.clientX, time: Date.now() };
     setDragging(true);
-    pauseRef.current = true;
     e.target.setPointerCapture(e.pointerId);
   }, []);
   const handlePointerMove = useCallback(
@@ -10280,9 +9456,6 @@ function Carousel({
       dragStart.current = null;
       setDragging(false);
       setDragOffset(0);
-      setTimeout(() => {
-        pauseRef.current = false;
-      }, 1e3);
     },
     [next, prev]
   );
@@ -10293,72 +9466,72 @@ function Carousel({
     {
       ref,
       "data-gs-clip": "",
+      role: "group",
+      "aria-roledescription": "carousel",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       className: cn(
         "relative overflow-hidden rounded-[var(--ds-radius-md)]",
         "bg-[var(--ds-bg-muted)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         className
       ),
-      onMouseEnter: () => {
-        pauseRef.current = true;
-      },
-      onMouseLeave: () => {
-        if (!dragging) pauseRef.current = false;
-      },
+      onFocus,
+      onPointerEnter,
+      onPointerLeave,
       children: [
+        autoPlay && count > 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-carousel-rotation": "",
+            onClick: () => setStopped(playing),
+            "aria-label": playing ? "Stop automatic slide show" : "Start automatic slide show",
+            className: cn("absolute left-ds-2 top-ds-2 z-10", ROTATION_BUTTON),
+            children: /* @__PURE__ */ jsx(Icon, { name: playing ? "pause" : "play", size: 12 })
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
             ref: trackRef,
-            className: cn("flex items-stretch", !dragging && "transition-transform duration-400 ease-[var(--ds-transition-ease)]"),
+            className: cn("flex items-stretch", !dragging && "transition-transform duration-400 ease-[var(--ds-transition-ease)] motion-reduce:transition-none"),
             style: { transform: `translateX(calc(-${current * 100}% + ${dragOffset}px))` },
             onPointerDown: handlePointerDown,
             onPointerMove: handlePointerMove,
             onPointerUp: handlePointerUp,
             onPointerCancel: handlePointerUp,
-            children: children.map((child, i) => /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 select-none flex flex-col [&>*]:flex-1", "aria-roledescription": "slide", "aria-label": `Slide ${i + 1} of ${count}`, children: child }, i))
+            onFocus: () => setFocusInSlide(true),
+            onBlur: onSlidesBlur,
+            children: children.map((child, i) => (
+              // each slide named by its place in the set; those out of view are out of reach, for Tab and assistive technology
+              /* @__PURE__ */ jsx("div", { role: "group", "aria-roledescription": "slide", "aria-label": `${i + 1} of ${count}`, inert: i !== current || void 0, className: "w-full shrink-0 select-none flex flex-col [&>*]:flex-1", children: child }, i)
+            ))
           }
         ),
+        /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: said }),
         showArrows && count > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(AutoTooltip, { content: "Previous slide", children: /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: prev,
               disabled: !canPrev,
               "aria-label": "Previous slide",
-              className: cn(
-                "absolute left-ds-4 top-1/2 -translate-y-1/2 z-10",
-                "flex items-center justify-center w-8 h-8",
-                "rounded-[var(--ds-radius-full)]",
-                "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                "text-[var(--ds-text-primary)] shadow-[var(--ds-shadow-sm)]",
-                "transition-opacity cursor-pointer hover:bg-[var(--ds-bg-muted)]",
-                FOCUS_RING,
-                !canPrev && "opacity-0 pointer-events-none"
-              ),
+              className: cn("absolute left-ds-4 top-1/2 -translate-y-1/2 z-10", ROUND_BUTTON, !canPrev && "opacity-0 pointer-events-none"),
               children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, className: "rotate-180" })
             }
-          ),
-          /* @__PURE__ */ jsx(
+          ) }),
+          /* @__PURE__ */ jsx(AutoTooltip, { content: "Next slide", children: /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: next,
               disabled: !canNext,
               "aria-label": "Next slide",
-              className: cn(
-                "absolute right-ds-4 top-1/2 -translate-y-1/2 z-10",
-                "flex items-center justify-center w-8 h-8",
-                "rounded-[var(--ds-radius-full)]",
-                "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-                "text-[var(--ds-text-primary)] shadow-[var(--ds-shadow-sm)]",
-                "transition-opacity cursor-pointer hover:bg-[var(--ds-bg-muted)]",
-                FOCUS_RING,
-                !canNext && "opacity-0 pointer-events-none"
-              ),
+              className: cn("absolute right-ds-4 top-1/2 -translate-y-1/2 z-10", ROUND_BUTTON, !canNext && "opacity-0 pointer-events-none"),
               children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
             }
-          )
+          ) })
         ] }),
         showIndicators && count > 1 && /* @__PURE__ */ jsx("div", { className: "absolute bottom-ds-3 left-1/2 -translate-x-1/2 flex gap-ds-1.5 z-10", children: children.map((_, i) => /* @__PURE__ */ jsx(
           "button",
@@ -10366,6 +9539,7 @@ function Carousel({
             type: "button",
             onClick: () => goTo(i),
             "aria-label": `Go to slide ${i + 1}`,
+            "aria-current": i === current || void 0,
             className: cn(
               "w-2 h-2 rounded-[var(--ds-radius-full)] transition-all cursor-pointer",
               FOCUS_RING,
@@ -10607,7 +9781,10 @@ function ChatInputBar({ onSend, busy, onStop, onAttach, onVoice, placeholder })
   ) });
 }
 function Suggestions({ items, onPick, className }) {
-  return /* @__PURE__ */ jsx("div", { "data-suggestions": "", className: cn("flex flex-wrap gap-ds-2", className), children: items.map((s) => /* @__PURE__ */ jsx(Tag, { variant: "default", size: "md", onClick: () => onPick(s), children: s }, s)) });
+  const pressed = useRef(null);
+  return /* @__PURE__ */ jsx("div", { "data-suggestions": "", className: cn("flex flex-wrap gap-ds-2", className), onClickCapture: (e) => {
+    pressed.current = e.target.closest("button");
+  }, children: items.map((s) => /* @__PURE__ */ jsx(Tag, { variant: "default", size: "md", onClick: () => onPick(s, pressed.current), children: s }, s)) });
 }
 var NEAR_BOTTOM_PX = 24;
 function ChatMessageList({
@@ -10636,7 +9813,7 @@ function ChatMessageList({
     scrollRef.current = node;
     setScroller(node);
   }, []);
-  useRevealFocus(scroller);
+  useKeyboardScroll(scroller, "Messages");
   const atBottomRef = useRef(true);
   const [showJump, setShowJump] = useState(false);
   const [prevMessages, setPrevMessages] = useState(messages);
@@ -10675,12 +9852,16 @@ function ChatMessageList({
     return () => observer.disconnect();
   }, [autoScroll, scrollToBottom]);
   const empty = messages.length === 0;
-  const pick = (text) => onSend?.(text);
+  const rootRef = useRef(null);
+  const pick = (text, from) => {
+    if (from) focusAfterSelfRemoval(from, { item: from.closest("[data-suggestions]"), to: () => rootRef.current?.querySelector("textarea") });
+    onSend?.(text);
+  };
   const showSuggestionsAfterReply = !empty && suggestionsMode === "always" && !!suggestions?.length;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col flex-1 min-h-0", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("flex flex-col flex-1 min-h-0", className), children: [
     /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-h-0", children: [
-      /* @__PURE__ */ jsx("div", { ref: setScroll, onScroll, className: "h-full overflow-y-auto scroll-p-[4px]", children: empty ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-ds-6 px-ds-4 py-ds-8 text-center", children: [
+      /* @__PURE__ */ jsx("div", { ref: setScroll, onScroll, className: cn("h-full overflow-y-auto scroll-p-[4px]", FOCUS_INSET), children: empty ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-ds-6 px-ds-4 py-ds-8 text-center", children: [
         emptyState ?? /* @__PURE__ */ jsx(
           EmptyState,
           {
@@ -10796,8 +9977,8 @@ function ChatPanel({
   ] });
 }
 function Sheet({ open, onClose: onCloseProp, title, children, footer, dirty, onDiscard, snapPoints = [0.5, 0.92], container, flush, keepMounted = false, id, labelledBy }) {
-  const { marked, mark } = useOverlayMark(open);
-  const guard = useDirtyGuard(dirty ?? marked, onCloseProp, onDiscard);
+  const { marked, pending, mark } = useOverlayMark(open);
+  const guard = useDirtyGuard((dirty ?? marked) || pending, onCloseProp, onDiscard);
   return /* @__PURE__ */ jsx(
     DrawerPanel,
     {
@@ -11105,13 +10286,20 @@ var StackedList = forwardRef(function StackedList2({
   const articles = variant === "articles";
   useWholeListCheck("StackedList", items.length, pager);
   const shown = pagerPart(items, pager);
+  const listRef = useRef(null);
+  useFocusKeptInList(listRef);
+  const setList = useCallback((node) => {
+    listRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
   const stackMeta = isPhone && articles;
   const selectable = selectedId !== void 0 || items.some((i) => i.selected !== void 0);
   const inset = articles ? inCard ? "px-ds-5" : "px-0" : inCard ? "px-ds-5" : inPane ? "pl-ds-3 pr-ds-4" : selectable ? "pl-ds-3 pr-0" : "px-0";
   const list2 = /* @__PURE__ */ jsx(
     "ul",
     {
-      ref,
+      ref: setList,
       "data-ds-list": "",
       className: cn(
         divided && "divide-y-[length:var(--ds-border-width)] divide-[var(--ds-border-subtle)]",
@@ -11221,9 +10409,9 @@ var StackedList = forwardRef(function StackedList2({
 
 // ../../showcase/src/lib/time-days.ts
 var TIME_ZOOMS = ["day", "week", "month", "quarter"];
-var DAY_MS2 = 864e5;
+var DAY_MS = 864e5;
 var DATE_ONLY2 = /^(\d{4})-(\d{2})-(\d{2})$/;
-var utcDay = (y, m, d) => Math.round(Date.UTC(y, m, d) / DAY_MS2);
+var utcDay = (y, m, d) => Math.round(Date.UTC(y, m, d) / DAY_MS);
 function dayOfDate(d) {
   const t = d.getTime();
   if (Number.isNaN(t)) return NaN;
@@ -11232,7 +10420,7 @@ function dayOfDate(d) {
   first.setHours(0, 0, 0, 0);
   if (first.getTime() === t) return day;
   const ms = ((d.getHours() * 60 + d.getMinutes()) * 60 + d.getSeconds()) * 1e3 + d.getMilliseconds();
-  return day + ms / DAY_MS2;
+  return day + ms / DAY_MS;
 }
 function dayOf(value) {
   if (typeof value === "number") return Number.isFinite(value) ? value : NaN;
@@ -11242,13 +10430,13 @@ function dayOf(value) {
   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);
-  const back = new Date(day * DAY_MS2);
+  const back = new Date(day * DAY_MS);
   return back.getUTCFullYear() === y && back.getUTCMonth() === mo && back.getUTCDate() === d ? day : NaN;
 }
 function dateOfDay(day) {
   const whole2 = Math.floor(day);
-  const u = new Date(whole2 * DAY_MS2);
-  return new Date(u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate(), 0, 0, 0, Math.round((day - whole2) * DAY_MS2));
+  const u = new Date(whole2 * DAY_MS);
+  return new Date(u.getUTCFullYear(), u.getUTCMonth(), u.getUTCDate(), 0, 0, 0, Math.round((day - whole2) * DAY_MS));
 }
 function isZoned(value) {
   if (value instanceof Date) return !Number.isNaN(value.getTime());
@@ -11311,12 +10499,12 @@ function formatDateRange(start, end, words) {
   if (!Number.isFinite(from) || !Number.isFinite(stop)) return "";
   const timed = !isWholeDay(start) || !isWholeDay(until);
   const first = timed ? from : Math.floor(from);
-  const last2 = timed ? Math.max(from, stop) : Math.max(first, Math.ceil(stop) - 1);
-  const a = new Date(first * DAY_MS2);
-  const b = new Date(last2 * DAY_MS2);
+  const last = timed ? Math.max(from, stop) : Math.max(first, Math.ceil(stop) - 1);
+  const a = new Date(first * DAY_MS);
+  const b = new Date(last * DAY_MS);
   const years = a.getUTCFullYear() !== b.getUTCFullYear() && day.year === void 0;
   const f = dayFormatter(locale, { ...day, ...years ? { year: "numeric" } : {}, ...timed ? time : {} });
-  return first === last2 ? f.format(a) : range(f, a, b, to ?? (english(f) ? " to " : void 0));
+  return first === last ? f.format(a) : range(f, a, b, to ?? (english(f) ? " to " : void 0));
 }
 
 // ../../showcase/src/lib/time-scale.ts
@@ -11327,7 +10515,7 @@ function periodStart(unit, day, weekStartsOn) {
   const d = Math.floor(day);
   if (unit === "day") return d;
   if (unit === "week") return d - (weekday(d) - weekStartsOn + 7) % 7;
-  const u = new Date(d * DAY_MS2);
+  const u = new Date(d * DAY_MS);
   const y = u.getUTCFullYear();
   const m = u.getUTCMonth();
   if (unit === "month") return utcDay(y, m, 1);
@@ -11337,7 +10525,7 @@ function periodStart(unit, day, weekStartsOn) {
 function periodAfter(unit, start) {
   if (unit === "day") return start + 1;
   if (unit === "week") return start + 7;
-  const u = new Date(start * DAY_MS2);
+  const u = new Date(start * DAY_MS);
   const y = u.getUTCFullYear();
   const m = u.getUTCMonth();
   if (unit === "month") return utcDay(y, m + 1, 1);
@@ -11345,11 +10533,11 @@ function periodAfter(unit, start) {
   return utcDay(y + 1, 0, 1);
 }
 function format2(day, locale, options) {
-  return dayFormatter(locale, options).format(new Date(day * DAY_MS2));
+  return dayFormatter(locale, options).format(new Date(day * DAY_MS));
 }
 var pad22 = (n) => String(n).padStart(2, "0");
 function keyOf(unit, day) {
-  const u = new Date(day * DAY_MS2);
+  const u = new Date(day * DAY_MS);
   const y = u.getUTCFullYear();
   const m = u.getUTCMonth();
   if (unit === "year") return String(y);
@@ -11364,7 +10552,7 @@ function labelsOf(unit, role, day, locale) {
   else if (unit === "week") forms = [f({ day: "numeric", month: "short" }), f({ day: "numeric" })];
   else if (unit === "month") {
     forms = role === "major" ? [f({ month: "long", year: "numeric" }), f({ month: "short", year: "numeric" }), f({ month: "short" }), f({ month: "narrow" })] : [f({ month: "long" }), f({ month: "short" }), f({ month: "narrow" })];
-  } else if (unit === "quarter") forms = [`Q${Math.floor(new Date(day * DAY_MS2).getUTCMonth() / 3) + 1}`];
+  } else if (unit === "quarter") forms = [`Q${Math.floor(new Date(day * DAY_MS).getUTCMonth() / 3) + 1}`];
   else forms = [f({ year: "numeric" }), f({ year: "2-digit" })];
   return forms;
 }
@@ -11436,8 +10624,8 @@ function scaleOver(from, to, zoom, todayValue, weekStartsOn, locale, pxPerDay, p
 function extendedEnd(scale, width) {
   if (!(width > scale.width) || !(scale.pxPerDay > 0)) return scale.endDay;
   const unit = MINOR[scale.zoom];
-  const last2 = scale.startDay + Math.ceil(width / scale.pxPerDay) - 1;
-  return periodAfter(unit, periodStart(unit, last2, scale.weekStartsOn));
+  const last = scale.startDay + Math.ceil(width / scale.pxPerDay) - 1;
+  return periodAfter(unit, periodStart(unit, last, scale.weekStartsOn));
 }
 function extendTimeScaleTo(scale, endDay) {
   if (!(endDay > scale.endDay)) return scale;
@@ -11896,8 +11084,8 @@ var TimeViewport = forwardRef(function TimeViewport2({
   if (shadeDays && drawn.pxPerDay >= SHADE_MIN) {
     for (let d = drawn.startDay; d < drawn.endDay; d++) {
       if (!shadeDays(calendarDay(d))) continue;
-      const last2 = shaded[shaded.length - 1];
-      if (last2 && Math.abs(last2.x + last2.width - drawn.x(d)) < 0.5) last2.width += drawn.pxPerDay;
+      const last = shaded[shaded.length - 1];
+      if (last && Math.abs(last.x + last.width - drawn.x(d)) < 0.5) last.width += drawn.pxPerDay;
       else shaded.push({ key: String(d), x: drawn.x(d), width: drawn.pxPerDay });
     }
   }
@@ -12004,11 +11192,11 @@ var TimeViewport = forwardRef(function TimeViewport2({
         /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "min-w-[4.5rem] text-center text-xs text-[var(--ds-text-secondary)]", children: ZOOM_NAMES[scale.zoom] }),
         /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", "aria-disabled": !canZoomIn || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(-1), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14 }) })
       ] }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Previous period", onClick: () => api.page(-1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
+      /* @__PURE__ */ jsx(PeriodButton, { direction: -1, store, end: Math.max(0, drawn.width - visibleWidth), onPage: (d) => api.page(d) }),
       /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", disabled: todayAtX === null, onClick: () => {
         if (todayAtX !== null) setLeft(todayAtX - visibleWidth / 2);
       }, children: "Today" }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Next period", onClick: () => api.page(1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) }),
+      /* @__PURE__ */ jsx(PeriodButton, { direction: 1, store, end: Math.max(0, drawn.width - visibleWidth), onPage: (d) => api.page(d) }),
       toolbar
     ] })
   );
@@ -12129,6 +11317,13 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
     }
   );
 }
+function PeriodButton({ direction, store, end, onPage }) {
+  const left = useSyncExternalStore(store.subscribe, () => store.get().scrollLeft, () => 0);
+  const unavailable = direction < 0 ? left <= 0.5 : end > 0 && left >= end - 0.5;
+  return /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": direction < 0 ? "Previous period" : "Next period", "aria-disabled": unavailable || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => {
+    if (!unavailable) onPage(direction);
+  }, children: /* @__PURE__ */ jsx(Icon, { name: direction < 0 ? "chevron-left" : "chevron-right", size: 14 }) });
+}
 function LocaleProvider({ lang, acceptLanguage, children }) {
   const value = useMemo(() => localeChoice(lang, acceptLanguage), [lang, acceptLanguage]);
   return /* @__PURE__ */ jsx(LocaleContext.Provider, { value, children });
@@ -12267,7 +11462,7 @@ var NO_DATES = "no dates";
 var KNOCKOUT = 2;
 var EDGE = "border-[length:1px] border-transparent";
 var EDGE_WIDTH = 1;
-var SELECTED = "border-[var(--ds-accent-ink)]";
+var SELECTED2 = "border-[var(--ds-accent-ink)]";
 var UNDATED_INSET = 16;
 var NO_GROUPS = [];
 var NO_STATUSES = {};
@@ -12314,7 +11509,7 @@ function NoDates({ cue, selected, className, ...props }) {
       className: cn(
         "sticky flex cursor-pointer items-center gap-ds-1 whitespace-nowrap rounded-[var(--ds-radius-sm)] border-[length:1px] border-dashed border-[var(--ds-border-default)] px-ds-1.5 py-ds-0.5 text-xs text-[var(--ds-text-secondary)]",
         FOCUS_RING,
-        selected && SELECTED,
+        selected && SELECTED2,
         className
       ),
       style: { insetInlineStart: labelWidth + UNDATED_INSET },
@@ -12341,6 +11536,7 @@ function Gantt({
   describe,
   labelHeader = "Task",
   toolbar,
+  shadeDays,
   "aria-label": ariaLabel,
   className
 }) {
@@ -12570,7 +11766,7 @@ function Gantt({
     ] });
     const shapeBox = shape.kind === "milestone" ? (
       // the diamond draws the target's focus: its outline, which forced colours keep, so the target draws none of its own
-      /* @__PURE__ */ jsx("div", { ...treeitem(row), "aria-selected": isSelected, className: "group absolute grid cursor-pointer place-items-center outline-none", style: { insetInlineStart: (shape.x0 + shape.x1) / 2 - TARGET / 2, top: (ROW_HEIGHT2 - TARGET) / 2, width: TARGET, height: TARGET }, children: /* @__PURE__ */ jsx("span", { "data-gantt-shape": "milestone", "data-item": item.id, className: cn("block rotate-45 rounded-[2px]", GROUP_FOCUS_RING, EDGE, tone.fill, isSelected && SELECTED), style: { width: DIAMOND, height: DIAMOND } }) })
+      /* @__PURE__ */ jsx("div", { ...treeitem(row), "aria-selected": isSelected, className: "group absolute grid cursor-pointer place-items-center outline-none", style: { insetInlineStart: (shape.x0 + shape.x1) / 2 - TARGET / 2, top: (ROW_HEIGHT2 - TARGET) / 2, width: TARGET, height: TARGET }, children: /* @__PURE__ */ jsx("span", { "data-gantt-shape": "milestone", "data-item": item.id, className: cn("block rotate-45 rounded-[2px]", GROUP_FOCUS_RING, EDGE, tone.fill, isSelected && SELECTED2), style: { width: DIAMOND, height: DIAMOND } }) })
     ) : (
       // TimeBar keeps the title in view beside the pinned column while the bar's start is scrolled away
       /* @__PURE__ */ jsx(
@@ -12583,7 +11779,7 @@ function Gantt({
           start: dates.start,
           end: dates.end,
           minWidth: MIN_BAR,
-          className: cn("cursor-pointer text-xs font-medium", EDGE, tone.fill, tone.on, isSelected && SELECTED),
+          className: cn("cursor-pointer text-xs font-medium", EDGE, tone.fill, tone.on, isSelected && SELECTED2),
           style: { top: (ROW_HEIGHT2 - BAR_HEIGHT) / 2, bottom: "auto", height: BAR_HEIGHT },
           children: place === "inside" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-gs-clip": "", className: "flex min-w-0 items-center gap-ds-1 overflow-hidden", children: title })
         }
@@ -12665,6 +11861,7 @@ function Gantt({
         hasStatuses && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "min-w-0 flex-1" }),
         legend
       ] }),
+      shadeDays,
       tabStop: false,
       "aria-label": regionLabel,
       className: legendApart ? "h-auto flex-1" : className,
@@ -13011,19 +12208,19 @@ function trackClasses(orientation) {
     "border-b-[length:var(--ds-nav-h-track-border)] border-[var(--ds-border-default)]"
   );
 }
-function useScrollTrack(activeTab, enabled) {
+function useScrollTrack(stopTab, enabled) {
   const { ref, elRef, measure, fadeProps } = useScrollEdges({ enabled });
   useLayoutEffect(() => {
     if (!enabled) return;
     const el = elRef.current;
-    const tab = el?.querySelector('[role="tab"][aria-selected="true"]');
+    const tab = el?.querySelector('[role="tab"][tabindex="0"]');
     if (!el || !tab) return;
     const start = tab.offsetLeft;
     const end = start + tab.offsetWidth;
     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, elRef]);
+  }, [stopTab, enabled, measure, elRef]);
   useEffect(() => {
     if (!enabled) return;
     const el = elRef.current;
@@ -13104,7 +12301,7 @@ function getTabsFromDOM(el) {
     disabled: btn.getAttribute("aria-disabled") === "true"
   }));
 }
-function handleTabKeyDown(e, currentId, getTabs, orientation, onTabChange) {
+function handleTabKeyDown(e, currentId, getTabs, orientation, select) {
   const prev = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
   const next = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
   let targetId;
@@ -13132,7 +12329,7 @@ function handleTabKeyDown(e, currentId, getTabs, orientation, onTabChange) {
   }
   e.preventDefault();
   if (targetId && targetId !== currentId) {
-    onTabChange(targetId);
+    select?.(targetId);
     document.getElementById(`ds-tab-${targetId}`)?.focus();
   }
 }
@@ -13149,10 +12346,21 @@ function TabButton({
   truncate,
   onKeyDown,
   className,
-  hasPanel
+  hasPanel,
+  isTabStop,
+  setFocusedTab
 }) {
   const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1, disabled: !truncate && orientation !== "horizontal" });
   const isActive2 = activeTab === id;
+  const forget = useCallback(() => setFocusedTab((f) => f === id ? null : f), [setFocusedTab, id]);
+  useEffect(() => forget, [forget]);
+  const focusTracking = {
+    tabIndex: isTabStop ? 0 : -1,
+    onFocus: () => setFocusedTab(id),
+    onBlur: (e) => {
+      if (!e.currentTarget.closest('[role="tablist"]')?.contains(e.relatedTarget)) forget();
+    }
+  };
   const tabId = `ds-tab-${id}`;
   const panelId = hasPanel === false ? void 0 : `ds-tabpanel-${id}`;
   const badgeBg = orientation === "vertical" ? "bg-[var(--ds-nav-v-badge-bg)]" : "bg-[var(--ds-nav-h-badge-bg)]";
@@ -13171,7 +12379,7 @@ function TabButton({
         "aria-selected": isActive2,
         "aria-controls": panelId,
         "aria-disabled": disabled || void 0,
-        tabIndex: isActive2 ? 0 : -1,
+        ...focusTracking,
         onClick: disabled ? void 0 : () => onTabChange(id),
         onKeyDown,
         className: cn(
@@ -13207,7 +12415,7 @@ function TabButton({
       "aria-selected": isActive2,
       "aria-controls": panelId,
       "aria-disabled": disabled || void 0,
-      tabIndex: isActive2 ? 0 : -1,
+      ...focusTracking,
       onClick: disabled ? void 0 : () => onTabChange(id),
       onKeyDown,
       className: cn(
@@ -13242,8 +12450,8 @@ function TabButton({
   return btn;
 }
 function TabsList({ children, className }) {
-  const { orientation, fullWidth, overflow, activeTab } = useTabsCtx();
-  const track = useScrollTrack(activeTab, orientation === "horizontal" && overflow === "scroll");
+  const { orientation, fullWidth, overflow, stopTab } = useTabsCtx();
+  const track = useScrollTrack(stopTab, orientation === "horizontal" && overflow === "scroll");
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
       "div",
@@ -13258,7 +12466,7 @@ function TabsList({ children, className }) {
   return /* @__PURE__ */ jsx(TabStrip, { overflow, fullWidth, track, className, children });
 }
 function TabsTrigger({ value, children, count, icon, disabled, truncate, className }) {
-  const { activeTab, onTabChange, orientation, fullWidth, overflow } = useTabsCtx();
+  const { activeTab, onTabChange, orientation, fullWidth, overflow, activation, stopTab, setFocusedTab } = useTabsCtx();
   return /* @__PURE__ */ jsx(
     TabButton,
     {
@@ -13272,7 +12480,9 @@ function TabsTrigger({ value, children, count, icon, disabled, truncate, classNa
       activeTab,
       onTabChange,
       fullWidth,
-      onKeyDown: (e) => handleTabKeyDown(e, value, () => getTabsFromDOM(e.currentTarget), orientation, onTabChange),
+      isTabStop: value === stopTab,
+      setFocusedTab,
+      onKeyDown: (e) => handleTabKeyDown(e, value, () => getTabsFromDOM(e.currentTarget), orientation, activation === "automatic" ? onTabChange : void 0),
       className
     }
   );
@@ -13299,15 +12509,20 @@ function TabsRoot(props) {
     orientation = "horizontal",
     fullWidth = false,
     overflow = "scroll",
+    activation = "automatic",
     className
   } = props;
   const isMobile = useBreakpoint("md");
   const effectiveOrientation = orientation === "responsive" ? "vertical" : orientation;
   const arrayApi = "tabs" in props && !!props.tabs;
   const arrayOverflow = arrayApi && props.tabs.some((t) => t.truncate) ? "truncate" : overflow;
-  const track = useScrollTrack(activeTab, arrayApi && effectiveOrientation === "horizontal" && arrayOverflow === "scroll");
+  const [focusedTab, setFocusedTab] = useState(null);
+  const stopTab = focusedTab ?? activeTab;
+  const track = useScrollTrack(stopTab, arrayApi && effectiveOrientation === "horizontal" && arrayOverflow === "scroll");
   if ("tabs" in props && props.tabs) {
     const { tabs, mobile = "scroll" } = props;
+    const stopIndex = rovingTabStop(tabs, (t) => t.id === stopTab, (t) => !!t.disabled && t.id !== stopTab);
+    const select = activation === "automatic" ? onTabChange : void 0;
     const collapseToDropdown = isMobile && (orientation === "responsive" || mobile === "dropdown");
     if (collapseToDropdown) {
       return (
@@ -13342,14 +12557,14 @@ function TabsRoot(props) {
                 children: tab.group
               }
             ),
-            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) })
+            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, isTabStop: i === stopIndex, setFocusedTab, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, select) })
           ] }, tab.id))
         }
       );
     }
-    return /* @__PURE__ */ jsx(TabStrip, { overflow: arrayOverflow, fullWidth, track, className, children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) }, tab.id)) });
+    return /* @__PURE__ */ jsx(TabStrip, { overflow: arrayOverflow, fullWidth, track, className, children: tabs.map((tab, i) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, isTabStop: i === stopIndex, setFocusedTab, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, select) }, tab.id)) });
   }
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, fullWidth, overflow }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, fullWidth, overflow, activation, stopTab, setFocusedTab }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
 }
 var Tabs = Object.assign(TabsRoot, {
   List: TabsList,
@@ -13900,7 +13115,7 @@ var Sidebar = forwardRef(function Sidebar2({
               ]
             }
           );
-          return collapsed ? /* @__PURE__ */ jsx(AutoTooltip, { content: "Expand sidebar", side: "right", delay: 100, container: portalEl ?? void 0, children: collapseButton }) : collapseButton;
+          return /* @__PURE__ */ jsx(AutoTooltip, { content: "Expand sidebar", side: "right", delay: 100, container: portalEl ?? void 0, disabled: !collapsed, children: collapseButton });
         })(),
         footer && /* @__PURE__ */ jsx(
           "div",
@@ -14151,6 +13366,8 @@ function SidebarNav({
           item.onClick?.();
           onItemClick?.(item, index);
         },
+        "aria-label": collapsed && isRoot ? item.label : void 0,
+        "aria-current": item.active ? "page" : void 0,
         className: cn(
           "flex items-center gap-ds-2 transition-colors cursor-pointer",
           FOCUS_RING,
@@ -14331,7 +13548,7 @@ function SidebarNav({
       {
         className: cn("flex flex-col", className),
         style: {
-          paddingTop: isCompact ? "var(--ds-space-1)" : dropTopInset ? 0 : "var(--ds-space-3)",
+          paddingTop: isCompact ? "var(--ds-space-1)" : dropTopInset ? `${FOCUS_ROOM}px` : "var(--ds-space-3)",
           paddingRight: isCompact ? "var(--ds-space-1)" : "var(--ds-space-2)",
           paddingBottom: isCompact ? "var(--ds-space-1)" : "var(--ds-space-3)",
           paddingLeft: isCompact ? "var(--ds-space-1)" : "var(--ds-space-2)",
@@ -15105,6 +14322,7 @@ function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
                 {
                   type: "button",
                   role: "menuitem",
+                  "aria-current": item.active ? "page" : void 0,
                   onClick: () => {
                     onItemClick?.(item, maxVisible - 1 + i);
                     closeOverflow();
@@ -15132,26 +14350,74 @@ function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
   );
 }
 function NavButton({ item, onClick }) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: cn(
-        "flex flex-col items-center justify-center gap-ds-0.5 flex-1 h-full",
-        "text-2xs font-medium transition-colors cursor-pointer",
-        // flush with the window's edge (the bar's foot and its ends): the outline sits inside, where it shows whole (D8)
-        FOCUS_INSET,
-        item.active ? "text-[var(--ds-accent-ink)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 20 }),
-        /* @__PURE__ */ jsx("span", { children: item.label })
-      ]
-    }
+  return (
+    // the current page says so, not by its colour alone (Sprint 25.29 item 17)
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick,
+        "aria-current": item.active ? "page" : void 0,
+        className: cn(
+          "flex flex-col items-center justify-center gap-ds-0.5 flex-1 h-full",
+          "text-2xs font-medium transition-colors cursor-pointer",
+          // flush with the window's edge (the bar's foot and its ends): the outline sits inside, where it shows whole (D8)
+          FOCUS_INSET,
+          item.active ? "text-[var(--ds-accent-ink)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 20 }),
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ]
+      }
+    )
   );
 }
 
+// ../../showcase/src/lib/scroll-padding.ts
+var registry = /* @__PURE__ */ new WeakMap();
+function apply(scroller, claims) {
+  const px = Math.max(0, ...claims.sizes.values());
+  if (px) {
+    scroller.style.setProperty("scroll-padding-top", claims.floor ? `max(${claims.floor}, ${px}px)` : `${px}px`);
+    return;
+  }
+  if (claims.inline) scroller.style.setProperty("scroll-padding-top", claims.inline, claims.priority);
+  else scroller.style.removeProperty("scroll-padding-top");
+}
+function claimScrollPaddingTop(scroller) {
+  let claims = registry.get(scroller);
+  if (!claims) {
+    const own = getComputedStyle(scroller).getPropertyValue("scroll-padding-top").trim();
+    claims = {
+      inline: scroller.style.getPropertyValue("scroll-padding-top"),
+      priority: scroller.style.getPropertyPriority("scroll-padding-top"),
+      floor: own && own !== "auto" && parseFloat(own) !== 0 ? own : null,
+      sizes: /* @__PURE__ */ new Map(),
+      holders: 0
+    };
+    registry.set(scroller, claims);
+  }
+  const held = claims;
+  held.holders++;
+  const token = /* @__PURE__ */ Symbol("scroll-padding-claim");
+  let released = false;
+  return {
+    set(px) {
+      if (released) return;
+      held.sizes.set(token, Math.max(0, Math.ceil(px)));
+      apply(scroller, held);
+    },
+    release() {
+      if (released) return;
+      released = true;
+      held.sizes.delete(token);
+      apply(scroller, held);
+      if (--held.holders === 0) registry.delete(scroller);
+    }
+  };
+}
+
 // ../../showcase/src/lib/shell-theme.ts
 var PAGE_HEADER_MARK = /* @__PURE__ */ Symbol.for("gridsmith.PageHeader");
 function resolvePageHeader(theme, props, facts) {
@@ -16075,20 +15341,38 @@ function SnappingHeader({
   } : setStickyRef;
   useLayoutEffect(() => {
     const report = container?.setPinnedHeight;
-    if (!report) return;
     const el = stickyRef.current;
     if (!(pinned && collapsed) || !el) {
-      report(null);
+      report?.(null);
       return;
     }
-    const sync = () => report(el.offsetHeight);
+    const doc = el.ownerDocument;
+    const claim = claimScrollPaddingTop(findScrollParent(el) ?? doc.documentElement);
+    let inBar = el.contains(doc.activeElement);
+    const sync = () => {
+      report?.(el.offsetHeight);
+      claim.set(inBar ? 0 : (parseFloat(getComputedStyle(el).top) || 0) + el.offsetHeight + FOCUS_ROOM);
+    };
+    const follow2 = (to) => {
+      const now = to instanceof Node && el.contains(to);
+      if (now !== inBar) {
+        inBar = now;
+        sync();
+      }
+    };
+    const onFocusIn = (e) => follow2(e.target);
+    const onFocusOut = (e) => follow2(e.relatedTarget);
     sync();
-    if (typeof ResizeObserver === "undefined") return () => report(null);
-    const obs = new ResizeObserver(sync);
-    obs.observe(el);
+    doc.addEventListener("focusin", onFocusIn, true);
+    doc.addEventListener("focusout", onFocusOut, true);
+    const obs = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(sync);
+    obs?.observe(el);
     return () => {
-      obs.disconnect();
-      report(null);
+      obs?.disconnect();
+      doc.removeEventListener("focusin", onFocusIn, true);
+      doc.removeEventListener("focusout", onFocusOut, true);
+      report?.(null);
+      claim.release();
     };
   }, [container?.setPinnedHeight, pinned, collapsed]);
   const sentinelRef = useRef(null);
@@ -17345,68 +16629,6 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
     container ?? document.body
   );
 }
-function HoverCard({
-  content,
-  children,
-  side = "bottom",
-  delay = 300,
-  closeDelay = 200,
-  className,
-  container
-}) {
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef(null);
-  const floatingRef = useRef(null);
-  const openTimeout = useRef(void 0);
-  const closeTimeout = useRef(void 0);
-  const pos = usePosition(triggerRef, floatingRef, open, { side, offset: 8, flip: true });
-  const show = useCallback(() => {
-    clearTimeout(closeTimeout.current);
-    openTimeout.current = setTimeout(() => setOpen(true), delay);
-  }, [delay]);
-  const hide = useCallback(() => {
-    clearTimeout(openTimeout.current);
-    closeTimeout.current = setTimeout(() => setOpen(false), closeDelay);
-  }, [closeDelay]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ref: triggerRef,
-        onMouseEnter: show,
-        onMouseLeave: hide,
-        onFocus: show,
-        onBlur: hide,
-        children
-      }
-    ),
-    open && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: floatingRef,
-          onMouseEnter: () => {
-            clearTimeout(closeTimeout.current);
-          },
-          onMouseLeave: hide,
-          className: cn(
-            "fixed z-[var(--ds-z-popover)]",
-            "w-72 p-ds-4",
-            "bg-[var(--ds-bg-surface-elevated)] text-[var(--ds-text-primary)]",
-            GLASS_DROPDOWN,
-            "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-            "rounded-[var(--ds-radius-md)]",
-            "animate-in fade-in-0 zoom-in-95",
-            className
-          ),
-          style: { top: pos.top, left: pos.left },
-          children: /* @__PURE__ */ jsx(RowsCtx, { value: false, children: content })
-        }
-      ),
-      container ?? document.body
-    )
-  ] });
-}
 function ContextMenu({ items, children, className, ref, container }) {
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState({ x: 0, y: 0 });
@@ -17611,7 +16833,8 @@ function NotificationCenter({
       document.removeEventListener("mousedown", onClick);
     };
   }, [open, setOpen, isTopLayer, returnFocus]);
-  const grouped = groupByDate(filteredNotifications);
+  const today = useCurrentDay();
+  const grouped = groupByDay(filteredNotifications, today);
   if (variant === "page") {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-ds-4", children: [
@@ -17661,8 +16884,8 @@ function NotificationCenter({
         /* @__PURE__ */ jsx(Icon, { name: "bell", size: 32, className: "opacity-30 mb-ds-2" }),
         /* @__PURE__ */ jsx("p", { className: "text-sm", children: filter === "unread" ? "No unread notifications" : "No notifications" })
       ] }),
-      grouped.map(({ label, items }) => /* @__PURE__ */ jsxs("div", { className: "mb-ds-2", children: [
-        /* @__PURE__ */ jsx("p", { className: "px-ds-1 pt-ds-3 pb-ds-1 text-2xs font-medium uppercase tracking-wider text-[var(--ds-text-muted)]", children: label }),
+      /* @__PURE__ */ jsx(RowsCtx, { value: true, children: grouped.map(({ label, items }) => /* @__PURE__ */ jsxs("div", { className: "mb-ds-2", children: [
+        label && /* @__PURE__ */ jsx("p", { className: "px-ds-1 pt-ds-3 pb-ds-1 text-2xs font-medium uppercase tracking-wider text-[var(--ds-text-muted)]", children: label }),
         items.map((n) => /* @__PURE__ */ jsxs(
           "div",
           {
@@ -17688,7 +16911,7 @@ function NotificationCenter({
                   /* @__PURE__ */ jsx(TruncTitle, { children: n.title })
                 ] }),
                 n.description && /* @__PURE__ */ jsx(ClampedDesc, { className: "text-xs text-[var(--ds-text-muted)] mt-ds-0.5", children: n.description }),
-                /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-1 tabular-nums", children: n.timestamp })
+                /* @__PURE__ */ jsx(NotificationTime, { timestamp: n.timestamp })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-ds-1 shrink-0", children: [
                 !n.read && onMarkRead && /* @__PURE__ */ jsx(
@@ -17716,7 +16939,7 @@ function NotificationCenter({
           },
           n.id
         ))
-      ] }, label))
+      ] }, label ?? "rows")) })
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("relative inline-flex", className), children: [
@@ -17775,8 +16998,8 @@ function NotificationCenter({
                 /* @__PURE__ */ jsx(Icon, { name: "bell", size: 32, className: "opacity-30 mb-ds-2" }),
                 /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No notifications" })
               ] }),
-              grouped.map(({ label, items }) => /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "px-ds-4 pt-ds-3 pb-ds-1 text-2xs font-medium uppercase tracking-wider text-[var(--ds-text-muted)]", children: label }),
+              /* @__PURE__ */ jsx(RowsCtx, { value: true, children: grouped.map(({ label, items }) => /* @__PURE__ */ jsxs("div", { children: [
+                label && /* @__PURE__ */ jsx("p", { className: "px-ds-4 pt-ds-3 pb-ds-1 text-2xs font-medium uppercase tracking-wider text-[var(--ds-text-muted)]", children: label }),
                 items.map((n) => /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -17802,7 +17025,7 @@ function NotificationCenter({
                           /* @__PURE__ */ jsx(TruncTitle, { children: n.title })
                         ] }),
                         n.description && /* @__PURE__ */ jsx(ClampedDesc, { className: "text-xs text-[var(--ds-text-muted)] mt-ds-0.5", children: n.description }),
-                        /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-1 tabular-nums", children: n.timestamp })
+                        /* @__PURE__ */ jsx(NotificationTime, { timestamp: n.timestamp })
                       ] }),
                       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-ds-1 shrink-0", children: [
                         !n.read && onMarkRead && /* @__PURE__ */ jsx(
@@ -17830,7 +17053,7 @@ function NotificationCenter({
                   },
                   n.id
                 ))
-              ] }, label))
+              ] }, label ?? "rows")) })
             ] })
           ]
         }
@@ -17839,27 +17062,33 @@ function NotificationCenter({
     )
   ] });
 }
-function groupByDate(notifications) {
-  const today = /* @__PURE__ */ new Date();
-  today.setHours(0, 0, 0, 0);
-  const yesterday = new Date(today);
-  yesterday.setDate(yesterday.getDate() - 1);
-  const groups = {};
-  const order = [];
+function NotificationTime({ timestamp }) {
+  const at = datedMillis(timestamp);
+  return /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-1 tabular-nums", children: typeof timestamp === "string" && !Number.isFinite(at) ? timestamp : /* @__PURE__ */ jsx(RelativeTime, { time: at }) });
+}
+function useCurrentDay() {
+  const today = useToday();
+  const [redraws, redraw] = useReducer((n) => n + 1, 0);
+  const tomorrow = today && new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1).getTime();
+  useEffect(() => {
+    if (tomorrow === null) return;
+    const timer = setTimeout(redraw, tomorrow - Date.now() + 1e3);
+    return () => clearTimeout(timer);
+  }, [tomorrow, redraws]);
+  return today;
+}
+var DAY_GROUPS = ["Today", "Yesterday", "Earlier"];
+function groupByDay(notifications, today) {
+  if (!today) return notifications.length ? [{ label: null, items: notifications }] : [];
+  const todayStarts = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
+  const yesterdayStarts = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1).getTime();
+  const groups = new Map(DAY_GROUPS.map((label) => [label, []]));
   for (const n of notifications) {
-    let label;
-    if (n.timestamp.toLowerCase().includes("ago") || n.timestamp.toLowerCase().includes("just now")) {
-      label = "Today";
-    } else {
-      label = "Earlier";
-    }
-    if (!groups[label]) {
-      groups[label] = [];
-      order.push(label);
-    }
-    groups[label].push(n);
+    const at = datedMillis(n.timestamp);
+    const label = !Number.isFinite(at) || at < yesterdayStarts ? "Earlier" : at < todayStarts ? "Yesterday" : "Today";
+    groups.get(label).push(n);
   }
-  return order.map((label) => ({ label, items: groups[label] }));
+  return DAY_GROUPS.filter((label) => groups.get(label).length > 0).map((label) => ({ label, items: groups.get(label) }));
 }
 function Tour({ steps, open, onClose, onComplete, container }) {
   const [current, setCurrent] = useState(0);
@@ -18254,8 +17483,8 @@ function useFlowSteps(options) {
     go(target, { replace: true });
   }, [key, stored, valid, furthest, href, go, at]);
   useEffect(() => {
-    if (key && ready && stored?.current !== step) update(key, (v) => ({ ...v, current: step }));
-  }, [key, ready, stored?.current, step]);
+    if (key && ready) update(key, (v) => v.current === step ? v : { ...v, current: step });
+  }, [key, ready, step]);
   useEffect(() => {
     if (!key || !ready) return;
     const store = storeFor(key);
@@ -18659,57 +17888,7 @@ function DangerZone({ title = "Danger zone", description, children, className })
     )
   ] });
 }
-var lineClampClasses = {
-  1: "truncate",
-  2: "line-clamp-2",
-  3: "line-clamp-3",
-  4: "line-clamp-4",
-  5: "line-clamp-5",
-  6: "line-clamp-6"
-};
-function getTruncationClass(lines) {
-  return lineClampClasses[lines] || `line-clamp-[${lines}]`;
-}
-var TextOverflow = forwardRef(function TextOverflow2({
-  lines = 1,
-  tooltip = true,
-  tooltipContent,
-  expandMode = "tooltip",
-  as = "div",
-  children,
-  className
-}, forwardedRef) {
-  const { ref: overflowRef, isTruncated } = useTextOverflow({ lines });
-  const truncClass = getTruncationClass(lines);
-  const Tag3 = as;
-  const content = /* @__PURE__ */ jsx(
-    Tag3,
-    {
-      ref: (node) => {
-        overflowRef(node);
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      className: cn(truncClass, "min-w-0", className),
-      children
-    }
-  );
-  if (!tooltip || !isTruncated) {
-    return content;
-  }
-  const resolvedTooltipContent = tooltipContent ?? children;
-  if (expandMode === "hovercard") {
-    return /* @__PURE__ */ jsx(
-      HoverCard,
-      {
-        content: /* @__PURE__ */ jsx("div", { className: "max-w-[320px] text-sm text-[var(--ds-text-primary)]", children: resolvedTooltipContent }),
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(AutoTooltip, { content: resolvedTooltipContent, children: content });
-});
 
-export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, AvatarGroup, BottomNav, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DangerZone, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, DropdownMenu, EmptyState, EntityCell, FileUpload, FlowSaved, FormWrapper, Gantt, HoverCard, Kbd, Launcher, LocaleProvider, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageActions, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, RecurrencePicker, RecurrenceScopeDialog, RelativeTime, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sheet, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, TextOverflow, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, TimezoneSelect, Toast, ToastProvider, Tour, TransferList, TreeView, browserTimeZone, canonicalTimeZone, countEdited, dateOfDay, dayOf, deleteOccurrence, describeRecurrence, endDayOf, fitLabel, fitLabels, formatDateRange, nthOf, occurrenceOn, occurrences, parseRRule, readFlowProgress, readRecurrence, recurrencePresets, sameRecurrence, saveOccurrence, timeExtent, timeZoneOffset, toRRule, useBrowserTimeZone, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useRelativeTimeFormat, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, AvatarGroup, BottomNav, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DangerZone, DataList, DateRangePicker, DescriptionList, Dialog, Dock, EmptyState, EntityCell, FileUpload, FlowSaved, FormWrapper, Gantt, Kbd, Launcher, LocaleProvider, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageActions, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, RecurrencePicker, RecurrenceScopeDialog, RelativeTime, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sheet, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, TimezoneSelect, Toast, ToastProvider, Tour, TransferList, TreeView, browserTimeZone, canonicalTimeZone, countEdited, dateOfDay, dayOf, deleteOccurrence, describeRecurrence, endDayOf, fitLabel, fitLabels, formatDateRange, nthOf, occurrenceOn, occurrences, parseRRule, readFlowProgress, readRecurrence, recurrencePresets, sameRecurrence, saveOccurrence, timeExtent, timeZoneOffset, toRRule, useBrowserTimeZone, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useRelativeTimeFormat, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map