gridsmith-ui 0.31.1 → 0.32.0

package/dist/index.js

@@ -1,71 +1,216 @@
 "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 { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useCornerInset, NAVBAR_INSET_PRIORITY, useOverlayMark, useDirtyGuard, useScrollbarInset, useBulkBarHost, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, BulkBarHostCtx, BulkBarSpacer, bulkBarRoom, insetLessScrollbar, BULK_BAR_LAYER, DiscardConfirm, OVERLAY_ROOT_ATTR, BulkBarPresenceCtx, BULK_BAR_WINDOW_LAYER, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, besideRoom, PANEL_INSET_PRIORITY, Drawer, useRememberedWidth, pxOf, ResizeEdge, LAUNCHER_INSET_PRIORITY, TOAST_INSET_VARS, defaultMaxWidth } from './chunk-JHZ22HQP.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-JHZ22HQP.js';
+import { Skeleton, TITLE_TEXT, SegmentedControl } from './chunk-OVHM55JF.js';
+export { SegmentedControl, Skeleton } from './chunk-OVHM55JF.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 { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-TMPPBXX3.js';
+export { Avatar } from './chunk-TMPPBXX3.js';
+import { Link } from './chunk-QY2RA2HO.js';
+export { CodeBlock, Divider, Link } from './chunk-QY2RA2HO.js';
+import { DropdownMenu } from './chunk-HUVZQOU4.js';
+export { DropdownMenu } from './chunk-HUVZQOU4.js';
+import { useFillHeight, FillContext } from './chunk-SS3C24IJ.js';
+import { Badge } from './chunk-WSKPESAX.js';
+export { Badge } from './chunk-WSKPESAX.js';
+import { useKeyboardScroll } from './chunk-H732QL56.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-NGZJK57C.js';
+export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-NGZJK57C.js';
+import { useWholeListCheck, pagerPart, Pagination, NumberInput } from './chunk-SIEU4H3H.js';
+export { NumberInput, Pagination, Popover, usePagination } from './chunk-SIEU4H3H.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 { 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-DO6DLTFK.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, Textarea, Toggle } from './chunk-DO6DLTFK.js';
 import { formatLocale, localeChoice } from './chunk-7QLXYRPD.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 { CardSurfaceCtx, useScrollsInside, useRunsEdgeToEdge, SplitPaneCtx, PanePaddedCtx, RowsCtx, PageActionsCtx, PANE_HEADING_CANCEL, SurfaceBoundary, useFramesItself, TableCardCtx, useWantsInset } from './chunk-RS624TD5.js';
+import { Button, elementType, ControlSizeContext, triggerType, Spinner } from './chunk-XBVZIN26.js';
+export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-XBVZIN26.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 { useTextOverflow } from './chunk-R2IAK3J3.js';
+export { useTextOverflow } from './chunk-R2IAK3J3.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, 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 +219,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 +240,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 +1884,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 +2019,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(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 +2439,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 +3227,7 @@ var Tag = forwardRef(function Tag2({
   size = "md",
   color,
   maxWidth,
+  width,
   onRemove,
   onClick,
   selected,
@@ -3098,8 +3262,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 +3272,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 +4222,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 +4420,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 +4556,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,
       {
@@ -5757,9 +5932,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) {
@@ -6312,7 +6494,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 +6540,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 +6559,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 +6864,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 +6918,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 +6977,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 +7054,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 +7113,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 +7298,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,
@@ -9268,38 +9463,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 +9805,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 +9960,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 +9978,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 +10005,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 +10021,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 })
         ]
       }
@@ -10795,9 +10995,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 +12259,7 @@ function Gantt({
   className
 }) {
   useScrollsInside();
+  useRunsEdgeToEdge();
   const [zoomState, setZoomState] = useState(defaultZoom);
   const zoom = zoomProp ?? zoomState;
   const changeZoom = (next) => {
@@ -13362,7 +13566,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 +13668,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 +13819,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 +14727,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 +14924,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 +14959,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 +15405,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 +15437,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,
@@ -18304,7 +18524,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 +18536,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
       ),