gridsmith-ui 0.31.1 → 0.33.0

package/dist/index.js

@@ -1,71 +1,219 @@
 "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-TH272DIC.js';
-export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-TH272DIC.js';
-import { Skeleton, TITLE_TEXT, SegmentedControl } from './chunk-BHTAVJIG.js';
-export { SegmentedControl, Skeleton } from './chunk-BHTAVJIG.js';
-import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
-import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-K3NAFQ4S.js';
-export { Avatar } from './chunk-K3NAFQ4S.js';
-import { Link } from './chunk-NDL2JGQ7.js';
-export { CodeBlock, Divider, Link } from './chunk-NDL2JGQ7.js';
-import { DropdownMenu } from './chunk-2TCCSKL3.js';
-export { DropdownMenu } from './chunk-2TCCSKL3.js';
-import { useFillHeight, FillContext } from './chunk-DBHVJ7Z3.js';
-import { Badge } from './chunk-SLGGZ3MU.js';
-export { Badge } from './chunk-SLGGZ3MU.js';
-import { useKeyboardScroll } from './chunk-KSJTMSYA.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-I6JJ7KKP.js';
-export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-I6JJ7KKP.js';
-import { useWholeListCheck, pagerPart, Pagination, NumberInput } from './chunk-IOHGE4EW.js';
-export { NumberInput, Pagination, Popover, usePagination } from './chunk-IOHGE4EW.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-6NRLTG5W.js';
+export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-6NRLTG5W.js';
+import { useWholeListCheck, pagerPart, Pagination, NumberInput } from './chunk-AVSP6NDX.js';
+export { NumberInput, Pagination, Popover, usePagination } from './chunk-AVSP6NDX.js';
+import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useCornerInset, NAVBAR_INSET_PRIORITY, useScrollbarInset, useBulkBarHost, DrawerFooterCtx, BulkBarHostCtx, AsideSlotContext, BulkBarSpacer, bulkBarRoom, insetLessScrollbar, BULK_BAR_LAYER, BulkBarPresenceCtx, BULK_BAR_WINDOW_LAYER, DrawerPanel, useCloseSettle, besideRoom, PANEL_INSET_PRIORITY, Drawer, LAUNCHER_INSET_PRIORITY, TOAST_INSET_VARS, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-AB4UQ4G5.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-AB4UQ4G5.js';
 import { useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, formatRelativeTime, thresholdOf, toMillis, formatFullTime, datedMillis, preferenceActionKey, DAY, HOUR, MINUTE } from './chunk-QOMP4D6V.js';
 export { PreferencesContext, formatFullTime, formatRelativeTime, preferenceActionKey, usePreferences } from './chunk-QOMP4D6V.js';
-import { useFormatLocale, useHydrated, useToday, LocaleContext } from './chunk-LJYSVZMI.js';
-export { useFormatLocale, useHydrated } from './chunk-LJYSVZMI.js';
-import { Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, OutsideField, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-IZW5XHKA.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, Textarea, Toggle } from './chunk-IZW5XHKA.js';
+import { CELL_FRAME, Skeleton, CELL_HIDE, TITLE_FLOOR, CELL_ROOM, TITLE_TEXT, CELL_STAT_ROOM, CELL_STAT_ROOM_END, CELL_STAT_TILE, CELL_ROOM_INNER, SegmentedControl } from './chunk-6XCWKLJZ.js';
+export { SegmentedControl, Skeleton } from './chunk-6XCWKLJZ.js';
+import { useFormatLocale, LocaleContext } from './chunk-R7FG4ZQ5.js';
+export { useFormatLocale } from './chunk-R7FG4ZQ5.js';
+import { Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, OutsideField, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-OWGF362U.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, Textarea, Toggle } from './chunk-OWGF362U.js';
 import { formatLocale, localeChoice } from './chunk-7QLXYRPD.js';
+import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
+import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-TMPPBXX3.js';
+export { Avatar } from './chunk-TMPPBXX3.js';
+import { Link } from './chunk-UBLBVCQN.js';
+export { CodeBlock, Divider, Link } from './chunk-UBLBVCQN.js';
+import { CardSurfaceCtx, useScrollsInside, useRunsEdgeToEdge, SplitPaneCtx, PanePaddedCtx, RowsCtx, PageActionsCtx, PANE_HEADING_CANCEL, SurfaceBoundary, useFramesItself, TableCardCtx, useWantsInset } from './chunk-RS624TD5.js';
+import { Badge } from './chunk-WSKPESAX.js';
+export { Badge } from './chunk-WSKPESAX.js';
+import { useTextOverflow } from './chunk-R2IAK3J3.js';
+export { useTextOverflow } from './chunk-R2IAK3J3.js';
+import { useOverlayMark, useDirtyGuard, OverlayMarkScope, OverlayCloseCtx, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth } from './chunk-ZQV26NND.js';
+import { useHydrated, useToday } from './chunk-GIA4BMGI.js';
+export { useHydrated } from './chunk-GIA4BMGI.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-V73LHNRL.js';
-import { Button, elementType, ControlSizeContext, triggerType, Spinner } from './chunk-HQFTP7Y5.js';
-export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-HQFTP7Y5.js';
+import { DropdownMenu } from './chunk-WD6T57ZJ.js';
+export { DropdownMenu } from './chunk-WD6T57ZJ.js';
+import { useFillHeight, FillContext } from './chunk-SS3C24IJ.js';
+import { Button, elementType, ControlSizeContext, triggerType, Spinner } from './chunk-FF57N3P7.js';
+export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-FF57N3P7.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-ZHUVLBCC.js';
-import { useInputModality, inputModality } from './chunk-7RKC5C7G.js';
+import { inputModality, useInputModality } from './chunk-7RKC5C7G.js';
 export { INPUT_MODALITY_ATTR, inputModality, installInputModality, useInputModality } from './chunk-7RKC5C7G.js';
-import { useTextOverflow } from './chunk-W3GY5ROH.js';
-export { useTextOverflow } from './chunk-W3GY5ROH.js';
-import { AutoTooltip, mergeRefs, useRevealFocus } from './chunk-DR6WEI3A.js';
-export { Tooltip, useRevealFocus } from './chunk-DR6WEI3A.js';
+import { useKeyboardScroll } from './chunk-F2XMZOUP.js';
+import { AutoTooltip, mergeRefs, useRevealFocus } from './chunk-HCEHTJ5E.js';
+export { Tooltip, useRevealFocus } from './chunk-HCEHTJ5E.js';
 import { Icon, slotIcon, warnOnce } from './chunk-53F7GVBQ.js';
-import { cn, FOCUS_RING, focusAfterSelfRemoval, FOCUSABLE, GLASS_SURFACE, useFocusKeptInList, FOCUS_INSET, useLatest, PEER_FOCUS_RING, GLASS_BACKDROP, OPEN_TO_FOCUS, focusOutOf, FIELD, ZOOM_KEYS, rovingTabStop, FOCUS_ROOM, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberOpener, focusInitial, lockBodyScroll, unlockBodyScroll, OVERLAY_CLOSE_ATTR, OVERLAY_SURFACE, GLASS_OVERLAY, usePopupFocus, usePosition, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, CONTROL_ANCESTOR, GROUP_FOCUS_RING, useGridKeyboard, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, focusAfterRemoval, GLASS_DROPDOWN, ERROR_FOCUS_RING, FIELD_FOCUS_RING, openToFocus, atLeastFocusRoom, useNonModalDialog, useReturnFocus } from './chunk-EZ3ZGFGA.js';
-export { useGridKeyboard } from './chunk-EZ3ZGFGA.js';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { cn, FOCUS_RING, focusAfterSelfRemoval, FOCUSABLE, GLASS_SURFACE, FOCUS_INSET_WHILE_STOP, useFocusKeptInList, FOCUS_INSET, useLatest, PEER_FOCUS_RING, GLASS_BACKDROP, OPEN_TO_FOCUS, focusOutOf, FIELD, ZOOM_KEYS, rovingTabStop, FOCUS_ROOM, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberOpener, focusInitial, lockBodyScroll, unlockBodyScroll, OVERLAY_CLOSE_ATTR, OVERLAY_SURFACE, GLASS_OVERLAY, usePopupFocus, pointOf, pageAddress, registerOpenerRoot, rememberFocus, usePosition, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, CONTROL_ANCESTOR, GROUP_FOCUS_RING, useGridKeyboard, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, focusAfterRemoval, GLASS_DROPDOWN, ERROR_FOCUS_RING, FIELD_FOCUS_RING, openToFocus, atLeastFocusRoom, useNonModalDialog, useReturnFocus, onMovingOn } from './chunk-2724SJO2.js';
+export { useGridKeyboard } from './chunk-2724SJO2.js';
 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';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-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];
+var selectionControlIn = (table) => table.querySelector("[data-ds-select-all] input") ?? table.querySelector("[data-ds-select-card] input");
+function holdsSelection(table) {
+  const all = table.querySelector("[data-ds-select-all]");
+  return all ? all.getAttribute("data-selection") !== "none" : !!table.querySelector("[data-ds-select-card] input:checked");
+}
+var tablesIn = (box) => Array.from(box.querySelectorAll('[data-gs="table"]')).filter((t) => selectionControlIn(t));
+function selectionAt(point) {
+  const from = point.startContainer;
+  for (let box = from instanceof HTMLElement ? from : from.parentElement; box && box !== document.body; box = box.parentElement) {
+    const tables = tablesIn(box);
+    if (!tables.length) continue;
+    const pick = (list2) => list2.filter((t) => point.comparePoint(t, 0) < 0).at(-1) ?? list2.find((t) => point.comparePoint(t, 0) > 0);
+    const table = pick(tables.filter(holdsSelection)) ?? pick(tables);
+    const control = table && selectionControlIn(table);
+    return control ? { box, control } : null;
   }
   return null;
 }
