gridsmith-ui 0.23.0 → 0.25.0

package/dist/index.js

@@ -1,27 +1,33 @@
-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 { Skeleton, TITLE_TEXT } from './chunk-NCIZQYXQ.js';
-export { Skeleton } from './chunk-NCIZQYXQ.js';
+import { inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, CardValue } from './chunk-OTCEJN64.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, Label, InlineFieldError, AddAnotherRowCtx, Field } from './chunk-W7GCEJEH.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-W7GCEJEH.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-3CUKJ4VP.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-3CUKJ4VP.js';
+import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, preferenceActionKey } from './chunk-HZIP4EJI.js';
+export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, preferenceActionKey, usePreferences } from './chunk-HZIP4EJI.js';
+import { Skeleton, TITLE_TEXT, formatLocale } from './chunk-X2HEV7FB.js';
+export { Skeleton } from './chunk-X2HEV7FB.js';
 import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
-import { Link } from './chunk-EYMGLK4M.js';
-export { CodeBlock, Divider, Link } from './chunk-EYMGLK4M.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 { 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 { useTextOverflow, Tooltip, usePosition } from './chunk-CXMV7SXJ.js';
-export { Tooltip, useTextOverflow } from './chunk-CXMV7SXJ.js';
+import { FormChangeCtx, useReportedChange, useOptionalFormContext, FormCtx } from './chunk-XVB55M3N.js';
+export { useFormContext } from './chunk-XVB55M3N.js';
+import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-RWKCAKN3.js';
+export { Avatar } from './chunk-RWKCAKN3.js';
+import { Link } from './chunk-QGSCF7PN.js';
+export { CodeBlock, Divider, Link } from './chunk-QGSCF7PN.js';
+import { useFillHeight, FillContext } from './chunk-2YSEME33.js';
+import { CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, SurfaceBoundary, useFramesItself, TableCardCtx } from './chunk-QM4SJKWV.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 { Badge } from './chunk-FHMCAOAH.js';
+export { Badge } from './chunk-FHMCAOAH.js';
+import { useTextOverflow, Tooltip } from './chunk-MD2EFMES.js';
+export { Tooltip, useTextOverflow } from './chunk-MD2EFMES.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
+import { Icon, slotIcon, warnOnce } from './chunk-HYMXAIXN.js';
+import { usePosition } from './chunk-HP7WUZPK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
-import { Icon } from './chunk-4LDYR7QP.js';
 import { cn, GLASS_SURFACE, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_HAS_FOCUS_RING, HAS_FOCUS_RING, ACTIVE_RING, ERROR_ACTIVE_RING, ERROR_FOCUS_RING, FOCUS_RING, FOCUS_WITHIN_RING } from './chunk-M2QRNBDQ.js';
 import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, isValidElement, useId, memo, useEffect, useImperativeHandle, Children, Fragment as Fragment$1, cloneElement, useSyncExternalStore } from 'react';
 import { createPortal, flushSync } from 'react-dom';
@@ -224,7 +230,7 @@ var TEXT_SIZE = {
   md: "text-sm",
   lg: "text-base"
 };
-function Combobox({ value, onChange: onChangeProp, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp, ...wiring }) {
+function Combobox({ value, onChange: onChangeProp, options, placeholder = "Search\u2026", disabled, loading = false, className, ref, container, error = false, size: sizeProp, "aria-label": ariaLabel, ...wiring }) {
   const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const control = useFieldControl({ ...wiring, error: error || void 0 });
@@ -241,8 +247,9 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
   const listboxId = useId();
   const pos = usePosition(triggerRef, listRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const filtered = options.filter(
-    (o) => !o.disabled && o.label.toLowerCase().includes(query.toLowerCase())
+    (o) => !o.disabled && foldForSearch(o.label).includes(foldForSearch(query))
   );
+  useActiveOptionInView(listRef, open && filtered[highlightIdx] ? `${listboxId}-opt-${highlightIdx}` : void 0);
   const selectedLabel = options.find((o) => o.value === value)?.label ?? "";
   const { ref: overflowRef, isTruncated: labelTruncated } = useTextOverflow({ lines: 1, content: selectedLabel, disabled: open });
   const [prevQuery, setPrevQuery] = useState(query);
@@ -356,6 +363,7 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
               id: control.id,
               role: "combobox",
               "aria-labelledby": wiring["aria-labelledby"],
+              "aria-label": control.labelId ? void 0 : ariaLabel,
               "aria-describedby": control.describedBy,
               "aria-invalid": control.invalid || void 0,
               "aria-required": control.required || void 0,
@@ -451,6 +459,165 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
   ] });
   return /* @__PURE__ */ jsx(Tooltip, { content: selectedLabel, disabled: !labelTruncated || open, children: triggerContent });
 }
