gridsmith-ui 0.22.0 → 0.23.0

package/dist/index.js

@@ -1,21 +1,22 @@
-import { useAppShell, REACT_VERSION_PROBLEM, useOverlayMark, useDirtyGuard, OverlayMarkScope, OverlayCloseCtx, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, DrawerFooterCtx, useCompact, useElementWidth, Sheet, useCloseSettle, Drawer, useRememberedWidth, pxOf, ResizeEdge, defaultMaxWidth } from './chunk-AAYCQXZQ.js';
-export { AppShell, Drawer, Sheet, SkipLink, useAppShell, useUnsavedChanges } from './chunk-AAYCQXZQ.js';
+import { useAppShell, REACT_VERSION_PROBLEM, 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 { 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, Dropdown, useFieldControl, useField, warnOnce, Label, InlineFieldError, AddAnotherRowCtx, Input, Field } from './chunk-2RV23OBK.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-2RV23OBK.js';
-import { SplitPaneCtx, TableCardCtx } from './chunk-RG4KUCRS.js';
+import { useWholeListCheck, pagerPart, Pagination, 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 { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
@@ -508,7 +509,7 @@ function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disable
               "border-[2px]",
               "transition-all",
               "peer-focus-visible:shadow-[var(--ds-shadow-focus)]",
-              filled ? "bg-[var(--ds-check-bg)] [background-image:var(--ds-gradient)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
+              filled ? cn(CHECK_FILL, "border-[var(--ds-check-border)]") : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
               disabled && "pointer-events-none"
             ),
             children: /* @__PURE__ */ jsx(
@@ -629,7 +630,8 @@ function RadioGroup({ value, onChange: onChangeProp, options, orientation = "ver
                       selected && "border-[var(--ds-check-border)]",
                       "group-focus-visible:shadow-[var(--ds-shadow-focus)]"
                     ),
-                    children: selected && /* @__PURE__ */ jsx("span", { className: "h-2.5 w-2.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)]" })
+                    children: selected && // Sprint 25.14 A20: the checked colour, as a checkbox's fill (a preset whose accent falls short of 3:1 sets it)
+                    /* @__PURE__ */ jsx("span", { className: cn("h-2.5 w-2.5 rounded-[var(--ds-radius-full)]", CHECK_FILL) })
                   }
                 ),
                 /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ds-text-primary)]", children: option.label })
@@ -1991,7 +1993,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
             // The real file input is visually hidden inside; Tab lands on it and
             // Enter/Space open the picker natively, so the zone shows its focus.
             invalid ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
-            dragOver ? `${ACTIVE_RING} bg-[var(--ds-accent-whisper)]` : invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-default)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
+            dragOver ? `${ACTIVE_RING} bg-[var(--ds-accent-whisper)]` : invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-input-border)] hover:border-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-whisper)]"
           ),
           style: { padding: "var(--ds-space-8) var(--ds-space-4)" },
           children: [
@@ -2165,7 +2167,7 @@ function SliderRange({
           !trackStyle && /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute h-1.5 rounded-[var(--ds-radius-full)] bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)]",
+              className: cn("absolute h-1.5 rounded-[var(--ds-radius-full)]", CHECK_FILL),
               style: {
                 left: `${isRange ? pct(low) : 0}%`,
                 width: `${isRange ? pct(high) - pct(low) : pct(low)}%`
@@ -2189,7 +2191,7 @@ function SliderRange({
               className: cn(
                 "absolute w-ds-4 h-ds-4 -translate-x-1/2 rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface)] border-2",
-                error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-accent-primary)]",
+                error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-check-border)]",
                 "shadow-[var(--ds-shadow-sm)]",
                 "transition-[shadow,transform] duration-200 ease-out",
                 "focus-visible:shadow-[var(--ds-shadow-focus)]",
@@ -2215,7 +2217,7 @@ function SliderRange({
               className: cn(
                 "absolute w-ds-4 h-ds-4 -translate-x-1/2 rounded-[var(--ds-radius-full)]",
                 "bg-[var(--ds-bg-surface)] border-2",
-                error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-accent-primary)]",
+                error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-check-border)]",
                 "shadow-[var(--ds-shadow-sm)]",
                 "transition-[shadow,transform] duration-200 ease-out",
                 "focus-visible:shadow-[var(--ds-shadow-focus)]",