+function selectionIn(box, point) {
+  const tables = tablesIn(box);
+  const at = (t) => point ? point.comparePoint(t, 0) : 0;
+  const table = tables.filter((t) => at(t) < 0).at(-1) ?? tables.find((t) => at(t) > 0) ?? tables[0];
+  return table ? selectionControlIn(table) : null;
+}
+var CONTROL = "[data-bulk-bar-control]";
 function BulkActionBar({ selectedCount, actions, onClearSelection, className }) {
-  const isMobile = useBreakpoint("sm");
-  if (selectedCount === 0) return null;
+  const isPhone = useBreakpoint("sm");
+  const host = useContext(BulkBarHostCtx);
+  const presence = useContext(BulkBarPresenceCtx);
+  const [anchor, setAnchor] = useState(null);
+  const [bearing, setBearing] = useState(null);
+  const [bar, setBar] = useState(null);
+  const [stop, setStop] = useState(0);
+  const labels = actions.map((action) => action.label).join("\0");
+  const [fit, setFit] = useState(null);
+  const tooWide = !!fit && fit.labels === labels && fit.room > 0 && fit.full > fit.room;
+  const compact = isPhone || tooWide;
+  const shown = selectedCount > 0;
+  const target = host ? host.layer : typeof document === "undefined" ? null : document.body;
+  const selection = useRef({ control: null, box: null, page: "" });
+  const point = useRef(null);
+  const movedOn = useRef(true);
+  const quitWatch = useRef(null);
+  const watching = useRef(null);
+  const watch = (control) => {
+    quitWatch.current?.();
+    movedOn.current = false;
+    watching.current = control;
+    quitWatch.current = onMovingOn(control, () => {
+      movedOn.current = true;
+    });
+  };
+  useLayoutEffect(() => {
+    if (shown && !bearing && anchor?.isConnected) setBearing(pointOf(anchor));
+    else if (!shown && bearing) setBearing(null);
+  }, [shown, bearing, anchor]);
+  useLayoutEffect(() => {
+    if (!shown || !bearing) return;
+    point.current = bearing;
+    const found = selectionAt(bearing);
+    selection.current = { control: found?.control ?? null, box: found?.box ?? null, page: pageAddress() };
+  });
+  useEffect(() => () => quitWatch.current?.(), []);
+  const onToolbar = useCallback((el) => {
+    setBar(el);
+    const unregister = registerOpenerRoot(el, () => selection.current.control?.isConnected ? rememberFocus(selection.current.control) : null);
+    return () => {
+      unregister();
+      setBar(null);
+      const active = document.activeElement;
+      const moved = movedOn.current;
+      const watched = watching.current;
+      quitWatch.current?.();
+      quitWatch.current = null;
+      watching.current = null;
+      movedOn.current = true;
+      if (!(active instanceof HTMLElement) || !(el.contains(active) || active === watched) || moved || inputModality() === "pointer") return;
+      const { control, box, page } = selection.current;
+      const at = point.current;
+      if (pageAddress() !== page) return;
+      focusAfterSelfRemoval(active, {
+        group: null,
+        point: at ?? void 0,
+        to: () => control?.isConnected ? control : box?.isConnected ? selectionIn(box, at) : null,
+        samePage: true,
+        removedOnly: true
+      });
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!bar) return;
+    const report = () => {
+      if (host) host.setRoom(bar, bar.offsetHeight);
+      else presence?.room(bar, bulkBarRoom(bar.offsetHeight));
+    };
+    report();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(report);
+    observer?.observe(bar);
+    return () => {
+      observer?.disconnect();
+      if (host) host.setRoom(bar, 0);
+      else presence?.room(bar, 0);
+    };
+  }, [bar, host, presence]);
+  useLayoutEffect(() => {
+    const layer = bar?.parentElement;
+    if (!bar || !layer) return;
+    const measure = () => {
+      const style = getComputedStyle(layer);
+      const room = layer.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+      setFit((was) => {
+        const full = !compact || !was || was.labels !== labels ? bar.scrollWidth : was.full;
+        return was && was.labels === labels && was.full === full && was.room === room ? was : { labels, full, room };
+      });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(layer);
+    return () => observer.disconnect();
+  }, [bar, compact, labels]);
+  useEffect(() => {
+    if (!bar || inputModality() !== "keyboard") return;
+    const frame = requestAnimationFrame(() => {
+      const active = document.activeElement;
+      if (!(active instanceof HTMLElement) || active === document.body || bar.contains(active)) return;
+      if (active.getBoundingClientRect().bottom > bar.getBoundingClientRect().top) active.scrollIntoView({ block: "nearest" });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [bar]);
+  useEffect(() => {
+    if (shown) presence?.say(`${selectedCount} selected`);
+  }, [presence, shown, selectedCount]);
+  if (!shown) return null;
   const dropdownItems = actions.map((action) => ({
     label: action.label,
     icon: action.icon,
     onClick: action.onClick,
     variant: action.variant
   }));
-  return /* @__PURE__ */ jsxs(
+  const count = (compact ? Math.min(actions.length, 1) : actions.length) + 1;
+  const current = Math.min(stop, count - 1);
+  const controls = () => bar ? Array.from(bar.querySelectorAll(CONTROL)) : [];
+  const tab = (i) => ({ "data-bulk-bar-control": "", tabIndex: i === current ? 0 : -1 });
+  const onKeyDown = (e) => {
+    const list2 = controls();
+    const at = list2.indexOf(e.target);
+    if (at < 0) return;
+    const to = e.key === "ArrowRight" ? (at + 1) % list2.length : e.key === "ArrowLeft" ? (at - 1 + list2.length) % list2.length : e.key === "Home" ? 0 : e.key === "End" ? list2.length - 1 : -1;
+    if (to < 0) return;
+    e.preventDefault();
+    list2[to].focus();
+    watch(list2[to]);
+  };
+  const onFocus = (e) => {
+    const at = controls().indexOf(e.target);
+    if (at >= 0) setStop(at);
+    watch(e.target);
+  };
+  const toolbar = /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: onToolbar,
+      "data-bulk-bar": "",
       className: cn(
-        "flex items-center gap-ds-3 rounded-[var(--ds-radius-md)]",
+        "pointer-events-auto max-w-full flex items-center gap-ds-3 rounded-[var(--ds-radius-md)]",
         "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-accent-ink)]",
         "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
         "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
@@ -74,16 +222,18 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
       style: { padding: "var(--ds-space-3) var(--ds-space-4)" },
       role: "toolbar",
       "aria-label": `${selectedCount} items selected`,
+      onKeyDown,
+      onFocus,
       children: [
         /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-accent-ink)] tabular-nums whitespace-nowrap", children: [
           selectedCount,
           " selected"
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-[var(--ds-border-subtle)]" }),
-        isMobile ? /* @__PURE__ */ jsx(
+        actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "h-4 w-px shrink-0 bg-[var(--ds-border-subtle)]" }),
+        actions.length > 0 && (compact ? /* @__PURE__ */ jsx(
           DropdownMenu,
           {
-            trigger: /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "more-vertical", size: 14 }), children: "Actions" }),
+            trigger: /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", iconLeft: /* @__PURE__ */ jsx(Icon, { name: "more-vertical", size: 14 }), ...tab(0), children: "Actions" }),
             items: dropdownItems,
             align: "start"
           }
@@ -93,28 +243,31 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
             type: "button",
             variant: "secondary",
             size: "sm",
+            className: "whitespace-nowrap",
             onClick: action.onClick,
+            ...tab(i),
             children: action.label
           },
           i
-        )) }),
+        )) })),
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            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),
+            onClick: () => onClearSelection(),
+            className: cn("ml-auto shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer", FOCUS_RING),
             "aria-label": "Clear selection",
+            ...tab(count - 1),
             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
           }
         )
       ]
     }
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !bearing && /* @__PURE__ */ jsx("span", { ref: setAnchor, hidden: true, "data-bulk-bar-anchor": "" }),
+    target && createPortal(host ? toolbar : /* @__PURE__ */ jsx("div", { className: BULK_BAR_WINDOW_LAYER, "data-bulk-bar-layer": "", children: toolbar }), target)
+  ] });
 }
 var CONTROL_HEIGHT = {
   sm: "h-[var(--ds-control-height-sm)]",
@@ -1734,6 +1887,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
     setBodyEl(el);
   }, [bodyInset]);
   useKeyboardScroll(bodyEl, title, open);
+  const { setLayer: setBarLayer, room: barStack, value: barHost } = useBulkBarHost();
   const onCloseRef = useLatest(onClose);
   const onSubmitRef = useLatest(onSubmit);
   const isTopLayer = useOverlayLayer(open);
@@ -1868,19 +2022,28 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                           }
                         ) })
                       ] }),
