gridsmith-ui 0.32.0 → 0.33.1

package/dist/index.js

@@ -1,46 +1,49 @@
 "use client";
-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-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 { 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-PT4HYHI3.js';
+export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-PT4HYHI3.js';
+import { useWholeListCheck, pagerPart, Pagination, NumberInput } from './chunk-BL2C35BN.js';
+export { NumberInput, Pagination, Popover, usePagination } from './chunk-BL2C35BN.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-NJG6JQGC.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-NJG6JQGC.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-DO6DLTFK.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, Textarea, Toggle } from './chunk-DO6DLTFK.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-MPXE2XOP.js';
+export { SegmentedControl, Skeleton } from './chunk-MPXE2XOP.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-4TQVFRKK.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, Textarea, Toggle } from './chunk-4TQVFRKK.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-NFVJEICH.js';
+export { Avatar } from './chunk-NFVJEICH.js';
+import { Link } from './chunk-N6QLEZFH.js';
+export { CodeBlock, Divider, Link } from './chunk-N6QLEZFH.js';
+import { CardSurfaceCtx, useScrollsInside, useRunsEdgeToEdge, SplitPaneCtx, PanePaddedCtx, RowsCtx, PageActionsCtx, PANE_HEADING_CANCEL, SurfaceBoundary, useFramesItself, TableCardCtx, useWantsInset } from './chunk-RS624TD5.js';
+import { Badge } from './chunk-4FX6UCSS.js';
+export { Badge } from './chunk-4FX6UCSS.js';
+import { useTextOverflow } from './chunk-ZTS6HJAU.js';
+export { useTextOverflow } from './chunk-ZTS6HJAU.js';
+import { useOverlayMark, useDirtyGuard, OverlayMarkScope, OverlayCloseCtx, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth } from './chunk-UI4BSRCQ.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, 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 { DropdownMenu } from './chunk-XJGFZ5CP.js';
+export { DropdownMenu } from './chunk-XJGFZ5CP.js';
+import { useFillHeight, FillContext } from './chunk-SS3C24IJ.js';
+import { Button, elementType, ControlSizeContext, triggerType, Spinner } from './chunk-MW5CJOJN.js';
+export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-MW5CJOJN.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-ZHUVLBCC.js';
 import { inputModality, useInputModality } from './chunk-7RKC5C7G.js';
 export { INPUT_MODALITY_ATTR, inputModality, installInputModality, useInputModality } from './chunk-7RKC5C7G.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 { useKeyboardScroll } from './chunk-T33JK3ZE.js';
+import { AutoTooltip, mergeRefs, useRevealFocus } from './chunk-77X7AHFB.js';
+export { Tooltip, useRevealFocus } from './chunk-77X7AHFB.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, 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 { 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, tabStops, CONTROL_ANCESTOR, pointOf, pageAddress, registerOpenerRoot, rememberFocus, usePosition, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, GROUP_FOCUS_RING, useGridKeyboard, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, focusAfterRemoval, placesOf, GLASS_DROPDOWN, ERROR_FOCUS_RING, FIELD_FOCUS_RING, openToFocus, atLeastFocusRoom, useNonModalDialog, useReturnFocus, onMovingOn } from './chunk-HDFTENVW.js';
+export { useGridKeyboard } from './chunk-HDFTENVW.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';
@@ -2033,7 +2036,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                               ...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(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 })
                             ]
                           }
@@ -2573,7 +2576,7 @@ function SliderRange({
   const valueText = (v) => formatValue ? formatValue(v) : void 0;
   const handleChange = useCallback(
     (which, raw) => {
-      const v = Math.round(raw / step) * step;
+      const v = Number((Math.round(raw / step) * step).toFixed(placesOf(step)));
       const clamped = Math.max(min, Math.min(max, v));
       if (isRange) {
         if (which === "low") onChange([Math.min(clamped, high), high]);
@@ -5076,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;
@@ -5263,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",
@@ -5305,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" }),
@@ -5412,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 (
@@ -5421,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 });
 }
@@ -5441,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)]",
@@ -5455,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,
@@ -5469,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 })
       ]
@@ -6163,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()
@@ -6477,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);
@@ -6486,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);
@@ -7323,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
             }
           )