@@ -2988,7 +2990,7 @@ function PinInput({
       role: "group",
       "aria-label": "PIN input",
       "aria-invalid": error || void 0,
-      className: cn("inline-flex items-center gap-ds-2", className),
+      className: cn("inline-flex w-fit items-center gap-ds-2", className),
       children: digits.map((digit, i) => /* @__PURE__ */ jsx(
         "input",
         {
@@ -3153,7 +3155,9 @@ function Rating({
       "aria-required": readOnly ? void 0 : control.required || void 0,
       onKeyDown: readOnly ? void 0 : handleKeyDown,
       className: cn(
-        "inline-flex items-center gap-ds-0.5",
+        // Sprint 25.14 A21: its own width in a Field's column, not the field's; w-fit, not self-start, so a row or a
+        // centred column still aligns it (the review of 30 September)
+        "inline-flex w-fit items-center gap-ds-0.5",
         error && "border-[length:var(--ds-border-width)] border-[var(--ds-status-error)] rounded-[var(--ds-radius-sm)] p-ds-0.5",
         className
       ),
@@ -4373,7 +4377,6 @@ function holdsHeader(children) {
 }
 var CardActionCtx = createContext(null);
 var CARD_ACTION_ATTR = "data-card-action";
-var CardSurfaceCtx = createContext(false);
 var variantStyles3 = {
   default: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
   featured: [
@@ -4409,7 +4412,8 @@ function RadioIndicator({ checked, disabled }) {
         {
           className: cn(
             "h-2.5 w-2.5 rounded-[var(--ds-radius-full)] transition-transform duration-[var(--ds-transition-speed)]",
-            checked ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] scale-100" : "scale-0"
+            // Sprint 25.14 A20: the radio's selected dot (lib/control-looks.ts)
+            checked ? cn(CHECK_FILL, "scale-100") : "scale-0"
           )
         }
       )
@@ -4427,7 +4431,8 @@ function CheckboxIndicator({ checked, indeterminate, disabled }) {
         "rounded-[calc(var(--ds-radius-sm)*0.6)]",
         "border-[2px] transition-all duration-[var(--ds-transition-speed)]",
         disabled && "opacity-disabled",
-        filled ? "bg-[var(--ds-check-bg)] [background-image:var(--ds-gradient)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]"
+        // Sprint 25.14 A20: the checkbox's checked fill (lib/control-looks.ts)
+        filled ? cn(CHECK_FILL, "border-[var(--ds-check-border)]") : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]"
       ),
       children: /* @__PURE__ */ jsx(
         "svg",
@@ -4455,13 +4460,14 @@ function ToggleIndicator({ checked, disabled }) {
         "border-[length:var(--ds-border-width)] rounded-[var(--ds-radius-full)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
         disabled && "opacity-disabled",
-        checked ? "bg-[var(--ds-accent-primary)] border-transparent" : "bg-[var(--ds-bg-muted)] border-[var(--ds-border-default)]"
+        // Sprint 25.14 A20: the Toggle's track and knob, on and off (lib/control-looks.ts)
+        checked ? SWITCH_TRACK_ON : SWITCH_TRACK_OFF
       ),
       style: { width: 44, height: 24 },
       children: /* @__PURE__ */ jsx(
         "span",
         {
-          className: "pointer-events-none inline-block shrink-0 bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-full)] transition-transform",
+          className: cn("pointer-events-none inline-block shrink-0 rounded-[var(--ds-radius-full)]", checked ? SWITCH_KNOB_ON : SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION),
           style: {
             width: 16,
             height: 16,
@@ -4647,9 +4653,9 @@ var Card = forwardRef(function Card2({
       ...props,
       children: [
         !loading && !hasHeader && checkbox && /* @__PURE__ */ jsxs("div", { "data-card-header-row": "", className: "flex items-center gap-ds-2 px-ds-5 pt-ds-4", children: [
-          checkbox,
           /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "grow" }),
-          check && /* @__PURE__ */ jsx("span", { "data-card-selection": "", className: "shrink-0 flex", children: check })
+          check && /* @__PURE__ */ jsx("span", { "data-card-selection": "", className: "shrink-0 flex", children: check }),
+          checkbox
         ] }),
         !loading && !hasHeader && !checkbox && check && /* @__PURE__ */ jsx("div", { "data-card-selection": "", className: "absolute top-ds-3 right-ds-3 z-[1] flex", children: check }),
         /* @__PURE__ */ jsx(CardSurfaceCtx, { value: true, children: /* @__PURE__ */ jsx(CardActionCtx, { value: action, children: /* @__PURE__ */ jsx(CardRowCtx, { value: rowParts, children: loading ? (
@@ -4724,7 +4730,7 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
     }
   ) : null;
   const band = (order) => cn("shrink-0 self-start flex items-center", TITLE_LINE, order);
-  const checkbox = owns && row.checkbox ? /* @__PURE__ */ jsx("span", { className: band("order-0"), children: row.checkbox }) : null;
+  const checkbox = owns && row.checkbox ? /* @__PURE__ */ jsx("span", { className: band("order-5"), children: row.checkbox }) : null;
   const check = owns && row.check ? /* @__PURE__ */ jsx("span", { "data-card-selection": "", className: band("order-4"), children: row.check }) : null;
   const menuPart = menu ? /* @__PURE__ */ jsx("span", { className: band("order-6"), children: menu }) : null;
   const { lead, title, rest } = splitTitle(children);
@@ -4734,15 +4740,14 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
   const actionsSlot = "actions" in allProps ? /* @__PURE__ */ jsx("div", { "data-header-actions": "", className: "contents", children: partsOf(actions).map((item, i) => /* @__PURE__ */ jsx("span", { className: cn("flex items-center shrink-0", TITLE_LINE), children: item }, isValidElement(item) && item.key !== null ? item.key : i)) }) : null;
   return /* @__PURE__ */ jsxs("div", { ref, "data-card-header": "", className: cn("flex flex-col px-ds-5 pt-ds-4 last:pb-ds-4 min-w-0", className), ...props, children: [
     topLine && /* @__PURE__ */ jsxs("div", { "data-card-icon-row": iconBlock ? "" : void 0, "data-card-lead-row": iconBlock ? void 0 : "", className: cn("flex items-start gap-ds-2", iconBlock ? "mb-ds-2.5" : "mb-ds-1.5"), children: [
-      checkbox,
       topLine,
       iconBlock && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "grow -ml-ds-2" }),
       check,
+      checkbox,
       menuPart
     ] }),
     iconBlock && leadBlock && /* @__PURE__ */ jsx("div", { className: "flex mb-ds-1.5", children: leadBlock }),
     /* @__PURE__ */ jsxs("div", { "data-card-header-row": "", className: "flex items-start gap-ds-2 min-w-0", children: [
-      !topLine && checkbox,
       /* @__PURE__ */ jsxs("div", { "data-card-title-line": "", className: TITLE_ROW, children: [
         title && /* @__PURE__ */ jsx(
           "div",
@@ -4756,6 +4761,7 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
         !ownBlock && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "order-3 grow basis-0 -ml-ds-2" })
       ] }),
       !topLine && check,
+      !topLine && checkbox,
       !topLine && menuPart
     ] }),
     rest.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-ds-1.5 break-words mt-ds-1.5 min-w-0", children: rest })
@@ -4842,7 +4848,7 @@ var CardFooter = forwardRef(function CardFooter2({ className, children, ...props
 });
 function TruncLabel({ children }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
-  const el = /* @__PURE__ */ jsx("span", { ref, className: "text-xs font-medium text-[var(--ds-text-muted)] uppercase tracking-wider truncate min-w-0", children });
+  const el = /* @__PURE__ */ jsx("span", { ref, className: "block text-xs font-medium text-[var(--ds-text-muted)] uppercase tracking-wider truncate min-w-0", children });
   if (!isTruncated) return el;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
 }
@@ -4887,13 +4893,15 @@ function StatsCard({ value, label, trend, icon, layout = "card", interactive, on
       } : void 0,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-2 min-w-0", children: [
-          /* @__PURE__ */ jsx(TruncLabel, { children: label }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(TruncLabel, { children: label }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-ds-2 mt-ds-2 flex-wrap", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-[family-name:var(--ds-font-display)] text-2xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] leading-none tabular-nums", children: value }),
+              trend && /* @__PURE__ */ jsx(TrendBadge, { trend })
+            ] })
+          ] }),
           icon && /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center justify-center w-8 h-8 rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-muted)]", children: /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, className: "text-[var(--ds-text-muted)]" }) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-ds-2 mt-ds-2 flex-wrap", children: [
-          /* @__PURE__ */ jsx("span", { className: "font-[family-name:var(--ds-font-display)] text-2xl font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] leading-none tabular-nums", children: value }),
-          trend && /* @__PURE__ */ jsx(TrendBadge, { trend })
-        ] }),
         children && /* @__PURE__ */ jsx("div", { className: "mt-ds-3 text-xs text-[var(--ds-text-muted)]", children })
       ]
     }
@@ -4978,6 +4986,7 @@ function countCards(children) {
   return n;
 }
 function CardGrid({ minWidth, maxColumns = 4, compare = false, gap = "var(--ds-space-4)", fill: fill2 = true, className, style, children, ref, ...props }) {
+  useFramesItself();
   const most = Math.max(1, Math.floor(maxColumns));
   const drawn = "var(--gs-cards, var(--gs-cards-counted))";
   const min = "var(--gs-card-min)";
@@ -5286,71 +5295,6 @@ function Accordion({ items, type = "single", defaultOpen = [], open: controlledO
     ] }, i);
   }) });
 }
-var EDGE_FADE = 24;
-var NONE = { left: false, right: false, vertical: false, gutterRight: 0, gutterBottom: 0 };
-var same = (a, b) => a.left === b.left && a.right === b.right && a.vertical === b.vertical && a.gutterRight === b.gutterRight && a.gutterBottom === b.gutterBottom;
-function useScrollEdges(options = {}) {
-  const { enabled = true, fade = EDGE_FADE, noFade } = options;
-  const elRef = useRef(null);
-  const observer = useRef(null);
-  const borders = useRef({ x: 0, y: 0 });
-  const [state, setState] = useState(NONE);
-  const measure = useCallback(() => {
-    const el = elRef.current;
-    if (!el) return;
-    const next = {
-      left: el.scrollLeft > 1,
-      right: el.scrollLeft + el.clientWidth < el.scrollWidth - 1,
-      vertical: el.scrollHeight > el.clientHeight + 1,
-      gutterRight: Math.max(0, el.offsetWidth - el.clientWidth - borders.current.x),
-      gutterBottom: Math.max(0, el.offsetHeight - el.clientHeight - borders.current.y)
-    };
-    setState((prev) => same(prev, next) ? prev : next);
-  }, []);
-  const ref = useCallback((el) => {
-    observer.current?.disconnect();
-    observer.current = null;
-    elRef.current = el;
-    if (!el || !enabled) return;
-    const style = getComputedStyle(el);
-    const px = (v) => parseFloat(v) || 0;
-    borders.current = { x: px(style.borderLeftWidth) + px(style.borderRightWidth), y: px(style.borderTopWidth) + px(style.borderBottomWidth) };
-    measure();
-    if (typeof ResizeObserver === "undefined") return;
-    const o = new ResizeObserver(measure);
-    o.observe(el);
-    for (const child of Array.from(el.children)) o.observe(child);
-    observer.current = o;
-  }, [enabled, measure]);
-  const fadeLeft = state.left && !noFade?.left;
-  const fadeRight = state.right && !noFade?.right;
-  const shown = enabled && (fadeLeft || fadeRight);
-  const { gutterRight: gr, gutterBottom: gb } = state;
-  const fadeLayer = `linear-gradient(to right, ${fadeLeft ? `transparent 0, black ${fade}px` : "black 0"}, ${fadeRight ? `black calc(100% - ${gr + fade}px), transparent calc(100% - ${gr}px)` : "black 100%"})`;
-  const gutters = [gb > 0 && { size: `100% ${gb}px`, position: "0 100%" }, gr > 0 && { size: `${gr}px 100%`, position: "100% 0" }].filter(Boolean);
-  const mask = shown ? {
-    image: [fadeLayer, ...gutters.map(() => "linear-gradient(black, black)")].join(", "),
-    size: ["100% 100%", ...gutters.map((g) => g.size)].join(", "),
-    position: ["0 0", ...gutters.map((g) => g.position)].join(", ")
-  } : void 0;
-  return {
-    /** The scroller's ref (a callback). */
-    ref,
-    /** The scroller itself, for code that moves it. */
-    elRef,
-    measure,
-    /** Content hides past a side edge: the scroller moves sideways, and its edges fade (but those in `noFade`). */
-    overflowing: enabled && (state.left || state.right),
-    /** It scrolls either way, sideways or up and down: a keyboard needs to reach it. */
-    scrollable: enabled && (state.left || state.right || state.vertical),
-    edges: { left: state.left, right: state.right },
-    /** For the scroller: `data-fade` names the faded edges ("left", "right" or "left right"), the style masks them. */
-    fadeProps: {
-      "data-fade": shown ? [fadeLeft && "left", fadeRight && "right"].filter(Boolean).join(" ") : void 0,
-      style: mask ? { maskImage: mask.image, WebkitMaskImage: mask.image, maskSize: mask.size, WebkitMaskSize: mask.size, maskPosition: mask.position, WebkitMaskPosition: mask.position, maskRepeat: "no-repeat", WebkitMaskRepeat: "no-repeat" } : void 0
-    }
-  };
-}
 var HEADER_LAYOUT = {
   row: "flex flex-wrap items-start justify-between gap-ds-4",
   block: "flex flex-col space-y-ds-1.5 grow basis-1/2 break-words max-w-full has-[[data-title-one-line]]:min-w-0",
@@ -5511,8 +5455,11 @@ function TableHeading({ title, description, actions, titleId, descriptionId, ins
     descriptionText(HEADER_LAYOUT.below)
   ] }) });
 }
