gridsmith-ui 0.30.0 → 0.30.2

package/dist/index.js

@@ -1,22 +1,23 @@
 "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-UNS4TGGK.js';
-export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-UNS4TGGK.js';
-import { Skeleton, TITLE_TEXT } from './chunk-INGF2CPW.js';
-export { Skeleton } from './chunk-INGF2CPW.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-K6IDOCGE.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-K6IDOCGE.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-KTPGMJUK.js';
-export { CodeBlock, Divider, Link } from './chunk-KTPGMJUK.js';
-import { DropdownMenu } from './chunk-Z4MCD73B.js';
-export { DropdownMenu } from './chunk-Z4MCD73B.js';
-import { useFillHeight, FillContext, useKeyboardScroll } from './chunk-RHWTMTU5.js';
-import { Badge } from './chunk-NLXQ323J.js';
-export { Badge } from './chunk-NLXQ323J.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-F2BNJSON.js';
-export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-F2BNJSON.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-NI5542ZM.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-NI5542ZM.js';
+import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-ZASGFL5D.js';
+export { Avatar } from './chunk-ZASGFL5D.js';
+import { Link } from './chunk-SQHKC4HA.js';
+export { CodeBlock, Divider, Link } from './chunk-SQHKC4HA.js';
+import { DropdownMenu } from './chunk-HVGHGBKV.js';
+export { DropdownMenu } from './chunk-HVGHGBKV.js';
+import { useFillHeight, FillContext } from './chunk-DBHVJ7Z3.js';
+import { Badge } from './chunk-BZRZENBS.js';
+export { Badge } from './chunk-BZRZENBS.js';
+import { useKeyboardScroll } from './chunk-ACLKDE5W.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-SIWERRP2.js';
+export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-SIWERRP2.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-USHW523V.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-USHW523V.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';
@@ -26,26 +27,31 @@ import { useInputModality, inputModality } from './chunk-7RKC5C7G.js';
 export { INPUT_MODALITY_ATTR, inputModality, installInputModality, useInputModality } from './chunk-7RKC5C7G.js';
 import { FormChangeCtx, useReportedChange, useOptionalFormContext, FormCtx } from './chunk-72SDAX54.js';
 export { useFormContext } from './chunk-72SDAX54.js';
-import { Button, CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, ControlSizeContext, triggerType, SurfaceBoundary, Spinner, useFramesItself, TableCardCtx } from './chunk-Q36JVJX4.js';
-export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-Q36JVJX4.js';
+import { Button, CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, ControlSizeContext, triggerType, SurfaceBoundary, Spinner, useFramesItself, TableCardCtx } from './chunk-MIUSSYVE.js';
+export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-MIUSSYVE.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 { focusAfterSelfRemoval, FOCUSABLE, FIELD, ZOOM_KEYS, rovingTabStop, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, usePopupFocus, CONTROL_ANCESTOR, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus } from './chunk-OIOII5L6.js';
-export { useGridKeyboard } from './chunk-OIOII5L6.js';
-import { useTextOverflow, AutoTooltip } from './chunk-GQVBZ4GW.js';
-export { Tooltip, useTextOverflow } from './chunk-GQVBZ4GW.js';
-import { mergeRefs } from './chunk-7Q46JXSK.js';
+import { useTextOverflow } from './chunk-ZCDA74RQ.js';
+export { useTextOverflow } from './chunk-ZCDA74RQ.js';
+import { AutoTooltip, useRevealFocus } from './chunk-WWN6CQKI.js';
+export { Tooltip, useRevealFocus } from './chunk-WWN6CQKI.js';
 import { Icon, slotIcon, warnOnce } from './chunk-L6HWACK7.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, 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-JTU7OBYJ.js';
