gridsmith-ui 0.22.0 → 0.24.0

package/dist/index.js

@@ -1,21 +1,25 @@
-import { useAppShell, REACT_VERSION_PROBLEM, useOverlayMark, useDirtyGuard, OverlayMarkScope, OverlayCloseCtx, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-AAYCQXZQ.js';
-export { AppShell, Drawer, Sheet, SkipLink, useAppShell, useUnsavedChanges } from './chunk-AAYCQXZQ.js';
+import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-MV7JXWXK.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-MV7JXWXK.js';
 import { Skeleton, TITLE_TEXT } from './chunk-NCIZQYXQ.js';
 export { Skeleton } from './chunk-NCIZQYXQ.js';
-import { Link } from './chunk-EYMGLK4M.js';
-export { CodeBlock, Divider, Link } from './chunk-EYMGLK4M.js';
+import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
+import { Link } from './chunk-SVP2IG4S.js';
+export { CodeBlock, Divider, Link } from './chunk-SVP2IG4S.js';
+import { useFillHeight, FillContext } from './chunk-2YSEME33.js';
 import { Badge } from './chunk-SBTBMAIU.js';
 export { Badge } from './chunk-SBTBMAIU.js';
 import { inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, CardValue } from './chunk-IVCVNAXG.js';
-import { useWholeListCheck, pagerPart, Pagination, Dropdown, useFieldControl, useField, warnOnce, Label, InlineFieldError, AddAnotherRowCtx, Input, Field } from './chunk-2RV23OBK.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-2RV23OBK.js';
-import { SplitPaneCtx, TableCardCtx } from './chunk-RG4KUCRS.js';
+import { useWholeListCheck, pagerPart, Pagination, Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, warnOnce, Label, InlineFieldError, AddAnotherRowCtx, Field } from './chunk-6XAU44U4.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-6XAU44U4.js';
 import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, preferenceActionKey } from './chunk-7TOJ4G7S.js';
 export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, preferenceActionKey, usePreferences } from './chunk-7TOJ4G7S.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
-import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, FormChangeCtx, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, useReportedChange, rovingTabStop, useGridKeyboard, useOptionalFormContext, focusAfterRemoval, FormCtx, useNonModalDialog, useReturnFocus, useCloseOnFocusOut } from './chunk-RT7RYGC3.js';
-export { useFormContext, useGridKeyboard } from './chunk-RT7RYGC3.js';
+import { FormChangeCtx, useReportedChange, useOptionalFormContext, FormCtx } from './chunk-XVB55M3N.js';
+export { useFormContext } from './chunk-XVB55M3N.js';
+import { CardSurfaceCtx, useScrollsInside, SplitPaneCtx, PageActionsCtx, SurfaceBoundary, useFramesItself, TableCardCtx } from './chunk-2PWGJ4PK.js';
+import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, rovingTabStop, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus, useCloseOnFocusOut } from './chunk-JXANCXK6.js';
+export { useGridKeyboard } from './chunk-JXANCXK6.js';
 import { useTextOverflow, Tooltip, usePosition } from './chunk-CXMV7SXJ.js';
 export { Tooltip, useTextOverflow } from './chunk-CXMV7SXJ.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
@@ -508,7 +512,7 @@ function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disable
               "border-[2px]",
               "transition-all",
               "peer-focus-visible:shadow-[var(--ds-shadow-focus)]",
-              filled ? "bg-[var(--ds-check-bg)] [background-image:var(--ds-gradient)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
+              filled ? cn(CHECK_FILL, "border-[var(--ds-check-border)]") : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
               disabled && "pointer-events-none"
             ),
             children: /* @__PURE__ */ jsx(
@@ -629,7 +633,8 @@ function RadioGroup({ value, onChange: onChangeProp, options, orientation = "ver
                       selected && "border-[var(--ds-check-border)]",
                       "group-focus-visible:shadow-[var(--ds-shadow-focus)]"
                     ),
-                    children: selected && /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)]" })
+                    children: selected && // Sprint 25.14 A20: the checked colour, as a checkbox's fill (a preset whose accent falls short of 3:1 sets it)
+                    /* @__PURE__ */ jsx("span", { className: cn("h-2.5 w-2.5 rounded-[var(--ds-radius-full)]", CHECK_FILL) })
                   }
                 ),
                 /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ds-text-primary)]", children: option.label })
@@ -1880,9 +1885,9 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   useEffect(() => {
     const owner = inputRef.current?.form;
     if (!owner) return;
-    const clear = () => setRejected(null);
-    owner.addEventListener("submit", clear);
-    return () => owner.removeEventListener("submit", clear);
+    const clear2 = () => setRejected(null);
+    owner.addEventListener("submit", clear2);
+    return () => owner.removeEventListener("submit", clear2);
   }, []);
   const invalid = error || rejected != null || !!waiting;
   const describedBy = [constraints ? constraintsId : null, field?.describedBy, rejected ? rejectedId : null, waiting ? waitingId : null].filter(Boolean).join(" ") || void 0;
@@ -1991,7 +1996,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
             // 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 : HAS_FOCUS_RING,
-            dragOver ? `${ACTIVE_RING} bg-[var(--ds-accent-whisper)]` : invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-default)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
+            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: [
@@ -2165,7 +2170,7 @@ function SliderRange({
           !trackStyle && /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute h-1.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)]",
+              className: cn("absolute h-1.5 rounded-[var(--ds-radius-full)]", CHECK_FILL),
               style: {
                 left: `${isRange ? pct(low) : 0}%`,
                 width: `${isRange ? pct(high) - pct(low) : pct(low)}%`
@@ -2189,7 +2194,7 @@ function SliderRange({
               className: cn(
                 "absolute w-ds-4 h-ds-4 -translate-x-1/2 rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface)] border-2",
-                error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-accent-primary)]",
+                error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-check-border)]",
                 "shadow-[var(--ds-shadow-sm)]",
                 "transition-[shadow,transform] duration-200 ease-out",
                 "focus-visible:shadow-[var(--ds-shadow-focus)]",
@@ -2215,7 +2220,7 @@ function SliderRange({
               className: cn(
                 "absolute w-ds-4 h-ds-4 -translate-x-1/2 rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface)] border-2",
-                error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-accent-primary)]",
+                error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-check-border)]",
                 "shadow-[var(--ds-shadow-sm)]",
                 "transition-[shadow,transform] duration-200 ease-out",
                 "focus-visible:shadow-[var(--ds-shadow-focus)]",
@@ -2988,7 +2993,7 @@ function PinInput({
       role: "group",
       "aria-label": "PIN input",
       "aria-invalid": error || void 0,
-      className: cn("inline-flex items-center gap-ds-2", className),
+      className: cn("inline-flex w-fit items-center gap-ds-2", className),
       children: digits.map((digit, i) => /* @__PURE__ */ jsx(
         "input",
         {
@@ -3153,7 +3158,9 @@ function Rating({
       "aria-required": readOnly ? void 0 : control.required || void 0,
       onKeyDown: readOnly ? void 0 : handleKeyDown,
       className: cn(
-        "inline-flex items-center gap-ds-0.5",
+        // Sprint 25.14 A21: its own width in a Field's column, not the field's; w-fit, not self-start, so a row or a
+        // centred column still aligns it (the review of 30 September)
+        "inline-flex w-fit items-center gap-ds-0.5",
         error && "border-[length:var(--ds-border-width)] border-[var(--ds-status-error)] rounded-[var(--ds-radius-sm)] p-ds-0.5",
         className
       ),
@@ -3583,7 +3590,7 @@ function focusTarget(el) {
   if (el.tabIndex >= 0 || /^(?:INPUT|SELECT|TEXTAREA|BUTTON)$/.test(el.tagName)) return el;
   return el.querySelector("[aria-checked='true'], [aria-selected='true']:not([tabindex='-1'])") ?? el.querySelector("input, select, textarea, button, [tabindex]:not([tabindex='-1'])") ?? el;
 }
-function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions: actionsProp, actionsAlign: actionsAlignProp, onCancel, cancelLabel = "Cancel", focusFirstError = true, errorSummary = true, className, ref }) {
+function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions: actionsProp, actionsAlign: actionsAlignProp, onCancel, cancelLabel = "Cancel", focusFirstError = true, errorSummary = true, fullWidth = false, className, ref }) {
   const preferences = useShellPreferences();
   const validationMode = validationModeProp ?? preferences.validationTiming ?? "onSubmit";
   const actionsAlign = actionsAlignProp ?? preferences.formActions?.align ?? "end";
@@ -3750,7 +3757,7 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     f.message
   ] }, f.id || f.label)) }) }) : null;
   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,none)]", className), 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 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: [
     summaryNode && /* @__PURE__ */ jsx("div", { ref: summaryRef, "data-form-error-summary": "", tabIndex: -1, className: "rounded-[var(--ds-radius-md)] outline-none focus-visible:shadow-[var(--ds-shadow-focus)]", children: summaryNode }),
     children,
     actionsNode
@@ -4373,7 +4380,6 @@ function holdsHeader(children) {
 }
 var CardActionCtx = createContext(null);
 var CARD_ACTION_ATTR = "data-card-action";
-var CardSurfaceCtx = createContext(false);
 var variantStyles3 = {
   default: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
   featured: [
@@ -4409,7 +4415,8 @@ function RadioIndicator({ checked, disabled }) {
         {
           className: cn(
             "h-2.5 w-2.5 rounded-[var(--ds-radius-full)] transition-transform duration-[var(--ds-transition-speed)]",
-            checked ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] scale-100" : "scale-0"
+            // Sprint 25.14 A20: the radio's selected dot (lib/control-looks.ts)
+            checked ? cn(CHECK_FILL, "scale-100") : "scale-0"
           )
         }
       )
@@ -4427,7 +4434,8 @@ function CheckboxIndicator({ checked, indeterminate, disabled }) {
         "rounded-[calc(var(--ds-radius-sm)*0.6)]",
         "border-[2px] transition-all duration-[var(--ds-transition-speed)]",
         disabled && "opacity-disabled",
-        filled ? "bg-[var(--ds-check-bg)] [background-image:var(--ds-gradient)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]"
+        // Sprint 25.14 A20: the checkbox's checked fill (lib/control-looks.ts)
+        filled ? cn(CHECK_FILL, "border-[var(--ds-check-border)]") : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]"
       ),
       children: /* @__PURE__ */ jsx(
         "svg",
@@ -4455,13 +4463,14 @@ function ToggleIndicator({ checked, disabled }) {
         "border-[length:var(--ds-border-width)] rounded-[var(--ds-radius-full)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
         disabled && "opacity-disabled",
-        checked ? "bg-[var(--ds-accent-primary)] border-transparent" : "bg-[var(--ds-bg-muted)] border-[var(--ds-border-default)]"
+        // Sprint 25.14 A20: the Toggle's track and knob, on and off (lib/control-looks.ts)
+        checked ? SWITCH_TRACK_ON : SWITCH_TRACK_OFF
       ),
       style: { width: 44, height: 24 },
       children: /* @__PURE__ */ jsx(
         "span",
         {
-          className: "pointer-events-none inline-block shrink-0 bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-full)] transition-transform",
+          className: cn("pointer-events-none inline-block shrink-0 rounded-[var(--ds-radius-full)]", checked ? SWITCH_KNOB_ON : SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION),
           style: {
             width: 16,
             height: 16,
@@ -4647,9 +4656,9 @@ var Card = forwardRef(function Card2({
       ...props,
       children: [
         !loading && !hasHeader && checkbox && /* @__PURE__ */ jsxs("div", { "data-card-header-row": "", className: "flex items-center gap-ds-2 px-ds-5 pt-ds-4", children: [
-          checkbox,
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "grow" }),
-          check && /* @__PURE__ */ jsx("span", { "data-card-selection": "", className: "shrink-0 flex", children: check })
+          check && /* @__PURE__ */ jsx("span", { "data-card-selection": "", className: "shrink-0 flex", children: check }),
+          checkbox
         ] }),
         !loading && !hasHeader && !checkbox && check && /* @__PURE__ */ jsx("div", { "data-card-selection": "", className: "absolute top-ds-3 right-ds-3 z-[1] flex", children: check }),
         /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardActionCtx, { value: action, children: /* @__PURE__ */ jsx(CardRowCtx, { value: rowParts, children: loading ? (
@@ -4724,7 +4733,7 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
     }
   ) : null;
   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-0"), children: row.checkbox }) : null;
+  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 { lead, title, rest } = splitTitle(children);
@@ -4734,15 +4743,14 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
   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: [
     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: [
-      checkbox,
       topLine,
       iconBlock && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "grow -ml-ds-2" }),
       check,
+      checkbox,
       menuPart
     ] }),
     iconBlock && leadBlock && /* @__PURE__ */ jsx("div", { className: "flex mb-ds-1.5", children: leadBlock }),
     /* @__PURE__ */ jsxs("div", { "data-card-header-row": "", className: "flex items-start gap-ds-2 min-w-0", children: [
-      !topLine && checkbox,
       /* @__PURE__ */ jsxs("div", { "data-card-title-line": "", className: TITLE_ROW, children: [
         title && /* @__PURE__ */ jsx(
           "div",
@@ -4756,6 +4764,7 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
         !ownBlock && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "order-3 grow basis-0 -ml-ds-2" })
       ] }),
       !topLine && check,
+      !topLine && checkbox,
       !topLine && menuPart
     ] }),
     rest.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-ds-1.5 break-words mt-ds-1.5 min-w-0", children: rest })
@@ -4842,7 +4851,7 @@ var CardFooter = forwardRef(function CardFooter2({ className, children, ...props
 });
 function TruncLabel({ children }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
-  const el = /* @__PURE__ */ jsx("span", { ref, className: "text-xs font-medium text-[var(--ds-text-muted)] uppercase tracking-wider truncate min-w-0", children });
+  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 });
   if (!isTruncated) return el;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
 }
@@ -4887,13 +4896,15 @@ 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__ */ jsx(TruncLabel, { children: label }),
+          /* @__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 })
+            ] })
+          ] }),
           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)]" }) })
         ] }),
-        /* @__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 })
-        ] }),
         children && /* @__PURE__ */ jsx("div", { className: "mt-ds-3 text-xs text-[var(--ds-text-muted)]", children })
       ]
     }
@@ -4978,6 +4989,7 @@ function countCards(children) {
   return n;
 }
 function CardGrid({ minWidth, maxColumns = 4, compare = false, gap = "var(--ds-space-4)", fill: fill2 = true, className, style, children, ref, ...props }) {
+  useFramesItself();
   const most = Math.max(1, Math.floor(maxColumns));
   const drawn = "var(--gs-cards, var(--gs-cards-counted))";
   const min = "var(--gs-card-min)";
@@ -5286,71 +5298,6 @@ function Accordion({ items, type = "single", defaultOpen = [], open: controlledO
     ] }, i);
   }) });
 }