-var NO_PINS = { start: [], end: [], nameFits: false, frame: 0 };
-var samePins = (a, b) => a.nameFits === b.nameFits && a.frame === b.frame && a.start.join() === b.start.join() && a.end.join() === b.end.join();
+var NO_PINS = { start: [], end: [], nameFits: false, frame: 0, panel: null };
+var samePins = (a, b) => a.nameFits === b.nameFits && a.frame === b.frame && a.start.join() === b.start.join() && a.end.join() === b.end.join() && a.panel?.join() === b.panel?.join();
+function PanelContent({ children }) {
+  return /* @__PURE__ */ jsx(SurfaceBoundary, { children });
+}
 function Table({
   columns: columnsProp,
   data,
@@ -5545,6 +5492,7 @@ function Table({
   "aria-label": ariaLabel,
   ref
 }) {
+  useFramesItself();
   const headingId = useId();
   const titleId = `${headingId}-title`;
   const descriptionId = `${headingId}-description`;
@@ -5686,6 +5634,7 @@ function Table({
       const cells = Array.from(table2.querySelectorAll(":scope > thead > tr > th"));
       if (!cells.length) return;
       const widths = cells.map((c) => c.getBoundingClientRect().width);
+      if (!widths.some((w) => w > 0)) return;
       const start = [];
       let at = 0;
       for (let i = 0; i < lead; i++) {
@@ -5702,7 +5651,9 @@ function Table({
       const frame = scroller.clientWidth;
       const nameFits = nameIndex >= 0 && frame > 0 && at + nameWidth + fromRight <= frame / 2;
       if (nameFits) start.push(at);
-      const next = { start, end, nameFits, frame };
+      const pad3 = (cell, side) => cell ? parseFloat(getComputedStyle(cell)[side]) || 0 : 0;
+      const panel = cells.length > lead ? [at + pad3(cells[lead], "paddingLeft"), pad3(cells[cells.length - 1], "paddingRight")] : null;
+      const next = { start, end, nameFits, frame, panel };
       setPins((prev) => samePins(prev, next) ? prev : next);
     };
     measure();
@@ -5806,8 +5757,8 @@ function Table({
     const row = rootRef.current?.querySelector(was.row);
     if (!row) return;
     const controls = Array.from(row.querySelectorAll(FOCUSABLE));
-    const same2 = was.control === null ? null : controls.find((el) => (el.getAttribute("aria-labelledby") ?? el.getAttribute("aria-label") ?? el.textContent) === was.control);
-    (same2 ?? (row.tabIndex >= 0 ? row : controls[0]))?.focus({ preventScroll: true });
+    const same = was.control === null ? null : controls.find((el) => (el.getAttribute("aria-labelledby") ?? el.getAttribute("aria-label") ?? el.textContent) === was.control);
+    (same ?? (row.tabIndex >= 0 ? row : controls[0]))?.focus({ preventScroll: true });
   }, [isMobile, rootRef]);
   if (isMobile) {
     if (loading) {
@@ -5853,7 +5804,7 @@ function Table({
                 /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
                 /* @__PURE__ */ jsx(CardValue, { value: row[col.key], id: lead + c === nameIndex ? `${headingId}-card-name-${idPart(id)}` : void 0 })
               ] }, col.key)),
-              expandable && renderExpanded && /* @__PURE__ */ jsx("div", { className: "pt-ds-2 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-sm text-[var(--ds-text-secondary)]", children: renderExpanded(row, originalIdx) })
+              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) }) })
             ]
           },
           String(id)