+import { mergeRefs } from './chunk-7Q46JXSK.js';
+import { focusAfterSelfRemoval, FOCUSABLE, useFocusKeptInList, useLatest, FIELD, ZOOM_KEYS, rovingTabStop, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberOpener, focusInitial, OVERLAY_CLOSE_ATTR, usePopupFocus, usePosition, CONTROL_ANCESTOR, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus } from './chunk-4HJDOZ2M.js';
+export { useGridKeyboard } from './chunk-4HJDOZ2M.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, Children, Fragment as Fragment$1, cloneElement, useSyncExternalStore, useReducer } from 'react';
+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 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 null;
+}
 function BulkActionBar({ selectedCount, actions, onClearSelection, className }) {
   const isMobile = useBreakpoint("sm");
   if (selectedCount === 0) return null;
@@ -96,7 +102,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 })
@@ -823,7 +833,7 @@ function DateRangePicker({
               onChange: takeTyped
             }
           ) }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(AutoTooltip, { content: "Choose a date range", children: /* @__PURE__ */ jsx(
             "button",
             {
               ref: buttonRef,
@@ -836,7 +846,7 @@ function DateRangePicker({
               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 })
             }
-          )
+          ) })
         ]
       }
     ),
@@ -1703,8 +1713,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();
@@ -1713,7 +1723,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);
@@ -1721,8 +1737,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;
@@ -1837,7 +1852,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",
@@ -1847,13 +1862,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)")
@@ -2884,7 +2899,7 @@ function TimePicker({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(AutoTooltip, { content: "Choose a time", children: /* @__PURE__ */ jsx(
             "button",
             {
               ref: buttonRef,
@@ -2898,7 +2913,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 })
             }
-          )
+          ) })
         ]
       }
     ),
@@ -3099,7 +3114,7 @@ var Tag = forwardRef(function Tag2({
             children: label
           }
         ) : label,
-        onRemove && !disabled && /* @__PURE__ */ jsx(
+        onRemove && !disabled && /* @__PURE__ */ jsx(AutoTooltip, { content: typeof children === "string" ? `Remove ${children}` : "Remove", children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -3115,7 +3130,7 @@ var Tag = forwardRef(function Tag2({
             ),
             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: size === "sm" ? 10 : 12 })
           }
-        )
+        ) })
       ]
     }
   );
@@ -3164,6 +3179,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()) {
@@ -4311,7 +4332,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),
@@ -4322,7 +4346,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),
@@ -4333,7 +4360,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),
@@ -4344,7 +4374,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),
@@ -5004,7 +5037,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",
@@ -5018,7 +5051,7 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
           onClick: (e) => e.stopPropagation(),
           children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
         }
-      ),
+      ) }),
       items: menuItems
     }
   ) : null;
@@ -5881,6 +5914,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]);
@@ -5937,6 +5975,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);
@@ -6064,8 +6105,14 @@ function Table({
     cardHeading,
     body
   ] });