-var EDGE_FADE = 24;
-var NONE = { left: false, right: false, vertical: false, gutterRight: 0, gutterBottom: 0 };
-var same = (a, b) => a.left === b.left && a.right === b.right && a.vertical === b.vertical && a.gutterRight === b.gutterRight && a.gutterBottom === b.gutterBottom;
-function useScrollEdges(options = {}) {
-  const { enabled = true, fade = EDGE_FADE, noFade } = options;
-  const elRef = useRef(null);
-  const observer = useRef(null);
-  const borders = useRef({ x: 0, y: 0 });
-  const [state, setState] = useState(NONE);
-  const measure = useCallback(() => {
-    const el = elRef.current;
-    if (!el) return;
-    const next = {
-      left: el.scrollLeft > 1,
-      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
-      vertical: el.scrollHeight > el.clientHeight + 1,
-      gutterRight: Math.max(0, el.offsetWidth - el.clientWidth - borders.current.x),
-      gutterBottom: Math.max(0, el.offsetHeight - el.clientHeight - borders.current.y)
-    };
-    setState((prev) => same(prev, next) ? prev : next);
-  }, []);
-  const ref = useCallback((el) => {
-    observer.current?.disconnect();
-    observer.current = null;
-    elRef.current = el;
-    if (!el || !enabled) return;
-    const style = getComputedStyle(el);
-    const px = (v) => parseFloat(v) || 0;
-    borders.current = { x: px(style.borderLeftWidth) + px(style.borderRightWidth), y: px(style.borderTopWidth) + px(style.borderBottomWidth) };
-    measure();
-    if (typeof ResizeObserver === "undefined") return;
-    const o = new ResizeObserver(measure);
-    o.observe(el);
-    for (const child of Array.from(el.children)) o.observe(child);
-    observer.current = o;
-  }, [enabled, measure]);
-  const fadeLeft = state.left && !noFade?.left;
-  const fadeRight = state.right && !noFade?.right;
-  const shown = enabled && (fadeLeft || fadeRight);
-  const { gutterRight: gr, gutterBottom: gb } = state;
-  const fadeLayer = `linear-gradient(to right, ${fadeLeft ? `transparent 0, black ${fade}px` : "black 0"}, ${fadeRight ? `black calc(100% - ${gr + fade}px), transparent calc(100% - ${gr}px)` : "black 100%"})`;
-  const gutters = [gb > 0 && { size: `100% ${gb}px`, position: "0 100%" }, gr > 0 && { size: `${gr}px 100%`, position: "100% 0" }].filter(Boolean);
-  const mask = shown ? {
-    image: [fadeLayer, ...gutters.map(() => "linear-gradient(black, black)")].join(", "),
-    size: ["100% 100%", ...gutters.map((g) => g.size)].join(", "),
-    position: ["0 0", ...gutters.map((g) => g.position)].join(", ")
-  } : void 0;
-  return {
-    /** The scroller's ref (a callback). */
-    ref,
-    /** The scroller itself, for code that moves it. */
-    elRef,
-    measure,
-    /** Content hides past a side edge: the scroller moves sideways, and its edges fade (but those in `noFade`). */
-    overflowing: enabled && (state.left || state.right),
-    /** It scrolls either way, sideways or up and down: a keyboard needs to reach it. */
-    scrollable: enabled && (state.left || state.right || state.vertical),
-    edges: { left: state.left, right: state.right },
-    /** For the scroller: `data-fade` names the faded edges ("left", "right" or "left right"), the style masks them. */
-    fadeProps: {
-      "data-fade": shown ? [fadeLeft && "left", fadeRight && "right"].filter(Boolean).join(" ") : void 0,
-      style: mask ? { maskImage: mask.image, WebkitMaskImage: mask.image, maskSize: mask.size, WebkitMaskSize: mask.size, maskPosition: mask.position, WebkitMaskPosition: mask.position, maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat" } : void 0
-    }
-  };
-}
 var HEADER_LAYOUT = {
   row: "flex flex-wrap items-start justify-between gap-ds-4",
   block: "flex flex-col space-y-ds-1.5 grow basis-1/2 break-words max-w-full has-[[data-title-one-line]]:min-w-0",
@@ -5409,6 +5356,9 @@ var PINNED_LAYERS = cn(
 );
 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) {
+  return clickIsRows(e) && !(e.target instanceof Element && e.target.closest("[data-card-detail]"));
+}
 function clickIsRows(e) {
   const target = e.target;
   if (!(target instanceof Element) || !e.currentTarget.contains(target)) return false;
@@ -5511,8 +5461,11 @@ function TableHeading({ title, description, actions, titleId, descriptionId, ins
     descriptionText(HEADER_LAYOUT.below)
   ] }) });
 }