@@ -5953,7 +5904,8 @@ function Table({
           {
             ...marksOf(row, originalIdx),
             className: cn(
-              "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
+              // an opened row's divider is under its panel (A6)
+              !(expandable && isExpanded && renderExpanded) && "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
               // the row's background and its tint change together, so its pinned cells and the rest fade as one
               // (roots.css registers --gs-row-tint as a colour so it can)
               "transition-[background-color,--gs-row-tint]",
@@ -6038,12 +5990,21 @@ function Table({
             ]
           }
         ),
-        expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0", children: /* @__PURE__ */ jsx(
           "td",
           {
             colSpan: cellCount,
-            className: "bg-[var(--ds-bg-muted)] px-ds-6 py-ds-4 text-sm text-[var(--ds-text-primary)]",
-            children: /* @__PURE__ */ jsx("div", { "data-row-panel": "", className: "sticky left-ds-6", style: pins.frame ? { maxWidth: `calc(${pins.frame}px - 2 * var(--ds-space-6))` } : void 0, children: renderExpanded(row, originalIdx) })
+            className: cn("py-ds-4 text-sm text-[var(--ds-text-primary)]", !pins.panel && (density === "compact" ? "px-ds-3" : "px-ds-4")),
+            style: pins.panel ? { paddingLeft: pins.panel[0], paddingRight: pins.panel[1] } : void 0,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-row-panel": "",
+                className: "sticky",
+                style: pins.panel ? { left: pins.panel[0], maxWidth: pins.frame ? pins.frame - pins.panel[0] - pins.panel[1] : void 0 } : { left: 0 },
+                children: /* @__PURE__ */ jsx(PanelContent, { children: renderExpanded(row, originalIdx) })
+              }
+            )
           }
         ) })
       ] }, String(id));