-  const control = pager && 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,
@@ -6114,7 +6161,7 @@ function Table({
       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("relative 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 }) => {
@@ -6205,7 +6252,8 @@ function Table({
   const cellCount = columns.length + lead;
   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,
@@ -6216,8 +6264,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;
@@ -6319,7 +6367,7 @@ 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: (_, { 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(
+              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",
@@ -6336,7 +6384,7 @@ function Table({
                     }
                   )
                 }
-              ) }),
+              ) }) }),
               columns.map((col, c) => {
                 const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
                 const kind = kindOf2(col);
@@ -7218,6 +7266,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;
@@ -7342,7 +7396,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)) }) })
@@ -8793,7 +8847,9 @@ function ExpandableDescription({ children, className }) {
   );
 }
 function HorizontalLayout({ items, minItemWidth, className }) {
-  return /* @__PURE__ */ jsx("div", { "data-timeline-row": "", className: cn("relative flex items-start overflow-x-auto snap-x", className), children: items.map((item, i) => {
+  const [row, setRow] = useState(null);
+  useKeyboardScroll(row, "Timeline", true, false, "x");
+  return /* @__PURE__ */ jsx("div", { ref: setRow, "data-timeline-row": "", className: cn("relative flex items-start overflow-x-auto snap-x", FOCUS_INSET, className), children: items.map((item, i) => {
     const isFirst = i === 0;
     const isLast = i === items.length - 1;
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 shrink-0 flex-col items-center snap-start", style: { minWidth: minItemWidth }, children: [
@@ -9242,6 +9298,7 @@ function TreeNodeRow({
             CheckboxIndicator2,
             {
               state: checkState,
+              label: node.label,
               onClick: (e) => {
                 e.stopPropagation();
                 handleCheck(node);
@@ -9275,12 +9332,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",
@@ -9451,7 +9509,7 @@ function Carousel({
         ),
         /* @__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",
@@ -9461,8 +9519,8 @@ function Carousel({
               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",
@@ -9472,7 +9530,7 @@ function Carousel({
               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",
@@ -9722,7 +9780,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({
@@ -9751,7 +9812,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);
@@ -9790,12 +9851,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,
           {
@@ -9911,8 +9976,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,
     {
@@ -10220,13 +10285,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)]",
@@ -11119,11 +11191,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
     ] })
   );
@@ -11244,6 +11316,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 });
@@ -12201,7 +12280,7 @@ function useScrollTrack(stopTab, enabled) {
   };
 }
 var SCROLL_TRACK = "overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
-function TabStrip({ overflow, fullWidth, track, className, children }) {
+function TabStrip({ overflow, fullWidth, track, label, className, children }) {
   const scrolls = overflow === "scroll";
   return /* @__PURE__ */ jsx("div", { className: cn("min-w-0 max-w-full", fullWidth && "w-full", className), children: /* @__PURE__ */ jsx(
     "div",
@@ -12209,7 +12288,7 @@ function TabStrip({ overflow, fullWidth, track, className, children }) {
       ...scrolls ? track : {},
       "data-gs-clip": scrolls ? void 0 : "",
       className: cn("relative -m-[4px] p-[4px] scroll-px-[4px]", scrolls ? SCROLL_TRACK : "overflow-hidden"),
-      children: /* @__PURE__ */ jsx("div", { role: "tablist", className: cn(trackClasses("horizontal"), scrolls ? "w-max min-w-full" : "w-full"), children })
+      children: /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": label, className: cn(trackClasses("horizontal"), scrolls ? "w-max min-w-full" : "w-full"), children })
     }
   ) });
 }
@@ -12370,7 +12449,7 @@ function TabButton({
   return btn;
 }
 function TabsList({ children, className }) {
-  const { orientation, fullWidth, overflow, stopTab } = useTabsCtx();
+  const { orientation, fullWidth, overflow, stopTab, label } = useTabsCtx();
   const track = useScrollTrack(stopTab, orientation === "horizontal" && overflow === "scroll");
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsx(
@@ -12378,12 +12457,13 @@ function TabsList({ children, className }) {
       {
         role: "tablist",
         "aria-orientation": "vertical",
+        "aria-label": label,
         className: cn(trackClasses("vertical"), className),
         children
       }
     );
   }
-  return /* @__PURE__ */ jsx(TabStrip, { overflow, fullWidth, track, className, children });
+  return /* @__PURE__ */ jsx(TabStrip, { overflow, fullWidth, track, label, className, children });
 }
 function TabsTrigger({ value, children, count, icon, disabled, truncate, className }) {
   const { activeTab, onTabChange, orientation, fullWidth, overflow, activation, stopTab, setFocusedTab } = useTabsCtx();
@@ -12430,6 +12510,7 @@ function TabsRoot(props) {
     fullWidth = false,
     overflow = "scroll",
     activation = "automatic",
+    "aria-label": ariaLabel,
     className
   } = props;
   const isMobile = useBreakpoint("md");
@@ -12453,6 +12534,7 @@ function TabsRoot(props) {
             options: tabs.filter((t) => !t.disabled).map((t) => ({ id: t.id, label: t.label, group: t.group })),
             value: activeTab,
             onChange: (v) => onTabChange(v),
+            "aria-label": ariaLabel ?? "Contents",
             className
           }
         ) })
@@ -12464,6 +12546,7 @@ function TabsRoot(props) {
         {
           role: "tablist",
           "aria-orientation": "vertical",
+          "aria-label": ariaLabel,
           className: cn(trackClasses("vertical"), className),
           children: tabs.map((tab, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
             tab.group && tab.group !== tabs[i - 1]?.group && /* @__PURE__ */ jsx(
@@ -12482,9 +12565,9 @@ function TabsRoot(props) {
         }
       );
     }
-    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(TabStrip, { overflow: arrayOverflow, fullWidth, track, label: ariaLabel, 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, activation, stopTab, setFocusedTab }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, fullWidth, overflow, activation, stopTab, setFocusedTab, label: ariaLabel }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
 }
 var Tabs = Object.assign(TabsRoot, {
   List: TabsList,
@@ -12534,7 +12617,7 @@ function SettingsLayout({
   const stickyTop = shell ? "var(--ds-sticky-offset, 0px)" : "calc(var(--ds-navbar-height) + var(--ds-sticky-offset, 0px))";
   if (layout === "tabs") {
     return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "tabs", className: cn("flex flex-col gap-ds-6", className), children: [
-      /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(Tabs, { orientation: "horizontal", mobile: "dropdown", tabs, activeTab: value, onTabChange: onChange }) }),
+      /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(Tabs, { orientation: "horizontal", mobile: "dropdown", tabs, activeTab: value, onTabChange: onChange, "aria-label": ariaLabel }) }),
       /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: PANEL_CLASSES, style: PANEL_STYLE, children })
     ] });
   }
@@ -12556,7 +12639,7 @@ function SettingsLayout({
     );
   }
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-settings-layout": "sidebar", className: cn("flex flex-row items-start gap-ds-8", className), children: [
-    /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: "sticky self-start shrink-0", style: { width: `${railWidth}px`, top: stickyTop }, children: /* @__PURE__ */ jsx(Tabs, { orientation: "vertical", tabs, activeTab: value, onTabChange: onChange, className: "w-full" }) }),
+    /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className: "sticky self-start shrink-0", style: { width: `${railWidth}px`, top: stickyTop }, children: /* @__PURE__ */ jsx(Tabs, { orientation: "vertical", tabs, activeTab: value, onTabChange: onChange, "aria-label": ariaLabel, className: "w-full" }) }),
     /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: cn("flex-1", PANEL_CLASSES), style: PANEL_STYLE, children })
   ] });
 }