-                      children && /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          ref: bodyRef,
-                          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)")
-                          },
-                          children: /* @__PURE__ */ jsx(SurfaceBoundary, { children: /* @__PURE__ */ jsx(DrawerFooterCtx, { value: null, children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) }) }) })
-                        }
-                      ),
-                      isMobile && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex-1 min-h-0" }),
+                      children && // the body's box hosts a bulk-action bar from inside: at its foot, above the footer (Sprint 25.33). On a phone it
+                      // fills down to the footer, so that foot is the screen's, not the middle of it (the fix pass of 25.33)
+                      /* @__PURE__ */ jsxs("div", { className: cn("relative min-h-0 flex flex-col", isMobile ? "flex-1" : "flex-[0_1_auto]"), children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            ref: bodyRef,
+                            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)"),
+                              ...barStack ? { scrollPaddingBottom: bulkBarRoom(barStack) } : {}
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx(SurfaceBoundary, { children: /* @__PURE__ */ jsx(DrawerFooterCtx, { value: null, children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children: /* @__PURE__ */ jsx(BulkBarHostCtx, { value: barHost, children: /* @__PURE__ */ jsx(AsideSlotContext, { value: true, children }) }) }) }) }) }),
+                              /* @__PURE__ */ jsx(BulkBarSpacer, { room: barStack })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("div", { ref: setBarLayer, "data-bulk-bar-layer": "", className: BULK_BAR_LAYER })
+                      ] }),
+                      isMobile && !children && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex-1 min-h-0" }),
                       /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
                       footer && /* @__PURE__ */ jsx("div", { className: cn(
                         "shrink-0 flex justify-end gap-ds-2 py-ds-4 px-[var(--ds-page-gutter)]",
@@ -2279,101 +2442,104 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   const canCancel = !controlled || !!onCancel;
   const canRetry = !controlled || !!onRetry;
   const canRemove = (item) => !!onRemove || !controlled && item.status === "error";
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-ds-3", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-ds-1.5", children: [
-      showLabel && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          onDragOver: (e) => {
-            e.preventDefault();
-            setDragOver(true);
-          },
-          onDragLeave: () => setDragOver(false),
-          onDrop: handleDrop,
-          onClick: () => inputRef.current?.click(),
-          className: cn(
-            "flex flex-col items-center justify-center gap-ds-2 cursor-pointer group",
-            "border-2 border-dashed rounded-[var(--ds-radius-md)]",
-            "transition-colors",
-            // The real file input is visually hidden inside; Tab lands on it and
-            // Enter/Space open the picker natively, so the zone shows its focus.
-            invalid ? ERROR_HAS_FOCUS_RING : FIELD_HAS_FOCUS_RING,
-            dragOver ? `${ACTIVE_RING} bg-[var(--ds-accent-whisper)]` : invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
-          ),
-          style: { padding: "var(--ds-space-8) var(--ds-space-4)" },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: cn(
-              "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] transition-colors",
-              "bg-[var(--ds-bg-muted)] group-hover:bg-[var(--ds-accent-subtle)]"
-            ), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)] group-hover:text-[var(--ds-accent-subtle-text)] transition-colors" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: multiple ? "Drop files here or browse" : "Drop a file here or browse" }),
-              constraints && /* @__PURE__ */ jsx("p", { id: constraintsId, className: "text-xs text-[var(--ds-text-muted)] mt-ds-1", children: constraints })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                id: inputId,
-                type: "file",
-                accept,
-                multiple,
-                className: "sr-only",
-                "aria-label": control.labelId ? void 0 : control.label,
-                "aria-labelledby": control.labelId,
-                "aria-describedby": describedBy,
-                "aria-invalid": invalid || void 0,
-                onChange: (e) => {
-                  if (e.target.files?.length) addFiles(e.target.files);
-                  e.target.value = "";
+  return (
+    // a wide control: in a form, its row fills the form rather than keeping a field's reading width (Sprint 25.33)
+    /* @__PURE__ */ jsxs("div", { "data-wide-control": "", className: cn("space-y-ds-3", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-ds-1.5", children: [
+        showLabel && /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: label }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onDragOver: (e) => {
+              e.preventDefault();
+              setDragOver(true);
+            },
+            onDragLeave: () => setDragOver(false),
+            onDrop: handleDrop,
+            onClick: () => inputRef.current?.click(),
+            className: cn(
+              "flex flex-col items-center justify-center gap-ds-2 cursor-pointer group",
+              "border-2 border-dashed rounded-[var(--ds-radius-md)]",
+              "transition-colors",
+              // The real file input is visually hidden inside; Tab lands on it and
+              // Enter/Space open the picker natively, so the zone shows its focus.
+              invalid ? ERROR_HAS_FOCUS_RING : FIELD_HAS_FOCUS_RING,
+              dragOver ? `${ACTIVE_RING} bg-[var(--ds-accent-whisper)]` : invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
+            ),
+            style: { padding: "var(--ds-space-8) var(--ds-space-4)" },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: cn(
+                "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] transition-colors",
+                "bg-[var(--ds-bg-muted)] group-hover:bg-[var(--ds-accent-subtle)]"
+              ), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)] group-hover:text-[var(--ds-accent-subtle-text)] transition-colors" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: multiple ? "Drop files here or browse" : "Drop a file here or browse" }),
+                constraints && /* @__PURE__ */ jsx("p", { id: constraintsId, className: "text-xs text-[var(--ds-text-muted)] mt-ds-1", children: constraints })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  id: inputId,
+                  type: "file",
+                  accept,
+                  multiple,
+                  className: "sr-only",
+                  "aria-label": control.labelId ? void 0 : control.label,
+                  "aria-labelledby": control.labelId,
+                  "aria-describedby": describedBy,
+                  "aria-invalid": invalid || void 0,
+                  onChange: (e) => {
+                    if (e.target.files?.length) addFiles(e.target.files);
+                    e.target.value = "";
+                  }
                 }
-              }
-            )
-          ]
-        }
-      ),
-      rejected && /* @__PURE__ */ jsx(InlineFieldError, { id: rejectedId, message: rejected, className: "mt-0" }),
-      waiting && /* @__PURE__ */ jsx(InlineFieldError, { id: waitingId, message: waiting, className: "mt-0" })
-    ] }),
-    shown.length > 0 && /* @__PURE__ */ jsx("ul", { ref: listRef, className: "space-y-ds-2", children: shown.map((item) => {
-      const progress = percentOf(item.progress);
-      const words = item.status === "queued" ? "Waiting" : item.status === "uploading" ? `${Math.round(progress)}%` : item.status === "done" ? "Uploaded" : item.status === "error" ? "Failed" : null;
-      return /* @__PURE__ */ jsxs(
-        "li",
-        {
-          "data-upload-id": item.id,
-          "data-upload-status": item.status,
-          onFocus: (e) => {
-            if (e.target instanceof HTMLButtonElement) lastAction.current = { id: item.id, el: e.target };
+              )
+            ]
+          }
+        ),
+        rejected && /* @__PURE__ */ jsx(InlineFieldError, { id: rejectedId, message: rejected, className: "mt-0" }),
+        waiting && /* @__PURE__ */ jsx(InlineFieldError, { id: waitingId, message: waiting, className: "mt-0" })
+      ] }),
+      shown.length > 0 && /* @__PURE__ */ jsx("ul", { ref: listRef, className: "space-y-ds-2", children: shown.map((item) => {
+        const progress = percentOf(item.progress);
+        const words = item.status === "queued" ? "Waiting" : item.status === "uploading" ? `${Math.round(progress)}%` : item.status === "done" ? "Uploaded" : item.status === "error" ? "Failed" : null;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            "data-upload-id": item.id,
+            "data-upload-status": item.status,
+            onFocus: (e) => {
+              if (e.target instanceof HTMLButtonElement) lastAction.current = { id: item.id, el: e.target };
+            },
+            className: cn(
+              "flex items-center gap-ds-3 text-sm",
+              "border-[length:var(--ds-border-width)]",
+              item.status === "error" ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-subtle)]",
+              "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]"
+            ),
+            style: { padding: "var(--ds-space-3)" },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "folder", size: 16, className: "text-[var(--ds-text-muted)] shrink-0" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx(TruncFileName, { className: "text-[var(--ds-text-primary)]", children: item.name }),
+                (item.size != null || words) && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)]", children: [item.size != null ? formatSize(item.size) : null, words].filter(Boolean).join(" \xB7 ") }),
+                item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: progress, size: "sm", label: `Uploading ${item.name}`, className: "mt-ds-1" }),
+                item.status === "error" && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-xs text-[var(--ds-status-error-text)]", children: item.error ?? "The upload didn't work." })
+              ] }),
+              item.status === "done" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0", "aria-hidden": "true" }),
+              running(item) && canCancel && // the visible word starts the name, which says which file (WCAG 2.5.3)
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => cancel(item), "aria-label": `Cancel ${item.name}`, children: "Cancel" }),
+              item.status === "error" && canRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => retry(item), "aria-label": `Retry ${item.name}`, children: "Retry" }),
+              !running(item) && canRemove(item) && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => remove(item), "aria-label": `Remove ${item.name}`, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
+            ]
           },