@@ -6244,12 +6205,15 @@ function SegmentedControl({
       onKeyDown: handleKeyDown,
       className: cn(
         "relative items-center",
-        fullWidth ? "flex w-full" : "inline-flex",
+        // Sprint 25.14 A21: in a Field's column a track that isn't full width keeps its own width; w-fit, not self-start,
+        // so a row or a centred column still aligns it (the review of 30 September)
+        fullWidth ? "flex w-full" : "inline-flex w-fit",
         containerPadding[size],
         containerHeight[size],
         "bg-[var(--ds-bg-muted)]",
         "rounded-[var(--ds-radius-lg)]",
-        variant === "default" && "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+        // 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)]",
         control.invalid && "border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]",
         className
       ),
@@ -6736,6 +6700,7 @@ function WeekView({
   const hasAllDay = allDayEvents.some((d) => d.length > 0);
   const containerRef = useRef(null);
   const syncingScroll = useRef(false);
+  const { ref: edgesRef, measure: measureEdges, fadeProps: edgeFade } = useScrollEdges();
   const handleScroll = useCallback((e) => {
     if (syncingScroll.current) return;
     syncingScroll.current = true;
@@ -6761,7 +6726,7 @@ function WeekView({
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "flex flex-col h-full overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]", children: [
       /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]" }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { ref: edgesRef, onScroll: measureEdges, ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "grid",
@@ -6801,7 +6766,7 @@ function WeekView({
     ] }),
     hasAllDay && /* @__PURE__ */ jsxs("div", { className: "flex border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] bg-[var(--ds-bg-muted)]/30", children: [
       /* @__PURE__ */ jsx("div", { className: "w-14 shrink-0 border-r-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-2xs text-[var(--ds-text-muted)] px-ds-1 py-ds-1 text-right", children: "all-day" }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "grid",
@@ -6838,7 +6803,7 @@ function WeekView({
         },
         h
       )) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { ...edgeFade, className: "flex-1 overflow-x-auto gs-scrollbar-none", "data-week-scroll": true, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "relative",
@@ -7882,7 +7847,6 @@ function AvatarGroup({ items, max = 4, size = "sm", ring = "canvas", onOverflowC
           alt: item.alt ?? item.name ?? initials,
           initials,
           size,
-          status: item.status,
           color: item.color,
           className: ringClass
         },
@@ -8201,6 +8165,7 @@ function VerticalLayout({ items, className }) {
   ] }, i)) });
 }
 function Timeline({ items: allItems, orientation = "vertical", minItemWidth = 200, className, ref, pager }) {
+  useScrollsInside();
   useWholeListCheck("Timeline", allItems.length, pager);
   const items = pagerPart(allItems, pager);
   const measureRef = useRef(null);
@@ -8287,12 +8252,27 @@ var Collapsible = Object.assign(CollapsibleRoot, {
   Trigger: CollapsibleTrigger,
   Content: CollapsibleContent
 });
+var SYMBOL = /[⌘⇧⌥⌃⎋⏎↵⌫⌦⇥↑↓←→]/u;
+function keyParts(text) {
+  const parts = [];
+  let run = "";
+  for (const ch of Array.from(text)) {
+    if (SYMBOL.test(ch)) {
+      if (run.trim()) parts.push(run.trim());
+      run = "";
+      parts.push(ch);
+    } else run += ch;
+  }
+  if (run.trim()) parts.push(run.trim());
+  return parts;
+}
 function Kbd({ children, className }) {
+  const parts = typeof children === "string" ? keyParts(children) : null;
   return /* @__PURE__ */ jsx(
     "kbd",
     {
       className: cn(
-        "inline-flex items-center justify-center min-w-[2.5em] px-ds-1.5 py-ds-0.5",
+        "inline-flex items-center justify-center gap-[0.25em] min-w-[2.5em] px-ds-1.5 py-ds-0.5",
         "text-xs leading-none font-[family-name:var(--ds-font-mono)]",
         "text-[var(--ds-text-secondary)]",
         "bg-[var(--ds-bg-surface)]",
@@ -8301,7 +8281,7 @@ function Kbd({ children, className }) {
         "rounded-[var(--ds-radius-sm)]",
         className
       ),
-      children
+      children: parts && parts.length > 1 ? parts.map((p, i) => /* @__PURE__ */ jsx("span", { children: p }, i)) : children
     }
   );
 }
@@ -8898,7 +8878,8 @@ function ChatInputBar({ onSend, busy, onStop, onAttach, onVoice, placeholder })
       className: cn(
         "flex flex-col",
         "rounded-[var(--ds-radius-lg)]",
-        "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
+        // Sprint 25.14 A20: the composer is a field, its edge at 3:1 like every other control's
+        "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
         "bg-[var(--ds-input-bg)]",
         "shadow-[var(--ds-input-shadow)]",
         FOCUS_WITHIN_RING,
@@ -9191,6 +9172,28 @@ function useCornerInset(corner, inset, priority, target) {
     return claimCornerInset(corner, inset, priority, el);
   }, [corner, inset, priority, target]);
 }
+function Sheet({ open, onClose: onCloseProp, title, children, footer, dirty, onDiscard, snapPoints = [0.5, 0.92], container, flush, keepMounted = false, id, labelledBy }) {
+  const { marked, mark } = useOverlayMark(open);
+  const guard = useDirtyGuard(dirty ?? marked, onCloseProp, onDiscard);
+  return /* @__PURE__ */ jsx(
+    DrawerPanel,
+    {
+      form: "sheet",
+      open,
+      onClose: guard.requestClose,
+      title,
+      footer,
+      container,
+      flush,
+      snapPoints,
+      keepMounted,
+      id,
+      labelledBy,
+      confirm: /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
+      children: /* @__PURE__ */ jsx(DrawerFooterCtx, { value: null, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: guard.requestClose, children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children }) }) })
+    }
+  );
+}
 var DEFAULT_OFFSET = "var(--ds-space-4)";
 var CORNER_PANEL_ANCHOR_INSET = "calc(var(--ds-space-12) + var(--ds-space-3))";
 function CornerPanel({
@@ -9475,6 +9478,7 @@ var StackedList = forwardRef(function StackedList2({
   hover,
   pager
 }, ref) {
+  useScrollsInside();
   const isPhone = useBreakpoint("sm");
   const inCard = useContext(CardSurfaceCtx);
   const inPane = useContext(SplitPaneCtx);
@@ -10706,6 +10710,7 @@ function Gantt({
   "aria-label": ariaLabel,
   className
 }) {
+  useScrollsInside();
   const [zoomState, setZoomState] = useState(defaultZoom);
   const zoom = zoomProp ?? zoomState;
   const changeZoom = (next) => {
@@ -11523,14 +11528,17 @@ function TabButton({
       onClick: disabled ? void 0 : () => onTabChange(id),
       onKeyDown,
       className: cn(
-        "px-ds-4 py-ds-2.5 text-sm font-medium",
+        // Sprint 25.14 A38: a flex box, so the label sits in the middle of the tab. On a text line an icon's baseline
+        // pushed the line 3 px taller and the label to its top (R28-72); a tab with an icon is now as tall as one
+        // without, as a truncating tab (flex already) always was.
+        "flex items-center justify-center px-ds-4 py-ds-2.5 text-sm font-medium",
         // never wrap: the strip scrolls when the tabs do not fit (round 17, 54.4)
         !fullWidth && !truncate && "shrink-0 whitespace-nowrap",
         disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer",
         "transition-colors duration-[var(--ds-transition-speed)]",
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         fullWidth && "flex-1",
-        truncate && "flex-1 min-w-0 flex items-center",
+        truncate && "flex-1 min-w-0 justify-start",
         "rounded-[var(--ds-nav-h-item-radius)]",
         isActive ? "bg-[var(--ds-nav-h-active-bg)] text-[var(--ds-nav-h-active-text)] border-[var(--ds-accent-primary)]" : "text-[var(--ds-nav-h-inactive-text)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-nav-h-hover-bg)]",
         className
@@ -13737,7 +13745,8 @@ function pageMaxWidth(resolved) {
 }
 var paddingClasses = {
   none: "",
-  default: "px-ds-6",
+  // the page's gutter, which an overlay's header, body and footer share (Sprint 25.14 A36)
+  default: "px-[var(--ds-page-gutter)]",
   wide: "px-ds-10"
 };
 var verticalPaddingClasses = {
@@ -14065,10 +14074,18 @@ function Caption({ children, onLight, onTint }) {
     onLight ? "text-[var(--ds-text-on-primary)]/80" : onTint ? "text-[var(--ds-text-muted-on-tint)]" : "text-[var(--ds-text-secondary)]"
   ), children });
 }
+var ON_BAND_STRIP = cn(
+  "rounded-[var(--ds-radius-md)] px-ds-3 py-ds-2 border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+  "bg-[var(--ds-bg-surface)] supports-[color:oklch(from_red_l_c_h)]:bg-[oklch(from_var(--ds-bg-surface)_l_c_h_/_max(alpha,min(1,alpha*1000)*0.6))]",
+  GLASS_SURFACE
+);
 function TabRow({ children, hasCaption, className, onBand }) {
   const [row, setRow] = useState(null);
   const value = useMemo(() => ({ row, hasCaption }), [row, hasCaption]);
-  return /* @__PURE__ */ jsx("div", { ref: setRow, className: cn(className, onBand && "mx-0 rounded-[var(--ds-radius-md)] bg-[var(--ds-bg-surface)] px-ds-3 py-ds-2"), children: /* @__PURE__ */ jsx(HeaderTabRowContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsx("div", { ref: setRow, className: cn(className, onBand && cn("mx-0", ON_BAND_STRIP)), children: /* @__PURE__ */ jsx(HeaderTabRowContext.Provider, { value, children }) });
+}
+function FilterRow({ children, className, onBand }) {
+  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx(FilterRowContext.Provider, { value: true, children: /* @__PURE__ */ jsx("div", { "data-gs": "filter-row", className: cn("flex items-center flex-wrap gap-ds-3", className, onBand && cn("w-fit max-w-full", ON_BAND_STRIP)), children }) }) });
 }
 var FLOATING_HEADER = cn(
   "rounded-[var(--ds-radius-md)]",
@@ -14356,7 +14373,7 @@ function DefaultHeader({
             ] }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
           ] }),
-          filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
+          filters && /* @__PURE__ */ jsx(FilterRow, { className: "mt-ds-4", children: filters }),
           tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", children: tabs })
         ] })
       ]
@@ -14468,7 +14485,9 @@ function ColourfulHeader({
             style: {
               maxWidth: gutter ? contentMaxWidth ?? "var(--ds-bp-xl)" : void 0,
               containerType: "inline-size",
-              ...overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : {}
+              // under the overlap, the gap from the header's last row to the cards is the page's own (space-6): the band's
+              // bottom edge counts in it (the owner, 30 September: 26 px above the cards, 24 below)
+              ...overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px) - ${isBold && !isFloating ? "2px" : "var(--ds-border-width)"})` } : {}
             },
             children: [
               focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack, onLight: isBold }),
@@ -14497,7 +14516,7 @@ function ColourfulHeader({
                 ] }),
                 actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions })
               ] }),
-              filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
+              filters && /* @__PURE__ */ jsx(FilterRow, { className: "mt-ds-4", onBand: isBold, children: filters }),
               tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", onBand: isBold, children: tabs })
             ]
           }
@@ -14683,7 +14702,7 @@ function SnappingHeader({
               actions && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) })
             ] }),
             description && /* @__PURE__ */ jsx(ClampedText, { className: "mt-ds-1 text-sm text-[var(--ds-text-secondary)]", children: description }),
-            filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-3", children: filters }) }),
+            filters && /* @__PURE__ */ jsx(FilterRow, { className: "mt-ds-3", children: filters }),
             expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-3", children: expandedContent }),
             tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-3 -mx-ds-1", children: tabs })
           ] }) : /* @__PURE__ */ jsxs(
@@ -14697,7 +14716,7 @@ function SnappingHeader({
                   hasBreadcrumbs && !hideExpandedBreadcrumbs ? "pt-ds-3" : "pt-ds-6"
                 ]
               ),
-              style: !collapsed && isColourful && overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px))` } : void 0,
+              style: !collapsed && isColourful && overlapActive ? { paddingBottom: `calc(var(--ds-space-6) + var(--ds-overlap, 0px) - ${isBoldColourful && !(isFloating && !wrapperHasCard) ? "2px" : "var(--ds-border-width)"})` } : void 0,
               children: [
                 !collapsed && focusBack && /* @__PURE__ */ jsx(BackLink, { onClick: focusBack, onLight }),
                 !collapsed && hasBreadcrumbs && !hideExpandedBreadcrumbs && /* @__PURE__ */ jsx(Breadcrumbs3, { items: breadcrumbs, onLight, onTint, pill: breadcrumbPill, separator: breadcrumbSeparator }),
@@ -14752,7 +14771,7 @@ function SnappingHeader({
                   ] }),
                   actions && (collapsed ? /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }))
                 ] }),