+function canonicalTimeZone(zone) {
+  try {
+    return new Intl.DateTimeFormat("en-US", { timeZone: zone }).resolvedOptions().timeZone;
+  } catch {
+    return zone;
+  }
+}
+function browserTimeZone() {
+  try {
+    return canonicalTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC");
+  } catch {
+    return "UTC";
+  }
+}
+function timeZoneOffset(zone, at = /* @__PURE__ */ new Date()) {
+  try {
+    return new Intl.DateTimeFormat(formatLocale(), { timeZone: zone, timeZoneName: "shortOffset" }).formatToParts(at).find((p) => p.type === "timeZoneName")?.value ?? "";
+  } catch {
+    return "";
+  }
+}
+function timeZones() {
+  const listed = typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : [];
+  const zones = [...new Set(listed.map(canonicalTimeZone))].filter((z) => z !== "UTC").sort((a, b) => a.localeCompare(b));
+  return ["UTC", ...zones];
+}
+var labelOf = (zone, at) => {
+  const offset = timeZoneOffset(zone, at);
+  return offset ? `${zone.replace(/_/g, " ")} (${offset})` : zone.replace(/_/g, " ");
+};
+var HOUR = 36e5;
+var zoneList = null;
+function zoneOptions() {
+  const now = Date.now();
+  if (!zoneList || now - zoneList.at > HOUR) {
+    const at = new Date(now);
+    zoneList = { at: now, options: timeZones().map((zone) => ({ value: zone, label: labelOf(zone, at) })) };
+  }
+  return zoneList.options;
+}
+function TimezoneSelect({ value, onChange, placeholder = "Search time zones\u2026", ...rest }) {
+  const zones = zoneOptions();
+  const stored = value ? canonicalTimeZone(value) : "";
+  const options = useMemo(() => {
+    if (!stored) {
+      const mine = browserTimeZone();
+      const label = zones.find((o) => o.value === mine)?.label ?? labelOf(mine, /* @__PURE__ */ new Date());
+      return [{ value: mine, label: `${label} \xB7 your time zone` }, ...zones.filter((o) => o.value !== mine)];
+    }
+    return zones.some((o) => o.value === stored) ? zones : [{ value: stored, label: labelOf(stored, /* @__PURE__ */ new Date()) }, ...zones];
+  }, [zones, stored]);
+  return /* @__PURE__ */ jsx(Combobox, { value: stored, onChange, options, placeholder, ...rest });
+}
+var MINUTE = 6e4;
+var HOUR2 = 60 * MINUTE;
+var DAY = 24 * HOUR2;
+var LONGEST_WAIT = DAY;
+var CONTROL_ANCESTOR = 'a[href], button, summary, label, [role="button"], [role="link"], [role="option"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="treeitem"], [role="row"], [role="gridcell"], [role="checkbox"], [role="radio"], [role="switch"]';
+var noChange = () => () => {
+};
+var inBrowser = () => true;
+var onServer = () => false;
+function toMillis(time) {
+  if (time instanceof Date) return time.getTime();
+  if (typeof time === "number") return time;
+  if (typeof time !== "string") return NaN;
+  const day = /^(\d{4})-(\d{2})-(\d{2})$/.exec(time.trim());
+  if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3])).getTime();
+  return Date.parse(time);
+}
+function thresholdOf(hours, from) {
+  if (typeof hours === "number" && Number.isFinite(hours) && hours >= 0) return hours;
+  const house = PREFERENCE_HOUSE_DEFAULTS.relativeThresholdHours;
+  warnOnce(from, `a threshold of ${String(hours)} isn't a number of hours, so the house's ${house} is used.`);
+  return house;
+}
+function midnight(t) {
+  const d = new Date(t);
+  d.setHours(0, 0, 0, 0);
+  return d.getTime();
+}
+function formatRelativeTime(time, options) {
+  const at = toMillis(time);
+  if (!Number.isFinite(at)) return "";
+  const now = options.now ?? Date.now();
+  const diff = at - now;
+  const age = Math.abs(diff);
+  if (age > thresholdOf(options.thresholdHours, "formatRelativeTime") * HOUR2) return new Intl.DateTimeFormat(formatLocale(), { dateStyle: "medium", timeStyle: "short" }).format(at);
+  const rtf = new Intl.RelativeTimeFormat(formatLocale(), { numeric: "auto" });
+  if (age < MINUTE) return rtf.format(0, "second");
+  if (age < HOUR2) return rtf.format(Math.trunc(diff / MINUTE), "minute");
+  if (age < DAY) return rtf.format(Math.trunc(diff / HOUR2), "hour");
+  return rtf.format(Math.round((midnight(at) - midnight(now)) / DAY), "day");
+}
+function useRelativeTimeFormat() {
+  const thresholdHours = useShellPreferences().relativeThresholdHours ?? PREFERENCE_HOUSE_DEFAULTS.relativeThresholdHours;
+  return (time) => formatRelativeTime(time, { thresholdHours });
+}
+function formatFullTime(time) {
+  const at = toMillis(time);
+  return Number.isFinite(at) ? new Intl.DateTimeFormat(formatLocale(), { year: "numeric", month: "long", day: "numeric", hour: "numeric", minute: "2-digit", timeZoneName: "short" }).format(at) : "";
+}
+function nextChange(at, now, threshold) {
+  const diff = at - now;
+  const age = Math.abs(diff);
+  let wait;
+  if (age > threshold) {
+    if (diff <= 0) return null;
+    wait = age - threshold + 1;
+  } else {
+    const step = age < HOUR2 ? MINUTE : HOUR2;
+    const untilStep = diff > 0 ? age % step + 1 : step - age % step;
+    wait = diff > 0 ? untilStep : Math.min(untilStep, threshold - age + 1);
+  }
+  return Number.isFinite(wait) ? Math.min(Math.max(1e3, wait), LONGEST_WAIT) : null;
+}
+function RelativeTime({ time, thresholdHours, className }) {
+  const shellThreshold = useShellPreferences().relativeThresholdHours;
+  const hours = thresholdOf(thresholdHours ?? shellThreshold ?? PREFERENCE_HOUSE_DEFAULTS.relativeThresholdHours, "RelativeTime");
+  const at = toMillis(time);
+  if (!Number.isFinite(at)) {
+    warnOnce("RelativeTime", `${JSON.stringify(time) ?? String(time)} isn't a time (an ISO string, a Date or milliseconds), so nothing is drawn.`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx(RelativeTimeAt, { at, hours, className }, `${at}:${hours}`);
+}
+function RelativeTimeAt({ at, hours, className }) {
+  const inRows = useContext(RowsCtx);
+  const [now, setNow] = useState(() => Date.now());
+  const [inControl, setInControl] = useState(false);
+  const placed = useCallback((el) => {
+    const inside = !!el?.parentElement?.closest(CONTROL_ANCESTOR);
+    if (inside) el.removeAttribute("tabindex");
+    if (el) setInControl(inside);
+  }, []);
+  const mounted = useSyncExternalStore(noChange, inBrowser, onServer);
+  useEffect(() => {
+    const wait = nextChange(at, now, hours * HOUR2);
+    if (wait === null) return;
+    const timer = setTimeout(() => setNow(Date.now()), wait);
+    return () => clearTimeout(timer);
+  }, [at, now, hours]);
+  const full = formatFullTime(at);
+  return /* @__PURE__ */ jsx(Tooltip, { content: full, ref: placed, children: /* @__PURE__ */ jsxs(
+    "time",
+    {
+      tabIndex: inRows || inControl ? void 0 : 0,
+      dateTime: new Date(at).toISOString(),
+      "data-relative-time": "",
+      suppressHydrationWarning: true,
+      className: cn("rounded-[var(--ds-radius-sm)] focus-visible:outline-2 focus-visible:outline-[var(--ds-accent-primary)] focus-visible:outline-offset-2", className),
+      children: [
+        formatRelativeTime(at, { thresholdHours: hours, now }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", suppressHydrationWarning: true, children: `, ${full}` })
+      ]
+    },
+    mounted ? "browser" : "first"
+  ) });
+}
 var CHECKBOX_SIZES = {
   sm: { box: "h-[16px] w-[16px]", glyph: 10, label: "text-xs" },
   md: { box: "h-[18px] w-[18px]", glyph: 12, label: "text-sm" }
@@ -750,7 +917,7 @@ function formatDate(d) {
 }
 function localeDayFirst() {
   try {
-    const parts = new Intl.DateTimeFormat(void 0).formatToParts(new Date(2e3, 11, 25));
+    const parts = new Intl.DateTimeFormat(formatLocale()).formatToParts(new Date(2e3, 11, 25));
     return parts.findIndex((p) => p.type === "day") < parts.findIndex((p) => p.type === "month");
   } catch {
     return true;
@@ -1882,9 +2049,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;
@@ -3512,7 +3679,7 @@ var Alert = forwardRef(function Alert2({
                     isAccent ? cn("border-[length:var(--ds-border-width)] border-current", actionColorsByVariant[variant]) : cn("border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]", "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]")
                   ),
                   children: [
-                    a.iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex mr-ds-1", children: a.iconLeft }),
+                    a.iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex mr-ds-1", children: slotIcon(a.iconLeft, 14, "an Alert action's iconLeft") }),
                     a.label
                   ]
                 },
@@ -3587,7 +3754,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 +3921,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
@@ -4062,102 +4229,6 @@ function PanelCheckbox({ checked, indeterminate, onClick, label }) {
     }
   );
 }
-
-// ../../showcase/src/lib/initials.ts
-function initialsOf(name) {
-  return name.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((word) => Array.from(word)[0] ?? "").join("").toUpperCase();
-}
-function toInitials(value) {
-  const s = value.trim();
-  if (!s) return "";
-  if (!/\s/.test(s) && Array.from(s).length <= 3) return s;
-  return initialsOf(s);
-}
-var sizeStyles2 = {
-  sm: "h-8 w-8 text-xs",
-  md: "h-10 w-10 text-sm",
-  lg: "h-12 w-12 text-base"
-};
-var paletteStyles = {
-  1: "bg-[var(--ds-palette-1-bg,var(--ds-bg-muted))] text-[var(--ds-palette-1-text,var(--ds-text-secondary))]",
-  2: "bg-[var(--ds-palette-2-bg,var(--ds-bg-muted))] text-[var(--ds-palette-2-text,var(--ds-text-secondary))]",
-  3: "bg-[var(--ds-palette-3-bg,var(--ds-bg-muted))] text-[var(--ds-palette-3-text,var(--ds-text-secondary))]",
-  4: "bg-[var(--ds-palette-4-bg,var(--ds-bg-muted))] text-[var(--ds-palette-4-text,var(--ds-text-secondary))]",
-  5: "bg-[var(--ds-palette-5-bg,var(--ds-bg-muted))] text-[var(--ds-palette-5-text,var(--ds-text-secondary))]"
-};
-function paletteFor(seed) {
-  let h = 0;
-  for (const ch of seed) h = h * 31 + ch.charCodeAt(0) >>> 0;
-  return h % 5 + 1;
-}
-function colorStyles(color, seed) {
-  if (color === "accent") return "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]";
-  if (color === "neutral") return "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]";
-  return paletteStyles[color === "auto" ? paletteFor(seed) : color];
-}
-function PresenceMark({ status }) {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 10 10", width: "10", height: "10", "aria-hidden": "true", focusable: "false", "data-presence": status, className: "block", children: [
-    status === "online" && /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "5", className: "fill-[var(--ds-status-success)]" }),
-    status === "away" && /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "4", fill: "none", strokeWidth: "2", className: "stroke-[var(--ds-status-warning)]" }),
-    status === "busy" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "5", className: "fill-[var(--ds-status-error)]" }),
-      /* @__PURE__ */ jsx("rect", { x: "2.5", y: "4.1", width: "5", height: "1.8", rx: "0.9", className: "fill-[var(--ds-bg-canvas)]" })
-    ] }),
-    status === "offline" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "4", fill: "none", strokeWidth: "2", className: "stroke-[var(--ds-text-muted)]" }),
-      /* @__PURE__ */ jsx("line", { x1: "3.1", y1: "6.9", x2: "6.9", y2: "3.1", strokeWidth: "1.5", strokeLinecap: "round", className: "stroke-[var(--ds-text-muted)]" })
-    ] })
-  ] });
-}
-function Avatar({ initials, src, alt, size = "md", status, color = "auto", className }) {
-  const who = alt ?? initials ?? "";
-  const named = status ? [who, status].filter(Boolean).join(", ") : void 0;
-  const base = cn(
-    "inline-flex items-center justify-center font-medium shrink-0",
-    "rounded-[var(--ds-radius-full)]",
-    sizeStyles2[size],
-    className
-  );
-  const avatarElement = src ? /* @__PURE__ */ jsx(
-    "img",
-    {
-      "data-avatar": "",
-      src,
-      alt: named ?? alt ?? initials ?? "",
-      className: cn(base, "object-cover")
-    }
-  ) : /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-avatar": "",
-      role: named ? "img" : void 0,
-      "aria-label": named,
-      className: cn(
-        base,
-        colorStyles(color, alt ?? initials ?? ""),
-        "border-[length:var(--ds-border-width)] border-transparent"
-      ),
-      children: initials != null ? toInitials(initials) : null
-    }
-  );
-  if (!status) return avatarElement;
-  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
-    avatarElement,
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "absolute",
-          size === "sm" && "bottom-[-4px] right-[-4px]",
-          size === "md" && "bottom-[-2px] right-[-2px]",
-          size === "lg" && "bottom-[0px] right-[0px]"
-        ),
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx("span", { className: "block rounded-[var(--ds-radius-full)] bg-[var(--ds-bg-canvas)] shadow-[0_0_0_2px_var(--ds-bg-canvas)]", children: /* @__PURE__ */ jsx(PresenceMark, { status }) })
-      }
-    )
-  ] });
-}
 function MentionInput({
   value: controlledValue,
   onChange: onChangeProp,
@@ -4165,8 +4236,12 @@ function MentionInput({
   trigger = "@",
   placeholder,
   disabled,
-  className
+  className,
+  error = false,
+  "aria-label": ariaLabel,
+  ...wiring
 }) {
+  const control = useFieldControl({ ...wiring, error: error || void 0 });
   const [internalValue, setInternalValue] = useState("");
   const value = controlledValue ?? internalValue;
   const onChange = useReportedChange(onChangeProp, value);
@@ -4174,14 +4249,14 @@ function MentionInput({
   const [showPopup, setShowPopup] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
   const [triggerStart, setTriggerStart] = useState(-1);
-  const [popupPos, setPopupPos] = useState({ top: 0, left: 0 });
+  const [anchor, setAnchor] = useState(null);
   const inputRef = useRef(null);
   const popupRef = useRef(null);
   const mirrorRef = useRef(null);
-  const filtered = suggestions.filter(
-    (s) => s.label.toLowerCase().includes(query.toLowerCase()) || s.description?.toLowerCase().includes(query.toLowerCase())
-  );
-  useOverlayLayer(showPopup && filtered.length > 0);
+  const listId = useId();
+  const { items: filtered, more } = shownMentions(matchMentions(suggestions, query));
+  const listShown = showPopup && filtered.length > 0;
+  useOverlayLayer(listShown);
   const updateValue = useCallback(
     (v) => {
       if (controlledValue === void 0) setInternalValue(v);
@@ -4224,13 +4299,15 @@ function MentionInput({
     const span = document.createElement("span");
     span.textContent = trigger;
     mirror.appendChild(span);
-    const rect = el.getBoundingClientRect();
     const spanRect = span.getBoundingClientRect();
     const mirrorRect = mirror.getBoundingClientRect();
-    setPopupPos({
-      top: rect.top + (spanRect.top - mirrorRect.top) + span.offsetHeight + 4,
-      left: rect.left + (spanRect.left - mirrorRect.left)
-    });
+    setAnchor({ x: spanRect.left - mirrorRect.left, y: spanRect.top - mirrorRect.top, width: spanRect.width, height: span.offsetHeight });
+  };
+  const anchorRect = () => {
+    const el = inputRef.current;
+    if (!el || !anchor) return null;
+    const field = el.getBoundingClientRect();
+    return new DOMRect(field.left + anchor.x, field.top + anchor.y - el.scrollTop, anchor.width, anchor.height);
   };
   const insertMention = (suggestion) => {
     const el = inputRef.current;
@@ -4249,13 +4326,15 @@ function MentionInput({
     });
   };
   const handleKeyDown = (e) => {
-    if (!showPopup || filtered.length === 0) return;
+    if (!listShown) return;
     if (e.key === "ArrowDown") {
       e.preventDefault();
       setActiveIndex((i) => (i + 1) % filtered.length);
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       setActiveIndex((i) => (i - 1 + filtered.length) % filtered.length);
+    } else if (e.key === "Tab" && e.shiftKey) {
+      flushSync(() => setShowPopup(false));
     } else if (e.key === "Enter" || e.key === "Tab") {
       e.preventDefault();
       insertMention(filtered[activeIndex]);
@@ -4279,21 +4358,30 @@ function MentionInput({
       "textarea",
       {
         ref: inputRef,
+        id: control.id,
+        "aria-labelledby": wiring["aria-labelledby"],
+        "aria-label": control.labelId ? void 0 : ariaLabel,
+        "aria-describedby": control.describedBy,
+        "aria-invalid": control.invalid || void 0,
+        "aria-required": control.required || void 0,
         value,
         onChange: handleInput,
         onKeyDown: handleKeyDown,
+        "aria-autocomplete": "list",
+        "aria-controls": listShown ? listId : void 0,
+        "aria-activedescendant": listShown ? mentionOptionId(listId, activeIndex) : void 0,
         placeholder,
         disabled,
         rows: 3,
         className: cn(
           "flex w-full px-ds-3 py-ds-2 text-sm resize-none",
           "bg-[var(--ds-input-bg)] text-[var(--ds-text-primary)]",
-          "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
+          "border-[length:var(--ds-border-width)]",
+          control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)] hover:border-[var(--ds-input-border-hover)]",
           "rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "placeholder:text-[var(--ds-text-muted)]",
-          "hover:border-[var(--ds-input-border-hover)]",
-          FOCUS_RING,
+          control.invalid ? ERROR_FOCUS_RING : FOCUS_RING,
           "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
           "transition-colors duration-[var(--ds-transition-speed)]"
         )
@@ -4307,59 +4395,19 @@ function MentionInput({
         className: "fixed top-0 left-0 -z-50 opacity-0 pointer-events-none"
       }
     ),
-    showPopup && filtered.length > 0 && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: popupRef,
-          role: "listbox",
-          className: cn(
-            "fixed z-[var(--ds-z-popover)] min-w-[200px] max-h-[200px] overflow-y-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: popupPos.top, left: popupPos.left },
-          children: filtered.map((s, i) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              "aria-selected": i === activeIndex,
-              className: cn(
-                "flex items-center gap-ds-2.5 w-full px-ds-3 py-ds-1.5 text-left text-sm cursor-pointer",
-                "transition-colors duration-[var(--ds-transition-speed)]",
-                i === activeIndex ? "bg-[var(--ds-bg-muted)] text-[var(--ds-text-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] hover:text-[var(--ds-text-primary)]"
-              ),
-              onMouseDown: (e) => {
-                e.preventDefault();
-                insertMention(s);
-              },
-              onMouseEnter: () => setActiveIndex(i),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Avatar,
-                  {
-                    src: s.avatar,
-                    initials: s.label.charAt(0).toUpperCase(),
-                    alt: s.label,
-                    size: "sm",
-                    className: "!h-6 !w-6 !text-2xs"
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                  /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--ds-text-primary)] truncate", children: s.label }),
-                  s.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] truncate", children: s.description })
-                ] })
-              ]
-            },
-            s.id
-          ))
-        }
-      ),
-      document.body
+    listShown && /* @__PURE__ */ jsx(
+      MentionList,
+      {
+        id: listId,
+        label: "Suggestions",
+        items: filtered,
+        more,
+        activeIndex,
+        onActiveIndexChange: setActiveIndex,
+        onPick: insertMention,
+        anchorRect,
+        listRef: popupRef
+      }
     )
   ] });
 }