-var NO_PINS = { start: [], end: [], nameFits: false, frame: 0 };
-var samePins = (a, b) => a.nameFits === b.nameFits && a.frame === b.frame && a.start.join() === b.start.join() && a.end.join() === b.end.join();
+var NO_PINS = { start: [], end: [], nameFits: false, frame: 0, panel: null };
+var samePins = (a, b) => a.nameFits === b.nameFits && a.frame === b.frame && a.start.join() === b.start.join() && a.end.join() === b.end.join() && a.panel?.join() === b.panel?.join();
+function PanelContent({ children }) {
+  return /* @__PURE__ */ jsx(SurfaceBoundary, { children });
+}
 function Table({
   columns: columnsProp,
   data,
@@ -5545,6 +5498,7 @@ function Table({
   "aria-label": ariaLabel,
   ref
 }) {
+  useFramesItself();
   const headingId = useId();
   const titleId = `${headingId}-title`;
   const descriptionId = `${headingId}-description`;
@@ -5686,6 +5640,7 @@ function Table({
       const cells = Array.from(table2.querySelectorAll(":scope > thead > tr > th"));
       if (!cells.length) return;
       const widths = cells.map((c) => c.getBoundingClientRect().width);
+      if (!widths.some((w) => w > 0)) return;
       const start = [];
       let at = 0;
       for (let i = 0; i < lead; i++) {
@@ -5702,7 +5657,9 @@ function Table({
       const frame = scroller.clientWidth;
       const nameFits = nameIndex >= 0 && frame > 0 && at + nameWidth + fromRight <= frame / 2;
       if (nameFits) start.push(at);
-      const next = { start, end, nameFits, frame };
+      const pad3 = (cell, side) => cell ? parseFloat(getComputedStyle(cell)[side]) || 0 : 0;
+      const panel = cells.length > lead ? [at + pad3(cells[lead], "paddingLeft"), pad3(cells[cells.length - 1], "paddingRight")] : null;
+      const next = { start, end, nameFits, frame, panel };
       setPins((prev) => samePins(prev, next) ? prev : next);
     };
     measure();
@@ -5742,9 +5699,16 @@ function Table({
   const expandedKey = expanded.map(String).join("
");
   const shownBefore = useRef(/* @__PURE__ */ new Set());
   const pendingScroll = useRef(null);
+  const scrollFrame = useRef(0);
   const scrollToRow = useCallback((key) => {
-    const row = rootRef.current?.querySelector(`[data-row-key="${CSS.escape(key)}"], [data-row-index="${CSS.escape(key)}"]`);
-    if (row && typeof row.scrollIntoView === "function") row.scrollIntoView({ block: "nearest" });
+    cancelAnimationFrame(scrollFrame.current);
+    scrollFrame.current = requestAnimationFrame(() => {
+      const row = rootRef.current?.querySelector(`[data-row-key="${CSS.escape(key)}"], [data-row-index="${CSS.escape(key)}"]`);
+      if (!row || typeof row.scrollIntoView !== "function") return;
+      const panel = row.nextElementSibling?.querySelector("[data-row-panel]") ? row.nextElementSibling : null;
+      panel?.scrollIntoView({ block: "nearest" });
+      row.scrollIntoView({ block: "nearest" });
+    });
   }, [rootRef]);
   useEffect(() => {
     const now = new Set(expanded.map(String));
@@ -5806,8 +5770,8 @@ function Table({
     const row = rootRef.current?.querySelector(was.row);
     if (!row) return;
     const controls = Array.from(row.querySelectorAll(FOCUSABLE));
-    const same2 = was.control === null ? null : controls.find((el) => (el.getAttribute("aria-labelledby") ?? el.getAttribute("aria-label") ?? el.textContent) === was.control);
-    (same2 ?? (row.tabIndex >= 0 ? row : controls[0]))?.focus({ preventScroll: true });
+    const same = was.control === null ? null : controls.find((el) => (el.getAttribute("aria-labelledby") ?? el.getAttribute("aria-label") ?? el.textContent) === was.control);
+    (same ?? (row.tabIndex >= 0 ? row : controls[0]))?.focus({ preventScroll: true });
   }, [isMobile, rootRef]);
   if (isMobile) {
     if (loading) {
@@ -5823,6 +5787,14 @@ function Table({
       drawn.map(({ row, originalIdx }) => {
         const isSelected = selectedSet.has(originalIdx);
         const id = idOf(row, originalIdx);
+        const opens = !!expandable && !!renderExpanded;
+        const isExpanded = opens && expandedSet.has(String(id));
+        const toggleCard = (card) => {
+          const closing = isExpanded;
+          const inDetail = closing && card.querySelector("[data-card-detail]")?.contains(document.activeElement);
+          toggleExpand(id);
+          if (inDetail) card.querySelector("[data-card-toggle]")?.focus();
+        };
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -5833,10 +5805,15 @@ function Table({
               "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)]",
               "p-ds-4 space-y-ds-3",
               isSelected && ACTIVE_RING,
-              onRowClick && "cursor-pointer hover:bg-[var(--ds-bg-muted)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+              onRowClick && "cursor-pointer hover:bg-[var(--ds-bg-muted)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+              // with no onRowClick a tap on the card opens and closes it, as a click on the row does; the toggle is the
+              // keyboard's way
+              !onRowClick && canOpenByClick && "cursor-pointer"
             ),
             onClick: onRowClick ? (e) => {
-              if (clickIsRows(e)) onRowClick(row, originalIdx);
+              if (clickIsCard(e)) onRowClick(row, originalIdx);
+            } : canOpenByClick ? (e) => {
+              if (clickIsCard(e)) toggleCard(e.currentTarget);
             } : void 0,
             tabIndex: onRowClick ? 0 : void 0,
             onKeyDown: onRowClick ? (e) => {
@@ -5853,7 +5830,36 @@ function Table({
                 /* @__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 })
               ] }, col.key)),
-              expandable && renderExpanded && /* @__PURE__ */ jsx("div", { className: "pt-ds-2 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-sm text-[var(--ds-text-secondary)]", children: renderExpanded(row, originalIdx) })
+              opens && // Alert's disclosure: a button that says whether it is open, at the card's foot, the detail below it, so
+              // the control the user pressed stays where it was. Its name carries the row's (T15).
+              /* @__PURE__ */ jsxs("div", { className: "pt-ds-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "data-card-toggle": "",
+                    "aria-expanded": isExpanded,
+                    ...nameIndex >= 0 ? { "aria-labelledby": `${headingId}-card-toggle-${idPart(id)} ${headingId}-card-name-${idPart(id)}` } : {},
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      toggleCard(e.currentTarget.closest("[data-row]"));
+                    },
+                    className: cn(
+                      // at least 24 px tall: the card around it is a target too, so its own box must meet the size (WCAG 2.5.8)
+                      "inline-flex min-h-[24px] items-center gap-ds-1 text-xs font-medium cursor-pointer",
+                      "transition-colors duration-[var(--ds-transition-speed)]",
+                      "text-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-muted)]",
+                      "rounded-[var(--ds-radius-sm)] px-ds-1.5 py-ds-0.5 -mx-ds-1.5",
+                      "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12, className: cn("transition-transform duration-[var(--ds-transition-speed)]", isExpanded && "rotate-90") }),
+                      /* @__PURE__ */ jsx("span", { id: `${headingId}-card-toggle-${idPart(id)}`, children: isExpanded ? "Hide details" : "Show details" })
+                    ]
+                  }
+                ),
+                isExpanded && /* @__PURE__ */ jsx("div", { "data-card-detail": "", className: "mt-ds-3 pt-ds-3 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-sm text-[var(--ds-text-secondary)]", children: /* @__PURE__ */ jsx(PanelContent, { children: renderExpanded(row, originalIdx) }) })
+              ] })
             ]
           },
           String(id)
@@ -5953,7 +5959,8 @@ function Table({
           {
             ...marksOf(row, originalIdx),
             className: cn(
-              "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
+              // an opened row's divider is under its panel (A6)
+              !(expandable && isExpanded && renderExpanded) && "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
               // the row's background and its tint change together, so its pinned cells and the rest fade as one
               // (roots.css registers --gs-row-tint as a colour so it can)
               "transition-[background-color,--gs-row-tint]",
@@ -6038,12 +6045,21 @@ function Table({
             ]
           }
         ),
-        expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0", children: /* @__PURE__ */ jsx(
           "td",
           {
             colSpan: cellCount,
-            className: "bg-[var(--ds-bg-muted)] px-ds-6 py-ds-4 text-sm text-[var(--ds-text-primary)]",
-            children: /* @__PURE__ */ jsx("div", { "data-row-panel": "", className: "sticky left-ds-6", style: pins.frame ? { maxWidth: `calc(${pins.frame}px - 2 * var(--ds-space-6))` } : void 0, children: renderExpanded(row, originalIdx) })
+            className: cn("py-ds-4 text-sm text-[var(--ds-text-primary)]", !pins.panel && (density === "compact" ? "px-ds-3" : "px-ds-4")),
+            style: pins.panel ? { paddingLeft: pins.panel[0], paddingRight: pins.panel[1] } : void 0,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-row-panel": "",
+                className: "sticky",
+                style: pins.panel ? { left: pins.panel[0], maxWidth: pins.frame ? pins.frame - pins.panel[0] - pins.panel[1] : void 0 } : { left: 0 },
+                children: /* @__PURE__ */ jsx(PanelContent, { children: renderExpanded(row, originalIdx) })
+              }
+            )
           }
         ) })
       ] }, String(id));
@@ -6109,6 +6125,9 @@ var indicatorInset = {
   md: "4px",
   lg: "4px"
 };
+function segmentRadius(inset, bordered) {
+  return `max(var(--ds-radius-sm), calc(var(--ds-radius-md) - ${inset}${bordered ? " - var(--ds-border-width)" : ""}))`;
+}
 function SegmentedControl({
   value,
   onChange: onChangeProp,
@@ -6244,22 +6263,32 @@ function SegmentedControl({
       onKeyDown: handleKeyDown,
       className: cn(
         "relative items-center",
-        fullWidth ? "flex w-full" : "inline-flex",
+        // Sprint 25.14 A21: in a Field's column a track that isn't full width keeps its own width; w-fit, not self-start,
+        // so a row or a centred column still aligns it (the review of 30 September)
+        fullWidth ? "flex w-full" : "inline-flex w-fit",
         containerPadding[size],
         containerHeight[size],
         "bg-[var(--ds-bg-muted)]",
-        "rounded-[var(--ds-radius-lg)]",
+        // The owner's review of 1 October 2026: the frame's corner is a field's, so the two change together with the
+        // theme's radius; the segments inside sit concentric with it (SEGMENT_RADIUS)
+        "rounded-[var(--ds-radius-md)]",
+        // The frame's edge is a button's: each segment is a labelled button, so the frame isn't what identifies the
+        // control, and WCAG 1.4.11 asks no 3:1 of it. The selected segment carries the 3:1 edge instead (below)
         variant === "default" && "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
         control.invalid && "border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]",
         className
       ),
+      style: { "--ds-segment-radius": segmentRadius(indicatorInset[size], variant === "default" || !!control.invalid) },
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "absolute rounded-[var(--ds-radius-md)]",
+              "absolute rounded-[var(--ds-segment-radius)]",
               "bg-[var(--ds-bg-surface)]",
+              // The selected state is what the control shows, so its edge is the one at 3:1 (WCAG 1.4.11), against the
+              // frame's fill and its own: the surface on the muted fill alone measures 1.05–1.46:1 across the presets
+              "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
               variant === "default" && "shadow-[var(--ds-shadow-sm)]",
               "transition-all motion-reduce:transition-none"
             ),
@@ -6290,7 +6319,7 @@ function SegmentedControl({
             className: cn(
               "relative z-10 inline-flex items-center justify-center self-stretch font-medium whitespace-nowrap",
               fullWidth && "flex-1",
-              "rounded-[var(--ds-radius-md)]",
+              "rounded-[var(--ds-segment-radius)]",
               "transition-colors cursor-pointer",
               "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
               sizes2[size],
@@ -6736,6 +6765,7 @@ function WeekView({
   const hasAllDay = allDayEvents.some((d) => d.length > 0);
   const containerRef = useRef(null);
   const syncingScroll = useRef(false);
+  const { ref: edgesRef, measure: measureEdges, fadeProps: edgeFade } = useScrollEdges();
   const handleScroll = useCallback((e) => {
     if (syncingScroll.current) return;
     syncingScroll.current = true;
@@ -6761,7 +6791,7 @@ function WeekView({
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
       /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]" }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { ref: edgesRef, onScroll: measureEdges, ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "grid",
@@ -6801,7 +6831,7 @@ function WeekView({
     ] }),
     hasAllDay && /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]/30", children: [
       /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-2xs text-[var(--ds-text-muted)] px-ds-1 py-ds-1 text-right", children: "all-day" }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "grid",
@@ -6838,7 +6868,7 @@ function WeekView({
         },
         h
       )) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "relative",
@@ -7404,16 +7434,16 @@ function MonthDropdown({
               )
             ] }),
             /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-ds-1", children: MONTH_NAMES_SHORT.map((name, i) => {
-              const isActive = i === currentMonth && browseYear === currentYear;
+              const isActive2 = i === currentMonth && browseYear === currentYear;
               return /* @__PURE__ */ jsx(
                 "button",
                 {
                   className: cn(
                     "px-ds-2 py-ds-1.5 text-xs font-medium rounded-[var(--ds-radius-sm)] cursor-pointer transition-colors",
                     "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                    isActive ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
+                    isActive2 ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
                   ),
-                  "data-current": isActive || void 0,
+                  "data-current": isActive2 || void 0,
                   onClick: () => {
                     returnFocus();
                     onSelect(new Date(browseYear, i, 1));
@@ -7882,7 +7912,6 @@ function AvatarGroup({ items, max = 4, size = "sm", ring = "canvas", onOverflowC
           alt: item.alt ?? item.name ?? initials,
           initials,
           size,
-          status: item.status,
           color: item.color,
           className: ringClass
         },
@@ -8002,7 +8031,7 @@ function TableToolbar({
   const iconSize = size === "sm" ? 14 : 16;
   const count = activeFilterCount ?? activeFilters?.length ?? 0;
   const hasChips = !!activeFilters?.length;
-  const inPane = useContext(SplitPaneCtx);
+  const inPane = !!useContext(SplitPaneCtx);
   const searchFills = inPane || !primaryFilter && !filters && !actions;
   const hasControls = !!(search || primaryFilter || filters || actions);
   const noun = (n) => n === 1 ? resultNoun[0] : resultNoun[1];
@@ -8201,6 +8230,7 @@ function VerticalLayout({ items, className }) {
   ] }, i)) });
 }
 function Timeline({ items: allItems, orientation = "vertical", minItemWidth = 200, className, ref, pager }) {
+  useScrollsInside();
   useWholeListCheck("Timeline", allItems.length, pager);
   const items = pagerPart(allItems, pager);
   const measureRef = useRef(null);
@@ -8287,12 +8317,27 @@ var Collapsible = Object.assign(CollapsibleRoot, {
   Trigger: CollapsibleTrigger,
   Content: CollapsibleContent
 });
+var SYMBOL = /[⌘⇧⌥⌃⎋⏎↵⌫⌦⇥↑↓←→]/u;
+function keyParts(text) {
+  const parts = [];
+  let run = "";
+  for (const ch of Array.from(text)) {
+    if (SYMBOL.test(ch)) {
+      if (run.trim()) parts.push(run.trim());
+      run = "";
+      parts.push(ch);
+    } else run += ch;
+  }
+  if (run.trim()) parts.push(run.trim());
+  return parts;
+}
 function Kbd({ children, className }) {
+  const parts = typeof children === "string" ? keyParts(children) : null;
   return /* @__PURE__ */ jsx(
     "kbd",
     {
       className: cn(
-        "inline-flex items-center justify-center min-w-[2.5em] px-ds-1.5 py-ds-0.5",
+        "inline-flex items-center justify-center gap-[0.25em] min-w-[2.5em] px-ds-1.5 py-ds-0.5",
         "text-xs leading-none font-[family-name:var(--ds-font-mono)]",
         "text-[var(--ds-text-secondary)]",
         "bg-[var(--ds-bg-surface)]",
@@ -8301,16 +8346,30 @@ function Kbd({ children, className }) {
         "rounded-[var(--ds-radius-sm)]",
         className
       ),
-      children
+      children: parts && parts.length > 1 ? parts.map((p, i) => /* @__PURE__ */ jsx("span", { children: p }, i)) : children
     }
   );
 }
+
+// ../../showcase/src/lib/nested-items.ts
+function holdsCurrent(items, isCurrent) {
+  return !!items?.some((item) => isCurrent(item) || holdsCurrent(item.children, isCurrent));
+}
 function TruncLabel2({ children }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const label = /* @__PURE__ */ jsx("span", { ref, className: "truncate", children });
   if (!isTruncated) return label;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: label });
 }
+function foldersHolding(nodes, selected) {
+  const ids = [];
+  for (const node of nodes) {
+    if (!holdsCurrent(node.children, (n) => selected.has(n.id))) continue;
+    ids.push(node.id, ...foldersHolding(node.children, selected));
+  }
+  return ids;
+}
+var inTree = (nodes, id) => holdsCurrent(nodes, (n) => n.id === id);
 function allDescendantIds(node) {
   const ids = [node.id];
   if (node.children) {
@@ -8325,13 +8384,26 @@ function TreeView({
   checkable,
   defaultExpanded = [],
   defaultSelected = [],
+  selected: selectedProp,
   defaultChecked = [],
   onSelect,
   onCheck,
   className
 }) {
-  const [expanded, setExpanded] = useState(new Set(defaultExpanded));
-  const [selected, setSelected] = useState(new Set(defaultSelected));
+  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)]));
+  const revealed = useRef(null);
+  if (revealed.current === null) revealed.current = new Set([...selected].filter((id) => inTree(nodes, id)));
+  useEffect(() => {
+    const seen = revealed.current;
+    const fresh = [...selected].filter((id) => !seen.has(id) && inTree(nodes, id));
+    if (!fresh.length) return;
+    for (const id of fresh) seen.add(id);
+    const folders = foldersHolding(nodes, new Set(fresh));
+    if (folders.length) setExpanded((prev) => folders.every((id) => prev.has(id)) ? prev : /* @__PURE__ */ new Set([...prev, ...folders]));
+  }, [nodes, selected]);
+  const holding = useMemo(() => new Set(foldersHolding(nodes, selected)), [nodes, selected]);
   const [checked, setChecked] = useState(new Set(defaultChecked));
   const baseId = useId();
   const toggleExpand = useCallback((id) => {
@@ -8345,20 +8417,18 @@ function TreeView({
   const handleSelect = useCallback(
     (id) => {
       if (!selectable) return;
-      setSelected((prev) => {
-        let next;
-        if (multiSelect) {
-          next = new Set(prev);
-          if (next.has(id)) next.delete(id);
-          else next.add(id);
-        } else {
-          next = prev.has(id) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([id]);
-        }
-        onSelect?.(Array.from(next));
-        return next;
-      });
+      let next;
+      if (multiSelect) {
+        next = new Set(selected);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+      } else {
+        next = selected.has(id) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([id]);
+      }
+      if (!selectedProp) setOwnSelected(next);
+      onSelect?.(Array.from(next));
     },
-    [selectable, multiSelect, onSelect]
+    [selectable, multiSelect, selected, selectedProp, onSelect]
   );
   const handleCheck = useCallback(
     (node) => {
@@ -8443,6 +8513,7 @@ function TreeView({
       baseId,
       expanded,
       selected,
+      holding,
       checked,
       checkable,
       selectable,
@@ -8461,6 +8532,7 @@ function TreeNodeRow({
   baseId,
   expanded,
   selected,
+  holding,
   checkable,
   selectable,
   toggleExpand,
@@ -8472,6 +8544,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 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(
@@ -8487,6 +8560,9 @@ function TreeNodeRow({
           // transparent placeholder so content never shifts on selection.
           "border-l-[length:var(--ds-tree-active-rail)]",
           isSelected ? "bg-[var(--ds-tree-active-bg)] text-[var(--ds-tree-active-text)] font-medium border-[var(--ds-accent-primary)]" : "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",
           node.disabled && "opacity-disabled pointer-events-none"
         ),
         style: { paddingLeft: `calc(var(--ds-space-3) * ${depth} + var(--ds-space-2))` },
@@ -8513,7 +8589,7 @@ function TreeNodeRow({
                 {
                   name: "chevron-right",
                   size: 14,
-                  className: cn(isSelected ? "text-[var(--ds-tree-active-muted)]" : "text-[var(--ds-text-muted)]", "transition-transform", isExpanded && "rotate-90")
+                  className: cn(isSelected ? "text-[var(--ds-tree-active-muted)]" : holdsSelection ? "text-[var(--ds-accent-primary)]" : "text-[var(--ds-text-muted)]", "transition-transform", isExpanded && "rotate-90")
                 }
               )
             }
@@ -8528,7 +8604,7 @@ function TreeNodeRow({
               }
             }
           ),
-          node.icon && /* @__PURE__ */ jsx(Icon, { name: node.icon, size: 16, className: cn("shrink-0", isSelected ? "text-[var(--ds-tree-active-text)]" : "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)]" : holdsSelection ? "text-[var(--ds-accent-primary)]" : "text-[var(--ds-text-muted)]") }),
           /* @__PURE__ */ jsx(TruncLabel2, { children: node.label })
         ]
       }
@@ -8541,6 +8617,7 @@ function TreeNodeRow({
         baseId,
         expanded,
         selected,
+        holding,
         checked: /* @__PURE__ */ new Set(),
         checkable,
         selectable,
@@ -8898,7 +8975,8 @@ function ChatInputBar({ onSend, busy, onStop, onAttach, onVoice, placeholder })
       className: cn(
         "flex flex-col",
         "rounded-[var(--ds-radius-lg)]",
-        "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+        // Sprint 25.14 A20: the composer is a field, its edge at 3:1 like every other control's
+        "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
         "bg-[var(--ds-input-bg)]",
         "shadow-[var(--ds-input-shadow)]",
         FOCUS_WITHIN_RING,
@@ -9191,6 +9269,28 @@ function useCornerInset(corner, inset, priority, target) {
     return claimCornerInset(corner, inset, priority, el);
   }, [corner, inset, priority, target]);
 }
+function Sheet({ open, onClose: onCloseProp, title, children, footer, dirty, onDiscard, snapPoints = [0.5, 0.92], container, flush, keepMounted = false, id, labelledBy }) {
+  const { marked, mark } = useOverlayMark(open);
+  const guard = useDirtyGuard(dirty ?? marked, onCloseProp, onDiscard);
+  return /* @__PURE__ */ jsx(
+    DrawerPanel,
+    {
+      form: "sheet",
+      open,
+      onClose: guard.requestClose,
+      title,
+      footer,
+      container,
+      flush,
+      snapPoints,
+      keepMounted,
+      id,
+      labelledBy,
+      confirm: /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
+      children: /* @__PURE__ */ jsx(DrawerFooterCtx, { value: null, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: guard.requestClose, children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children }) }) })
+    }
+  );
+}
 var DEFAULT_OFFSET = "var(--ds-space-4)";
 var CORNER_PANEL_ANCHOR_INSET = "calc(var(--ds-space-12) + var(--ds-space-3))";
 function CornerPanel({
@@ -9475,9 +9575,10 @@ var StackedList = forwardRef(function StackedList2({
   hover,
   pager
 }, ref) {
+  useScrollsInside();
   const isPhone = useBreakpoint("sm");
   const inCard = useContext(CardSurfaceCtx);
-  const inPane = useContext(SplitPaneCtx);
+  const inPane = !!useContext(SplitPaneCtx);
   const variant = variantProp ?? (flush || hover === "title" ? "articles" : "list");
   const legacy = flush !== void 0 || hover !== void 0;
   useEffect(() => {
@@ -10144,6 +10245,8 @@ var TimeViewport = forwardRef(function TimeViewport2({
   className
 }, ref) {
   const scrollerRef = useRef(null);
+  const rootRef = useRef(null);
+  const fill2 = useFillHeight(rootRef);
   const headerRef = useRef(null);
   const rowsRef = useRef(null);
   const [frame, setFrame] = useState({ width: 0, header: 0 });
@@ -10366,23 +10469,26 @@ var TimeViewport = forwardRef(function TimeViewport2({
   };
   const headerNode = header === void 0 ? /* @__PURE__ */ jsx(TimeScaleHeader, {}) : header;
   const hasHeader = headerNode != null || labelHeader != null;
-  const bar = toolbar === false ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 flex-wrap items-center gap-ds-1 px-ds-2 py-ds-1.5 border-b-[length:var(--ds-border-width)]", border), children: [
-    onZoomChange && levels.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", "aria-disabled": !canZoomOut || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(1), children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: 14 }) }),
-      /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "min-w-[4.5rem] text-center text-xs text-[var(--ds-text-secondary)]", children: ZOOM_NAMES[scale.zoom] }),
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", "aria-disabled": !canZoomIn || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(-1), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14 }) })
-    ] }),
-    /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Previous period", onClick: () => api.page(-1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
-    /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", disabled: todayAtX === null, onClick: () => {
-      if (todayAtX !== null) setLeft(todayAtX - visibleWidth / 2);
-    }, children: "Today" }),
-    /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Next period", onClick: () => api.page(1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) }),
-    toolbar
-  ] });
+  const bar = toolbar === false ? null : (
+    // a wrapped line (a chart's key, or controls on a phone) stands a row gap apart (Sprint 25.16 A43)
+    /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 flex-wrap items-center gap-x-ds-1 gap-y-ds-2 px-ds-2 py-ds-1.5 border-b-[length:var(--ds-border-width)]", border), children: [
+      onZoomChange && levels.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Zoom out", "aria-disabled": !canZoomOut || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(1), children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: 14 }) }),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "min-w-[4.5rem] text-center text-xs text-[var(--ds-text-secondary)]", children: ZOOM_NAMES[scale.zoom] }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Zoom in", "aria-disabled": !canZoomIn || void 0, className: "aria-disabled:opacity-disabled aria-disabled:cursor-not-allowed", onClick: () => zoom(-1), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14 }) })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Previous period", onClick: () => api.page(-1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", disabled: todayAtX === null, onClick: () => {
+        if (todayAtX !== null) setLeft(todayAtX - visibleWidth / 2);
+      }, children: "Today" }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Next period", onClick: () => api.page(1), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) }),
+      toolbar
+    ] })
+  );
   return (
     // Inline-size containment: the rows' width never widens the frame (in a grid or flex parent it would, and the
     // wider frame would extend the scale again). The viewport takes the width it is given and scrolls inside it.
-    /* @__PURE__ */ jsx("div", { "data-time-viewport": "", "data-compact": phone || void 0, className: cn("flex h-full min-h-0 w-full min-w-0 flex-col [contain:inline-size] bg-[var(--ds-bg-surface)]", className), onKeyDown, children: /* @__PURE__ */ jsx(TimeViewportCtx, { value: layout, children: /* @__PURE__ */ jsxs(TimeViewportScrollCtx, { value: store, children: [
+    /* @__PURE__ */ jsx("div", { ref: rootRef, "data-time-viewport": "", "data-compact": phone || void 0, "data-fill": fill2 != null ? "" : void 0, className: cn("flex h-full min-h-0 w-full min-w-0 flex-col [contain:inline-size] bg-[var(--ds-bg-surface)]", className), style: fill2 != null ? { height: fill2 } : void 0, onKeyDown, children: /* @__PURE__ */ jsx(TimeViewportCtx, { value: layout, children: /* @__PURE__ */ jsxs(TimeViewportScrollCtx, { value: store, children: [
       bar,
       /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1", children: [
         /* @__PURE__ */ jsx(
@@ -10658,7 +10764,7 @@ function Cue({ name, size }) {
 function Legend({ statuses }) {
   const entries = Object.entries(statuses);
   if (!entries.length) return null;
-  return /* @__PURE__ */ jsx("ul", { "aria-label": "Status key", className: "ms-auto flex flex-wrap items-center gap-x-ds-3 gap-y-ds-1 ps-ds-2 text-xs text-[var(--ds-text-secondary)]", children: entries.map(([key, s]) => {
+  return /* @__PURE__ */ jsx("ul", { "aria-label": "Status key", className: "flex flex-wrap items-center gap-x-ds-3 gap-y-ds-1 text-xs text-[var(--ds-text-secondary)]", children: entries.map(([key, s]) => {
     const tone = TONES[s.tone] ?? TONES.neutral;
     return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-ds-1.5", children: [
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("grid size-4 shrink-0 place-items-center rounded-[var(--ds-radius-sm)]", EDGE, tone.fill, tone.on), children: /* @__PURE__ */ jsx(Cue, { name: s.icon ?? tone.icon, size: 10 }) }),
@@ -10706,6 +10812,7 @@ function Gantt({
   "aria-label": ariaLabel,
   className
 }) {
+  useScrollsInside();
   const [zoomState, setZoomState] = useState(defaultZoom);
   const zoom = zoomProp ?? zoomState;
   const changeZoom = (next) => {
@@ -10999,6 +11106,8 @@ function Gantt({
   };
   const legend = /* @__PURE__ */ jsx(Legend, { statuses });
   const legendApart = toolbar === false && hasStatuses;
+  const apartRef = useRef(null);
+  const apartFill = useFillHeight(apartRef, legendApart);
   const chart = /* @__PURE__ */ jsx(
     TimeViewport,
     {
@@ -11008,6 +11117,7 @@ function Gantt({
       labelHeader,
       toolbar: toolbar === false ? false : /* @__PURE__ */ jsxs(Fragment, { children: [
         toolbar,
+        hasStatuses && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "min-w-0 flex-1" }),
         legend
       ] }),
       tabStop: false,
@@ -11036,9 +11146,9 @@ function Gantt({
     }
   );
   if (!legendApart) return chart;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 w-full min-w-0 flex-col", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 px-ds-2 py-ds-1.5", children: legend }),
-    chart
+  return /* @__PURE__ */ jsxs("div", { ref: apartRef, "data-fill": apartFill != null ? "" : void 0, className: cn("flex h-full min-h-0 w-full min-w-0 flex-col", className), style: apartFill != null ? { height: apartFill } : void 0, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 justify-end px-ds-2 py-ds-1.5", children: legend }),
+    /* @__PURE__ */ jsx(FillContext, { value: true, children: chart })
   ] });
 }
 var DEFAULT_OFFSET2 = "var(--ds-space-4)";
@@ -11464,14 +11574,14 @@ function TabButton({
   hasPanel
 }) {
   const { ref: truncRef, isTruncated } = useTextOverflow({ lines: 1, disabled: !truncate && orientation !== "horizontal" });
-  const isActive = activeTab === id;
+  const isActive2 = activeTab === id;
   const tabId = `ds-tab-${id}`;
   const panelId = hasPanel === false ? void 0 : `ds-tabpanel-${id}`;
   const badgeBg = orientation === "vertical" ? "bg-[var(--ds-nav-v-badge-bg)]" : "bg-[var(--ds-nav-h-badge-bg)]";
   const countBadge = count !== void 0 ? /* @__PURE__ */ jsx("span", { className: cn(
     orientation === "vertical" ? "ml-ds-2" : "",
     "px-ds-1.5 py-ds-0.5 text-xs rounded-[var(--ds-radius-sm)]",
-    isActive ? cn(badgeBg, "text-[var(--ds-text-on-primary)]") : "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-muted)]"
+    isActive2 ? cn(badgeBg, "text-[var(--ds-text-on-primary)]") : "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-muted)]"
   ), children: count }) : null;
   if (orientation === "vertical") {
     const btn2 = /* @__PURE__ */ jsxs(
@@ -11480,10 +11590,10 @@ function TabButton({
         type: "button",
         id: tabId,
         role: "tab",
-        "aria-selected": isActive,
+        "aria-selected": isActive2,
         "aria-controls": panelId,
         "aria-disabled": disabled || void 0,
-        tabIndex: isActive ? 0 : -1,
+        tabIndex: isActive2 ? 0 : -1,
         onClick: disabled ? void 0 : () => onTabChange(id),
         onKeyDown,
         className: cn(
@@ -11495,7 +11605,7 @@ function TabButton({
           // Every item carries the rail width as a transparent placeholder so the
           // label does not shift when the rail appears on the active item.
           "border-l-[length:var(--ds-nav-v-active-rail)]",
-          isActive ? "bg-[var(--ds-nav-v-active-bg)] text-[var(--ds-nav-v-active-text)] border-[var(--ds-accent-primary)]" : "border-transparent text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]",
+          isActive2 ? "bg-[var(--ds-nav-v-active-bg)] text-[var(--ds-nav-v-active-text)] border-[var(--ds-accent-primary)]" : "border-transparent text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]",
           className
         ),
         children: [
@@ -11516,26 +11626,29 @@ function TabButton({
       type: "button",
       id: tabId,
       role: "tab",
-      "aria-selected": isActive,
+      "aria-selected": isActive2,
       "aria-controls": panelId,
       "aria-disabled": disabled || void 0,
-      tabIndex: isActive ? 0 : -1,
+      tabIndex: isActive2 ? 0 : -1,
       onClick: disabled ? void 0 : () => onTabChange(id),
       onKeyDown,
       className: cn(
-        "px-ds-4 py-ds-2.5 text-sm font-medium",
+        // Sprint 25.14 A38: a flex box, so the label sits in the middle of the tab. On a text line an icon's baseline
+        // pushed the line 3 px taller and the label to its top (R28-72); a tab with an icon is now as tall as one
+        // without, as a truncating tab (flex already) always was.
+        "flex items-center justify-center px-ds-4 py-ds-2.5 text-sm font-medium",
         // never wrap: the strip scrolls when the tabs do not fit (round 17, 54.4)
         !fullWidth && !truncate && "shrink-0 whitespace-nowrap",
         disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer",
         "transition-colors duration-[var(--ds-transition-speed)]",
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         fullWidth && "flex-1",
-        truncate && "flex-1 min-w-0 flex items-center",
+        truncate && "flex-1 min-w-0 justify-start",
         "rounded-[var(--ds-nav-h-item-radius)]",
-        isActive ? "bg-[var(--ds-nav-h-active-bg)] text-[var(--ds-nav-h-active-text)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-nav-h-inactive-text)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-nav-h-hover-bg)]",
+        isActive2 ? "bg-[var(--ds-nav-h-active-bg)] text-[var(--ds-nav-h-active-text)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-nav-h-inactive-text)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-nav-h-hover-bg)]",
         className
       ),
-      style: isActive ? { borderBottomWidth: "var(--ds-nav-h-indicator)", marginBottom: "calc(var(--ds-nav-h-track-border) * -1)" } : void 0,
+      style: isActive2 ? { borderBottomWidth: "var(--ds-nav-h-indicator)", marginBottom: "calc(var(--ds-nav-h-track-border) * -1)" } : void 0,
       children: truncate ? /* @__PURE__ */ jsxs(Fragment, { children: [
         icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, className: "shrink-0" }),
         /* @__PURE__ */ jsx("span", { ref: truncRef, className: "truncate min-w-0 flex-1", children: label }),
@@ -11764,241 +11877,6 @@ function SettingsLayout({
     /* @__PURE__ */ jsx("div", { "data-settings-panel": "", className: cn("flex-1", PANEL_CLASSES), style: PANEL_STYLE, children })
   ] });
 }
-function SeparatorIcon({ type, size }) {
-  const iconSize = size === "sm" ? 10 : 12;
-  if (type === "chevron") return /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: iconSize });
-  if (type === "arrow") return /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: iconSize });
-  if (type === "dot") return /* @__PURE__ */ jsx("span", { children: "\xB7" });
-  return /* @__PURE__ */ jsx("span", { children: "/" });
-}
-var Breadcrumbs = forwardRef(function Breadcrumbs2({
-  items,
-  separator = "chevron",
-  variant = "inline",
-  itemVariant,
-  size = "md",
-  showIcons = false,
-  maxItems,
-  bleed = false,
-  contentMaxWidth,
-  className,
-  container
-}, ref) {
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [activeIdx, setActiveIdx] = useState(0);
-  const ellipsisBtnRef = useRef(null);
-  const dropdownRef = useRef(null);
-  const closeDropdown = useCallback(() => setDropdownOpen(false), []);
-  const { isTop, returnFocus } = usePopupFocus(dropdownOpen, { trigger: ellipsisBtnRef, panel: dropdownRef, close: closeDropdown, tabExits: "any" });
-  const pos = usePosition(ellipsisBtnRef, dropdownRef, dropdownOpen, { side: "bottom", align: "start", offset: 4, flip: true });
-  const effectiveMaxItems = maxItems ? Math.max(maxItems, 2) : void 0;
-  const shouldCollapse = effectiveMaxItems && items.length > effectiveMaxItems;
-  const collapsedItems = shouldCollapse ? items.slice(1, -(effectiveMaxItems - 1)) : [];
-  const visibleItems = shouldCollapse ? [...items.slice(0, 1), null, ...items.slice(-(effectiveMaxItems - 1))] : items;
-  useEffect(() => {
-    if (!dropdownOpen) return;
-    const handler = (e) => {
-      const target = e.target;
-      if (ellipsisBtnRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
-      setDropdownOpen(false);
-    };
-    const onKeyDown = (e) => {
-      if (e.key !== "Escape" || e.defaultPrevented || !isTop()) return;
-      e.preventDefault();
-      returnFocus();
-      setDropdownOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", handler);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [dropdownOpen, isTop, returnFocus]);
-  useEffect(() => {
-    if (!dropdownOpen) return;
-    const id = requestAnimationFrame(() => dropdownRef.current?.querySelector(`[data-index="${activeIdx}"]`)?.focus());
-    return () => cancelAnimationFrame(id);
-  }, [dropdownOpen, activeIdx]);
-  function onMenuKeyDown(e) {
-    const last = collapsedItems.length - 1;
-    const next = e.key === "ArrowDown" ? activeIdx >= last ? 0 : activeIdx + 1 : e.key === "ArrowUp" ? activeIdx <= 0 ? last : activeIdx - 1 : e.key === "Home" ? 0 : e.key === "End" ? last : null;
-    if (next === null) return;
-    e.preventDefault();
-    setActiveIdx(next);
-  }
-  const textClass = size === "sm" ? "text-xs" : "text-sm";
-  const gapClass = size === "sm" ? "gap-ds-1" : "gap-ds-1.5";
-  const iconSize = size === "sm" ? 12 : 14;
-  const isContainedBleed = variant === "contained" && bleed;
-  const wrapperClasses = cn(
-    variant === "contained" && !bleed && cn(
-      "bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-md)]",
-      size === "sm" ? "py-ds-1 px-ds-2" : "py-ds-1.5 px-ds-3"
-    ),
-    !isContainedBleed && className
-  );
-  function renderItem(item, _index, isLast) {
-    const isPill = itemVariant === "pill" || variant === "pill" && !itemVariant;
-    const insideContained = variant === "contained";
-    const pillClasses = isPill ? cn(
-      "rounded-[var(--ds-radius-full)]",
-      insideContained ? "bg-[var(--ds-bg-surface)]" : "bg-[var(--ds-bg-muted)]",
-      size === "sm" ? "px-ds-2 py-[2px]" : "px-ds-2.5 py-ds-0.5"
-    ) : "";
-    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-      showIcons && item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, className: "shrink-0" }),
-      /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
-    ] });
-    if (isLast) {
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-current": "page",
-          className: cn(
-            "font-medium text-[var(--ds-text-primary)] flex items-center",
-            gapClass,
-            pillClasses
-          ),
-          children: content
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: item.href ?? "#",
-        onClick: (e) => {
-          e.preventDefault();
-          item.onClick?.();
-        },
-        className: cn(
-          "text-[var(--ds-text-secondary)] flex items-center",
-          "hover:text-[var(--ds-text-primary)]",
-          "transition-colors duration-[var(--ds-transition-speed)]",
-          gapClass,
-          pillClasses
-        ),
-        children: content
-      }
-    );
-  }
-  const listContent = /* @__PURE__ */ jsx("ol", { className: cn("flex items-center flex-wrap", gapClass, textClass), children: visibleItems.map((item, i) => {
-    if (item === null) {
-      return /* @__PURE__ */ jsxs("li", { className: cn("flex items-center", gapClass), children: [
-        i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[var(--ds-text-secondary)] select-none flex items-center", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator, size }) }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            ref: ellipsisBtnRef,
-            onClick: () => {
-              if (!dropdownOpen) setActiveIdx(0);
-              setDropdownOpen(!dropdownOpen);
-            },
-            "aria-label": "Show hidden breadcrumbs",
-            "aria-expanded": dropdownOpen,
-            "aria-haspopup": "menu",
-            className: cn(
-              "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]",
-              "transition-colors duration-[var(--ds-transition-speed)] cursor-pointer",
-              "flex items-center",
-              (itemVariant === "pill" || variant === "pill" && !itemVariant) && cn(
-                "rounded-[var(--ds-radius-full)]",
-                variant === "contained" ? "bg-[var(--ds-bg-surface)]" : "bg-[var(--ds-bg-muted)]",
-                size === "sm" ? "px-ds-2 py-[2px]" : "px-ds-2.5 py-ds-0.5"
-              )
-            ),
-            children: "\xB7\xB7\xB7"
-          }
-        )
-      ] }, "__ellipsis");
-    }
-    const isLast = i === visibleItems.length - 1;
-    return /* @__PURE__ */ jsxs("li", { className: cn("flex items-center", gapClass), children: [
-      i > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-[var(--ds-text-secondary)] select-none flex items-center", children: /* @__PURE__ */ jsx(SeparatorIcon, { type: separator, size }) }),
-      renderItem(item, i, isLast)
-    ] }, i);
-  }) });
-  const dropdown = dropdownOpen && collapsedItems.length > 0 && createPortal(
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: dropdownRef,
-        role: "menu",
-        "aria-label": "Hidden breadcrumbs",
-        onKeyDown: onMenuKeyDown,
-        className: cn(
-          "fixed z-[var(--ds-z-popover)] min-w-[160px] max-h-60 overflow-auto",
-          "bg-[var(--ds-bg-surface-elevated)]",
-          "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
-          "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-          "rounded-[var(--ds-radius-md)]",
-          "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
-          "py-ds-1"
-        ),
-        style: { top: pos.top, left: pos.left },
-        children: collapsedItems.map((ci, idx) => /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            "data-index": idx,
-            role: "menuitem",
-            tabIndex: idx === activeIdx ? 0 : -1,
-            className: cn(
-              "flex items-center w-full text-left text-sm cursor-pointer",
-              "px-ds-3 py-ds-1.5 transition-colors",
-              "text-[var(--ds-text-secondary)]",
-              "hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]",
-              "focus-visible:outline-none focus-visible:bg-[var(--ds-bg-muted)] focus-visible:text-[var(--ds-text-primary)] focus-visible:shadow-[inset_var(--ds-shadow-focus)]",
-              gapClass
-            ),
-            onClick: () => {
-              setDropdownOpen(false);
-              ci.onClick?.();
-            },
-            children: [
-              showIcons && ci.icon && /* @__PURE__ */ jsx(Icon, { name: ci.icon, size: iconSize, className: "shrink-0" }),
-              ci.label
-            ]
-          },
-          idx
-        ))
-      }
-    ),
-    container ?? document.body
-  );
-  if (isContainedBleed) {
-    return /* @__PURE__ */ jsxs(
-      "nav",
-      {
-        ref,
-        "aria-label": "Breadcrumb",
-        className: cn(
-          "w-full bg-[var(--ds-bg-muted)]",
-          // Hairline under the band: it sits within ~1.2:1 of both canvas and a tinted header, so the edge needs a line.
-          "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn("w-full mx-auto px-ds-6", size === "sm" ? "py-ds-1" : "py-ds-1.5"),
-              style: { maxWidth: contentMaxWidth ?? "var(--ds-bp-xl)" },
-              children: listContent
-            }
-          ),
-          dropdown
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs("nav", { ref, "aria-label": "Breadcrumb", className: wrapperClasses, children: [
-    listContent,
-    dropdown
-  ] });
-});
 var HeaderTabRowContext = createContext(null);
 function useHeaderTabRow() {
   return useContext(HeaderTabRowContext);
@@ -12051,13 +11929,13 @@ function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal",
       const isLast = i === steps.length - 1;
       return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-start min-w-0", isLast ? "flex-none" : "flex-1"), children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
-          /* @__PURE__ */ jsx(StepCircle, { status, index: i, onClick: onStepChange ? () => onStepChange(i) : void 0, clickable: !!onStepChange }),
+          /* @__PURE__ */ jsx(StepCircle, { status, index: i, label: step.label, onClick: onStepChange && !step.disabled ? () => onStepChange(i) : void 0, clickable: !!onStepChange && !step.disabled }),
           !isLast && /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
                 "flex-1 h-0.5 mx-ds-2 transition-colors",
-                i < currentStep ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-border-subtle)]"
+                i < currentStep || steps[i + 1]?.status === "complete" ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-border-subtle)]"
               )
             }
           )
@@ -12084,13 +11962,13 @@ function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal",
       const isLast = i === steps.length - 1;
       return /* @__PURE__ */ jsxs("div", { className: "flex gap-ds-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ jsx(StepCircle, { status, index: i, onClick: onStepChange ? () => onStepChange(i) : void 0, clickable: !!onStepChange }),
+          /* @__PURE__ */ jsx(StepCircle, { status, index: i, label: step.label, onClick: onStepChange && !step.disabled ? () => onStepChange(i) : void 0, clickable: !!onStepChange && !step.disabled }),
           !isLast && /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
                 "w-0.5 flex-1 min-h-6 transition-colors",
-                i < currentStep ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-border-subtle)]"
+                i < currentStep || steps[i + 1]?.status === "complete" ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-border-subtle)]"
               )
             }
           )
@@ -12131,13 +12009,13 @@ function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal",
                 )
               }
             ),
-            /* @__PURE__ */ jsx(StepCircle, { status, index: i, onClick: onStepChange ? () => onStepChange(i) : void 0, clickable: !!onStepChange }),
+            /* @__PURE__ */ jsx(StepCircle, { status, index: i, label: step.label, onClick: onStepChange && !step.disabled ? () => onStepChange(i) : void 0, clickable: !!onStepChange && !step.disabled }),
             /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
                   "flex-1 h-0.5 transition-colors",
-                  isLast ? "bg-transparent" : i < currentStep ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-border-subtle)]"
+                  isLast ? "bg-transparent" : i < currentStep || steps[i + 1]?.status === "complete" ? "bg-[var(--ds-accent-primary)]" : "bg-[var(--ds-border-subtle)]"
                 )
               }
             )
@@ -12160,13 +12038,14 @@ function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal",
     }
   );
 }
-function StepCircle({ status, index, onClick, clickable }) {
+function StepCircle({ status, index, label, onClick, clickable }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       onClick,
       disabled: !clickable,
+      "aria-label": `Step ${index + 1}: ${label}${status === "complete" ? ", completed" : ""}`,
       "aria-current": status === "current" ? "step" : void 0,
       className: cn(
         "flex items-center justify-center shrink-0 w-8 h-8 rounded-[var(--ds-radius-full)] text-xs font-bold transition-colors",
@@ -12177,7 +12056,9 @@ function StepCircle({ status, index, onClick, clickable }) {
         status === "current" && `border-2 ${ACTIVE_RING} text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)]`,
         status === "error" && "bg-[var(--ds-status-error)] text-[var(--ds-text-on-error)]",
         status === "loading" && `border-2 ${ACTIVE_RING} text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)] animate-pulse`,
-        status === "upcoming" && "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] text-[var(--ds-text-muted)] bg-[var(--ds-bg-surface)]"
+        status === "upcoming" && "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] text-[var(--ds-text-muted)] bg-[var(--ds-bg-surface)]",
+        // a step reached but not done (the user went back) can be gone to: it answers the pointer as the done ones do
+        status === "upcoming" && clickable && "hover:border-[var(--ds-accent-primary)] hover:text-[var(--ds-accent-primary)]"
       ),
       children: status === "complete" ? /* @__PURE__ */ jsx(Icon, { name: "check", size: 14 }) : status === "error" ? /* @__PURE__ */ jsx(Icon, { name: "warning", size: 14 }) : index + 1
     }
@@ -12509,17 +12390,13 @@ function TruncLabel3({ children, className, side = "right", container, lines = 1
   if (!isTruncated) return label;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, side, delay: 200, container, children: label });
 }
-function hasActiveDescendant(items) {
-  return items.some(
-    (it) => it.active || it.children && hasActiveDescendant(it.children)
-  );
-}
+var isActive = (item) => !!item.active;
 function collectInitialExpanded(items, prefix = "") {
   const keys = [];
   for (const item of items) {
     if (!item.children?.length) continue;
     const key = prefix ? `${prefix}/${item.label}` : item.label;
-    if (item.defaultExpanded || hasActiveDescendant(item.children)) {
+    if (item.defaultExpanded || holdsCurrent(item.children, isActive)) {
       keys.push(key);
     }
     keys.push(...collectInitialExpanded(item.children, key));
@@ -12741,7 +12618,7 @@ function SidebarNav({
   function renderCompactItem(item, index, parentKey) {
     const hasChildren = !!item.children?.length;
     const key = makeKey(item.label, parentKey);
-    const childActive = hasChildren && hasActiveDescendant(item.children);
+    const childActive = hasChildren && holdsCurrent(item.children, isActive);
     const isOpen = openFlyout === key;
     return /* @__PURE__ */ jsx(
       CompactNavItem,
@@ -12775,7 +12652,7 @@ function SidebarNav({
       return renderLeaf(item, depth, index);
     }
     const isExpanded = expandedItems.has(key);
-    const childActive = hasActiveDescendant(item.children);
+    const childActive = holdsCurrent(item.children, isActive);
     const isRoot = depth === 0;
     const rootPy = isSm ? "py-ds-1.5" : "py-ds-2";
     const childPy = isSm ? "py-ds-1" : "py-ds-1.5";
@@ -13345,7 +13222,7 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
   const noteShown = useCallback((id, variant, action, fresh) => {
     if (runs.current.size) shownDuringRuns.current.push({ seq: ++showSeq.current, at: Date.now(), id, variant, action, fresh });
   }, []);
-  const update = useCallback((id, message, options = {}) => {
+  const update2 = useCallback((id, message, options = {}) => {
     const list2 = entries.current;
     const at = list2.findIndex((t2) => t2.id === id);
     if (at === -1) return;
@@ -13395,21 +13272,21 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
     success: (m, o) => toast(m, { ...o, variant: "success" }),
     warning: (m, o) => toast(m, { ...o, variant: "warning" }),
     error: (m, o) => toast(m, { ...o, variant: "error" }),
-    update,
+    update: update2,
     dismiss: remove,
     dismissAll,
     promise: async (promise, messages, options = {}) => {
       const id = toast(messages.loading, { ...options, variant: "default", duration: Infinity });
       try {
         const value = await promise;
-        update(id, typeof messages.success === "function" ? messages.success(value) : messages.success, { variant: "success", duration });
+        update2(id, typeof messages.success === "function" ? messages.success(value) : messages.success, { variant: "success", duration });
         return value;
       } catch (err) {
-        update(id, typeof messages.error === "function" ? messages.error(err) : messages.error, { variant: "error", duration });
+        update2(id, typeof messages.error === "function" ? messages.error(err) : messages.error, { variant: "error", duration });
         throw err;
       }
     }
-  }), [toast, update, remove, dismissAll, duration]);
+  }), [toast, update2, remove, dismissAll, duration]);
   const ledger = useMemo(() => ({
     begin: () => {
       const run = ++runSeq.current;
@@ -13737,18 +13614,20 @@ function pageMaxWidth(resolved) {
 }
 var paddingClasses = {
   none: "",
-  default: "px-ds-6",
+  // the page's gutter, which an overlay's header, body and footer share (Sprint 25.14 A36)
+  default: "px-[var(--ds-page-gutter)]",
   wide: "px-ds-10"
 };
+var FILLED_BOTTOM = "has-[[data-fill]]:pb-[var(--ds-page-gutter)]";
 var verticalPaddingClasses = {
   none: "",
-  default: "pt-ds-8 pb-ds-12",
-  spacious: "pt-ds-8 pb-ds-16"
+  default: `pt-ds-8 pb-ds-12 ${FILLED_BOTTOM}`,
+  spacious: `pt-ds-8 pb-ds-16 ${FILLED_BOTTOM}`
 };
 var bottomPaddingClasses = {
   none: "",
-  default: "pb-ds-12",
-  spacious: "pb-ds-16"
+  default: `pb-ds-12 ${FILLED_BOTTOM}`,
+  spacious: `pb-ds-16 ${FILLED_BOTTOM}`
 };
 var bottomPaddingValues = {
   none: "0px",
@@ -13771,6 +13650,38 @@ function useContentWidth(width) {
     return () => request(null);
   }, [request, width]);
 }
+function PageActions({ children }) {
+  const slot = useContext(PageActionsCtx);
+  const add = slot?.add;
+  useEffect(() => add?.(), [add]);
+  const target = slot?.target;
+  return target ? createPortal(/* @__PURE__ */ jsx(ControlSizeContext, { value: target.size, children }), target.el) : null;
+}
+var pageOrder = (a, b) => a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+function usePageActionsSlot() {
+  const outer = useContext(PageActionsCtx);
+  const [asking, setAsking] = useState(0);
+  const [slots, setSlots] = useState([]);
+  const register = useCallback((el, size) => {
+    setSlots((list) => [...list.filter((s) => s.el !== el), { el, size }]);
+    return () => setSlots((list) => list.filter((s) => s.el !== el));
+  }, []);
+  const outerAdd = outer?.add;
+  const add = useCallback(() => {
+    setAsking((n) => n + 1);
+    const releaseOuter = outerAdd?.();
+    let released = false;
+    return () => {
+      if (released) return;
+      released = true;
+      setAsking((n) => n - 1);
+      releaseOuter?.();
+    };
+  }, [outerAdd]);
+  const own = useMemo(() => [...slots].sort(pageOrder)[0] ?? null, [slots]);
+  const target = own ?? outer?.target ?? null;
+  return useMemo(() => ({ wanted: asking > 0, target, register, add }), [asking, target, register, add]);
+}
 function usePageContainer() {
   return useContext(PageContainerContext);
 }
@@ -13847,6 +13758,7 @@ var PageContainer = forwardRef(function PageContainer2({
     headerCount.current = Math.max(0, headerCount.current + (present ? 1 : -1));
     setWrappedHeader(headerCount.current > 0);
   }, []);
+  const pageActions = usePageActionsSlot();
   const launcherCorner = shell?.launcherCorner ?? null;
   const vPad = verticalPadding ?? "default";
   const launcherPadding = launcherCorner ? { paddingBottom: `max(${bottomPaddingValues[vPad]}, var(--ds-toast-inset-${launcherCorner}, 0px))` } : {};
@@ -13892,7 +13804,7 @@ var PageContainer = forwardRef(function PageContainer2({
     observedRef.current = null;
   }, []);
   if (headerIdx === -1 || !headerEl || !r) {
-    return /* @__PURE__ */ jsx(PageContainerContext, { value: { contentMaxWidth: maxWidthValue, placement: "inside", containedBreadcrumbs: false, breadcrumbsInsideHeader: false, noBottomMargin: false, overlap: false, setPinnedHeight, reportHeader, requestContentWidth, insidePaddedColumn: true }, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(PageActionsCtx, { value: pageActions, children: /* @__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: setRoot,
@@ -13908,7 +13820,7 @@ var PageContainer = forwardRef(function PageContainer2({
         style: { maxWidth: maxWidthValue, containerType: "inline-size", ...launcherPadding },
         children: capped(children)
       }
-    ) });
+    ) }) });
   }
   const rest = kids.filter((_, i) => i !== headerIdx);
   const snapping = r.behavior === "snapping";
@@ -13929,7 +13841,7 @@ var PageContainer = forwardRef(function PageContainer2({
     ...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) }) });
-  return /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-page-container": "", "data-width": dataWidth, className: "w-full", children: [
+  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,
       colourful ? header : /* @__PURE__ */ jsx("div", { className: columnClass(padding), style: columnStyle, children: header })
@@ -13941,7 +13853,7 @@ var PageContainer = forwardRef(function PageContainer2({
       /* @__PURE__ */ jsx("div", { className: columnClass(padding), style: columnStyle, children: header })
     ] }),
     wrapperStyle ? /* @__PURE__ */ jsx("div", { style: wrapperStyle, children: column }) : column
-  ] });
+  ] }) });
 });
 function TruncHeading({ as: Tag3 = "h1", className, children, lines: linesProp }) {
   const lines = linesProp ?? (Tag3 === "h1" ? 2 : 1);
@@ -13969,7 +13881,8 @@ function outerHeight(el) {
   const s = getComputedStyle(el);
   return el.getBoundingClientRect().height + (parseFloat(s.marginTop) || 0) + (parseFloat(s.marginBottom) || 0);
 }
-function Breadcrumbs3({ items, onLight, onTint, pill, separator = "chevron" }) {
+function Breadcrumbs2({ items, onLight, onTint, pill, separator = "chevron" }) {
+  const follow = useCrumbFollow();
   if (!items.length) return null;
   const mutedCls = onLight ? "text-[var(--ds-text-on-primary)]/40" : onTint ? "text-[var(--ds-text-muted-on-tint)]" : "text-[var(--ds-text-secondary)]";
   const sepEl = (key) => {
@@ -13984,17 +13897,15 @@ function Breadcrumbs3({ items, onLight, onTint, pill, separator = "chevron" }) {
     onLight ? "bg-[var(--ds-text-on-primary)]/10" : onTint ? "bg-[var(--ds-bg-surface)]/70" : "bg-[var(--ds-bg-muted)]"
   ) : "";
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-ds-1.5 text-sm", children: items.map((item, i) => {
-    const isNavigable = !!(item.onClick || item.href);
+    const isNavigable = crumbGoes(item);
+    const isCurrent = !isNavigable && i === items.length - 1;
     return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-ds-1.5", children: [
       i > 0 && sepEl(i),
       isNavigable ? /* @__PURE__ */ jsx(
         "a",
         {
           href: item.href ?? "#",
-          onClick: (e) => {
-            e.preventDefault();
-            item.onClick?.();
-          },
+          onClick: (e) => follow(e, item),
           className: cn(
             "transition-colors duration-[var(--ds-transition-speed)]",
             onLight ? "text-[var(--ds-text-on-primary)]/60 hover:text-[var(--ds-text-on-primary)]/90" : cn(mutedCls, "hover:text-[var(--ds-text-primary)]"),
@@ -14002,9 +13913,8 @@ function Breadcrumbs3({ items, onLight, onTint, pill, separator = "chevron" }) {
           ),
           children: item.label
         }
-      ) : /* @__PURE__ */ jsx("span", { className: cn(
-        "font-medium",
-        onLight ? "text-[var(--ds-text-on-primary)]/80" : "text-[var(--ds-text-primary)]",
+      ) : /* @__PURE__ */ jsx("span", { "aria-current": isCurrent ? "page" : void 0, className: cn(
+        isCurrent ? cn("font-medium", onLight ? "text-[var(--ds-text-on-primary)]/80" : "text-[var(--ds-text-primary)]") : onLight ? "text-[var(--ds-text-on-primary)]/60" : mutedCls,
         pillCls
       ), children: item.label })
     ] }, i);
@@ -14019,6 +13929,11 @@ function TintWash() {
     }
   );
 }
+function PageActionsSlotMark({ register }) {
+  const size = useContext(ControlSizeContext);
+  const ref = useCallback((el) => el ? register(el, size) : void 0, [register, size]);
+  return /* @__PURE__ */ jsx("span", { ref, "data-page-actions": "", className: "contents" });
+}
 function BackButton({ onLight, onClick }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -14065,10 +13980,18 @@ function Caption({ children, onLight, onTint }) {
     onLight ? "text-[var(--ds-text-on-primary)]/80" : onTint ? "text-[var(--ds-text-muted-on-tint)]" : "text-[var(--ds-text-secondary)]"
   ), children });
 }
+var ON_BAND_STRIP = cn(
+  "rounded-[var(--ds-radius-md)] px-ds-3 py-ds-2 border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+  "bg-[var(--ds-bg-surface)] supports-[color:oklch(from_red_l_c_h)]:bg-[oklch(from_var(--ds-bg-surface)_l_c_h_/_max(alpha,min(1,alpha*1000)*0.6))]",
+  GLASS_SURFACE
+);
 function TabRow({ children, hasCaption, className, onBand }) {
   const [row, setRow] = useState(null);
   const value = useMemo(() => ({ row, hasCaption }), [row, hasCaption]);
-  return /* @__PURE__ */ jsx("div", { ref: setRow, className: cn(className, onBand && "mx-0 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)] px-ds-3 py-ds-2"), children: /* @__PURE__ */ jsx(HeaderTabRowContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsx("div", { ref: setRow, className: cn(className, onBand && cn("mx-0", ON_BAND_STRIP)), children: /* @__PURE__ */ jsx(HeaderTabRowContext.Provider, { value, children }) });
+}
+function FilterRow({ children, className, onBand }) {
+  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx(FilterRowContext.Provider, { value: true, children: /* @__PURE__ */ jsx("div", { "data-gs": "filter-row", className: cn("flex items-center flex-wrap gap-ds-3", className, onBand && cn("w-fit max-w-full", ON_BAND_STRIP)), children }) }) });
 }
 var FLOATING_HEADER = cn(
   "rounded-[var(--ds-radius-md)]",
@@ -14117,6 +14040,11 @@ var PageHeader = forwardRef(function PageHeader2({
 }, ref) {
   const shell = useAppShell();
   const container = usePageContainer();
+  const pageActions = useContext(PageActionsCtx);
+  const shownActions = pageActions?.wanted ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    actions,
+    /* @__PURE__ */ jsx(PageActionsSlotMark, { register: pageActions.register })
+  ] }) : actions;
   const reportHeader = container?.reportHeader;
   useLayoutEffect(() => {
     if (!reportHeader) return;
@@ -14162,7 +14090,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         filters,
         expandedContent,
@@ -14190,7 +14118,7 @@ var PageHeader = forwardRef(function PageHeader2({
   }
   let header;
   if (variant === "minimal") {
-    header = /* @__PURE__ */ jsx(MinimalHeader, { title, description, caption, focusBack, badge, breadcrumbs: inlineBreadcrumbs, actions, tabs, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: floating ? void 0 : ref, isFloating: floating, contentMaxWidth: gutterWidth });
+    header = /* @__PURE__ */ jsx(MinimalHeader, { title, description, caption, focusBack, badge, breadcrumbs: inlineBreadcrumbs, actions: shownActions, tabs, breadcrumbPill: bcPill, breadcrumbSeparator: bcSep, as: Heading, className, headerRef: floating ? void 0 : ref, isFloating: floating, contentMaxWidth: gutterWidth });
   } else if (variant === "tabs-integrated") {
     header = /* @__PURE__ */ jsx(
       TabsIntegratedHeader,
@@ -14202,7 +14130,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         tabs,
         breadcrumbPill: bcPill,
@@ -14227,7 +14155,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         filters,
         intensity,
@@ -14255,7 +14183,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         filters,
         bannerImage,
@@ -14337,7 +14265,7 @@ function DefaultHeader({
         hasBanner && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[var(--ds-bg-canvas)]/85" }),
         /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
           focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
-          hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
+          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"
@@ -14356,7 +14284,7 @@ function DefaultHeader({
             ] }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
           ] }),
-          filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
+          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 })
         ] })
       ]
@@ -14384,7 +14312,7 @@ function MinimalHeader({
   const inner = floatingContentProps(isFloating, contentMaxWidth);
   return /* @__PURE__ */ jsx("header", { "data-gs": "page-header", ref: headerRef, className: cn("py-ds-2", hasBreadcrumbs && "pt-ds-1", tabs && "pb-ds-4", isFloating && FLOATING_HEADER, className), children: /* @__PURE__ */ jsxs("div", { className: inner.className, style: inner.style, children: [
     focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
-    hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
+    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: [
@@ -14468,11 +14396,13 @@ function ColourfulHeader({
             style: {
               maxWidth: gutter ? contentMaxWidth ?? "var(--ds-bp-xl)" : void 0,
               containerType: "inline-size",
-              ...overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : {}
+              // under the overlap, the gap from the header's last row to the cards is the page's own (space-6): the band's
+              // bottom edge counts in it (the owner, 30 September: 26 px above the cards, 24 below)
+              ...overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px) - ${isBold && !isFloating ? "2px" : "var(--ds-border-width)"})` } : {}
             },
             children: [
               focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack, onLight: isBold }),
-              hasBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, onLight: isBold, onTint: !isBold, pill: breadcrumbPill, separator: breadcrumbSeparator }),
+              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"
@@ -14497,7 +14427,7 @@ function ColourfulHeader({
                 ] }),
                 actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
               ] }),
-              filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
+              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 })
             ]
           }
@@ -14539,6 +14469,7 @@ function SnappingHeader({
   stickyTop = "top-[var(--ds-navbar-height)]"
 }) {
   const [collapsed, setCollapsed] = useState(false);
+  const followCrumb = useCrumbFollow();
   const container = usePageContainer();
   const stickyRef = useRef(null);
   const setStickyRef = useCallback((node) => {
@@ -14673,7 +14604,7 @@ function SnappingHeader({
           const hasBreadcrumbs = !!(breadcrumbs && breadcrumbs.length > 0);
           const innerContent = isMinimal && !collapsed ? /* @__PURE__ */ jsxs("div", { className: cn("py-ds-2", hasBreadcrumbs && !hideExpandedBreadcrumbs && "pt-ds-1", tabs && "pb-ds-4"), children: [
             focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack }),
-            hasBreadcrumbs && !hideExpandedBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
+            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: [
@@ -14683,7 +14614,7 @@ function SnappingHeader({
               actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
             ] }),
             description && /* @__PURE__ */ jsx(ClampedText, { className: "mt-ds-1 text-sm text-[var(--ds-text-secondary)]", children: description }),
-            filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-3", children: filters }) }),
+            filters && /* @__PURE__ */ jsx(FilterRow, { className: "mt-ds-3", children: filters }),
             expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-3", children: expandedContent }),
             tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
           ] }) : /* @__PURE__ */ jsxs(
@@ -14697,10 +14628,10 @@ function SnappingHeader({
                   hasBreadcrumbs && !hideExpandedBreadcrumbs ? "pt-ds-3" : "pt-ds-6"
                 ]
               ),
-              style: !collapsed && isColourful && overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : void 0,
+              style: !collapsed && isColourful && overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px) - ${isBoldColourful && !(isFloating && !wrapperHasCard) ? "2px" : "var(--ds-border-width)"})` } : void 0,
               children: [
                 !collapsed && focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack, onLight }),
-                !collapsed && hasBreadcrumbs && !hideExpandedBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, onLight, onTint, pill: breadcrumbPill, separator: breadcrumbSeparator }),
+                !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",
@@ -14715,17 +14646,14 @@ function SnappingHeader({
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
                         collapsed && hasBreadcrumbs && (() => {
                           const lastCrumb = breadcrumbs[breadcrumbs.length - 1];
-                          const isClickable = !!(lastCrumb?.onClick || lastCrumb?.href);
+                          const isClickable = !!lastCrumb && crumbGoes(lastCrumb);
                           const Tag3 = isClickable ? "a" : "span";
                           return /* @__PURE__ */ jsxs(
                             Tag3,
                             {
                               ...isClickable ? {
                                 href: lastCrumb.href ?? "#",
-                                onClick: (e) => {
-                                  e.preventDefault();
-                                  lastCrumb.onClick?.();
-                                }
+                                onClick: (e) => followCrumb(e, lastCrumb)
                               } : {},
                               className: cn(
                                 "text-sm hidden @sm:inline-flex items-center gap-ds-1",
@@ -14752,7 +14680,7 @@ function SnappingHeader({
                   ] }),
                   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 }))
                 ] }),
-                !collapsed && filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
+                !collapsed && filters && /* @__PURE__ */ jsx(FilterRow, { className: "mt-ds-4", onBand: isBoldColourful, children: filters }),
                 !collapsed && expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: expandedContent }),
                 !collapsed && tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", onBand: isBoldColourful, children: tabs })
               ]
@@ -14822,7 +14750,7 @@ function TabsIntegratedHeader({
   const inner = floatingContentProps(isFloating, contentMaxWidth);
   return /* @__PURE__ */ jsx("header", { "data-gs": "page-header", ref: headerRef, className: cn(hasBreadcrumbs ? "pt-ds-3" : "pt-ds-6", "pb-ds-4", 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(Breadcrumbs3, { items: breadcrumbs, pill: breadcrumbPill, separator: breadcrumbSeparator }),
+    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"
@@ -14989,6 +14917,73 @@ function Dock({
     }
   );
 }
+function resolveNavItemType(type) {
+  return type === "default" ? "tint" : type;
+}
+var NavbarTypeContext = createContext("tint");
+var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href, onClick, type: typeProp, className, children }, ref) {
+  const contextType = useContext(NavbarTypeContext);
+  const type = resolveNavItemType(typeProp ?? contextType);
+  const baseClasses = cn(
+    "inline-flex items-center gap-ds-2 cursor-pointer select-none whitespace-nowrap",
+    // one line: the navbar measures each link (round 12)
+    "transition-colors duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+    "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+    "text-[length:var(--ds-font-size-sm)]"
+  );
+  const typeClasses = getTypeClasses(type, active);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ref,
+      href: href ?? "#",
+      onClick,
+      "aria-current": active ? "page" : void 0,
+      className: cn(baseClasses, typeClasses, className),
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 }),
+        children ?? label,
+        type === "underline" && active && /* @__PURE__ */ jsx(NavUnderline, {})
+      ]
+    }
+  );
+});
+function getTypeClasses(type, active) {
+  switch (type) {
+    case "pill":
+      return cn(
+        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
+        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+      );
+    case "underline":
+      return cn(
+        "px-ds-2 py-ds-2 relative",
+        active ? "text-[var(--ds-text-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
+      );
+    case "minimal":
+      return cn(
+        "px-ds-2 py-ds-1",
+        active ? "text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
+      );
+    case "tint":
+      return cn(
+        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
+        active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+      );
+  }
+}
+function NavUnderline() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "absolute bottom-0 left-ds-1 right-ds-1 rounded-t-full bg-[var(--ds-accent-primary)]",
+      style: { height: "2px" }
+    }
+  );
+}
+function navItemClasses(type, active) {
+  return cn("text-[length:var(--ds-font-size-sm)]", getTypeClasses(type, active));
+}
 function TruncSpan({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("span", { ref, className: cn("truncate", className), children });
@@ -14999,7 +14994,7 @@ function NavMenu({
   label,
   items,
   active = false,
-  type = "tint",
+  type: typeProp,
   onItemClick,
   className
 }) {
@@ -15047,27 +15042,14 @@ function NavMenu({
   const hasActiveChild = active || items.some(
     (it) => it.active || it.children?.some((c) => c.active)
   );
+  const contextType = useContext(NavbarTypeContext);
+  const type = resolveNavItemType(typeProp ?? contextType);
   const isUnderline = type === "underline";
-  const isMinimal = type === "minimal";
-  const isPill = type === "pill";
   const triggerClasses = cn(
-    "inline-flex items-center gap-ds-1 cursor-pointer transition-colors whitespace-nowrap",
+    "inline-flex items-center gap-ds-1 cursor-pointer select-none whitespace-nowrap",
+    "transition-colors duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
     "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-    isUnderline ? cn(
-      "px-ds-3 py-ds-2 text-sm border-b-2 -mb-[2px]",
-      hasActiveChild ? "border-[var(--ds-accent-primary)] text-[var(--ds-text-primary)] font-medium" : "border-transparent text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:border-[var(--ds-border-default)]"
-    ) : isMinimal ? cn(
-      "px-ds-2 py-ds-1 text-sm",
-      hasActiveChild ? "text-[var(--ds-text-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]"
-    ) : isPill ? cn(
-      "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)]",
-      hasActiveChild ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
-    ) : cn(
-      // tint (and the deprecated `default` alias) — the same soft accent fill
-      // NavItem uses, so a menu trigger and a link read as one row (decision 30).
-      "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)]",
-      hasActiveChild ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
-    ),
+    navItemClasses(type, hasActiveChild),
     className
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -15089,7 +15071,8 @@ function NavMenu({
               size: 12,
               className: cn("transition-transform", open && "rotate-180")
             }
-          )
+          ),
+          isUnderline && hasActiveChild && /* @__PURE__ */ jsx(NavUnderline, {})
         ]
       }
     ),
@@ -15200,67 +15183,6 @@ function NavMenuGroup({
     )) })
   ] });
 }
-function resolveNavItemType(type) {
-  return type === "default" ? "tint" : type;
-}
-var NavbarTypeContext = createContext("tint");
-var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href, onClick, type: typeProp, className, children }, ref) {
-  const contextType = useContext(NavbarTypeContext);
-  const type = resolveNavItemType(typeProp ?? contextType);
-  const baseClasses = cn(
-    "inline-flex items-center gap-ds-2 cursor-pointer select-none whitespace-nowrap",
-    // one line: the navbar measures each link (round 12)
-    "transition-colors duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-    "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-    "text-[length:var(--ds-font-size-sm)]"
-  );
-  const typeClasses = getTypeClasses(type, active);
-  return /* @__PURE__ */ jsxs(
-    "a",
-    {
-      ref,
-      href: href ?? "#",
-      onClick,
-      "aria-current": active ? "page" : void 0,
-      className: cn(baseClasses, typeClasses, className),
-      children: [
-        icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 }),
-        children ?? label,
-        type === "underline" && active && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "absolute bottom-0 left-ds-1 right-ds-1 rounded-t-full bg-[var(--ds-accent-primary)]",
-            style: { height: "2px" }
-          }
-        )
-      ]
-    }
-  );
-});
-function getTypeClasses(type, active) {
-  switch (type) {
-    case "pill":
-      return cn(
-        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
-        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
-      );
-    case "underline":
-      return cn(
-        "px-ds-2 py-ds-2 relative",
-        active ? "text-[var(--ds-text-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
-      );
-    case "minimal":
-      return cn(
-        "px-ds-2 py-ds-1",
-        active ? "text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
-      );
-    case "tint":
-      return cn(
-        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
-        active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
-      );
-  }
-}
 var DEFAULT_BUTTON_ATTR = "data-dialog-default-button";
 var sizeClasses = {
   // round 16 (the owner's item 5): the small dialog is 448 px, not 384 — a delete confirmation with a typed field was cramped
@@ -15281,6 +15203,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
   const dialogRef = useRef(null);
   const opener = useRef(null);
   const defaultButtonRef = useRef(null);
+  const bodyRef = useScrollbarInset();
   const onCloseRef = useLatest(onClose);
   const onSubmitRef = useLatest(onSubmit);
   const isTopLayer = useOverlayLayer(open);
@@ -15326,7 +15249,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
       "div",
       {
         ref: overlayRef,
-        className: "fixed inset-0 z-[var(--ds-z-modal)] flex items-center justify-center p-ds-4",
+        className: cn("fixed inset-0 z-[var(--ds-z-modal)] flex items-center justify-center", !isMobile && "p-ds-4"),
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -15376,31 +15299,22 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                     "data-gs": "dialog",
                     "aria-labelledby": titleId,
                     "aria-describedby": description ? descriptionId : void 0,
-                    style: { containerType: "inline-size" },
+                    style: { containerType: "inline-size", "--ds-form-max": "none" },
                     className: cn(
-                      "relative z-10 w-full",
+                      // a column: the title row, a body that scrolls when it is taller than the room, and the footer (Sprint 25.14,
+                      // with A36's full-screen phone dialog: its content ran past the screen with the footer cut off)
+                      "relative z-10 w-full flex flex-col max-h-full",
                       isMobile ? "max-w-none h-full" : sizeClasses[size],
                       OVERLAY_SURFACE,
                       "text-[var(--ds-text-primary)]",
                       GLASS_OVERLAY,
-                      "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-                      isMobile ? "rounded-none" : "rounded-[var(--ds-radius-xl)]",
+                      // full screen on a phone: no edge to draw, so the content sits at the gutter from the screen's edge
+                      isMobile ? "rounded-none" : "rounded-[var(--ds-radius-xl)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
                       "overflow-hidden",
                       "animate-in fade-in-0 zoom-in-95"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: onClose,
-                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
-                          className: "absolute right-4 top-4 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-                          "aria-label": "Close",
-                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("div", { className: "p-ds-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-ds-3", children: [
+                      /* @__PURE__ */ jsxs("div", { className: cn("shrink-0 flex items-start gap-ds-3 pt-ds-6 px-[var(--ds-page-gutter)]", children ? "pb-ds-4" : "pb-ds-6"), children: [
                         variant === "destructive" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center shrink-0 w-10 h-10 rounded-[var(--ds-radius-full)] bg-[var(--ds-status-error-bg)]", children: /* @__PURE__ */ jsx(Icon, { name: "warning", size: 20, className: "text-[var(--ds-status-error)]" }) }),
                         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                           /* @__PURE__ */ jsx(
@@ -15411,16 +15325,39 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                               children: title
                             }
                           ),
-                          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
-                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) }) })
-                        ] })
-                      ] }) }),
+                          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: onClose,
+                            ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                            className: "shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                            "aria-label": "Close",
+                            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
+                          }
+                        )
+                      ] }),
+                      children && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ref: bodyRef,
+                          className: "min-h-0 flex-[0_1_auto] overflow-y-auto pb-ds-6",
+                          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" }),
                       /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
                       footer && /* @__PURE__ */ jsx("div", { className: cn(
-                        "flex justify-end gap-ds-2 p-ds-4",
+                        "shrink-0 flex justify-end gap-ds-2 py-ds-4 px-[var(--ds-page-gutter)]",
                         "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
                         "bg-[var(--ds-bg-muted)]",
-                        "rounded-b-[var(--ds-radius-xl)]"
+                        !isMobile && "rounded-b-[var(--ds-radius-xl)]"
                       ), children: footer })
                     ]
                   }