-          className: cn(
-            "flex items-center gap-ds-3 text-sm",
-            "border-[length:var(--ds-border-width)]",
-            item.status === "error" ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-subtle)]",
-            "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]"
-          ),
-          style: { padding: "var(--ds-space-3)" },
-          children: [
-            /* @__PURE__ */ jsx(Icon, { name: "folder", size: 16, className: "text-[var(--ds-text-muted)] shrink-0" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx(TruncFileName, { className: "text-[var(--ds-text-primary)]", children: item.name }),
-              (item.size != null || words) && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)]", children: [item.size != null ? formatSize(item.size) : null, words].filter(Boolean).join(" \xB7 ") }),
-              item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: progress, size: "sm", label: `Uploading ${item.name}`, className: "mt-ds-1" }),
-              item.status === "error" && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-xs text-[var(--ds-status-error-text)]", children: item.error ?? "The upload didn't work." })
-            ] }),
-            item.status === "done" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0", "aria-hidden": "true" }),
-            running(item) && canCancel && // the visible word starts the name, which says which file (WCAG 2.5.3)
-            /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => cancel(item), "aria-label": `Cancel ${item.name}`, children: "Cancel" }),
-            item.status === "error" && canRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => retry(item), "aria-label": `Retry ${item.name}`, children: "Retry" }),
-            !running(item) && canRemove(item) && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => remove(item), "aria-label": `Remove ${item.name}`, children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 }) })
-          ]
-        },
-        item.id
-      );
-    }) }),
-    /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: /* @__PURE__ */ jsx("span", { children: heard.text }, heard.n) })
-  ] });
+          item.id
+        );
+      }) }),
+      /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: /* @__PURE__ */ jsx("span", { children: heard.text }, heard.n) })
+    ] })
+  );
 }
 function SliderRange({
   value,
@@ -3064,6 +3230,7 @@ var Tag = forwardRef(function Tag2({
   size = "md",
   color,
   maxWidth,
+  width,
   onRemove,
   onClick,
   selected,
@@ -3098,8 +3265,9 @@ var Tag = forwardRef(function Tag2({
       "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",
+        "inline-flex items-center font-medium w-fit max-w-full min-w-0 whitespace-nowrap",
         "rounded-[var(--ds-radius-sm)]",
+        width && "justify-center",
         "transition-colors duration-[var(--ds-transition-speed)]",
         sizeStyles[size],
         colorClasses,
@@ -3107,7 +3275,7 @@ var Tag = forwardRef(function Tag2({
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
-      style: maxWidth ? { maxWidth } : void 0,
+      style: maxWidth || width ? { ...width ? { width } : {}, ...maxWidth ? { maxWidth } : {} } : void 0,
       children: [
         clickable ? /* @__PURE__ */ jsx(
           "button",
@@ -4057,6 +4225,15 @@ var Alert = forwardRef(function Alert2({
     }
   );
 });
+var FORM_ROWS = cn(
+  "[--gs-form-default:calc(var(--ds-bp-md)_-_2*var(--ds-space-6))]",
+  "[:where(&)>*]:max-w-[var(--gs-row-cap,var(--ds-form-max,var(--gs-form-default)))]",
+  // the row is the wide control itself (a FileUpload with its own label, written straight into the form), or holds one
+  "[&>[data-wide-control]]:[--gs-row-cap:none]",
+  "[&>*:has([data-wide-control])]:[--gs-row-cap:none]",
+  "[&:has([data-wide-control])>[data-form-actions]]:[--gs-row-cap:none]"
+);
+var FORM_CAP = "max-w-[var(--gs-form-cap,var(--ds-form-max,var(--gs-form-default)))] has-[[data-wide-control]]:[--gs-form-cap:none]";
 var isThenable = (value) => !!value && typeof value.then === "function";
 function stampFormId(node, formId) {
   return Children.map(node, (child) => {
@@ -4246,8 +4423,9 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     ": ",
     f.message
   ] }, f.id || f.label)) }) }) : null;
+  const callerWidth = /(?:^|[\s:!])max-w-/.test(className ?? "");
   const actionsNode = actions && !drawerFooter ? /* @__PURE__ */ jsx("div", { "data-form-actions": "", className: cn("flex flex-wrap items-center gap-ds-2 pt-ds-2", actionsAlign === "end" ? "justify-end" : "justify-start"), children: actions }) : null;
-  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted, register }, children: /* @__PURE__ */ jsx(FormChangeCtx.Provider, { value: reportChange, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5 max-w-[var(--ds-form-max,calc(var(--ds-bp-md)_-_2*var(--ds-space-6)))]", className), style: fullWidth ? { "--ds-form-max": "none" } : void 0, noValidate: true, children: [
+  return /* @__PURE__ */ jsx(FormCtx.Provider, { value: { errors, setError, clearErrors, validationMode, submitted, register }, children: /* @__PURE__ */ jsx(FormChangeCtx.Provider, { value: reportChange, children: /* @__PURE__ */ jsxs("form", { ref: setRefs, id: drawerFooter ? formId : void 0, onSubmit: handleSubmit, onFocusCapture: userActed, onInputCapture: userActed, className: cn("flex flex-col gap-ds-5", FORM_ROWS, FORM_CAP, className), style: fullWidth || callerWidth ? { "--ds-form-max": "none" } : void 0, noValidate: true, children: [
     summaryNode && /* @__PURE__ */ jsx("div", { ref: summaryRef, "data-form-error-summary": "", tabIndex: -1, className: cn("rounded-[var(--ds-radius-md)] focus-visible:*:shadow-none", FOCUS_RING), children: summaryNode }),
     children,
     actionsNode
@@ -4381,7 +4559,7 @@ function TransferList({
     setCheckedSelected(allChecked ? /* @__PURE__ */ new Set() : new Set(enabledIds));
   }, [filteredSelected, checkedSelected]);
   const isStacked = useBreakpoint("sm");
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn(isStacked ? "flex flex-col gap-ds-2" : "flex items-stretch gap-ds-3", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ref, "data-wide-control": "", className: cn(isStacked ? "flex flex-col gap-ds-2" : "flex items-stretch gap-ds-3", className), children: [
     /* @__PURE__ */ jsx(
       Panel,
       {
@@ -4901,8 +5079,8 @@ var Card = forwardRef(function Card2({
   useLayoutEffect(() => {
     const root = rootRef.current;
     if (!root || !isAction && !checkable) return;
-    const controls = Array.from(root.querySelectorAll(FOCUSABLE)).some((el) => !el.hasAttribute(CARD_ACTION_ATTR));
     const titleId = root.querySelector("[data-card-title]")?.id || null;
+    const controls = Array.from(root.querySelectorAll(FOCUSABLE)).some((el) => !el.hasAttribute(CARD_ACTION_ATTR)) || !!titleId && root.matches(CELL_FRAME);
     setInner((cur) => cur.controls === controls && cur.titleId === titleId ? cur : { controls, titleId });
   }, [isAction, checkable, loading, children]);
   const holdsControls = isAction && inner.controls;
@@ -5088,7 +5266,6 @@ function splitTitle(children) {
   if (at < 0) return { lead: [], title: parts[0] ?? null, rest: parts.slice(1) };
   return { lead: parts.slice(0, at), title: parts[at], rest: parts.slice(at + 1) };
 }
-var TITLE_FLOOR = "basis-[calc(var(--ds-font-size-lg)*4.5)]";
 var TITLE_ROW = cn(
   "flex flex-wrap items-start justify-end gap-x-ds-2 gap-y-ds-2 min-w-0 grow basis-0",
   "[&>[data-header-actions]>*]:order-5",
@@ -5130,13 +5307,13 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
   const band = (order) => cn("shrink-0 self-start flex items-center", TITLE_LINE, order);
   const checkbox = owns && row.checkbox ? /* @__PURE__ */ jsx("span", { className: band("order-5"), children: row.checkbox }) : null;
   const check = owns && row.check ? /* @__PURE__ */ jsx("span", { "data-card-selection": "", className: band("order-4"), children: row.check }) : null;
-  const menuPart = menu ? /* @__PURE__ */ jsx("span", { className: band("order-6"), children: menu }) : null;
+  const menuPart = menu ? /* @__PURE__ */ jsx("span", { className: cn(band("order-6"), CELL_HIDE), children: menu }) : null;
   const { lead, title, rest } = splitTitle(children);
   const leadBlock = lead.length > 0 ? /* @__PURE__ */ jsx("div", { "data-card-lead": "", className: "flex flex-col space-y-ds-1.5 min-w-0 grow", children: lead }) : null;
   const topLine = iconBlock ?? leadBlock;
   const ownBlock = title !== null && !(isValidElement(title) && elementType(title.type) === CardTitle);
-  const actionsSlot = "actions" in allProps ? /* @__PURE__ */ jsx("div", { "data-header-actions": "", className: "contents", children: partsOf(actions).map((item, i) => /* @__PURE__ */ jsx("span", { className: cn("flex items-center shrink-0", TITLE_LINE), children: item }, isValidElement(item) && item.key !== null ? item.key : i)) }) : null;
-  return /* @__PURE__ */ jsxs("div", { ref, "data-card-header": "", className: cn("flex flex-col px-ds-5 pt-ds-4 last:pb-ds-4 min-w-0", className), ...props, children: [
+  const actionsSlot = "actions" in allProps ? /* @__PURE__ */ jsx("div", { "data-header-actions": "", className: cn("contents", CELL_HIDE), children: partsOf(actions).map((item, i) => /* @__PURE__ */ jsx("span", { className: cn("flex items-center shrink-0", TITLE_LINE), children: item }, isValidElement(item) && item.key !== null ? item.key : i)) }) : null;
+  return /* @__PURE__ */ jsxs("div", { ref, "data-card-header": "", className: cn("flex flex-col px-ds-5 pt-ds-4 last:pb-ds-4 min-w-0", CELL_ROOM, className), ...props, children: [
     topLine && /* @__PURE__ */ jsxs("div", { "data-card-icon-row": iconBlock ? "" : void 0, "data-card-lead-row": iconBlock ? void 0 : "", className: cn("flex items-start gap-ds-2", iconBlock ? "mb-ds-2.5" : "mb-ds-1.5"), children: [
       topLine,
       iconBlock && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "grow -ml-ds-2" }),
@@ -5237,8 +5414,9 @@ var CardDescription = forwardRef(function CardDescription2({ className, children
   );
   return /* @__PURE__ */ jsx(AutoTooltip, { content: children, disabled: !isTruncated, children: el });
 });
+var CELL_CARD_BODY = "[[data-dashboard-content]>[data-card]>&]:min-h-0 [[data-dashboard-content]>[data-card]>&]:overflow-y-auto [[data-dashboard-content]>[data-card]>&]:scroll-p-[4px]";
 var CardContent = forwardRef(function CardContent2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 px-ds-5 py-ds-4", className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { ref, "data-card-content": "", className: cn("flex-1 px-ds-5 py-ds-4", CELL_CARD_BODY, FOCUS_INSET_WHILE_STOP, className), ...props, children });
 });
 var CardFooter = forwardRef(function CardFooter2({ className, children, ...props }, ref) {
   return (
@@ -5246,9 +5424,14 @@ var CardFooter = forwardRef(function CardFooter2({ className, children, ...props
     /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-ds-2 px-ds-5 pb-ds-4 pt-ds-2 mt-auto min-w-0 [&:not(:has(>:not(button)))]:justify-end", className), ...props, children })
   );
 });
-function TruncLabel({ children }) {
+var CELL_STAT = "[[data-dashboard-content]>&]:overflow-y-auto [[data-dashboard-content]>&]:scroll-p-[4px]";
+var STAT_CONTAINER = "@container/stat [contain-intrinsic-inline-size:12rem]";
+var STAT_VALUE_STEPS = "@max-[11.25rem]/stat:text-xl @max-[7.25rem]/stat:text-lg";
+var STAT_NARROW_LINE = "@max-[10.375rem]/stat:col-span-2";
+var STAT_NARROW_TILE = "@max-[10.375rem]/stat:row-[1]";
+function TruncLabel({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
-  const el = /* @__PURE__ */ jsx("span", { ref, className: "block text-xs font-medium text-[var(--ds-text-muted)] uppercase tracking-wider truncate min-w-0", children });
+  const el = /* @__PURE__ */ jsx("span", { ref, className: cn("block text-xs font-medium text-[var(--ds-text-muted)] uppercase tracking-wider truncate min-w-0", className), children });
   if (!isTruncated) return el;
   return /* @__PURE__ */ jsx(AutoTooltip, { content: children, children: el });
 }
@@ -5266,6 +5449,7 @@ function StatsCard({ value, label, trend, icon, layout = "card", interactive, on
     "div",
     {
       "data-card": "",
+      "data-stats-card": "",
       className: cn(
         "flex flex-col p-ds-3 sm:p-ds-5 min-w-0",
         "bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-md)]",
@@ -5280,8 +5464,10 @@ function StatsCard({ value, label, trend, icon, layout = "card", interactive, on
           "hover:scale-[var(--ds-ambient-hover-scale)] hover:-translate-y-[var(--ds-ambient-hover-lift)]"
         ],
         GLASS_SURFACE,
-        // a clickable card is a Tab stop
-        onClick && FOCUS_RING,
+        STAT_CONTAINER,
+        CELL_STAT,
+        // a clickable card is a Tab stop; a plain one is while it scrolls in a dashboard's widget
+        onClick ? FOCUS_RING : FOCUS_INSET_WHILE_STOP,
         className
       ),
       onClick,
@@ -5294,15 +5480,13 @@ function StatsCard({ value, label, trend, icon, layout = "card", interactive, on
         }
       } : void 0,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-2 min-w-0", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx(TruncLabel, { children: label }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-ds-2 mt-ds-2 flex-wrap", children: [
-              /* @__PURE__ */ jsx("span", { className: "font-[family-name:var(--ds-font-display)] text-2xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] leading-none tabular-nums", children: value }),
-              trend && /* @__PURE__ */ jsx(TrendBadge, { trend })
-            ] })
+        /* @__PURE__ */ jsxs("div", { className: cn("grid gap-ds-2 min-w-0", icon ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", CELL_ROOM_INNER), children: [
+          /* @__PURE__ */ jsx(TruncLabel, { className: cn("self-start", CELL_STAT_ROOM, !icon && CELL_STAT_ROOM_END), children: label }),
+          /* @__PURE__ */ jsxs("div", { className: cn("col-start-1 flex items-baseline gap-ds-2 flex-wrap", icon && STAT_NARROW_LINE), children: [
+            /* @__PURE__ */ jsx("span", { className: cn("font-[family-name:var(--ds-font-display)] text-2xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] leading-none tabular-nums", STAT_VALUE_STEPS), children: value }),
+            trend && /* @__PURE__ */ jsx(TrendBadge, { trend })
           ] }),
-          icon && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center justify-center w-8 h-8 rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)]", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, className: "text-[var(--ds-text-muted)]" }) })
+          icon && /* @__PURE__ */ jsx("div", { className: cn("col-start-2 row-[1/span_2] self-start flex items-center justify-center w-8 h-8 rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)]", STAT_NARROW_TILE, CELL_STAT_TILE), children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, className: "text-[var(--ds-text-muted)]" }) })
         ] }),
         children && /* @__PURE__ */ jsx("div", { className: "mt-ds-3 text-xs text-[var(--ds-text-muted)]", children })
       ]
@@ -5757,9 +5941,16 @@ var PIN_FOCUS_END = "[tr:focus-visible>&]:after:right-[3px] [tr:focus-visible>&]
 var PINNED_BACKGROUND = "linear-gradient(var(--gs-row-tint, transparent), var(--gs-row-tint, transparent)), linear-gradient(var(--gs-pinned-surface), var(--gs-pinned-surface)), var(--gs-pinned-canvas)";
 var PINNED_LAYERS = cn(
   "[--gs-pinned-surface:var(--ds-bg-surface)] [--gs-pinned-canvas:var(--ds-bg-canvas)]",
-  "supports-[color:oklch(from_red_l_c_h)]:[--gs-pinned-surface:oklch(from_var(--ds-bg-surface)_l_c_h_/_max(alpha,min(1,alpha*1000)))]",
   "supports-[color:oklch(from_red_l_c_h)]:[--gs-pinned-canvas:oklch(from_var(--ds-bg-canvas)_l_c_h_/_1)]"
 );
+function drawnText(el) {
+  const copy = el.cloneNode(true);
+  copy.querySelectorAll(".sr-only").forEach((n) => n.remove());
+  return copy.textContent ?? "";
+}
+var CELL_ACTION = "button, a[href], [role='button'], [role='link']";
+var CELL_READ_OR_SET = "input:not([type='hidden']), select, textarea, img:not([alt='']), [role='switch'], [role='checkbox'], [role='radio'], [role='slider'], [role='spinbutton'], [role='combobox'], [role='img']:not([aria-hidden='true'])";
+var iconActionsOnly = (td) => !td.querySelector(CELL_READ_OR_SET) && !!td.querySelector(CELL_ACTION);
 var PIN_SHADOW = "oklch(0 0 0 / 0.18)";
 var ROW_CONTROL = `${FOCUSABLE}, label, [role="button"], [role="checkbox"], [role="switch"], [role="menuitem"], [role="link"]`;
 function clickIsCard(e) {
@@ -5981,12 +6172,12 @@ var CARD_TOGGLE = cn(
 );
 function TableHeading({ title, description, actions, titleId, descriptionId, inset }) {
   const heading = /* @__PURE__ */ jsx("h3", { id: titleId, className: TITLE_CLASSES, children: title });
-  const actionsBlock = actions ? /* @__PURE__ */ jsx("div", { className: HEADER_LAYOUT.actions, children: actions }) : null;
+  const actionsBlock = actions ? /* @__PURE__ */ jsx("div", { className: cn(HEADER_LAYOUT.actions, CELL_HIDE), children: actions }) : null;
   const titleLeads = !actions || actionsAreBadges(actions);
   const leadRowRef = useRef(null);
   const leadFloorFits = useTitleFloorFits(leadRowRef, titleLeads);
   const descriptionText = (className) => description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: cn(className, "text-sm text-[var(--ds-text-muted)] break-words"), children: description }) : null;
-  return /* @__PURE__ */ jsx("div", { "data-table-heading": "", className: cn(inset ? "px-ds-5 py-ds-4" : "pb-ds-4"), children: !titleLeads ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
+  return /* @__PURE__ */ jsx("div", { "data-table-heading": "", className: cn(inset ? "px-ds-5 py-ds-4" : "pb-ds-4", CELL_ROOM), children: !titleLeads ? /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.row, children: [
     /* @__PURE__ */ jsxs("div", { className: HEADER_LAYOUT.block, children: [
       heading,
       descriptionText()
@@ -6295,7 +6486,8 @@ function Table({
   const preferences = useShellPreferences();
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
   const narrowScreen = useBreakpoint(mobileBreakpoint);
-  const { cards: isMobile, rootRef } = useCardsSwitch(narrowScreen, cardsBelow, title);
+  const [inCell, setInCell] = useState(false);
+  const { cards: isMobile, rootRef } = useCardsSwitch(narrowScreen && !inCell, inCell ? 0 : cardsBelow, title);
   useRevealFocus(rootRef, isMobile);
   useFocusKeptInList(rootRef);
   const [cardsEl, setCardsEl] = useState(null);
@@ -6304,6 +6496,7 @@ function Table({
     rootRef.current = node;
     if (typeof ref === "function") ref(node);
     else if (ref) ref.current = node;
+    if (node) setInCell(node.matches(CELL_FRAME));
   }, [ref, rootRef]);
   const tableRef = useRef(null);
   const [pins, setPins] = useState(NO_PINS);
@@ -6312,7 +6505,7 @@ function Table({
   const endColumns = columns.filter((c) => c.pin === "end").length;
   const endCount = endColumns + trail;
   const nameIndex = columns.length > endColumns ? lead : -1;
-  const { ref: scrollRef, elRef: scrollEl, measure: measureScroll, scrollable, edges, fadeProps } = useScrollEdges({
+  const { ref: scrollRef, elRef: scrollEl, measure: measureScroll, scrollable, overflowing, edges, fadeProps } = useScrollEdges({
     enabled: !isMobile,
     noFade: { left: lead + (pins.nameFits ? 1 : 0) > 0, right: endCount > 0 }
   });
@@ -6358,6 +6551,7 @@ function Table({
   }, [isMobile, lead, trail, endCount, nameIndex, scrollEl, columns, drawn.length, visibleKeys.length]);
   const pinnedStart = lead + (pins.nameFits ? 1 : 0);
   const pinStyle = (position, total) => {
+    if (!overflowing) return void 0;
     if (position < pinnedStart && pins.start[position] !== void 0) {
       const inner = position === pinnedStart - 1;
       return { position: "sticky", left: pins.start[position], zIndex: 1, background: PINNED_BACKGROUND, boxShadow: inner && edges.left ? `6px 0 6px -6px ${PIN_SHADOW}` : void 0 };
@@ -6376,17 +6570,22 @@ function Table({
   };
   const fade = fadeProps;
   const [renderedKinds, setRenderedKinds] = useState(() => /* @__PURE__ */ new Map());
+  const [iconOnlyCols, setIconOnlyCols] = useState(() => /* @__PURE__ */ new Set());
   useLayoutEffect(() => {
     const table2 = tableRef.current;
     if (!table2 || isMobile) return;
     const next = /* @__PURE__ */ new Map();
+    const icons = /* @__PURE__ */ new Set();
     for (const col of columns) {
+      const cells = Array.from(table2.querySelectorAll(`:scope > tbody > tr > td[data-col="${CSS.escape(col.key)}"]`)).slice(0, 50);
+      const texts = cells.map(drawnText);
+      if (cells.length && cells.every((td, i) => !texts[i].trim() && iconActionsOnly(td))) icons.add(col.key);
       if (kindOf2(col)) continue;
-      const texts = Array.from(table2.querySelectorAll(`:scope > tbody > tr > td[data-col="${CSS.escape(col.key)}"]`)).slice(0, 50).map((td) => td.textContent ?? "");
       const kind = texts.length ? kindOfRenderedText(texts) : void 0;
       if (kind) next.set(col.key, kind);
     }
     setRenderedKinds((prev) => prev.size === next.size && [...next].every(([k, v]) => prev.get(k) === v) ? prev : next);
+    setIconOnlyCols((prev) => prev.size === icons.size && [...icons].every((k) => prev.has(k)) ? prev : icons);
   }, [columns, kindOf2, drawn, isMobile, visibleKeys.length]);
   const [focusKey, setFocusKey] = useState(null);
   const visibleSet = new Set(visibleKeys);
@@ -6676,7 +6875,7 @@ function Table({
     scrollToRow(key);
   }, [drawnStart, drawn.length, visibleKeys.length, scrollToRow]);
   const cardHeading = title ? /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: false }) : null;
-  const titledCards = (body) => /* @__PURE__ */ jsxs("div", { ref: listRoot, "data-ds-list": "", "data-gs": "table", className: cn("flex flex-col", listClass), onFocus: noteFocus, onBlur: forgetFocus, children: [
+  const titledCards = (body) => /* @__PURE__ */ jsxs("div", { ref: listRoot, "data-ds-list": "", "data-gs": "table", "data-wide-control": "", className: cn("flex flex-col", listClass), onFocus: noteFocus, onBlur: forgetFocus, children: [
     cardHeading,
     body
   ] });
@@ -6730,11 +6929,11 @@ function Table({
         ] }, col.key)) }, r)) })
       ] });
       if (title) return titledCards(skeletonCards);
-      return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", className, children: skeletonCards });
+      return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", "data-wide-control": "", 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 });
+      return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", "data-wide-control": "", 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: 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" }),
@@ -6789,8 +6988,10 @@ function Table({
           }
         } : void 0,
         children: [
-          selectable && box && // "Select" and the row's name, as in the table (T15); a parent with some of its rows chosen is mixed
-          /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, indeterminate: box.mixed, onChange: (_, { shiftKey: shiftKey2 }) => toggleBox(originalIdx, id, shiftKey2), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-card-name-${idPart(id)}` : `${headingId}-select` }),
+          selectable && box && // "Select" and the row's name, as in the table (T15); a parent with some of its rows chosen is mixed. Marked as
+          // the card's selection box: with no select-all on a phone, the first card's is where a BulkActionBar's
+          // handover finds the selection (the fix pass of 25.33)
+          /* @__PURE__ */ jsx("div", { "data-ds-select-card": "", children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, indeterminate: box.mixed, onChange: (_, { shiftKey: shiftKey2 }) => toggleBox(originalIdx, id, 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 })
@@ -6864,8 +7065,9 @@ function Table({
     // a tree table is a treegrid (item 14): its rows have levels, and the arrow keys move between them
     /* @__PURE__ */ jsxs("table", { ref: tableRef, role: nested ? "treegrid" : void 0, "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"), onKeyDown: nested ? onHeadKeyDown : void 0, onFocus: nested ? onHeadFocus : void 0, 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 && // 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(
+        selectable && // data-ds-select-all: the selection's own control, where a BulkActionBar's Clear selection sends focus; and
+        // whether the table holds a selection, said as it renders (the box's mixed state is set a moment later)
+        /* @__PURE__ */ jsx("th", { "data-ds-select-all": "", "data-selection": allSelected ? "all" : someSelected ? "some" : "none", 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,
           {
             ref: selectAllRef,
@@ -6922,6 +7124,9 @@ function Table({
                     ]
                   }
                 )
+              ) : iconOnlyCols.has(col.key) ? (
+                // a column of icon buttons: its name for a screen reader, its width its buttons' (Sprint 25.33)
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: col.header })
               ) : /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-ds-1", children: col.header })
             },
             col.key
@@ -7104,6 +7309,7 @@ function Table({
         ref: listRoot,
         "data-ds-list": "",
         "data-gs": "table",
+        "data-wide-control": "",
         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,
@@ -7128,7 +7334,7 @@ function Table({
               },
               ...fade,
               ...region,
-              className: cn("relative min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
+              className: cn("relative min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]", inCell && "scroll-p-[4px]"),
               children: table
             }
           )
@@ -9268,38 +9474,42 @@ function ExpandableDescription({ children, className }) {
 function HorizontalLayout({ items, minItemWidth, label, className }) {
   const [row, setRow] = useState(null);
   useKeyboardScroll(row, label, 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: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex-1 h-[2px] transition-colors",
-              isFirst ? "bg-transparent" : "bg-[var(--ds-border-subtle)]"
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(Marker, { item, vertical: false }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "flex-1 h-[2px] transition-colors",
-              isLast ? "bg-transparent" : "bg-[var(--ds-border-subtle)]"
-            )
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "text-center mt-ds-2 px-ds-3", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: item.title }),
-        item.description && /* @__PURE__ */ jsx(ExpandableDescription, { className: "text-center", children: item.description }),
-        /* @__PURE__ */ jsx(ItemTime, { item })
-      ] })
-    ] }, i);
-  }) });
+  return (
+    // 4 px of room inside its edges, and snapping that keeps it, so the first marker and the row's own keyboard outline
+    // never meet (Sprint 25.33: the owner's answer to Sprint 25.30's look question)
+    /* @__PURE__ */ jsx("div", { ref: setRow, "data-timeline-row": "", className: cn("relative flex items-start overflow-x-auto snap-x p-[4px] scroll-px-[4px]", 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: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex-1 h-[2px] transition-colors",
+                isFirst ? "bg-transparent" : "bg-[var(--ds-border-subtle)]"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Marker, { item, vertical: false }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex-1 h-[2px] transition-colors",
+                isLast ? "bg-transparent" : "bg-[var(--ds-border-subtle)]"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "text-center mt-ds-2 px-ds-3", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: item.title }),
+          item.description && /* @__PURE__ */ jsx(ExpandableDescription, { className: "text-center", children: item.description }),
+          /* @__PURE__ */ jsx(ItemTime, { item })
+        ] })
+      ] }, i);
+    }) })
+  );
 }
 var exactFormat = (locale, d) => new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" }).format(d);
 var exactDayFormat = (locale, d) => new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(d);
@@ -9606,6 +9816,7 @@ function TreeView({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy
 }) {
+  useWantsInset();
   const [ownSelected, setOwnSelected] = useState(() => new Set(defaultSelected));
   const selected = useMemo(() => selectedProp ? new Set(selectedProp) : ownSelected, [selectedProp, ownSelected]);
   const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set([...defaultExpanded, ...foldersHolding(nodes, selected)]));
@@ -9760,7 +9971,7 @@ function TreeNodeRow({
   const hasChildren = !!node.children?.length;
   const isExpanded = expanded.has(node.id);
   const isSelected = selected.has(node.id);
-  const holdsSelection = !isSelected && holding.has(node.id);
+  const holdsSelection2 = !isSelected && holding.has(node.id);
   const checkState = checkable ? getCheckState(node) : "unchecked";
   return /* @__PURE__ */ jsxs("div", { role: "treeitem", "aria-expanded": hasChildren ? isExpanded : void 0, "aria-selected": selectable ? isSelected : void 0, children: [
     /* @__PURE__ */ jsxs(
@@ -9778,7 +9989,7 @@ function TreeNodeRow({
           isSelected ? "bg-[var(--ds-tree-active-bg)] text-[var(--ds-tree-active-text)] font-medium border-[var(--ds-accent-ink)]" : "border-transparent text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)] hover:text-[var(--ds-text-primary)]",
           // A folder holding the selection, as SidebarNav draws a parent of the current page (Sprint 25.16 A18): no
           // fill, so it reads the plain tokens, never the active set (pill's on-primary text would vanish here).
-          holdsSelection && "font-medium",
+          holdsSelection2 && "font-medium",
           node.disabled && "opacity-disabled pointer-events-none"
         ),
         style: { paddingLeft: `calc(var(--ds-space-3) * ${depth} + var(--ds-space-2))` },
@@ -9805,7 +10016,7 @@ function TreeNodeRow({
                 {
                   name: "chevron-right",
                   size: 14,
-                  className: cn(isSelected ? "text-[var(--ds-tree-active-muted)]" : holdsSelection ? "text-[var(--ds-accent-ink)]" : "text-[var(--ds-text-muted)]", "transition-transform", isExpanded && "rotate-90")
+                  className: cn(isSelected ? "text-[var(--ds-tree-active-muted)]" : holdsSelection2 ? "text-[var(--ds-accent-ink)]" : "text-[var(--ds-text-muted)]", "transition-transform", isExpanded && "rotate-90")
                 }
               )
             }
@@ -9821,7 +10032,7 @@ function TreeNodeRow({
               }
             }
           ),
-          node.icon && /* @__PURE__ */ jsx(Icon, { name: node.icon, size: 16, className: cn("shrink-0", isSelected ? "text-[var(--ds-tree-active-text)]" : holdsSelection ? "text-[var(--ds-accent-ink)]" : "text-[var(--ds-text-muted)]") }),
+          node.icon && /* @__PURE__ */ jsx(Icon, { name: node.icon, size: 16, className: cn("shrink-0", isSelected ? "text-[var(--ds-tree-active-text)]" : holdsSelection2 ? "text-[var(--ds-accent-ink)]" : "text-[var(--ds-text-muted)]") }),
           /* @__PURE__ */ jsx(TruncLabel2, { children: node.label })
         ]
       }
@@ -10646,19 +10857,20 @@ function AsidePanel({
 }) {
   const collapsed = useBreakpoint(collapseBelow);
   const shell = useAppShell();
+  const inSlot = useContext(AsideSlotContext);
   const navbarFloating = navbarFloatingProp ?? shell?.navbarFloating ?? false;
   const sidebarFloating = sidebarFloatingProp ?? shell?.sidebarFloating ?? false;
-  const setAsideOpen = shell?.setAsideOpen;
-  const setAsideFloating = shell?.setAsideFloating;
   const floating = position === "floating";
-  useEffect(() => {
-    setAsideOpen?.(open && !collapsed);
-    setAsideFloating?.(floating);
-    return () => {
-      setAsideOpen?.(false);
-      setAsideFloating?.(false);
-    };
-  }, [open, collapsed, floating, setAsideOpen, setAsideFloating]);
+  const reportAside = shell?.reportAside;
+  const close = useLatest(onClose);
+  const wasOpen = useRef(false);
+  useLayoutEffect(() => {
+    if (!reportAside) return;
+    const opened = open && !wasOpen.current;
+    wasOpen.current = open;
+    reportAside(close, { open, opened, page: !inSlot, docked: !collapsed, floating, side, name: labelledBy });
+    return () => reportAside(close, null);
+  }, [reportAside, close, open, inSlot, collapsed, floating, side, labelledBy]);
   if (collapsed) {
     return /* @__PURE__ */ jsx(
       Drawer,
@@ -10677,7 +10889,7 @@ function AsidePanel({
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  const docked = /* @__PURE__ */ jsx(
     DockedColumn,
     {
       open,
@@ -10696,6 +10908,9 @@ function AsidePanel({
       children
     }
   );
+  if (!shell || inSlot) return docked;
+  const host = shell.asideHosts[side];
+  return host ? createPortal(docked, host) : null;
 }
 function DockedColumn({ open, onClose, side, width, floating, navbarFloating, sidebarFloating, keepMounted, resizable, maxWidth, labelledBy, id, children, className }) {
   const asideRef = useRef(null);
@@ -10760,7 +10975,7 @@ function DockedColumn({ open, onClose, side, width, floating, navbarFloating, si
           ),
           style: { width: currentWidth },
           children: [
-            children,
+            /* @__PURE__ */ jsx(OverlayCloseCtx, { value: null, children }),
             resizable && open && /* @__PURE__ */ jsx(
               ResizeEdge,
               {
@@ -10795,9 +11010,12 @@ var StackedList = forwardRef(function StackedList2({
   pager
 }, ref) {
   useScrollsInside();
+  useRunsEdgeToEdge();
   const isPhone = useBreakpoint("sm");
   const inCard = useContext(CardSurfaceCtx);
-  const inPane = !!useContext(SplitPaneCtx);
+  const pane = useContext(SplitPaneCtx);
+  const panePadded = useContext(PanePaddedCtx);
+  const inPane = !!pane && !panePadded;
   const articles = variant === "articles";
   useWholeListCheck("StackedList", items.length, pager);
   const shown = pagerPart(items, pager);
@@ -12056,6 +12274,7 @@ function Gantt({
   className
 }) {
   useScrollsInside();
+  useRunsEdgeToEdge();
   const [zoomState, setZoomState] = useState(defaultZoom);
   const zoom = zoomProp ?? zoomState;
   const changeZoom = (next) => {
@@ -13362,7 +13581,8 @@ function ScrollArea({
   orientation = "vertical",
   maxHeight,
   maxWidth,
-  "aria-label": ariaLabel = "Scrollable content"
+  "aria-label": ariaLabel = "Scrollable content",
+  flush = false
 }) {
   const viewportRef = useRef(null);
   const [viewport, setViewport] = useState(null);
@@ -13463,6 +13683,8 @@ function ScrollArea({
             className: cn(
               // 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]",
+              // room for an outline at its edges (FOCUS_ROOM), unless the content insets itself
+              !flush && "p-[4px]",
               FOCUS_INSET,
               orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
               orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
@@ -13612,7 +13834,7 @@ var Sidebar = forwardRef(function Sidebar2({
             children: header
           }
         ),
-        /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children }),
+        /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", flush: true, children }),
         showCollapse && (() => {
           const isSm = navSize === "sm";
           const collapseButton = /* @__PURE__ */ jsxs(
@@ -14520,6 +14742,16 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
       clearTimers.current.add(timer);
     }, 0);
   }, []);
+  const barRooms = useRef(/* @__PURE__ */ new Map());
+  const [barRoom, setBarRoom] = useState(0);
+  const bulkBar = useMemo(() => ({
+    room: (bar, room) => {
+      if (room > 0) barRooms.current.set(bar, room);
+      else barRooms.current.delete(bar);
+      setBarRoom(Math.max(0, ...barRooms.current.values()));
+    },
+    say: (text) => announce({ id: "bulk-bar", message: text, variant: "default", duration: 0, shown: false, version: 0 })
+  }), [announce]);
   useEffect(() => () => {
     if (heardTimer.current) clearTimeout(heardTimer.current);
     heardTimer.current = void 0;
@@ -14707,8 +14939,10 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
   const waiting = list2.length - shown.length;
   const isTop = position.startsWith("top");
   const hasBottomNav = isMobile && bottomNavs > 0;
+  const navFoot = "var(--ds-space-12) + var(--ds-space-2) + env(safe-area-inset-bottom)";
+  const stackBottom = barRoom > 0 && (isMobile || !isTop) ? hasBottomNav ? `calc(${navFoot} + ${barRoom}px)` : isMobile ? `calc(env(safe-area-inset-bottom) + ${barRoom}px)` : `max(var(${TOAST_INSET_VARS[position]}), calc(env(safe-area-inset-bottom) + ${barRoom}px))` : hasBottomNav ? `calc(${navFoot} + var(--ds-space-4))` : void 0;
   return /* @__PURE__ */ jsx(ToastContext.Provider, { value: api, children: /* @__PURE__ */ jsxs(ToastLedgerCtx.Provider, { value: ledger, children: [
-    /* @__PURE__ */ jsx(BottomNavPresenceCtx.Provider, { value: registerBottomNav, children }),
+    /* @__PURE__ */ jsx(BottomNavPresenceCtx.Provider, { value: registerBottomNav, children: /* @__PURE__ */ jsx(BulkBarPresenceCtx, { value: bulkBar, children }) }),
     /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "polite", "data-toast-announcer": "polite", children: heard.filter((h) => !h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.text }, h.id)) }),
     /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "assertive", "data-toast-announcer": "assertive", children: heard.filter((h) => h.assertive).map((h) => /* @__PURE__ */ jsx("p", { children: h.text }, h.id)) }),
     shown.length > 0 && createPortal(
@@ -14740,7 +14974,7 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
             isTop ? "flex-col" : "flex-col-reverse",
             isMobile ? cn("left-ds-4 right-ds-4", !hasBottomNav && "bottom-ds-4") : TOAST_POSITION_CLASSES[position]
           ),
-          style: hasBottomNav ? { bottom: "calc(var(--ds-space-12) + var(--ds-space-2) + var(--ds-space-4) + env(safe-area-inset-bottom))" } : void 0,
+          style: stackBottom ? { bottom: stackBottom } : void 0,
           children: [
             shown.map((t) => /* @__PURE__ */ jsx("div", { "data-toast-id": t.id, className: "pointer-events-auto", children: /* @__PURE__ */ jsx(
               Toast,
@@ -15186,6 +15420,7 @@ var PageContainer = forwardRef(function PageContainer2({
       {
         ref: setRoot,
         "data-page-container": wrappedHeader ? "" : void 0,
+        "data-page-column": "",
         "data-width": dataWidth,
         className: cn(
           "w-full",
@@ -15217,7 +15452,7 @@ var PageContainer = forwardRef(function PageContainer2({
     ...floatingHeader ? { paddingRight: "var(--ds-space-3)", paddingLeft: r.sidebarFloating ? 0 : "var(--ds-space-3)" } : {},
     ...overlapActive ? { marginTop: "calc(-1 * var(--ds-overlap, 0px))", position: "relative", zIndex: 1 } : {}
   } : void 0;
-  const column = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement: "inside", containedBreadcrumbs: false, breadcrumbsInsideHeader: false, noBottomMargin: false, overlap: false, setPinnedHeight, reportHeader, requestContentWidth, insidePaddedColumn: true }, children: /* @__PURE__ */ jsx("div", { ref: columnRef, className: cn(columnClass(contentPadding), bottomPaddingClasses[vPad], className), style: { ...columnStyle, ...launcherPadding }, children: capped(rest) }) });
+  const column = /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement: "inside", containedBreadcrumbs: false, breadcrumbsInsideHeader: false, noBottomMargin: false, overlap: false, setPinnedHeight, reportHeader, requestContentWidth, insidePaddedColumn: true }, children: /* @__PURE__ */ jsx("div", { ref: columnRef, "data-page-column": "", className: cn(columnClass(contentPadding), bottomPaddingClasses[vPad], className), style: { ...columnStyle, ...launcherPadding }, children: capped(rest) }) });
   return /* @__PURE__ */ jsx(PageActionsCtx, { value: pageActions, children: /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-page-container": "", "data-width": dataWidth, className: "w-full", children: [
     placement === "block" ? /* @__PURE__ */ jsx("div", { style: floatingBlockPadding(r.navbarFloating, r.sidebarFloating, overlapActive), children: /* @__PURE__ */ jsxs("div", { className: FLOATING_BLOCK, children: [
       strip,
@@ -15380,6 +15615,16 @@ var FLOATING_HEADER = cn(
   "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
   GLASS_SURFACE
 );
+var HEAD_LINE = "flex flex-col @sm:flex-row flex-wrap @sm:items-center justify-between gap-ds-4";
+var HEAD_LEAD = "flex items-center gap-ds-4 min-w-0 @sm:contents";
+var HEAD_BLOCK = "min-w-0 @sm:grow @sm:max-w-max @sm:me-auto @sm:basis-[calc(var(--ds-font-size-3xl)*4.5)]";
+var MINIMAL_LINE = "flex flex-wrap items-center justify-between gap-ds-4";
+var TITLE_GROUP = "flex flex-wrap items-center gap-x-ds-2 gap-y-ds-1 min-w-0";
+var FLOOR_XL = "basis-[calc(var(--ds-font-size-xl)*4.5)]";
+var MINIMAL_LEAD = cn(TITLE_GROUP, "grow max-w-max", FLOOR_XL);
+var TITLE_KEEPS = "min-w-0 grow max-w-max";
+var FLOOR_3XL = "basis-[calc(var(--ds-font-size-3xl)*4.5)]";
+var HEAD_ACTIONS = "flex flex-wrap items-center gap-ds-2";
 function computeFloatingPadding(navbarFloating, sidebarFloating, overlapActive, asideFloatingSide) {
   return {
     paddingTop: navbarFloating ? 0 : "var(--ds-space-3)",
@@ -15445,7 +15690,7 @@ var PageHeader = forwardRef(function PageHeader2({
   }, { isHome: shell?.isHome ?? false, isMobile: shell?.isMobile ?? false, navbarFloating: shell?.navbarFloating ?? false, sidebarFloating: shell?.sidebarFloating ?? false });
   const { variant, behavior, position, intensity, navbarFloating, sidebarFloating } = r;
   const isFloating = position === "floating";
-  const asideFloatingSide = shell?.asideOpen && shell.asideFloating ? shell.asideSide : null;
+  const asideFloatingSide = shell?.asideFloatingSide ?? null;
   const bcPill = r.breadcrumbStyle === "pill";
   const bcSep = r.breadcrumbSeparator;
   const contentMaxWidth = contentMaxWidthProp ?? container?.contentMaxWidth;
@@ -15648,23 +15893,20 @@ function DefaultHeader({
         /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
           focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
           hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs2, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
-          /* @__PURE__ */ jsxs("div", { className: cn(
-            "flex flex-col @sm:flex-row @sm:items-center justify-between gap-ds-4",
-            hasBreadcrumbs && "mt-ds-1"
-          ), children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(HEAD_LINE, hasBreadcrumbs && "mt-ds-1"), children: [
+            /* @__PURE__ */ jsxs("div", { className: HEAD_LEAD, children: [
               onBack && /* @__PURE__ */ jsx(BackButton, { onClick: onBack }),
               avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: HEAD_BLOCK, children: [
                 caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-                  /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
+                /* @__PURE__ */ jsxs("div", { className: TITLE_GROUP, children: [
+                  /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(TITLE_KEEPS, FLOOR_3XL, "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]"), children: title }),
                   badge
                 ] }),
                 description && /* @__PURE__ */ jsx(ClampedText, { className: "mt-ds-1 text-sm text-[var(--ds-text-secondary)]", children: description })
               ] })
             ] }),
-            actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
+            actions && /* @__PURE__ */ jsx("div", { className: HEAD_ACTIONS, children: actions })
           ] }),
           filters && /* @__PURE__ */ jsx(FilterRow, { className: "mt-ds-4", children: filters }),
           tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", children: tabs })
@@ -15695,12 +15937,12 @@ function MinimalHeader({
     focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
     hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs2, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
     caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
-    /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-ds-4", hasBreadcrumbs && "mt-ds-0.5"), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 min-w-0", children: [
-        /* @__PURE__ */ jsx(TruncHeading, { as: Heading, lines: 1, className: "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
+    /* @__PURE__ */ jsxs("div", { className: cn(MINIMAL_LINE, hasBreadcrumbs && "mt-ds-0.5"), children: [
+      /* @__PURE__ */ jsxs("div", { className: MINIMAL_LEAD, children: [
+        /* @__PURE__ */ jsx(TruncHeading, { as: Heading, lines: 1, className: cn(TITLE_KEEPS, FLOOR_XL, "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]"), children: title }),
         badge
       ] }),
-      actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
+      actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: HEAD_ACTIONS, children: actions }) })
     ] }),
     tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
   ] }) });
@@ -15785,17 +16027,16 @@ function ColourfulHeader({
             children: [
               focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack, onLight: isBold }),
               hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs2, { items: breadcrumbs, onLight: isBold, onTint: !isBold, pill: breadcrumbPill, separator: breadcrumbSeparator }),
-              /* @__PURE__ */ jsxs("div", { className: cn(
-                "flex flex-col @sm:flex-row @sm:items-center justify-between gap-ds-4",
-                hasBreadcrumbs && "mt-ds-1"
-              ), children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4 min-w-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: cn(HEAD_LINE, hasBreadcrumbs && "mt-ds-1"), children: [
+                /* @__PURE__ */ jsxs("div", { className: HEAD_LEAD, children: [
                   onBack && /* @__PURE__ */ jsx(BackButton, { onClick: onBack, onLight: isBold }),
                   avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
-                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxs("div", { className: HEAD_BLOCK, children: [
                     caption && /* @__PURE__ */ jsx(Caption, { onLight: isBold, onTint: !isBold, children: caption }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
+                    /* @__PURE__ */ jsxs("div", { className: TITLE_GROUP, children: [
                       /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(
+                        TITLE_KEEPS,
+                        FLOOR_3XL,
                         "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)]",
                         isBold ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)]"
                       ), children: title }),
@@ -15807,7 +16048,7 @@ function ColourfulHeader({
                     ), children: description })
                   ] })
                 ] }),
-                actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
+                actions && /* @__PURE__ */ jsx("div", { className: HEAD_ACTIONS, children: actions })
               ] }),
               filters && /* @__PURE__ */ jsx(FilterRow, { className: "mt-ds-4", onBand: isBold, children: filters }),
               tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", onBand: isBold, children: tabs })
@@ -16007,12 +16248,12 @@ function SnappingHeader({
             focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
             hasBreadcrumbs && !hideExpandedBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs2, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
             caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
-            /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-ds-4", hasBreadcrumbs && !hideExpandedBreadcrumbs && "mt-ds-0.5"), children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2 min-w-0", children: [
-                /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
+            /* @__PURE__ */ jsxs("div", { className: cn(MINIMAL_LINE, hasBreadcrumbs && !hideExpandedBreadcrumbs && "mt-ds-0.5"), children: [
+              /* @__PURE__ */ jsxs("div", { className: MINIMAL_LEAD, children: [
+                /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(TITLE_KEEPS, FLOOR_XL, "font-[family-name:var(--ds-font-display)] text-xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]"), children: title }),
                 badge
               ] }),
-              actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
+              actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: HEAD_ACTIONS, children: actions }) })
             ] }),
             filters && /* @__PURE__ */ jsx(FilterRow, { className: "mt-ds-3", children: filters }),
             expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-3", children: expandedContent }),
@@ -16035,40 +16276,41 @@ function SnappingHeader({
                 !collapsed && focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack, onLight }),
                 !collapsed && hasBreadcrumbs && !hideExpandedBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs2, { items: breadcrumbs, onLight, onTint, pill: breadcrumbPill, separator: breadcrumbSeparator }),
                 /* @__PURE__ */ jsxs("div", { className: cn(
-                  "flex justify-between gap-ds-4",
-                  collapsed ? "items-center" : "flex-col @sm:flex-row @sm:items-center",
-                  !collapsed && hasBreadcrumbs && !hideExpandedBreadcrumbs && "mt-ds-1",
-                  collapsed && "w-full"
+                  collapsed ? cn(MINIMAL_LINE, "w-full") : HEAD_LINE,
+                  !collapsed && hasBreadcrumbs && !hideExpandedBreadcrumbs && "mt-ds-1"
                 ), children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4 min-w-0", children: [
+                  /* @__PURE__ */ jsxs("div", { className: collapsed ? "contents" : HEAD_LEAD, children: [
                     onBack && !collapsed && /* @__PURE__ */ jsx(BackButton, { onClick: onBack, onLight }),
                     avatar && !collapsed && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
-                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    collapsed && hasBreadcrumbs && (() => {
+                      const lastCrumb = breadcrumbs[breadcrumbs.length - 1];
+                      const isClickable = !!lastCrumb && crumbGoes(lastCrumb);
+                      const Tag3 = isClickable ? "a" : "span";
+                      return /* @__PURE__ */ jsxs(
+                        Tag3,
+                        {
+                          ...isClickable ? {
+                            href: lastCrumb.href ?? "#",
+                            onClick: (e) => followCrumb(e, lastCrumb)
+                          } : {},
+                          className: cn(
+                            // the title's group's gap from it, not the line's
+                            "text-sm hidden @sm:inline-flex items-center gap-ds-1 -me-ds-2",
+                            isClickable ? cn("text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] transition-colors duration-[var(--ds-transition-speed)] cursor-pointer", FOCUS_RING) : "text-[var(--ds-text-secondary)]"
+                          ),
+                          children: [
+                            lastCrumb?.label,
+                            breadcrumbSeparator === "slash" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "/" }) : breadcrumbSeparator === "dot" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }) : breadcrumbSeparator === "arrow" ? /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: 12 }) : /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12 })
+                          ]
+                        }
+                      );
+                    })(),
+                    /* @__PURE__ */ jsxs("div", { className: collapsed ? cn("min-w-0 grow max-w-max me-auto", TITLE_FLOOR) : HEAD_BLOCK, children: [
                       !collapsed && caption && /* @__PURE__ */ jsx(Caption, { onLight, onTint, children: caption }),
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-                        collapsed && hasBreadcrumbs && (() => {
-                          const lastCrumb = breadcrumbs[breadcrumbs.length - 1];
-                          const isClickable = !!lastCrumb && crumbGoes(lastCrumb);
-                          const Tag3 = isClickable ? "a" : "span";
-                          return /* @__PURE__ */ jsxs(
-                            Tag3,
-                            {
-                              ...isClickable ? {
-                                href: lastCrumb.href ?? "#",
-                                onClick: (e) => followCrumb(e, lastCrumb)
-                              } : {},
-                              className: cn(
-                                "text-sm hidden @sm:inline-flex items-center gap-ds-1",
-                                isClickable ? cn("text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] transition-colors duration-[var(--ds-transition-speed)] cursor-pointer", FOCUS_RING) : "text-[var(--ds-text-secondary)]"
-                              ),
-                              children: [
-                                lastCrumb?.label,
-                                breadcrumbSeparator === "slash" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "/" }) : breadcrumbSeparator === "dot" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }) : breadcrumbSeparator === "arrow" ? /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: 12 }) : /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12 })
-                              ]
-                            }
-                          );
-                        })(),
+                      /* @__PURE__ */ jsxs("div", { className: TITLE_GROUP, children: [
                         /* @__PURE__ */ jsx(TruncHeading, { as: Heading, lines: collapsed ? 1 : void 0, className: cn(
+                          TITLE_KEEPS,
+                          collapsed ? TITLE_FLOOR : FLOOR_3XL,
                           "font-[family-name:var(--ds-font-display)] font-[var(--ds-weight-heading)]",
                           collapsed ? "text-lg text-[var(--ds-text-primary)]" : cn("text-3xl", onLight ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)]")
                         ), children: title }),
@@ -16080,7 +16322,7 @@ function SnappingHeader({
                       ), children: description })
                     ] })
                   ] }),
-                  actions && (collapsed ? /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }))
+                  actions && (collapsed ? /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: HEAD_ACTIONS, children: actions }) }) : /* @__PURE__ */ jsx("div", { className: HEAD_ACTIONS, children: actions }))
                 ] }),
                 !collapsed && filters && /* @__PURE__ */ jsx(FilterRow, { className: "mt-ds-4", onBand: isBoldColourful, children: filters }),
                 !collapsed && expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: expandedContent }),
@@ -16153,23 +16395,20 @@ function TabsIntegratedHeader({
   return /* @__PURE__ */ jsx("header", { "data-gs": "page-header", ref: headerRef, className: cn(hasBreadcrumbs ? "pt-ds-3" : "pt-ds-6", "pb-ds-6", isFloating && cn(FLOATING_HEADER, "overflow-hidden"), className), children: /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
     focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
     hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs2, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
-    /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex flex-col @sm:flex-row @sm:items-center justify-between gap-ds-4",
-      hasBreadcrumbs && "mt-ds-1"
-    ), children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4 min-w-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(HEAD_LINE, hasBreadcrumbs && "mt-ds-1"), children: [
+      /* @__PURE__ */ jsxs("div", { className: HEAD_LEAD, children: [
         onBack && /* @__PURE__ */ jsx(BackButton, { onClick: onBack }),
         avatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: HEAD_BLOCK, children: [
           caption && /* @__PURE__ */ jsx(Caption, { children: caption }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-            /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: TITLE_GROUP, children: [
+            /* @__PURE__ */ jsx(TruncHeading, { as: Heading, className: cn(TITLE_KEEPS, FLOOR_3XL, "font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]"), children: title }),
             badge
           ] }),
           description && /* @__PURE__ */ jsx(ClampedText, { className: "mt-ds-1 text-sm text-[var(--ds-text-secondary)]", children: description })
         ] })
       ] }),
-      actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
+      actions && /* @__PURE__ */ jsx("div", { className: HEAD_ACTIONS, children: actions })
     ] }),
     tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", children: tabs })
   ] }) });
@@ -18304,7 +18543,10 @@ var SectionHeading = forwardRef(function SectionHeading2({
 }, ref) {
   const isPhone = useBreakpoint("sm");
   const pane = variant === "pane";
-  const inDetail = useContext(SplitPaneCtx) === "detail";
+  const paneKind = useContext(SplitPaneCtx);
+  const inDetail = paneKind === "detail";
+  const panePadded = useContext(PanePaddedCtx);
+  const cancel = pane && panePadded && (paneKind === "list" || paneKind === "detail") ? PANE_HEADING_CANCEL[paneKind] : void 0;
   const editable = !!onTitleChange;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -18313,7 +18555,7 @@ var SectionHeading = forwardRef(function SectionHeading2({
       "data-gs": "section-heading",
       "data-variant": variant,
       className: cn(
-        pane ? cn("shrink-0 pt-ds-4 pb-ds-3 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", inDetail ? "px-[var(--ds-page-gutter)]" : "px-ds-4") : "mb-[var(--ds-heading-gap)]",
+        pane ? cn("shrink-0 pt-ds-4 pb-ds-3 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", inDetail ? "px-[var(--ds-page-gutter)]" : "px-ds-4", cancel) : "mb-[var(--ds-heading-gap)]",
         !pane && bordered && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] pb-ds-4",
         className
       ),
@@ -18411,7 +18653,50 @@ function DangerZone({ title = "Danger zone", description, children, className })
     )
   ] });
 }
+var byte = (n) => n.toString(16).padStart(2, "0");
+function readColours(el, names) {
+  const doc = el.ownerDocument;
+  const style = getComputedStyle(el);
+  const probe = el.appendChild(doc.createElement("span"));
+  const ctx = doc.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  const out = {};
+  for (const name of names) {
+    const raw = style.getPropertyValue(name).trim();
+    if (!ctx || !raw || !CSS.supports("color", raw)) {
+      out[name] = "#00000000";
+      continue;
+    }
+    probe.style.color = `var(${name})`;
+    const computed = getComputedStyle(probe).color;
+    const see = /^rgba|\s\//.test(computed) ? /[,/]\s*([\d.]+)(%?)\s*\)$/.exec(computed) : null;
+    const alpha = see ? +see[1] / (see[2] ? 100 : 1) : 1;
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = see ? `${computed.slice(0, see.index)})` : computed;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+    out[name] = `#${byte(r)}${byte(g)}${byte(b)}${alpha < 1 ? byte(Math.round(alpha * 255)) : ""}`;
+  }
+  probe.remove();
+  return out;
+}
+function useThemeColors(ref, names) {
+  const key = names.join(" ");
+  const [colours, setColours] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || !key || typeof CSS === "undefined") return;
+    const read = () => {
+      const next = readColours(el, key.split(" "));
+      setColours((was) => JSON.stringify(was) === JSON.stringify(next) ? was : next);
+    };
+    read();
+    const watch = new MutationObserver(read);
+    watch.observe(el.ownerDocument.documentElement, { attributes: true, attributeFilter: ["data-mode"], subtree: true });
+    return () => watch.disconnect();
+  }, [ref, key]);
+  return colours;
+}
 
-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, 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 };
+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, 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, useThemeColors, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map