@@ -12762,11 +12845,12 @@ function ScrollArea({
   className,
   orientation = "vertical",
   maxHeight,
-  maxWidth
+  maxWidth,
+  "aria-label": ariaLabel = "Scrollable content"
 }) {
   const viewportRef = useRef(null);
   const [viewport, setViewport] = useState(null);
-  useRevealFocus(viewport);
+  useKeyboardScroll(viewport, ariaLabel, true, false, orientation === "horizontal" ? "x" : orientation === "both" ? "both" : "y");
   const viewportRefs = useCallback((node) => {
     viewportRef.current = node;
     setViewport(node);
@@ -12861,7 +12945,9 @@ function ScrollArea({
             ref: viewportRefs,
             onScroll: updateThumbs,
             className: cn(
-              "h-full w-full scroll-p-[4px]",
+              // the frame's corners, so the inset ring follows them rather than being cut by them (as the Table's region)
+              "h-full w-full scroll-p-[4px] rounded-[inherit]",
+              FOCUS_INSET,
               orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
               orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
               orientation === "both" && "overflow-auto",
@@ -13035,7 +13121,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",
@@ -13286,6 +13372,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,
@@ -13466,7 +13554,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)",
@@ -14240,6 +14328,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();
@@ -14267,23 +14356,27 @@ 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 })
+        ]
+      }
+    )
   );
 }