@@ -5022,7 +5070,7 @@ function CardGrid({ minWidth, maxColumns = 4, compare = false, gap = "var(--ds-s
     }
   );
 }
-var sizeStyles3 = {
+var sizeStyles2 = {
   sm: { gap: "gap-ds-0.5", label: "text-[length:var(--ds-font-size-xs)]", value: "text-[length:var(--ds-font-size-xs)]", iconSize: 12, py: "py-ds-1.5" },
   md: { gap: "gap-ds-1", label: "text-[length:var(--ds-font-size-sm)]", value: "text-[length:var(--ds-font-size-sm)]", iconSize: 14, py: "py-ds-2.5" },
   lg: { gap: "gap-ds-1.5", label: "text-[length:var(--ds-font-size-base)]", value: "text-[length:var(--ds-font-size-base)]", iconSize: 16, py: "py-ds-3" }
@@ -5068,7 +5116,7 @@ var DescriptionList = forwardRef(function DescriptionList2({
   stackBelow: stackBelowProp,
   className
 }, ref) {
-  const s = sizeStyles3[size];
+  const s = sizeStyles2[size];
   const stackBelow = stackBelowProp ?? (columns > 1 ? "sm" : void 0);
   const templateClass = (layout) => columns > 1 && stackBelow !== "none" ? autoColumnClasses[layout][columns] : columnClasses[columns];
   if (orientation === "vertical") {
@@ -5353,6 +5401,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;
@@ -5361,17 +5412,31 @@ function clickIsRows(e) {
   const control = target.closest(ROW_CONTROL);
   return !control || control === e.currentTarget || !e.currentTarget.contains(control);
 }
+var ISO_MOMENT = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?$/;
 function sortableValue(v) {
   if (v === null || v === void 0 || v === "") return void 0;
   if (v instanceof Date) return v.getTime();
+  if (typeof v === "string" && ISO_MOMENT.test(v)) {
+    const at = Date.parse(v);
+    if (Number.isFinite(at)) return at;
+  }
   if (typeof v === "string" || typeof v === "number") return v;
   if (typeof v === "boolean") return v ? 1 : 0;
   return isValidElement(v) || typeof v === "object" ? null : String(v);
 }
-var COLLATOR = new Intl.Collator(void 0, { numeric: true });
+var COLLATORS = /* @__PURE__ */ new Map();
+function collator() {
+  const locale = formatLocale() ?? "";
+  let c = COLLATORS.get(locale);
+  if (!c) {
+    c = new Intl.Collator(locale || void 0, { numeric: true });
+    COLLATORS.set(locale, c);
+  }
+  return c;
+}
 function compareValues(a, b) {
   if (typeof a === "number" && typeof b === "number") return a - b;
-  return COLLATOR.compare(String(a), String(b));
+  return collator().compare(String(a), String(b));
 }
 var UNIT_SCALE = {
   "": 1,
@@ -5693,9 +5758,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));
@@ -5769,11 +5841,19 @@ function Table({
       if (title) return titledCards(/* @__PURE__ */ jsx("div", { className: "py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", children: emptyState }));
       return /* @__PURE__ */ jsx("div", { ref: setRoot, "data-ds-list": "", "data-gs": "table", className: cn("py-ds-10 text-center text-sm text-[var(--ds-text-muted)]", className), children: emptyState });
     }
-    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsxs("div", { ref: title ? void 0 : listRoot, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("flex flex-col gap-ds-3 overflow-y-auto", title ? "min-h-0" : listClass), onFocus: title ? void 0 : noteFocus, onBlur: title ? void 0 : forgetFocus, children: [
+    const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: /* @__PURE__ */ jsxs("div", { ref: title ? void 0 : listRoot, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("flex flex-col gap-ds-3 overflow-y-auto", title ? "min-h-0" : listClass), onFocus: title ? void 0 : noteFocus, onBlur: title ? void 0 : forgetFocus, children: [
       selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select`, children: "Select" }),
       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 +5864,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,13 +5889,42 @@ 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)
         );
       })
-    ] }) });
+    ] }) }) });
     return withControl(title ? titledCards(cards) : cards);
   }
   const cellCount = columns.length + lead;
@@ -5879,7 +5993,7 @@ function Table({
         );
       })
     ] }) }),
-    /* @__PURE__ */ jsx("tbody", { children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: loading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
       "td",
       {
         colSpan: cellCount,
@@ -6008,7 +6122,7 @@ function Table({
           }
         ) })
       ] }, String(id));
-    }) })
+    }) }) })
   ] });
   const region = scrollable || regionFocused ? { tabIndex: 0, role: "region", ...title ? { "aria-labelledby": titleId } : { "aria-label": ariaLabel ?? "Table" } } : {};
   return withControl(
@@ -6040,7 +6154,7 @@ function Table({
               },
               ...fade,
               ...region,
-              className: cn("min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
+              className: cn("relative min-h-0 overflow-x-auto focus-visible:outline-none", title ? "rounded-b-[inherit]" : "rounded-[inherit]"),
               children: table
             }
           )
@@ -6070,6 +6184,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 +6328,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 +6378,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],
@@ -6465,7 +6589,7 @@ function OverflowPopover({
         {
           ref: floatingRef,
           role: "dialog",
-          "aria-label": date.toLocaleDateString(void 0, { weekday: "long", month: "long", day: "numeric" }),
+          "aria-label": date.toLocaleDateString(formatLocale(), { weekday: "long", month: "long", day: "numeric" }),
           className: cn(
             "fixed z-[var(--ds-z-popover)] w-56 max-h-48 overflow-y-auto",
             "bg-[var(--ds-bg-surface-elevated)]",
@@ -6479,7 +6603,7 @@ function OverflowPopover({
           onClick: (e) => e.stopPropagation(),
           onMouseDown: (e) => e.stopPropagation(),
           children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-1", children: date.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-1", children: date.toLocaleDateString(formatLocale(), { weekday: "short", month: "short", day: "numeric" }) }),
             events.map((event) => /* @__PURE__ */ jsx(
               EventBar,
               {
@@ -6745,7 +6869,7 @@ function WeekView({
                 ),
                 onClick: () => onDayClick?.(day),
                 children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] font-medium", children: day.toLocaleDateString(void 0, { weekday: "short" }) }),
+                  /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--ds-text-muted)] font-medium", children: day.toLocaleDateString(formatLocale(), { weekday: "short" }) }),
                   /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -6938,7 +7062,7 @@ function DayCellWithPopover({
               style: { top: pos.top, left: pos.left },
               role: "tooltip",
               children: [
-                /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) }),
+                /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(formatLocale(), { weekday: "short", month: "short", day: "numeric" }) }),
                 dayEvents.map((event) => /* @__PURE__ */ jsx(
                   EventBar,
                   {
@@ -7177,7 +7301,7 @@ function CompactDayCell({
           style: { top: pos.top, left: pos.left },
           role: "tooltip",
           children: [
-            /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium text-[var(--ds-text-muted)] px-ds-1 mb-ds-0.5", children: day.toLocaleDateString(formatLocale(), { weekday: "short", month: "short", day: "numeric" }) }),
             dayEvents.map((event) => /* @__PURE__ */ jsx(
               EventBar,
               {
@@ -7369,16 +7493,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));
@@ -7865,7 +7989,7 @@ var defaultIcons = {
 };
 var FRAME_ICON_SIZE = 28;
 function renderIcon(icon) {
-  if (typeof icon === "string") return /* @__PURE__ */ jsx(Icon, { name: icon, size: FRAME_ICON_SIZE, className: "text-[var(--ds-text-muted)]" });
+  if (typeof icon === "string") return /* @__PURE__ */ jsx(Icon, { name: icon, size: FRAME_ICON_SIZE, className: "text-[var(--ds-text-muted)]", from: "EmptyState's icon" });
   if (isValidElement(icon) && icon.type === Icon) return cloneElement(icon, { size: FRAME_ICON_SIZE });
   return icon;
 }
@@ -7966,7 +8090,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];
@@ -8044,7 +8168,7 @@ function TableToolbar({
 var ICON_TEXT_OFFSET = "calc((2rem - 1.25rem) / 2)";
 function Marker({ item, vertical }) {
   if (item.icon) {
-    return /* @__PURE__ */ jsx("div", { "data-timeline-icon": "", className: "shrink-0 w-8 h-8 flex items-center justify-center *:max-w-8 *:max-h-8", children: item.icon });
+    return /* @__PURE__ */ jsx("div", { "data-timeline-icon": "", className: "shrink-0 w-8 h-8 flex items-center justify-center *:max-w-8 *:max-h-8", children: slotIcon(item.icon, 16, "a Timeline item's icon") });
   }
   return /* @__PURE__ */ jsx(
     "div",
@@ -8091,7 +8215,7 @@ function ExpandableDescription({ children, className }) {
   );
 }
 function HorizontalLayout({ items, minItemWidth, className }) {
-  return /* @__PURE__ */ jsx("div", { "data-timeline-row": "", className: cn("flex items-start overflow-x-auto snap-x", className), children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx("div", { "data-timeline-row": "", className: cn("relative flex items-start overflow-x-auto snap-x", className), children: items.map((item, i) => {
     const isFirst = i === 0;
     const isLast = i === items.length - 1;
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 shrink-0 flex-col items-center snap-start", style: { minWidth: minItemWidth }, children: [
@@ -8124,8 +8248,8 @@ function HorizontalLayout({ items, minItemWidth, className }) {
     ] }, i);
   }) });
 }
-var EXACT = new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" });
-var EXACT_DAY = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+var EXACT = { format: (d) => new Intl.DateTimeFormat(formatLocale(), { dateStyle: "medium", timeStyle: "short" }).format(d) };
+var EXACT_DAY = { format: (d) => new Intl.DateTimeFormat(formatLocale(), { dateStyle: "medium" }).format(d) };
 var DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
 function exactTime(value) {
   if (typeof value === "string") {
@@ -8140,6 +8264,9 @@ function exactTime(value) {
   return Number.isNaN(date.getTime()) ? null : { iso: date.toISOString(), text: EXACT.format(date) };
 }
 function ItemTime({ item }) {
+  if (item.time !== void 0) {
+    return /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: /* @__PURE__ */ jsx(RelativeTime, { time: item.time }) });
+  }
   const exact = item.dateTime ? exactTime(item.dateTime) : null;
   if (!item.timestamp && !exact) return null;
   return /* @__PURE__ */ jsx("p", { className: "text-2xs text-[var(--ds-text-muted)] mt-ds-0.5 tabular-nums", children: exact ? /* @__PURE__ */ jsxs("time", { dateTime: exact.iso, title: exact.text, children: [
@@ -8177,7 +8304,7 @@ function Timeline({ items: allItems, orientation = "vertical", minItemWidth = 20
   }, [ref]);
   const fits = width === 0 || width >= items.length * minItemWidth;
   const horizontal = orientation === "horizontal" || orientation === "responsive" && fits;
-  const list = /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className: pager ? void 0 : className, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) });
+  const list = /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className: pager ? void 0 : className, children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) }) });
   if (!pager) return list;
   return /* @__PURE__ */ jsxs("div", { "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
     list,
@@ -8285,12 +8412,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 +8446,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 +8479,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 +8575,7 @@ function TreeView({
       baseId,
       expanded,
       selected,
+      holding,
       checked,
       checkable,
       selectable,
@@ -8441,6 +8594,7 @@ function TreeNodeRow({
   baseId,
   expanded,
   selected,
+  holding,
   checkable,
   selectable,
   toggleExpand,
@@ -8452,6 +8606,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 +8622,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 +8651,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 +8666,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 +8679,7 @@ function TreeNodeRow({
         baseId,
         expanded,
         selected,
+        holding,
         checked: /* @__PURE__ */ new Set(),
         checkable,
         selectable,
@@ -8714,7 +8873,7 @@ function Carousel({
   );
 }
 function formatTime2(d) {
-  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  return d.toLocaleTimeString(formatLocale(), { hour: "2-digit", minute: "2-digit" });
 }
 function isSameMinute(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate() && a.getHours() === b.getHours() && a.getMinutes() === b.getMinutes();
@@ -9481,7 +9640,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(() => {
@@ -9505,7 +9664,7 @@ var StackedList = forwardRef(function StackedList2({
         !pager && className
       ),
       role: "list",
-      children: shown.map((item) => {
+      children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: shown.map((item) => {
         const isSelected = item.selected ?? (selectedId !== void 0 && item.id === selectedId);
         const interactive = !!item.onClick;
         const hasEmphasis = item.unread !== void 0;
@@ -9594,7 +9753,7 @@ var StackedList = forwardRef(function StackedList2({
             ]
           }
         ) }, item.id);
-      })
+      }) })
     }
   );
   if (!pager) return list;
@@ -9668,7 +9827,8 @@ function periodAfter(unit, start) {
   return utcDay(y + 1, 0, 1);
 }
 var formats = /* @__PURE__ */ new Map();
-function formatter(locale, options) {
+function formatter(given, options) {
+  const locale = given ?? formatLocale();
   const key = `${locale ?? ""}|${JSON.stringify(options)}`;
   let f = formats.get(key);
   if (!f) {
@@ -9781,10 +9941,10 @@ function extendTimeScaleTo(scale, endDay) {
 }
 var noSubscription = () => () => {
 };
-var inBrowser = () => true;
-var onServer = () => false;
+var inBrowser2 = () => true;
+var onServer2 = () => false;
 function useTimeScale({ start, end, zoom, today, weekStartsOn = 1, locale, pxPerDay, pad: pad3 = 0 }) {
-  const readable = useSyncExternalStore(noSubscription, inBrowser, onServer);
+  const readable = useSyncExternalStore(noSubscription, inBrowser2, onServer2);
   const [mounted] = useState(() => toMinute(dayOf(/* @__PURE__ */ new Date())));
   const pending = today === void 0 && !readable;
   const from = dayOf(start);
@@ -10148,6 +10308,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 +10532,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 +10827,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 }) }),
@@ -10754,7 +10919,7 @@ function Gantt({
   const byKey = useMemo(() => new Map(rows.map((r) => [r.key, r])), [rows]);
   const names = useMemo(() => {
     const byId = new Map(tasks.map((i) => [i.id, i]));
-    const list = new Intl.ListFormat(locale, { type: "conjunction" });
+    const list = new Intl.ListFormat(locale ?? formatLocale(), { type: "conjunction" });
     const out = /* @__PURE__ */ new Map();
     for (const item of tasks) {
       const dates = datesOf(item);
@@ -11004,6 +11169,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 +11180,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 +11209,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 +11637,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 +11653,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 +11668,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 +11689,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 +11708,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 +11940,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 +11992,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 +12025,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 +12072,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 +12101,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 +12119,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 +12453,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 +12681,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 +12715,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 +13285,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 +13335,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 +13681,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 +13713,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 +13821,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 +13867,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 +13883,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 +13904,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 +13916,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 +13944,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 +13960,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 +13976,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 +13992,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 +14103,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 +14153,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         filters,
         expandedContent,
@@ -14207,7 +14181,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 +14193,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         tabs,
         breadcrumbPill: bcPill,
@@ -14244,7 +14218,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         filters,
         intensity,
@@ -14272,7 +14246,7 @@ var PageHeader = forwardRef(function PageHeader2({
         badge,
         breadcrumbs: inlineBreadcrumbs,
         onBack,
-        actions,
+        actions: shownActions,
         avatar,
         filters,
         bannerImage,
@@ -14354,7 +14328,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 +14375,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 +14465,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 +14532,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 +14667,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 +14694,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 +14709,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 +14813,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 +15362,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 +15573,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);
@@ -16077,7 +16049,7 @@ function HoverCard({
             className
           ),
           style: { top: pos.top, left: pos.left },
-          children: content
+          children: /* @__PURE__ */ jsx(RowsCtx, { value: false, children: content })
         }
       ),
       container ?? document.body
@@ -16735,6 +16707,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 +17176,9 @@ function pastTenseOf(label) {
 }
 var SectionHeading = forwardRef(function SectionHeading2({
   title,
+  onTitleChange,
+  titleLabel = "Title",
+  titleId,
   description,
   actions,
   badge,
@@ -16911,6 +17190,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 +17199,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 +17208,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", { id: titleId, 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", { id: titleId, 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 })
             ] }),
@@ -16987,6 +17280,23 @@ var ActionPanelGroup = forwardRef(function ActionPanelGroup2({
     }
   );
 });
+function DangerZone({ title = "Danger zone", description, children, className }) {
+  const titleId = useId();
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": titleId, "data-gs": "danger-zone", className, children: [
+    /* @__PURE__ */ jsx(SectionHeading, { title, titleId, description }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-danger-frame": "",
+        className: cn(
+          "rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)] px-ds-5",
+          GLASS_SURFACE
+        ),
+        children: /* @__PURE__ */ jsx(ActionPanelGroup, { children })
+      }
+    )
+  ] });
+}
 var lineClampClasses = {
   1: "truncate",
   2: "line-clamp-2",
@@ -17038,6 +17348,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, 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, DangerZone, 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, RelativeTime, 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, TimezoneSelect, Toast, ToastProvider, Tour, TransferList, TreeView, browserTimeZone, canonicalTimeZone, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, formatFullTime, formatRelativeTime, readFlowProgress, timeExtent, timeZoneOffset, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useRelativeTimeFormat, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map