@@ -15573,7 +15510,7 @@ var Navbar = forwardRef(function Navbar2({
     }
     focus.onExit?.();
   };
-  const exitControl = focus ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: requestExit, children: focus.exitLabel ?? (focus.kind === "before-app" ? "Save and log out" : "Exit") }) : null;
+  const exitControl = focus && !appShell?.flowLeft ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: requestExit, children: focus.exitLabel ?? (focus.kind === "before-app" ? "Save and log out" : "Exit") }) : null;
   const shownUserMenu = focus?.kind === "before-app" ? null : userMenu;
   const asking = confirmExit && focus?.kind === "in-app" && !!appShell?.hasUnsavedChanges;
   if (confirmExit && !asking) setConfirmExit(false);
@@ -16707,6 +16644,310 @@ function getPopoverPosition(rect, placement, padding) {
   top = Math.max(8, Math.min(top, window.innerHeight - popH - 8));
   return { top, left };
 }
+var FLOW_STORAGE_PREFIX = "gridsmith-flow:";
+var stores = /* @__PURE__ */ new Map();
+var storeFor = (key) => {
+  let store = stores.get(key);
+  if (!store) {
+    store = { value: null, raw: void 0, stale: false, listeners: /* @__PURE__ */ new Set(), finished: false, focusStep: null, left: null };
+    stores.set(key, store);
+  }
+  return store;
+};
+var notify = (store) => store.listeners.forEach((listener) => listener());
+function subscribeTo(key, listener) {
+  const store = storeFor(key);
+  store.listeners.add(listener);
+  if (!store.onStorage && typeof window !== "undefined") {
+    store.onStorage = (e) => {
+      if (e.key !== null && e.key !== FLOW_STORAGE_PREFIX + key) return;
+      store.stale = true;
+      notify(store);
+    };
+    window.addEventListener("storage", store.onStorage);
+  }
+  return () => {
+    store.listeners.delete(listener);
+    if (store.listeners.size > 0) return;
+    if (store.onStorage) window.removeEventListener("storage", store.onStorage);
+    store.onStorage = void 0;
+    store.finished = false;
+  };
+}
+var readRaw = (key) => {
+  try {
+    return window.localStorage.getItem(FLOW_STORAGE_PREFIX + key);
+  } catch {
+    return null;
+  }
+};
+function readRecord(key) {
+  return parseRecord(readRaw(key));
+}
+function parseRecord(raw) {
+  try {
+    if (!raw) return null;
+    const stored = JSON.parse(raw);
+    const furthest = Math.max(1, Math.floor(Number(stored.furthest)) || 1);
+    const current = Math.floor(Number(stored.current)) || void 0;
+    return { furthest, current, answers: stored.answers ?? {} };
+  } catch {
+    return null;
+  }
+}
+function writeRecord(key, value) {
+  for (const text of [() => JSON.stringify(value), () => JSON.stringify({ furthest: value.furthest, current: value.current })]) {
+    try {
+      const raw = text();
+      window.localStorage.setItem(FLOW_STORAGE_PREFIX + key, raw);
+      return raw;
+    } catch {
+    }
+  }
+  return null;
+}
+function snapshot(key) {
+  const store = storeFor(key);
+  if (store.raw === void 0 || store.stale || store.listeners.size === 0) {
+    store.stale = false;
+    const raw = readRaw(key);
+    if (raw !== store.raw || store.value === null) {
+      store.raw = raw;
+      store.value = parseRecord(raw) ?? { furthest: 1, answers: {} };
+    }
+  }
+  return store.value;
+}
+function update(key, change) {
+  const store = storeFor(key);
+  const raw = readRaw(key);
+  if (raw !== null && raw !== store.raw) {
+    store.raw = raw;
+    store.value = parseRecord(raw) ?? store.value;
+  }
+  store.value = change(store.value ?? { furthest: 1, answers: {} });
+  store.raw = writeRecord(key, store.value) ?? store.raw;
+  store.stale = false;
+  notify(store);
+}
+function clear(key) {
+  const store = storeFor(key);
+  try {
+    window.localStorage.removeItem(FLOW_STORAGE_PREFIX + key);
+  } catch {
+  }
+  store.value = null;
+  store.raw = void 0;
+  notify(store);
+}
+function markFlowMove(storageKey, step) {
+  storeFor(storageKey).focusStep = step;
+}
+function stepJustLeft(storageKey) {
+  const left = storeFor(storageKey).left;
+  return left && Date.now() - left.time < 3e3 ? left.step : null;
+}
+function readFlowProgress(storageKey, initialAnswers) {
+  const record = typeof window === "undefined" ? null : readRecord(storageKey);
+  return record ? { ...record, answers: { ...initialAnswers, ...record.answers } } : null;
+}
+function useFlowNavigate(navigate) {
+  const shellNavigate = useAppShell()?.navigate;
+  return useCallback((href, options) => {
+    const go = navigate ?? shellNavigate;
+    if (go) go(href, options);
+    else if (options?.replace) window.location.replace(href);
+    else window.location.assign(href);
+  }, [navigate, shellNavigate]);
+}
+function focusHeading() {
+  const heading = document.querySelector("main h1") ?? document.querySelector("main");
+  if (!heading) return;
+  if (!heading.hasAttribute("tabindex")) heading.setAttribute("tabindex", "-1");
+  heading.focus({ preventScroll: false });
+}
+function focusAfterLeaving() {
+  if (typeof window === "undefined" || typeof requestAnimationFrame === "undefined") return () => {
+  };
+  const from = window.location.href;
+  const old = document.querySelector("main h1");
+  const oldText = old?.textContent ?? null;
+  return () => {
+    let frames = 0;
+    const tick = () => {
+      const heading = document.querySelector("main h1");
+      const drawn = window.location.href !== from && !!heading && (heading !== old || heading.textContent !== oldText);
+      if (!drawn) {
+        if (++frames < 60) requestAnimationFrame(tick);
+        return;
+      }
+      const active = document.activeElement;
+      if (!active || active === document.body || !active.isConnected) focusHeading();
+    };
+    requestAnimationFrame(tick);
+  };
+}
+var titleBase = null;
+var titleUsers = 0;
+function usePageTitle(title) {
+  useEffect(() => {
+    if (!title || typeof document === "undefined") return;
+    if (titleUsers++ === 0) titleBase = document.title;
+    document.title = titleBase ? `${title} \u2013 ${titleBase}` : title;
+    return () => {
+      if (--titleUsers > 0) return;
+      if (titleBase !== null) document.title = titleBase;
+      titleBase = null;
+    };
+  }, [title]);
+}
+var shownSteps = (steps, answers) => steps.filter((s) => !s.when || s.when(answers));
+var STEP = /^[1-9]\d*$/;
+function useFlowSteps(options) {
+  const { steps, at, href, initialAnswers, exitTo, finishTo } = options;
+  const key = options.storageKey || null;
+  const go = useFlowNavigate(options.navigate);
+  const subscribe = useCallback((listener) => key ? subscribeTo(key, listener) : () => {
+  }, [key]);
+  const stored = useSyncExternalStore(subscribe, () => key ? snapshot(key) : null, () => null);
+  const answers = useMemo(() => ({ ...initialAnswers, ...stored?.answers ?? {} }), [initialAnswers, stored]);
+  const shown = useMemo(() => shownSteps(steps, answers), [steps, answers]);
+  const total = Math.max(shown.length, 1);
+  const furthest = Math.min(stored?.furthest ?? 1, total);
+  const asked = at !== void 0 && STEP.test(at) ? Number(at) : NaN;
+  const valid = asked >= 1 && asked <= furthest;
+  const step = valid ? asked : furthest;
+  const finished = !!key && storeFor(key).finished;
+  const ready = !!key && stored != null && valid && !finished;
+  const redirected = useRef(null);
+  useEffect(() => {
+    if (!key || storeFor(key).finished) return;
+    if (!stored || valid) {
+      redirected.current = null;
+      return;
+    }
+    const target = href(furthest);
+    if (redirected.current === `${at} ${target}`) return;
+    redirected.current = `${at} ${target}`;
+    go(target, { replace: true });
+  }, [key, stored, valid, furthest, href, go, at]);
+  useEffect(() => {
+    if (key && ready && stored?.current !== step) update(key, (v) => ({ ...v, current: step }));
+  }, [key, ready, stored?.current, step]);
+  useEffect(() => {
+    if (!key || !ready) return;
+    const store = storeFor(key);
+    if (store.focusStep !== step) return;
+    store.focusStep = null;
+    focusHeading();
+  }, [key, ready, step]);
+  useLayoutEffect(() => {
+    if (!key || !ready) return;
+    const store = storeFor(key);
+    return () => {
+      store.left = { step, time: Date.now() };
+    };
+  }, [key, ready, step]);
+  const current = shown[step - 1] ?? steps[0];
+  usePageTitle(ready ? current.title : null);
+  const setAnswers = useCallback((patch) => {
+    if (!key) return;
+    update(key, (before) => {
+      const prev = { ...initialAnswers, ...before.answers };
+      const next2 = { ...prev, ...patch };
+      const here = Math.max(step, before.current ?? step);
+      const ahead = (list) => list.slice(here).map((s) => s.label).join("\0");
+      const changes = ahead(shownSteps(steps, prev)) !== ahead(shownSteps(steps, next2));
+      return { ...before, furthest: changes ? Math.min(before.furthest, here) : before.furthest, answers: next2 };
+    });
+  }, [key, initialAnswers, step, steps]);
+  const moveTo = useCallback((target) => {
+    if (key) storeFor(key).focusStep = target;
+    go(href(target));
+  }, [key, go, href]);
+  const goTo = useCallback((target) => {
+    if (!Number.isInteger(target) || target < 1 || target > furthest || target === step) return;
+    moveTo(target);
+  }, [furthest, step, moveTo]);
+  const next = useCallback((patch) => {
+    if (!key) return;
+    if (patch) setAnswers(patch);
+    const shownNow = patch ? shownSteps(steps, { ...answers, ...patch }) : shown;
+    if (step >= shownNow.length) return;
+    update(key, (v) => ({ ...v, furthest: Math.max(v.furthest, step + 1), current: step + 1 }));
+    moveTo(step + 1);
+  }, [key, setAnswers, steps, answers, shown, step, moveTo]);
+  const back = step > 1 ? () => moveTo(step - 1) : void 0;
+  const saveAndExit = useCallback(() => {
+    if (key && stored) update(key, (v) => ({ ...v, current: step }));
+    const left = focusAfterLeaving();
+    go(exitTo);
+    left();
+  }, [key, stored, step, go, exitTo]);
+  const finish = useCallback(() => {
+    if (key) storeFor(key).finished = true;
+    const left = focusAfterLeaving();
+    go(finishTo);
+    if (key) clear(key);
+    left();
+  }, [key, go, finishTo]);
+  return {
+    ready,
+    step,
+    total,
+    current,
+    caption: `Step ${step} of ${total}`,
+    title: current.title,
+    answers,
+    setAnswers,
+    furthest,
+    isFirst: step === 1,
+    isLast: step === total,
+    next,
+    back,
+    goTo,
+    stepper: {
+      steps: shown.map((s, i) => ({
+        label: s.label,
+        status: i + 1 < furthest && i + 1 !== step ? "complete" : void 0,
+        disabled: i + 1 > furthest || void 0
+      })),
+      currentStep: step - 1,
+      onStepChange: (index) => goTo(index + 1)
+    },
+    saveAndExit,
+    finish
+  };
+}
+function FlowSaved({ storageKey, href, title = "Your progress has been saved", children, navigate }) {
+  const go = useFlowNavigate(navigate);
+  const titleId = useId();
+  const markFlowLeft = useAppShell()?.markFlowLeft;
+  useLayoutEffect(() => markFlowLeft?.(), [markFlowLeft]);
+  const [saved, setSaved] = useState(void 0);
+  useLayoutEffect(() => {
+    const progress = readFlowProgress(storageKey, {});
+    const step = progress ? progress.current ?? progress.furthest : null;
+    setSaved(step === null ? null : { step, behind: stepJustLeft(storageKey) === step });
+  }, [storageKey]);
+  const resume = () => {
+    const step = saved?.step ?? 1;
+    markFlowMove(storageKey, step);
+    if (saved?.behind) window.history.back();
+    else go(href(step), { replace: true });
+  };
+  useLayoutEffect(() => {
+    if (saved !== void 0) focusHeading();
+  }, [saved]);
+  const heading = saved === null ? "There's no saved progress" : title;
+  usePageTitle(saved === void 0 ? null : heading);
+  return /* @__PURE__ */ jsx(PageContainer, { width: "narrow", children: /* @__PURE__ */ jsxs("section", { "aria-labelledby": titleId, className: "flex min-h-[60vh] flex-col items-center justify-center py-ds-12 text-center", children: [
+    saved !== null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "grid size-14 place-items-center rounded-[var(--ds-radius-full)] bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success)]", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 28 }) }),
+    /* @__PURE__ */ jsx("h1", { id: titleId, className: "mt-ds-6 font-[family-name:var(--ds-font-display)] text-3xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: heading }),
+    /* @__PURE__ */ jsx("div", { className: "mt-ds-3 max-w-md text-[var(--ds-text-secondary)]", children: saved === null ? /* @__PURE__ */ jsx("p", { children: "Nothing has been saved in this browser yet." }) : children ?? /* @__PURE__ */ jsx("p", { children: "Your answers are kept in this browser. Come back to it to carry on where you left off." }) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-ds-8 flex flex-wrap justify-center gap-ds-3", children: /* @__PURE__ */ jsx(Button, { type: "button", onClick: resume, children: saved === null ? "Start" : "Continue" }) })
+  ] }) });
+}
 function useDestructiveAction(options) {
   const { action, title, description, confirmLabel, typeToConfirm, onConfirm, onUndo, doneMessage, undoMessage, restoredMessage, severity } = options;
   const preferences = useShellPreferences();
@@ -16872,6 +17113,8 @@ function pastTenseOf(label) {
 }
 var SectionHeading = forwardRef(function SectionHeading2({
   title,
+  onTitleChange,
+  titleLabel = "Title",
   description,
   actions,
   badge,
@@ -16883,6 +17126,8 @@ var SectionHeading = forwardRef(function SectionHeading2({
 }, ref) {
   const isPhone = useBreakpoint("sm");
   const pane = variant === "pane";
+  const inDetail = useContext(SplitPaneCtx) === "detail";
+  const editable = !!onTitleChange;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -16890,7 +17135,7 @@ var SectionHeading = forwardRef(function SectionHeading2({
       "data-gs": "section-heading",
       "data-variant": variant,
       className: cn(
-        pane ? "shrink-0 px-ds-4 pt-ds-4 pb-ds-3 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]" : "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") : "mb-[var(--ds-heading-gap)]",
         !pane && bordered && "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] pb-ds-4",
         className
       ),
@@ -16899,11 +17144,23 @@ var SectionHeading = forwardRef(function SectionHeading2({
           "flex gap-ds-4",
           // the actions wrap under the title when the two do not fit on one line (round 11: a search Input in a 284 px
           // pane's actions slot squeezed "Inbox" to "I."); below sm they always stack
-          isPhone && actions ? "flex-col" : "flex-wrap items-start justify-between"
+          isPhone && actions ? "flex-col" : cn("flex-wrap justify-between", editable && !description ? "items-center" : "items-start")
         ), children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", editable && !(isPhone && actions) && "flex-[1_1_20ch] text-lg"), children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
-              /* @__PURE__ */ jsx("h2", { className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", pane ? "truncate" : "min-w-0 break-words"), children: title }),
+              editable ? (
+                // the field is the title: the heading holds it, so the page's headings still name the view by its title
+                /* @__PURE__ */ jsx("h2", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    size: "md",
+                    "aria-label": titleLabel,
+                    value: title,
+                    onChange: (e) => onTitleChange(e.target.value),
+                    className: "font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]"
+                  }
+                ) })
+              ) : /* @__PURE__ */ jsx("h2", { className: cn("font-[family-name:var(--ds-font-display)] text-lg font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", pane ? "truncate" : "min-w-0 break-words"), children: title }),
               badge,
               count !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "sm", children: count })
             ] }),
@@ -17010,6 +17267,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, DropdownMenu, EmptyState, EntityCell, FileUpload, FormWrapper, Gantt, HoverCard, Kbd, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, DropdownMenu, EmptyState, EntityCell, FileUpload, FlowSaved, FormWrapper, Gantt, HoverCard, Kbd, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageActions, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sheet, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, readFlowProgress, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map