-                !collapsed && filters && /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: "sm", children: /* @__PURE__ */ jsx("div", { className: "flex items-center flex-wrap gap-ds-3 mt-ds-4", children: filters }) }),
+                !collapsed && filters && /* @__PURE__ */ jsx(FilterRow, { className: "mt-ds-4", onBand: isBoldColourful, children: filters }),
                 !collapsed && expandedContent && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: expandedContent }),
                 !collapsed && tabs && /* @__PURE__ */ jsx(TabRow, { hasCaption: !!caption, className: "mt-ds-4 -mx-ds-1", onBand: isBoldColourful, children: tabs })
               ]
@@ -14989,6 +15008,73 @@ function Dock({
     }
   );
 }
+function resolveNavItemType(type) {
+  return type === "default" ? "tint" : type;
+}
+var NavbarTypeContext = createContext("tint");
+var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href, onClick, type: typeProp, className, children }, ref) {
+  const contextType = useContext(NavbarTypeContext);
+  const type = resolveNavItemType(typeProp ?? contextType);
+  const baseClasses = cn(
+    "inline-flex items-center gap-ds-2 cursor-pointer select-none whitespace-nowrap",
+    // one line: the navbar measures each link (round 12)
+    "transition-colors duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+    "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+    "text-[length:var(--ds-font-size-sm)]"
+  );
+  const typeClasses = getTypeClasses(type, active);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      ref,
+      href: href ?? "#",
+      onClick,
+      "aria-current": active ? "page" : void 0,
+      className: cn(baseClasses, typeClasses, className),
+      children: [
+        icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 }),
+        children ?? label,
+        type === "underline" && active && /* @__PURE__ */ jsx(NavUnderline, {})
+      ]
+    }
+  );
+});
+function getTypeClasses(type, active) {
+  switch (type) {
+    case "pill":
+      return cn(
+        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
+        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+      );
+    case "underline":
+      return cn(
+        "px-ds-2 py-ds-2 relative",
+        active ? "text-[var(--ds-text-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
+      );
+    case "minimal":
+      return cn(
+        "px-ds-2 py-ds-1",
+        active ? "text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
+      );
+    case "tint":
+      return cn(
+        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
+        active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
+      );
+  }
+}
+function NavUnderline() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "absolute bottom-0 left-ds-1 right-ds-1 rounded-t-full bg-[var(--ds-accent-primary)]",
+      style: { height: "2px" }
+    }
+  );
+}
+function navItemClasses(type, active) {
+  return cn("text-[length:var(--ds-font-size-sm)]", getTypeClasses(type, active));
+}
 function TruncSpan({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
   const el = /* @__PURE__ */ jsx("span", { ref, className: cn("truncate", className), children });
@@ -14999,7 +15085,7 @@ function NavMenu({
   label,
   items,
   active = false,
-  type = "tint",
+  type: typeProp,
   onItemClick,
   className
 }) {
@@ -15047,27 +15133,14 @@ function NavMenu({
   const hasActiveChild = active || items.some(
     (it) => it.active || it.children?.some((c) => c.active)
   );
+  const contextType = useContext(NavbarTypeContext);
+  const type = resolveNavItemType(typeProp ?? contextType);
   const isUnderline = type === "underline";
-  const isMinimal = type === "minimal";
-  const isPill = type === "pill";
   const triggerClasses = cn(
-    "inline-flex items-center gap-ds-1 cursor-pointer transition-colors whitespace-nowrap",
+    "inline-flex items-center gap-ds-1 cursor-pointer select-none whitespace-nowrap",
+    "transition-colors duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
     "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-    isUnderline ? cn(
-      "px-ds-3 py-ds-2 text-sm border-b-2 -mb-[2px]",
-      hasActiveChild ? "border-[var(--ds-accent-primary)] text-[var(--ds-text-primary)] font-medium" : "border-transparent text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:border-[var(--ds-border-default)]"
-    ) : isMinimal ? cn(
-      "px-ds-2 py-ds-1 text-sm",
-      hasActiveChild ? "text-[var(--ds-text-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]"
-    ) : isPill ? cn(
-      "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)]",
-      hasActiveChild ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
-    ) : cn(
-      // tint (and the deprecated `default` alias) — the same soft accent fill
-      // NavItem uses, so a menu trigger and a link read as one row (decision 30).
-      "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)]",
-      hasActiveChild ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
-    ),
+    navItemClasses(type, hasActiveChild),
     className
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -15089,7 +15162,8 @@ function NavMenu({
               size: 12,
               className: cn("transition-transform", open && "rotate-180")
             }
-          )
+          ),
+          isUnderline && hasActiveChild && /* @__PURE__ */ jsx(NavUnderline, {})
         ]
       }
     ),
@@ -15200,67 +15274,6 @@ function NavMenuGroup({
     )) })
   ] });
 }
