gridsmith-ui 0.23.0 → 0.24.0

package/dist/index.js

@@ -1,22 +1,25 @@
-import { useAppShell, REACT_VERSION_PROBLEM, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-6PL7FXYH.js';
-export { AppShell, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-6PL7FXYH.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 { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
-import { Link } from './chunk-EYMGLK4M.js';
-export { CodeBlock, Divider, Link } from './chunk-EYMGLK4M.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, 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, Input, Field } from './chunk-ICNWPNMM.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-ICNWPNMM.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 { CardSurfaceCtx, useScrollsInside, SplitPaneCtx, SurfaceBoundary, useFramesItself, TableCardCtx } from './chunk-CKWITUSH.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';
@@ -1882,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;
@@ -3587,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";
@@ -3754,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
@@ -5353,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;
@@ -5693,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));
@@ -5774,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",
           {
@@ -5784,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) => {
@@ -5804,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: /* @__PURE__ */ jsx(PanelContent, { 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)
@@ -6070,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,
@@ -6211,19 +6269,26 @@ function SegmentedControl({
         containerPadding[size],
         containerHeight[size],
         "bg-[var(--ds-bg-muted)]",
-        "rounded-[var(--ds-radius-lg)]",
-        // Sprint 25.14 A20: the track's edge is a control's, at 3:1
-        variant === "default" && "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
+        // 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"
             ),
@@ -6254,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],
@@ -7369,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));
@@ -7966,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];
@@ -8285,12 +8350,26 @@ function Kbd({ children, className }) {
     }
   );
 }
+
+// ../../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) {
@@ -8305,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) => {
@@ -8325,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) => {
@@ -8423,6 +8513,7 @@ function TreeView({
       baseId,
       expanded,
       selected,
+      holding,
       checked,
       checkable,
       selectable,
@@ -8441,6 +8532,7 @@ function TreeNodeRow({
   baseId,
   expanded,
   selected,
+  holding,
   checkable,
   selectable,
   toggleExpand,
@@ -8452,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(
@@ -8467,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))` },
@@ -8493,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")
                 }
               )
             }
@@ -8508,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 })
         ]
       }
@@ -8521,6 +8617,7 @@ function TreeNodeRow({
         baseId,
         expanded,
         selected,
+        holding,
         checked: /* @__PURE__ */ new Set(),
         checkable,
         selectable,
@@ -9481,7 +9578,7 @@ var StackedList = forwardRef(function StackedList2({
   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(() => {
@@ -10148,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 });
@@ -10370,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(
@@ -10662,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 }) }),
@@ -11004,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,
     {
@@ -11013,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,
@@ -11041,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)";
@@ -11469,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(
@@ -11485,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(
@@ -11500,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: [
@@ -11521,10 +11626,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(
@@ -11540,10 +11645,10 @@ function TabButton({
         fullWidth && "flex-1",
         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 }),
@@ -11772,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);
@@ -12059,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)]"
               )
             }
           )
@@ -12092,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)]"
               )
             }
           )
@@ -12139,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)]"
                 )
               }
             )
@@ -12168,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",
@@ -12185,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
     }
@@ -12517,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));
@@ -12749,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,
@@ -12783,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";
@@ -13353,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;
@@ -13403,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;
@@ -13749,15 +13618,16 @@ var paddingClasses = {
   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",
@@ -13780,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);
 }
@@ -13856,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))` } : {};
@@ -13901,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,
@@ -13917,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";
@@ -13938,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 })
@@ -13950,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);
@@ -13978,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) => {
@@ -13993,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)]"),
@@ -14011,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);
@@ -14028,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",
@@ -14134,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;
@@ -14179,7 +14090,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         filters,
         expandedContent,
@@ -14207,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,
@@ -14219,7 +14130,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         tabs,
         breadcrumbPill: bcPill,
@@ -14244,7 +14155,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         filters,
         intensity,
@@ -14272,7 +14183,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         filters,
         bannerImage,
@@ -14354,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"
@@ -14401,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: [
@@ -14491,7 +14402,7 @@ function ColourfulHeader({
             },
             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"
@@ -14558,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) => {
@@ -14692,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: [
@@ -14719,7 +14631,7 @@ function SnappingHeader({
               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",
@@ -14734,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",
@@ -14841,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"
@@ -15390,7 +15299,7 @@ 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(
                       // 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)
@@ -15601,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);
@@ -16735,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();
@@ -16900,6 +17113,8 @@ function pastTenseOf(label) {
 }
 var SectionHeading = forwardRef(function SectionHeading2({
   title,
+  onTitleChange,
+  titleLabel = "Title",
   description,
   actions,
   badge,
@@ -16911,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",
     {
@@ -16918,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
       ),
@@ -16927,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 })
             ] }),
@@ -17038,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, 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, 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