@@ -10846,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,
@@ -10877,7 +10889,7 @@ function AsidePanel({
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  const docked = /* @__PURE__ */ jsx(
     DockedColumn,
     {
       open,
@@ -10896,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);
@@ -10960,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,
               {
@@ -11013,7 +11028,7 @@ var StackedList = forwardRef(function StackedList2({
   }, [ref]);
   const stackMeta = isPhone && articles;
   const selectable = selectedId !== void 0 || items.some((i) => i.selected !== void 0);
-  const inset = articles ? inCard ? "px-ds-5" : "px-0" : inCard ? "px-ds-5" : inPane ? "pl-ds-3 pr-ds-4" : selectable ? "pl-ds-3 pr-0" : "px-0";
+  const inset = articles ? inCard ? "px-ds-5" : "px-0" : inCard ? selectable ? "pl-[calc(var(--ds-space-5)_-_var(--ds-nav-v-active-rail)*1.5)] pr-ds-5" : "px-ds-5" : inPane ? "pl-ds-3 pr-ds-4" : selectable ? "pl-ds-3 pr-0" : "px-0";
   const list2 = /* @__PURE__ */ jsx(
     "ul",
     {
@@ -13016,7 +13031,7 @@ function getTabsFromDOM(el) {
   const tablist = el.closest('[role="tablist"]');
   if (!tablist) return [];
   return Array.from(tablist.querySelectorAll('[role="tab"]')).map((btn) => ({
-    id: btn.id.replace(/^ds-tab-/, ""),
+    id: btn.dataset.tab ?? "",
     disabled: btn.getAttribute("aria-disabled") === "true"
   }));
 }
@@ -13049,11 +13064,12 @@ function handleTabKeyDown(e, currentId, getTabs, orientation, select) {
   e.preventDefault();
   if (targetId && targetId !== currentId) {
     select?.(targetId);
-    document.getElementById(`ds-tab-${targetId}`)?.focus();
+    e.currentTarget.closest('[role="tablist"]')?.querySelector(`[data-tab="${CSS.escape(targetId)}"]`)?.focus();
   }
 }
 function TabButton({
   id,
+  scope,
   label,
   count,
   icon,
@@ -13080,8 +13096,8 @@ function TabButton({
       if (!e.currentTarget.closest('[role="tablist"]')?.contains(e.relatedTarget)) forget();
     }
   };
-  const tabId = `ds-tab-${id}`;
-  const panelId = hasPanel === false ? void 0 : `ds-tabpanel-${id}`;
+  const tabId = `ds-tab-${scope}${id}`;
+  const panelId = hasPanel === false ? void 0 : `ds-tabpanel-${scope}${id}`;
   const badgeBg = orientation === "vertical" ? "bg-[var(--ds-nav-v-badge-bg)]" : "bg-[var(--ds-nav-h-badge-bg)]";
   const countBadge = count !== void 0 ? /* @__PURE__ */ jsx("span", { className: cn(
     orientation === "vertical" ? "ml-ds-2" : "",
@@ -13094,6 +13110,7 @@ function TabButton({
       {
         type: "button",
         id: tabId,
+        "data-tab": id,
         role: "tab",
         "aria-selected": isActive2,
         "aria-controls": panelId,
@@ -13130,6 +13147,7 @@ function TabButton({
     {
       type: "button",
       id: tabId,
+      "data-tab": id,
       role: "tab",
       "aria-selected": isActive2,
       "aria-controls": panelId,
@@ -13186,11 +13204,12 @@ function TabsList({ children, className }) {
   return /* @__PURE__ */ jsx(TabStrip, { overflow, fullWidth, track, label, className, children });
 }
 function TabsTrigger({ value, children, count, icon, disabled, truncate, className }) {
-  const { activeTab, onTabChange, orientation, fullWidth, overflow, activation, stopTab, setFocusedTab } = useTabsCtx();
+  const { activeTab, onTabChange, orientation, fullWidth, overflow, activation, stopTab, setFocusedTab, scope } = useTabsCtx();
   return /* @__PURE__ */ jsx(
     TabButton,
     {
       id: value,
+      scope,
       label: children,
       count,
       icon,
@@ -13207,16 +13226,47 @@ function TabsTrigger({ value, children, count, icon, disabled, truncate, classNa
     }
   );
 }
+function needsStop(panel) {
+  const stops = tabStops(panel);
+  if (!stops.length) return true;
+  const walk = panel.ownerDocument.createTreeWalker(panel, NodeFilter.SHOW_TEXT);
+  for (let text = walk.nextNode(); text; text = walk.nextNode()) {
+    const at = text.parentElement;
+    if (!at || !text.textContent?.trim()) continue;
+    return !stops.some((stop) => stop.contains(at)) && !panel.contains(at.closest(CONTROL_ANCESTOR));
+  }
+  return false;
+}
+function keepPanelStop(panel) {
+  const read = () => {
+    if (panel.ownerDocument.activeElement === panel) return;
+    const stop = needsStop(panel);
+    if (stop !== (panel.getAttribute("tabindex") === "0")) {
+      if (stop) panel.tabIndex = 0;
+      else panel.removeAttribute("tabindex");
+    }
+  };
+  read();
+  const watch = new MutationObserver(read);
+  watch.observe(panel, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["tabindex", "disabled", "hidden", "inert", "href", "role"] });
+  panel.addEventListener("focusout", read);
+  return () => {
+    watch.disconnect();
+    panel.removeEventListener("focusout", read);
+  };
+}
 function TabsContent({ value, children, className }) {
-  const { activeTab } = useTabsCtx();
+  const { activeTab, scope } = useTabsCtx();
+  const [panel, setPanel] = useState(null);
+  useLayoutEffect(() => panel ? keepPanelStop(panel) : void 0, [panel]);
   if (activeTab !== value) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      id: `ds-tabpanel-${value}`,
+      ref: setPanel,
+      id: `ds-tabpanel-${scope}${value}`,
       role: "tabpanel",
-      "aria-labelledby": `ds-tab-${value}`,
-      tabIndex: 0,
+      "aria-labelledby": `ds-tab-${scope}${value}`,
       className: cn(FOCUS_RING, className),
       children
     }
@@ -13239,6 +13289,7 @@ function TabsRoot(props) {
   const arrayOverflow = arrayApi && props.tabs.some((t) => t.truncate) ? "truncate" : overflow;
   const [focusedTab, setFocusedTab] = useState(null);
   const stopTab = focusedTab ?? activeTab;
+  const scope = useId();
   const track = useScrollTrack(stopTab, arrayApi && effectiveOrientation === "horizontal" && arrayOverflow === "scroll");
   if ("tabs" in props && props.tabs) {
     const { tabs, mobile = "scroll" } = props;
@@ -13280,14 +13331,14 @@ function TabsRoot(props) {
                 children: tab.group
               }
             ),
-            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, isTabStop: i === stopIndex, setFocusedTab, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, select) })
+            /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, scope, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, isTabStop: i === stopIndex, setFocusedTab, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, select) })
           ] }, tab.id))
         }
       );
     }
-    return /* @__PURE__ */ jsx(TabStrip, { overflow: arrayOverflow, fullWidth, track, label: ariaLabel, className, children: tabs.map((tab, i) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, isTabStop: i === stopIndex, setFocusedTab, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, select) }, tab.id)) });
+    return /* @__PURE__ */ jsx(TabStrip, { overflow: arrayOverflow, fullWidth, track, label: ariaLabel, className, children: tabs.map((tab, i) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, scope, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, isTabStop: i === stopIndex, setFocusedTab, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, select) }, tab.id)) });
   }
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, fullWidth, overflow, activation, stopTab, setFocusedTab, label: ariaLabel }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, fullWidth, overflow, activation, stopTab, setFocusedTab, label: ariaLabel, scope }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
 }
 var Tabs = Object.assign(TabsRoot, {
   List: TabsList,
@@ -15600,6 +15651,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)",
@@ -15665,7 +15726,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;
@@ -15868,23 +15929,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 })
@@ -15915,12 +15973,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 })
   ] }) });
@@ -16005,17 +16063,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 }),
@@ -16027,7 +16084,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 })
@@ -16227,12 +16284,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 }),
@@ -16255,40 +16312,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 }),
@@ -16300,7 +16358,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 }),
@@ -16373,23 +16431,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 })
   ] }) });
@@ -18634,7 +18689,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