-function resolveNavItemType(type) {
-  return type === "default" ? "tint" : type;
-}
-var NavbarTypeContext = createContext("tint");
-var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href, onClick, type: typeProp, className, children }, ref) {
-  const contextType = useContext(NavbarTypeContext);
-  const type = resolveNavItemType(typeProp ?? contextType);
-  const baseClasses = cn(
-    "inline-flex items-center gap-ds-2 cursor-pointer select-none whitespace-nowrap",
-    // one line: the navbar measures each link (round 12)
-    "transition-colors duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-    "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-    "text-[length:var(--ds-font-size-sm)]"
-  );
-  const typeClasses = getTypeClasses(type, active);
-  return /* @__PURE__ */ jsxs(
-    "a",
-    {
-      ref,
-      href: href ?? "#",
-      onClick,
-      "aria-current": active ? "page" : void 0,
-      className: cn(baseClasses, typeClasses, className),
-      children: [
-        icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16 }),
-        children ?? label,
-        type === "underline" && active && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "absolute bottom-0 left-ds-1 right-ds-1 rounded-t-full bg-[var(--ds-accent-primary)]",
-            style: { height: "2px" }
-          }
-        )
-      ]
-    }
-  );
-});
-function getTypeClasses(type, active) {
-  switch (type) {
-    case "pill":
-      return cn(
-        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
-        active ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
-      );
-    case "underline":
-      return cn(
-        "px-ds-2 py-ds-2 relative",
-        active ? "text-[var(--ds-text-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
-      );
-    case "minimal":
-      return cn(
-        "px-ds-2 py-ds-1",
-        active ? "text-[var(--ds-accent-primary)] font-medium" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
-      );
-    case "tint":
-      return cn(
-        "px-ds-2 py-ds-1 rounded-[var(--ds-radius-sm)]",
-        active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
-      );
-  }
-}
 var DEFAULT_BUTTON_ATTR = "data-dialog-default-button";
 var sizeClasses = {
   // round 16 (the owner's item 5): the small dialog is 448 px, not 384 — a delete confirmation with a typed field was cramped
@@ -15281,6 +15294,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
   const dialogRef = useRef(null);
   const opener = useRef(null);
   const defaultButtonRef = useRef(null);
+  const bodyRef = useScrollbarInset();
   const onCloseRef = useLatest(onClose);
   const onSubmitRef = useLatest(onSubmit);
   const isTopLayer = useOverlayLayer(open);
@@ -15326,7 +15340,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
       "div",
       {
         ref: overlayRef,
-        className: "fixed inset-0 z-[var(--ds-z-modal)] flex items-center justify-center p-ds-4",
+        className: cn("fixed inset-0 z-[var(--ds-z-modal)] flex items-center justify-center", !isMobile && "p-ds-4"),
         children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -15378,29 +15392,20 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                     "aria-describedby": description ? descriptionId : void 0,
                     style: { containerType: "inline-size" },
                     className: cn(
-                      "relative z-10 w-full",
+                      // a column: the title row, a body that scrolls when it is taller than the room, and the footer (Sprint 25.14,
+                      // with A36's full-screen phone dialog: its content ran past the screen with the footer cut off)
+                      "relative z-10 w-full flex flex-col max-h-full",
                       isMobile ? "max-w-none h-full" : sizeClasses[size],
                       OVERLAY_SURFACE,
                       "text-[var(--ds-text-primary)]",
                       GLASS_OVERLAY,
-                      "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-                      isMobile ? "rounded-none" : "rounded-[var(--ds-radius-xl)]",
+                      // full screen on a phone: no edge to draw, so the content sits at the gutter from the screen's edge
+                      isMobile ? "rounded-none" : "rounded-[var(--ds-radius-xl)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
                       "overflow-hidden",
                       "animate-in fade-in-0 zoom-in-95"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: onClose,
-                          ...{ [OVERLAY_CLOSE_ATTR]: "" },
-                          className: "absolute right-4 top-4 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
-                          "aria-label": "Close",
-                          children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("div", { className: "p-ds-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-ds-3", children: [
+                      /* @__PURE__ */ jsxs("div", { className: cn("shrink-0 flex items-start gap-ds-3 pt-ds-6 px-[var(--ds-page-gutter)]", children ? "pb-ds-4" : "pb-ds-6"), children: [
                         variant === "destructive" && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center shrink-0 w-10 h-10 rounded-[var(--ds-radius-full)] bg-[var(--ds-status-error-bg)]", children: /* @__PURE__ */ jsx(Icon, { name: "warning", size: 20, className: "text-[var(--ds-status-error)]" }) }),
                         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
                           /* @__PURE__ */ jsx(
@@ -15411,16 +15416,39 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                               children: title
                             }
                           ),
-                          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description }),
-                          children && /* @__PURE__ */ jsx("div", { className: "mt-ds-4", children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) }) })
-                        ] })
-                      ] }) }),
+                          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-ds-2 text-sm text-[var(--ds-text-muted)]", children: description })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: onClose,
+                            ...{ [OVERLAY_CLOSE_ATTR]: "" },
+                            className: "shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                            "aria-label": "Close",
+                            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
+                          }
+                        )
+                      ] }),
+                      children && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ref: bodyRef,
+                          className: "min-h-0 flex-[0_1_auto] overflow-y-auto pb-ds-6",
+                          style: {
+                            paddingLeft: variant === "destructive" ? "calc(var(--ds-page-gutter) + 2.5rem + var(--ds-space-3))" : "var(--ds-page-gutter)",
+                            paddingRight: insetLessScrollbar("var(--ds-page-gutter)")
+                          },
+                          children: /* @__PURE__ */ jsx(SurfaceBoundary, { children: /* @__PURE__ */ jsx(DrawerFooterCtx, { value: null, children: /* @__PURE__ */ jsx(OverlayMarkScope, { mark, children: /* @__PURE__ */ jsx(OverlayCloseCtx, { value: onClose, children }) }) }) })
+                        }
+                      ),
+                      isMobile && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "flex-1 min-h-0" }),
                       /* @__PURE__ */ jsx(DiscardConfirm, { open: guard.confirming, onKeep: guard.keep, onDiscard: guard.discard }),
                       footer && /* @__PURE__ */ jsx("div", { className: cn(
-                        "flex justify-end gap-ds-2 p-ds-4",
+                        "shrink-0 flex justify-end gap-ds-2 py-ds-4 px-[var(--ds-page-gutter)]",
                         "border-t-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
                         "bg-[var(--ds-bg-muted)]",
-                        "rounded-b-[var(--ds-radius-xl)]"
+                        !isMobile && "rounded-b-[var(--ds-radius-xl)]"
                       ), children: footer })
                     ]
                   }
@@ -17010,6 +17038,6 @@ var TextOverflow = forwardRef(function TextOverflow2({
   return /* @__PURE__ */ jsx(Tooltip, { content: resolvedTooltipContent, children: content });
 });
 
-export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, Breadcrumbs, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Checkbox, CheckboxGroup, CheckboxGroupItem, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DataList, DatePicker, DateRangePicker, DescriptionList, Dialog, Dock, DropdownMenu, EmptyState, EntityCell, FileUpload, FormWrapper, Gantt, HoverCard, Kbd, Launcher, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, Tag, TagInput, TextOverflow, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, Toast, ToastProvider, Tour, TransferList, TreeView, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useContentWidth, useDestructiveAction, useFittedLabels, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, Avatar, AvatarGroup, BottomNav, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map