gridsmith-ui 0.27.0 → 0.29.0

package/dist/index.js

@@ -1,37 +1,41 @@
 "use client";
-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-R5NFCEZ3.js';
-export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-R5NFCEZ3.js';
-import { Skeleton, TITLE_TEXT, useFormatLocale, useHydrated, useToday, LocaleContext } from './chunk-64TXZ4L7.js';
-export { Skeleton, useFormatLocale, useHydrated } from './chunk-64TXZ4L7.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-OPFJEL3Z.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-OPFJEL3Z.js';
+import { Skeleton, TITLE_TEXT, useFormatLocale, useHydrated, useToday, LocaleContext } from './chunk-2ROVDVLZ.js';
+export { Skeleton, useFormatLocale, useHydrated } from './chunk-2ROVDVLZ.js';
 import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
-import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-5TUVX4B2.js';
-export { Avatar } from './chunk-5TUVX4B2.js';
-import { Link } from './chunk-IXR4UEF4.js';
-export { CodeBlock, Divider, Link } from './chunk-IXR4UEF4.js';
-import { useFillHeight, FillContext, useKeyboardScroll, FOCUS_INSET } from './chunk-SFY2KMHG.js';
-import { Badge } from './chunk-PO65I3MQ.js';
-export { Badge } from './chunk-PO65I3MQ.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, OutsideField, NumberInput, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-2CKSSWYG.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-2CKSSWYG.js';
-import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, formatRelativeTime, thresholdOf, toMillis, formatFullTime, preferenceActionKey, DAY, HOUR, MINUTE } from './chunk-EKBWWA6P.js';
-export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, formatFullTime, formatRelativeTime, preferenceActionKey, usePreferences } from './chunk-EKBWWA6P.js';
+import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-EIWXVICU.js';
+export { Avatar } from './chunk-EIWXVICU.js';
+import { Link } from './chunk-DQCHCLEJ.js';
+export { CodeBlock, Divider, Link } from './chunk-DQCHCLEJ.js';
+import { useFillHeight, FillContext, useKeyboardScroll } from './chunk-FD4YED7O.js';
+import { Badge } from './chunk-TRDXWHD2.js';
+export { Badge } from './chunk-TRDXWHD2.js';
+import { inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, CardValue } from './chunk-BRAXJEEP.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, OutsideField, NumberInput, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-YUTF2X6B.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-YUTF2X6B.js';
+import { Button, ControlSizeContext, triggerType, Spinner, useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, formatRelativeTime, thresholdOf, toMillis, formatFullTime, preferenceActionKey, DAY, HOUR, MINUTE } from './chunk-R4GXKH4U.js';
+export { Button, ButtonSizeContext, ControlSizeContext, PreferencesContext, Spinner, formatFullTime, formatRelativeTime, preferenceActionKey, usePreferences } from './chunk-R4GXKH4U.js';
 import { elementType, formatLocale, localeChoice } from './chunk-OYNUU346.js';
+import { useInputModality } from './chunk-7RKC5C7G.js';
+export { INPUT_MODALITY_ATTR, inputModality, installInputModality, useInputModality } from './chunk-7RKC5C7G.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-CRQ6KCRD.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-CRQ6KCRD.js';
 import { FormChangeCtx, useReportedChange, useOptionalFormContext, FormCtx } from './chunk-XVB55M3N.js';
 export { useFormContext } from './chunk-XVB55M3N.js';
 import { CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, SurfaceBoundary, useFramesItself, TableCardCtx } from './chunk-QM4SJKWV.js';
+import { useRevealFocus } from './chunk-HTXP5BMM.js';
+export { useRevealFocus } from './chunk-HTXP5BMM.js';
 import { FOCUSABLE, usePopupFocus, FIELD, ZOOM_KEYS, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberFocus, focusInitial, OVERLAY_CLOSE_ATTR, rovingTabStop, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus } from './chunk-ZI3OQDET.js';
 export { useGridKeyboard } from './chunk-ZI3OQDET.js';
-import { useTextOverflow, Tooltip } from './chunk-MD2EFMES.js';
-export { Tooltip, useTextOverflow } from './chunk-MD2EFMES.js';
+import { useTextOverflow, Tooltip } from './chunk-GXMTS3YD.js';
+export { Tooltip, useTextOverflow } from './chunk-GXMTS3YD.js';
 import { mergeRefs, Slot } from './chunk-7Q46JXSK.js';
 import { Icon, slotIcon, warnOnce } from './chunk-TJEV7YAY.js';
 import { usePosition } from './chunk-HP7WUZPK.js';
 import { useLatest } from './chunk-WH2FUFAC.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 { cn, FOCUS_RING, GLASS_SURFACE, FOCUS_INSET, PEER_FOCUS_RING, GLASS_BACKDROP, GLASS_DROPDOWN, lockBodyScroll, unlockBodyScroll, OVERLAY_SURFACE, GLASS_OVERLAY, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, GROUP_FOCUS_RING, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, ERROR_FOCUS_RING, FIELD_FOCUS_RING } from './chunk-66JJCQU3.js';
+import { createContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useMemo, useContext, isValidElement, useId, memo, useImperativeHandle, useEffect, Children, Fragment as Fragment$1, cloneElement, useSyncExternalStore } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -114,7 +118,8 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
           "data-gs": "menu",
           onKeyDown: handleMenuKeyDown,
           className: cn(
-            "fixed z-[var(--ds-z-popover)] min-w-[180px] p-ds-1",
+            // the items' outline has its 4 px of room at any density (Sprint 30, P3)
+            "fixed z-[var(--ds-z-popover)] min-w-[180px] p-[max(var(--ds-space-1),4px)]",
             "bg-[var(--ds-bg-surface-elevated)]",
             GLASS_DROPDOWN,
             "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
@@ -145,8 +150,8 @@ function DropdownMenu({ trigger, items, align = "end", className, container }) {
                 className: cn(
                   "flex items-center gap-ds-2 w-full text-left px-ds-3 py-ds-2 text-sm cursor-pointer",
                   "transition-colors rounded-[var(--ds-radius-sm)]",
-                  "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                  item.disabled ? "opacity-disabled cursor-not-allowed" : item.variant === "destructive" ? "text-[var(--ds-status-error)] hover:bg-[var(--ds-status-error-bg)] focus-visible:bg-[var(--ds-status-error-bg)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)] focus-visible:bg-[var(--ds-bg-emphasis)]"
+                  FOCUS_RING,
+                  item.disabled ? "opacity-disabled cursor-not-allowed" : item.variant === "destructive" ? "text-[var(--ds-status-error-text)] hover:bg-[var(--ds-status-error-bg)] focus-visible:bg-[var(--ds-status-error-bg)]" : "text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-emphasis)] focus-visible:bg-[var(--ds-bg-emphasis)]"
                 ),
                 children: [
                   item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 16, className: "shrink-0" }),
@@ -176,7 +181,7 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
     {
       className: cn(
         "flex items-center gap-ds-3 rounded-[var(--ds-radius-md)]",
-        "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)]",
+        "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-accent-ink)]",
         "shadow-[var(--ds-shadow-dropdown),var(--ds-glass-inset)]",
         "[backdrop-filter:var(--ds-glass-filter)] [-webkit-backdrop-filter:var(--ds-glass-filter)]",
         className
@@ -185,7 +190,7 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
       role: "toolbar",
       "aria-label": `${selectedCount} items selected`,
       children: [
-        /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-accent-primary)] tabular-nums whitespace-nowrap", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[var(--ds-accent-ink)] tabular-nums whitespace-nowrap", children: [
           selectedCount,
           " selected"
         ] }),
@@ -213,7 +218,7 @@ function BulkActionBar({ selectedCount, actions, onClearSelection, className })
           {
             type: "button",
             onClick: onClearSelection,
-            className: "ml-auto text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+            className: cn("ml-auto text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer", FOCUS_RING),
             "aria-label": "Clear selection",
             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
           }
@@ -234,6 +239,7 @@ var TEXT_SIZE = {
 };
 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);
+  useInputModality();
   const contextSize = useContext(ControlSizeContext);
   const control = useFieldControl({ ...wiring, error: error || void 0 });
   const size = sizeProp ?? contextSize ?? "md";
@@ -352,7 +358,7 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors duration-[var(--ds-transition-speed)]",
           !control.invalid && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-          control.invalid ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
+          control.invalid ? ERROR_HAS_FOCUS_RING : FIELD_HAS_FOCUS_RING,
           disabled && "opacity-disabled pointer-events-none"
         ),
         children: [
@@ -405,7 +411,7 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
                 onChange("");
                 setQuery("");
               },
-              className: "mr-ds-2 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer",
+              className: cn("mr-ds-2 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer", FOCUS_RING),
               tabIndex: -1,
               "aria-label": "Clear",
               children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 })
@@ -449,7 +455,7 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
               ),
               children: [
                 /* @__PURE__ */ jsx("span", { className: "flex-1", children: opt.label }),
-                opt.value === value && /* @__PURE__ */ jsx(Icon, { name: "check", size: 14, className: "text-[var(--ds-accent-primary)]" })
+                opt.value === value && /* @__PURE__ */ jsx(Icon, { name: "check", size: 14, className: "text-[var(--ds-accent-ink)]" })
               ]
             },
             opt.value
@@ -620,7 +626,7 @@ function RelativeTimeAt({ at, hours, className }) {
       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),
+      className: cn("rounded-[var(--ds-radius-sm)]", FOCUS_RING, className),
       children: [
         formatRelativeTime(at, { thresholdHours: hours, now, locale }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", suppressHydrationWarning: true, children: `, ${full}` })
@@ -686,7 +692,7 @@ function Checkbox({ checked, onChange: onChangeProp, label, size = "md", disable
               "rounded-[calc(var(--ds-radius-sm)*0.6)]",
               "border-[2px]",
               "transition-all",
-              "peer-focus-visible:shadow-[var(--ds-shadow-focus)]",
+              PEER_FOCUS_RING,
               filled ? cn(CHECK_FILL, "border-[var(--ds-check-border)]") : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
               disabled && "pointer-events-none"
             ),
@@ -715,10 +721,10 @@ var CheckboxGroupContext = createContext(null);
 function CheckboxGroup({ value, onChange, children, className }) {
   return /* @__PURE__ */ jsx(CheckboxGroupContext, { value: { value, onChange }, children: /* @__PURE__ */ jsx("div", { role: "group", className: cn("flex flex-col gap-ds-2", className), children }) });
 }
-function CheckboxGroupItem({ value, label, disabled, groupValue, onGroupChange }) {
+function CheckboxGroupItem({ value, label, disabled }) {
   const ctx = useContext(CheckboxGroupContext);
-  const resolvedValue = ctx?.value ?? groupValue ?? [];
-  const resolvedOnChange = ctx?.onChange ?? onGroupChange;
+  const resolvedValue = ctx?.value ?? [];
+  const resolvedOnChange = ctx?.onChange;
   const checked = resolvedValue.includes(value);
   return /* @__PURE__ */ jsx(
     Checkbox,
@@ -808,7 +814,8 @@ function RadioGroup({ value, onChange: onChangeProp, options, orientation = "ver
                         "bg-[var(--ds-input-bg)]",
                         "transition-colors",
                         selected && "border-[var(--ds-check-border)]",
-                        "group-focus-visible:shadow-[var(--ds-shadow-focus)]"
+                        // keyboard focus is drawn on the radio, not round its label: the button draws none of its own
+                        GROUP_FOCUS_RING
                       ),
                       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) })
@@ -1320,6 +1327,7 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
   const gridRef = useRef(null);
   const generatedId = useId();
   const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
+  useInputModality();
   const inputId = control.id ?? generatedId;
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const year = viewDate.getFullYear();
@@ -1535,8 +1543,10 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
           "px-ds-3 py-ds-2",
-          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
-          open && ACTIVE_RING,
+          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
+          open && (control.invalid || typedInvalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
+          // the segments mark which part has focus (their tint); the field draws the focus (a hover keeps its border)
+          control.invalid || typedInvalid ? ERROR_FOCUS_WITHIN_RING : FIELD_FOCUS_WITHIN_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           "text-[var(--ds-text-primary)]"
         ),
@@ -1562,7 +1572,7 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                   "aria-valuetext": drawn[k] === null ? "empty" : String(drawn[k]),
                   onKeyDown: (e) => onSegmentKeyDown(e, i, spec),
                   onClick: (e) => e.stopPropagation(),
-                  className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", drawn[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
+                  className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-ink)] cursor-text", drawn[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
                   children: shown(spec)
                 }
               )
@@ -1578,7 +1588,7 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
               "aria-expanded": open,
               onClick: () => !disabled && setOpen(!open),
               disabled,
-              className: "shrink-0 -mr-ds-1 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] focus-visible:outline-2 focus-visible:outline-[var(--ds-accent-primary)] disabled:cursor-not-allowed",
+              className: cn("shrink-0 -mr-ds-1 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] disabled:cursor-not-allowed", FOCUS_RING),
               children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 14 })
             }
           )
@@ -1622,11 +1632,11 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                 role: "grid",
                 "aria-label": formatMonthYear(viewDate),
                 onKeyDown: grid.onKeyDown,
-                className: "flex flex-col gap-ds-0.5 tabular-nums",
+                className: "flex flex-col gap-[4px] tabular-nums",
                 style: { padding: "var(--ds-space-2) var(--ds-space-3)" },
                 children: [
-                  /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5 mb-ds-0.5", children: weekdayNames(weekStartsOn, "narrow").map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": weekdayNames(weekStartsOn, "long")[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, i)) }),
-                  weeks.map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5", onMouseLeave: () => setHover(null), children: week.map((day, i) => {
+                  /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-[4px] mb-ds-0.5", children: weekdayNames(weekStartsOn, "narrow").map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": weekdayNames(weekStartsOn, "long")[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, i)) }),
+                  weeks.map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-[4px]", onMouseLeave: () => setHover(null), children: week.map((day, i) => {
                     if (day === null) return /* @__PURE__ */ jsx("div", { role: "gridcell" }, `empty-${i}`);
                     const dateObj = new Date(year, month, day);
                     const isSelected = !!value && isSameDay2(dateObj, value);
@@ -1653,8 +1663,8 @@ function DatePicker({ value, onChange: onChangeProp, placeholder = "Pick a date"
                         className: cn(
                           "w-full aspect-square flex items-center justify-center text-xs",
                           "transition-colors cursor-pointer",
-                          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                          isSelected ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : isOtherEnd ? "bg-[var(--ds-accent-muted)] text-[var(--ds-accent-subtle-text)] font-semibold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : isToday ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
+                          FOCUS_RING,
+                          isSelected ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : isOtherEnd ? "bg-[var(--ds-accent-muted)] text-[var(--ds-accent-subtle-text)] font-semibold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : isToday ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-ink)] text-[var(--ds-accent-ink)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
                           dis && "opacity-disabled cursor-not-allowed hover:bg-transparent"
                         ),
                         children: day
@@ -1769,6 +1779,7 @@ function DateRangePicker({
   const panelRef = useRef(null);
   const generatedId = useId();
   const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
+  useInputModality();
   const triggerId = control.id ?? generatedId;
   const labelledBy = control.labelId ? `${control.labelId} ${triggerId}` : void 0;
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
@@ -1881,7 +1892,7 @@ function DateRangePicker({
           "px-ds-3 py-ds-2",
           !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
           open && (control.invalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
-          control.invalid ? ERROR_FOCUS_RING : FOCUS_RING,
+          control.invalid ? ERROR_FOCUS_RING : FIELD_FOCUS_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           summary ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)]"
         ),
@@ -1922,9 +1933,9 @@ function DateRangePicker({
                 /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: formatMonthRange(months[0], months[1]) }),
                 /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: () => pageMonths(1), "aria-label": "Next month", children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 }) })
               ] }),
-              /* @__PURE__ */ jsx("div", { ref: gridRef, onKeyDown: grid.onKeyDown, className: "flex gap-ds-4 px-ds-3 py-ds-2", onMouseLeave: () => setHover(null), children: months.map((m) => /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": formatMonthYear(m), className: "w-[224px] flex flex-col gap-ds-0.5", children: [
-                /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5 mb-ds-0.5", children: dayNames.map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": dayNamesLong[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, i)) }),
-                getMonthGrid(m.getFullYear(), m.getMonth(), weekStartsOn).map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-ds-0.5", children: week.map((d) => {
+              /* @__PURE__ */ jsx("div", { ref: gridRef, onKeyDown: grid.onKeyDown, className: "flex gap-ds-4 px-ds-3 py-ds-2", onMouseLeave: () => setHover(null), children: months.map((m) => /* @__PURE__ */ jsxs("div", { role: "grid", "aria-label": formatMonthYear(m), className: "w-[224px] flex flex-col gap-[4px]", children: [
+                /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-[4px] mb-ds-0.5", children: dayNames.map((d, i) => /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-label": dayNamesLong[i], className: "text-center text-2xs font-medium text-[var(--ds-text-muted)] py-ds-1", children: d }, i)) }),
+                getMonthGrid(m.getFullYear(), m.getMonth(), weekStartsOn).map((week, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7 gap-[4px]", children: week.map((d) => {
                   if (!isSameMonth(d, m)) return /* @__PURE__ */ jsx("div", { role: "gridcell" }, d.toISOString());
                   const isStart = !!rangeStart && isSameDay(d, rangeStart);
                   const isEnd = !!rangeEnd2 && isSameDay(d, rangeEnd2);
@@ -1949,8 +1960,8 @@ function DateRangePicker({
                       className: cn(
                         "w-full aspect-square flex items-center justify-center text-xs",
                         "transition-colors cursor-pointer",
-                        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-                        isStart || isEnd ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : today !== null && isSameDay(d, today) ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-primary)] text-[var(--ds-accent-primary)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
+                        FOCUS_RING,
+                        isStart || isEnd ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)] font-bold rounded-[var(--ds-radius-sm)]" : between ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-subtle-text)] rounded-none" : today !== null && isSameDay(d, today) ? "border-[length:var(--ds-border-width)] border-[var(--ds-accent-ink)] text-[var(--ds-accent-ink)] font-medium rounded-[var(--ds-radius-sm)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)] rounded-[var(--ds-radius-sm)]",
                         dis && "opacity-disabled cursor-not-allowed hover:bg-transparent"
                       ),
                       children: d.getDate()
@@ -2641,8 +2652,8 @@ function RecurrencePicker({ value, onChange: onChangeProp, start, label, weekSta
               onClick: () => edit({ weekdays: (on ? (custom.weekdays ?? []).filter((x) => x !== d) : [...custom.weekdays ?? [], d]).sort((a, b) => a - b) }),
               className: cn(
                 "inline-flex h-8 min-w-8 items-center justify-center px-ds-2 rounded-[var(--ds-radius-full)] text-xs font-medium",
-                "border-[length:var(--ds-border-width)] cursor-pointer select-none outline-none transition-colors",
-                "focus-visible:shadow-[var(--ds-shadow-focus)]",
+                "border-[length:var(--ds-border-width)] cursor-pointer select-none transition-colors",
+                FOCUS_RING,
                 // chosen: the accent's readable pair, so its text reads 4.5:1 in every theme (the house's one way
                 // to colour text on a colour, as the Calendar's accent events), and the checked border at 3:1
                 // marking the state; the tick colour on the checked fill read 3.2:1 in three themes
@@ -2875,7 +2886,7 @@ function Dialog({ open, onClose: onCloseProp, title, description, children, foot
                             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",
+                            className: cn("shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer", FOCUS_RING),
                             "aria-label": "Close",
                             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 18 })
                           }
@@ -3114,6 +3125,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   const uploadRef = useLatest(upload);
   const overlayMark = useContext(OverlayMarkCtx);
   const reportChange = useContext(FormChangeCtx);
+  useInputModality();
   const field = useField();
   const ownId = useId();
   const inputId = id ?? `${ownId}-input`;
@@ -3309,7 +3321,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
             "transition-colors",
             // 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,
+            invalid ? ERROR_HAS_FOCUS_RING : FIELD_HAS_FOCUS_RING,
             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)" },
@@ -3317,7 +3329,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
             /* @__PURE__ */ jsx("div", { className: cn(
               "flex items-center justify-center w-10 h-10 rounded-[var(--ds-radius-full)] transition-colors",
               "bg-[var(--ds-bg-muted)] group-hover:bg-[var(--ds-accent-subtle)]"
-            ), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)] group-hover:text-[var(--ds-accent-primary)] transition-colors" }) }),
+            ), children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: 20, className: "text-[var(--ds-text-muted)] group-hover:text-[var(--ds-accent-subtle-text)] transition-colors" }) }),
             /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
               /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-[var(--ds-text-primary)]", children: multiple ? "Drop files here or browse" : "Drop a file here or browse" }),
               constraints && /* @__PURE__ */ jsx("p", { id: constraintsId, className: "text-xs text-[var(--ds-text-muted)] mt-ds-1", children: constraints })
@@ -3370,7 +3382,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
               /* @__PURE__ */ jsx(TruncFileName, { className: "text-[var(--ds-text-primary)]", children: item.name }),
               (item.size != null || words) && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)]", children: [item.size != null ? formatSize(item.size) : null, words].filter(Boolean).join(" \xB7 ") }),
               item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: progress, size: "sm", label: `Uploading ${item.name}`, className: "mt-ds-1" }),
-              item.status === "error" && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-xs text-[var(--ds-status-error)]", children: item.error ?? "The upload didn't work." })
+              item.status === "error" && /* @__PURE__ */ jsx("p", { className: "mt-ds-1 text-xs text-[var(--ds-status-error-text)]", children: item.error ?? "The upload didn't work." })
             ] }),
             item.status === "done" && /* @__PURE__ */ jsx(Icon, { name: "check", size: 16, className: "text-[var(--ds-status-success)] shrink-0", "aria-hidden": "true" }),
             running(item) && canCancel && // the visible word starts the name, which says which file (WCAG 2.5.3)
@@ -3511,7 +3523,7 @@ function SliderRange({
                 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)]",
+                FOCUS_RING,
                 !disabled && "cursor-grab active:cursor-grabbing hover:scale-125 active:scale-150"
               ),
               style: { left: `${pct(low)}%` }
@@ -3537,7 +3549,7 @@ function SliderRange({
                 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)]",
+                FOCUS_RING,
                 !disabled && "cursor-grab active:cursor-grabbing hover:scale-125 active:scale-150"
               ),
               style: { left: `${pct(high)}%` }
@@ -3623,11 +3635,14 @@ function TimePicker({
   const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
   const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
+  useInputModality();
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   const triggerRef = useRef(null);
   const buttonRef = useRef(null);
   const panelRef = useRef(null);
+  const [columns, setColumns] = useState(null);
+  useRevealFocus(columns);
   const listboxId = useId();
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "start", offset: 4, flip: true });
   const parsed = parseTime(value);
@@ -3662,9 +3677,9 @@ function TimePicker({
     if (e.key === "ArrowDown") next = current.nextElementSibling;
     else if (e.key === "ArrowUp") next = current.previousElementSibling;
     else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
-      const columns = Array.from(panelRef.current?.querySelectorAll("[data-column]") ?? []);
-      const idx = columns.indexOf(column);
-      const target = columns[idx + (e.key === "ArrowRight" ? 1 : -1)];
+      const columns2 = Array.from(panelRef.current?.querySelectorAll("[data-column]") ?? []);
+      const idx = columns2.indexOf(column);
+      const target = columns2[idx + (e.key === "ArrowRight" ? 1 : -1)];
       next = target?.querySelector('[data-selected="true"]') ?? target?.querySelector("button") ?? null;
     } else return;
     if (next instanceof HTMLElement) {
@@ -3835,8 +3850,10 @@ function TimePicker({
           "shadow-[var(--ds-input-shadow)]",
           "transition-colors",
           "px-ds-3 py-ds-2",
-          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)] focus-within:border-[var(--ds-input-border-hover)]",
-          open && ACTIVE_RING,
+          !control.invalid && !disabled && !open && "hover:border-[var(--ds-input-border-hover)]",
+          open && (control.invalid ? ERROR_ACTIVE_RING : ACTIVE_RING),
+          // the segments mark which part has focus (their tint); the field draws the focus (a hover keeps its border)
+          control.invalid ? ERROR_FOCUS_WITHIN_RING : FIELD_FOCUS_WITHIN_RING,
           disabled && "opacity-disabled cursor-not-allowed",
           "text-[var(--ds-text-primary)]"
         ),
@@ -3863,7 +3880,7 @@ function TimePicker({
                     "aria-valuetext": segs[k] === null ? "empty" : pad2(segs[k]),
                     onKeyDown: (e) => onSegmentKeyDown(e, i, spec),
                     onClick: (e) => e.stopPropagation(),
-                    className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
+                    className: cn("rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-ink)] cursor-text", segs[k] === null && !buffers[k] && "text-[var(--ds-text-muted)]"),
                     children: shown(k, spec)
                   }
                 )
@@ -3885,7 +3902,7 @@ function TimePicker({
                 "aria-valuetext": segs.period ?? "empty",
                 onKeyDown: (e) => onSegmentKeyDown(e, specs.length, null),
                 onClick: (e) => e.stopPropagation(),
-                className: cn("ml-ds-1 rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-primary)] cursor-text", segs.period === null && "text-[var(--ds-text-muted)]"),
+                className: cn("ml-ds-1 rounded-[var(--ds-radius-sm)] px-[2px] outline-none focus:bg-[var(--ds-accent-subtle)] focus:text-[var(--ds-accent-ink)] cursor-text", segs.period === null && "text-[var(--ds-text-muted)]"),
                 children: segs.period ?? "--"
               }
             )
@@ -3901,7 +3918,7 @@ function TimePicker({
               "aria-controls": open ? listboxId : void 0,
               onClick: () => !disabled && setOpen(!open),
               disabled,
-              className: "shrink-0 -mr-ds-1 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] focus-visible:outline-2 focus-visible:outline-[var(--ds-accent-primary)] disabled:cursor-not-allowed",
+              className: cn("shrink-0 -mr-ds-1 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] disabled:cursor-not-allowed", FOCUS_RING),
               children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: 14 })
             }
           )
@@ -3926,8 +3943,8 @@ function TimePicker({
             "rounded-[var(--ds-radius-md)]"
           ),
           style: { top: pos.top, left: pos.left },
-          children: /* @__PURE__ */ jsxs("div", { className: "inline-flex p-ds-1 gap-ds-1 tabular-nums", children: [
-            /* @__PURE__ */ jsx("div", { "data-column": true, className: "max-h-48 overflow-y-auto w-ds-10", children: hours.map((h, i) => /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsxs("div", { ref: setColumns, className: "inline-flex p-ds-1 gap-ds-1 tabular-nums", children: [
+            /* @__PURE__ */ jsx("div", { "data-column": true, className: "flex max-h-48 w-[calc(var(--ds-space-10)+8px)] flex-col gap-[4px] overflow-y-auto p-[4px] scroll-p-[4px]", children: hours.map((h, i) => /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -3938,7 +3955,8 @@ function TimePicker({
                 onClick: () => emitChange(h, parsed.minute, parsed.period),
                 className: cn(
                   "w-full text-center text-sm py-ds-1 rounded-[var(--ds-radius-sm)] cursor-pointer",
-                  "transition-colors focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                  "transition-colors",
+                  FOCUS_RING,
                   (use24Hour ? h === parseInt(value) : h === parsed.hour) ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]"
                 ),
                 children: pad3(h)
@@ -3946,7 +3964,7 @@ function TimePicker({
               h
             )) }),
             /* @__PURE__ */ jsx("div", { className: "w-px bg-[var(--ds-border-subtle)]" }),
-            /* @__PURE__ */ jsx("div", { "data-column": true, className: "max-h-48 overflow-y-auto w-ds-10", children: minutes.map((m, i) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { "data-column": true, className: "flex max-h-48 w-[calc(var(--ds-space-10)+8px)] flex-col gap-[4px] overflow-y-auto p-[4px] scroll-p-[4px]", children: minutes.map((m, i) => /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
@@ -3957,7 +3975,8 @@ function TimePicker({
                 onClick: () => emitChange(parsed.hour, m, parsed.period),
                 className: cn(
                   "w-full text-center text-sm py-ds-1 rounded-[var(--ds-radius-sm)] cursor-pointer",
-                  "transition-colors focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                  "transition-colors",
+                  FOCUS_RING,
                   m === parsed.minute ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]"
                 ),
                 children: pad3(m)
@@ -3966,7 +3985,7 @@ function TimePicker({
             )) }),
             !use24Hour && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("div", { className: "w-px bg-[var(--ds-border-subtle)]" }),
-              /* @__PURE__ */ jsx("div", { "data-column": true, className: "flex flex-col gap-ds-1 w-ds-10", children: ["AM", "PM"].map((p, i) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { "data-column": true, className: "flex flex-col gap-[4px] w-ds-10", children: ["AM", "PM"].map((p, i) => /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -3977,7 +3996,8 @@ function TimePicker({
                   onClick: () => emitChange(parsed.hour, parsed.minute, p),
                   className: cn(
                     "text-xs font-medium py-ds-1 rounded-[var(--ds-radius-sm)] cursor-pointer",
-                    "transition-colors text-center focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                    "transition-colors text-center",
+                    FOCUS_RING,
                     p === parsed.period ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]"
                   ),
                   children: p
@@ -3995,9 +4015,9 @@ function TimePicker({
 var variantStyles = {
   default: "bg-[var(--ds-bg-emphasis)] text-[var(--ds-text-primary)]",
   subtle: "bg-[var(--ds-bg-muted)] text-[var(--ds-text-secondary)]",
-  success: "bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success)] border-[length:var(--ds-border-width)] border-[var(--ds-status-success)]/[0.2]",
+  success: "bg-[var(--ds-status-success-bg)] text-[var(--ds-status-success-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-success)]/[0.2]",
   warning: "bg-[var(--ds-status-warning-bg)] text-[var(--ds-status-warning-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-warning)]/[0.2]",
-  error: "bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]/[0.2]",
+  error: "bg-[var(--ds-status-error-bg)] text-[var(--ds-status-error-text)] border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]/[0.2]",
   outline: "bg-transparent text-[var(--ds-text-primary)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]"
 };
 var sizeStyles = {
@@ -4071,7 +4091,7 @@ var Tag = forwardRef(function Tag2({
         "transition-colors duration-[var(--ds-transition-speed)]",
         sizeStyles[size],
         colorClasses,
-        onClick && !disabled && "cursor-pointer select-none hover:opacity-80",
+        onClick && !disabled && cn("cursor-pointer select-none hover:opacity-80", FOCUS_RING),
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
@@ -4090,7 +4110,7 @@ var Tag = forwardRef(function Tag2({
               "rounded-[var(--ds-radius-sm)]",
               "opacity-60 hover:opacity-100",
               "transition-opacity duration-[var(--ds-transition-speed)] cursor-pointer",
-              "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+              FOCUS_RING
             ),
             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: size === "sm" ? 10 : 12 })
           }
@@ -4115,6 +4135,7 @@ function TagInput({
   "aria-label": ariaLabel
 }) {
   const onChange = useReportedChange(onChangeProp, value);
+  useInputModality();
   const [input, setInput] = useState("");
   const inputRef = useRef(null);
   const addTag = useCallback(
@@ -4187,7 +4208,7 @@ function TagInput({
         "shadow-[var(--ds-input-shadow)]",
         "transition-colors duration-[var(--ds-transition-speed)] cursor-text",
         !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-        error ? ERROR_HAS_FOCUS_RING : HAS_FOCUS_RING,
+        error ? ERROR_HAS_FOCUS_RING : FIELD_HAS_FOCUS_RING,
         disabled && "opacity-disabled cursor-not-allowed",
         className
       ),
@@ -4250,6 +4271,7 @@ function PinInput({
   id
 }) {
   const onChange = useReportedChange(onChangeProp, value);
+  useInputModality();
   const contextSize = useContext(ControlSizeContext);
   const size = sizeProp ?? contextSize ?? "md";
   const inputsRef = useRef([]);
@@ -4335,7 +4357,7 @@ function PinInput({
             "shadow-[var(--ds-input-shadow)]",
             "transition-colors",
             !error && !disabled && "hover:border-[var(--ds-input-border-hover)]",
-            error ? ERROR_FOCUS_RING : FOCUS_RING,
+            error ? ERROR_FOCUS_RING : FIELD_FOCUS_RING,
             "placeholder:text-[var(--ds-text-muted)]",
             sizes[size],
             disabled && "opacity-disabled cursor-not-allowed"
@@ -4435,7 +4457,7 @@ function Rating({
     const starClass = cn(
       "inline-flex transition-colors",
       filled || half ? "text-[var(--ds-status-warning)]" : "text-[var(--ds-text-muted)]",
-      !readOnly && "hover:scale-110 transition-transform cursor-pointer rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+      !readOnly && ["hover:scale-110 transition-transform cursor-pointer rounded-[var(--ds-radius-sm)]", FOCUS_RING]
     );
     if (readOnly) {
       return /* @__PURE__ */ jsx("span", { className: starClass, children: /* @__PURE__ */ jsx(StarIcon, { filled, half, size: iconSize }) }, i);
@@ -4556,6 +4578,7 @@ function ColorPicker({
   error = false
 }) {
   const onChange = useReportedChange(onChangeProp, value);
+  useInputModality();
   const [hsl, setHsl] = useState(() => hexToHsl(value));
   const [hexInput, setHexInput] = useState(value);
   const satLightRef = useRef(null);
@@ -4665,7 +4688,7 @@ function ColorPicker({
             max: 360,
             value: hsl.h,
             onChange: (e) => emitChange({ ...hsl, h: Number(e.target.value) }),
-            className: "w-full h-3.5 rounded-[var(--ds-radius-full)] cursor-pointer appearance-none touch-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:rounded-[var(--ds-radius-full)] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:rounded-[var(--ds-radius-full)] [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none",
+            className: cn("w-full h-3.5 rounded-[var(--ds-radius-full)] cursor-pointer appearance-none touch-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:rounded-[var(--ds-radius-full)] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:rounded-[var(--ds-radius-full)] [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none", FOCUS_RING),
             style: {
               background: "linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)"
             }
@@ -4680,7 +4703,7 @@ function ColorPicker({
             max: 100,
             value: Math.round(hsl.a * 100),
             onChange: (e) => emitChange({ ...hsl, a: Number(e.target.value) / 100 }),
-            className: "w-full h-3.5 rounded-[var(--ds-radius-full)] cursor-pointer appearance-none touch-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:rounded-[var(--ds-radius-full)] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:rounded-[var(--ds-radius-full)] [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none",
+            className: cn("w-full h-3.5 rounded-[var(--ds-radius-full)] cursor-pointer appearance-none touch-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:rounded-[var(--ds-radius-full)] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5 [&::-moz-range-thumb]:rounded-[var(--ds-radius-full)] [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:appearance-none", FOCUS_RING),
             style: {
               background: `linear-gradient(to right, transparent, ${hslToHex({ ...hsl, a: 1 })})`
             }
@@ -4707,7 +4730,7 @@ function ColorPicker({
                 "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
                 "rounded-[var(--ds-radius-sm)]",
                 "hover:border-[var(--ds-input-border-hover)]",
-                FOCUS_RING
+                FIELD_FOCUS_RING
               )
             }
           )
@@ -4724,8 +4747,9 @@ function ColorPicker({
               "w-7 h-7 rounded-[var(--ds-radius-sm)] cursor-pointer",
               "border-[length:var(--ds-border-width)]",
               "hover:scale-110 transition-transform",
-              "focus-visible:shadow-[var(--ds-shadow-focus)] outline-none",
-              swatch.toLowerCase() === value.toLowerCase() ? ACTIVE_RING : "border-[var(--ds-border-default)]"
+              FOCUS_RING,
+              // selected is a choice's look: the accent border, never the halo (that is active's) or an outline
+              swatch.toLowerCase() === value.toLowerCase() ? "border-[var(--ds-accent-ink)]" : "border-[var(--ds-border-default)]"
             ),
             style: { backgroundColor: swatch },
             "aria-label": swatch
@@ -4749,10 +4773,11 @@ var indicators = {
   error: "bg-[var(--ds-status-error)]"
 };
 var actionColorsByVariant = {
-  info: "text-[var(--ds-accent-primary)] hover:bg-[var(--ds-accent-muted)]",
-  success: "text-[var(--ds-status-success)] hover:bg-[color-mix(in_srgb,var(--ds-status-success)_12%,transparent)]",
-  warning: "text-[var(--ds-status-warning)] hover:bg-[color-mix(in_srgb,var(--ds-status-warning)_15%,transparent)]",
-  error: "text-[var(--ds-status-error)] hover:bg-[color-mix(in_srgb,var(--ds-status-error)_12%,transparent)]"
+  // words on the alert's ground: the accent's tint takes its pair's words (D5), a status's soft background its words
+  info: "text-[var(--ds-accent-subtle-text)] hover:bg-[var(--ds-accent-muted)]",
+  success: "text-[var(--ds-status-success-text)] hover:bg-[color-mix(in_srgb,var(--ds-status-success)_12%,transparent)]",
+  warning: "text-[var(--ds-status-warning-text)] hover:bg-[color-mix(in_srgb,var(--ds-status-warning)_15%,transparent)]",
+  error: "text-[var(--ds-status-error-text)] hover:bg-[color-mix(in_srgb,var(--ds-status-error)_12%,transparent)]"
 };
 var Alert = forwardRef(function Alert2({
   variant,
@@ -4801,7 +4826,8 @@ var Alert = forwardRef(function Alert2({
                       "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
                       "transition-colors cursor-pointer",
                       "border-[length:var(--ds-border-width)] border-current",
-                      actionColorsByVariant[variant]
+                      actionColorsByVariant[variant],
+                      FOCUS_RING
                     ),
                     children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1", children: [
                       /* @__PURE__ */ jsx(Icon, { name: "more-vertical", size: 12 }),
@@ -4826,7 +4852,8 @@ var Alert = forwardRef(function Alert2({
                   className: cn(
                     "shrink-0 text-xs font-medium px-ds-2.5 py-ds-1 rounded-[var(--ds-radius-sm)]",
                     "transition-colors cursor-pointer",
-                    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)]")
+                    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)]"),
+                    FOCUS_RING
                   ),
                   children: [
                     a.iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex mr-ds-1", children: slotIcon(a.iconLeft, 14, "an Alert action's iconLeft") }),
@@ -4849,7 +4876,8 @@ var Alert = forwardRef(function Alert2({
                   "inline-flex items-center gap-ds-1 text-xs font-medium cursor-pointer",
                   "transition-colors duration-[var(--ds-transition-speed)]",
                   actionColorsByVariant[variant],
-                  "rounded-[var(--ds-radius-sm)] px-ds-1.5 py-ds-0.5"
+                  "rounded-[var(--ds-radius-sm)] px-ds-1.5 py-ds-0.5",
+                  FOCUS_RING
                 ),
                 children: [
                   /* @__PURE__ */ jsx(
@@ -4872,7 +4900,7 @@ var Alert = forwardRef(function Alert2({
           {
             type: "button",
             onClick: onDismiss,
-            className: "shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+            className: cn("shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer", FOCUS_RING),
             "aria-label": "Dismiss",
             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
           }
@@ -5066,13 +5094,13 @@ function FormWrapper({ onSubmit, validationMode: validationModeProp, children, a
     }
   };
   const summaryNode = errorSummary && summary.length >= 2 ? typeof errorSummary === "function" ? errorSummary(summary) : /* @__PURE__ */ jsx(Alert, { variant: "error", title: `${summary.length} fields need attention`, className: "mb-ds-4", children: /* @__PURE__ */ jsx("ul", { className: "list-disc pl-ds-5 flex flex-col gap-ds-1", children: summary.map((f) => /* @__PURE__ */ jsxs("li", { children: [
-    /* @__PURE__ */ jsx("a", { href: f.id ? `#${f.id}` : void 0, onClick: focusField(f.id), className: "underline underline-offset-2 text-[var(--ds-text-primary)]", children: f.label }),
+    /* @__PURE__ */ jsx("a", { href: f.id ? `#${f.id}` : void 0, onClick: focusField(f.id), className: cn("underline underline-offset-2 text-[var(--ds-text-primary)]", FOCUS_RING), children: f.label }),
     ": ",
     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,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 }),
+    summaryNode && /* @__PURE__ */ jsx("div", { ref: summaryRef, "data-form-error-summary": "", tabIndex: -1, className: cn("rounded-[var(--ds-radius-md)] focus-visible:*:shadow-none", FOCUS_RING), children: summaryNode }),
     children,
     actionsNode
   ] }) }) });
@@ -5292,10 +5320,13 @@ var actionButtonClass = [
   "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
   "transition-colors cursor-pointer",
   "hover:bg-[var(--ds-bg-muted)]",
-  "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+  FOCUS_RING,
   "disabled:opacity-disabled disabled:pointer-events-none"
 ].join(" ");
 function Panel({ title, items, totalCount, checked, onToggle, onToggleAll, search, onSearchChange, stacked }) {
+  useInputModality();
+  const [list2, setList] = useState(null);
+  useRevealFocus(list2);
   const enabledItems = items.filter((i) => !i.disabled);
   const allChecked = enabledItems.length > 0 && enabledItems.every((i) => checked.has(i.id));
   const someChecked = enabledItems.some((i) => checked.has(i.id));
@@ -5319,7 +5350,7 @@ function Panel({ title, items, totalCount, checked, onToggle, onToggleAll, searc
             totalCount
           ] })
         ] }),
-        onSearchChange && /* @__PURE__ */ jsx("div", { className: "px-ds-2 py-ds-1.5 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-1.5 px-ds-2 py-ds-1 bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-sm)]", children: [
+        onSearchChange && /* @__PURE__ */ jsx("div", { className: "px-ds-2 py-ds-1.5 border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]", children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-ds-1.5 px-ds-2 py-ds-1 bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-sm)]", FIELD_HAS_FOCUS_RING), children: [
           /* @__PURE__ */ jsx(Icon, { name: "search", size: 12, className: "shrink-0 text-[var(--ds-text-muted)]" }),
           /* @__PURE__ */ jsx(
             "input",
@@ -5332,7 +5363,7 @@ function Panel({ title, items, totalCount, checked, onToggle, onToggleAll, searc
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto", stacked ? "max-h-[160px]" : "max-h-[240px]"), style: { padding: "var(--ds-space-1)" }, children: [
+        /* @__PURE__ */ jsxs("div", { ref: setList, className: cn("flex-1 overflow-y-auto scroll-p-[4px]", stacked ? "max-h-[160px]" : "max-h-[240px]"), style: { padding: "max(var(--ds-space-1), 4px)" }, children: [
           items.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-muted)] text-center py-ds-6", children: "No items" }),
           items.map((item) => /* @__PURE__ */ jsxs(
             "label",
@@ -5375,7 +5406,8 @@ function PanelCheckbox({ checked, indeterminate, onClick, label }) {
       },
       className: cn(
         "flex items-center justify-center shrink-0 h-[18px] w-[18px] rounded-[calc(var(--ds-radius-sm)*0.6)] border-[2px] transition-all cursor-pointer",
-        filled ? "bg-[var(--ds-check-bg)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]"
+        filled ? "bg-[var(--ds-check-bg)] border-[var(--ds-check-border)]" : "bg-[var(--ds-input-bg)] border-[var(--ds-input-border)]",
+        FOCUS_RING
       ),
       children: /* @__PURE__ */ jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", className: cn("text-[var(--ds-check-fg)] transition-opacity", filled ? "opacity-100" : "opacity-0"), children: indeterminate ? /* @__PURE__ */ jsx("path", { d: "M3 6H9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }) : /* @__PURE__ */ jsx("path", { d: "M2.5 6L5 8.5L9.5 3.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })
     }
@@ -5394,6 +5426,7 @@ function MentionInput({
   ...wiring
 }) {
   const control = useFieldControl({ ...wiring, error: error || void 0 });
+  useInputModality();
   const [internalValue, setInternalValue] = useState("");
   const value = controlledValue ?? internalValue;
   const onChange = useReportedChange(onChangeProp, value);
@@ -5533,7 +5566,7 @@ function MentionInput({
           "rounded-[var(--ds-radius-md)]",
           "shadow-[var(--ds-input-shadow)]",
           "placeholder:text-[var(--ds-text-muted)]",
-          control.invalid ? ERROR_FOCUS_RING : FOCUS_RING,
+          control.invalid ? ERROR_FOCUS_RING : FIELD_FOCUS_RING,
           "disabled:cursor-not-allowed disabled:opacity-disabled disabled:hover:border-[var(--ds-input-border)]",
           "transition-colors duration-[var(--ds-transition-speed)]"
         )
@@ -5777,7 +5810,8 @@ var Card = forwardRef(function Card2({
       ref: checkboxRef,
       "data-card-checkbox": "",
       className: cn(
-        "rounded-[calc(var(--ds-radius-sm)*0.6)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        "rounded-[calc(var(--ds-radius-sm)*0.6)]",
+        FOCUS_RING,
         disabled ? "cursor-not-allowed" : "cursor-pointer"
       ),
       onClick: handleCheckableClick,
@@ -5837,11 +5871,14 @@ var Card = forwardRef(function Card2({
         variantStyles3[variant],
         isSelectable && !disabled && "cursor-pointer select-none transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
         isSelectable && !disabled && !selected && "hover:border-[var(--ds-accent-primary)]",
-        isButton && "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        // Selected is the accent border, with the accent-subtle fill on a card with a selectType. No ring: a ring round the
-        // whole card is the focus state (focus-visible:shadow-[var(--ds-shadow-focus)] above), and the active halo other
-        // controls take (ACTIVE_RING, since Sprint 20.6) made a selected card look focused (the owner, 27 September 2026).
-        isSelectable && selected && "border-[var(--ds-border-focus)]",
+        // keyboard focus: the shared outline round the card, its own shadow stepping aside while it shows (Sprint 30); a card
+        // that holds controls draws it round itself for its action too (CardTitle), so its shadow steps aside for that
+        isButton && FOCUS_RING,
+        holdsControls && "has-[[data-card-action]:focus-visible]:shadow-none",
+        // Selected is the accent border (--ds-accent-ink, Sprint 30), with the accent-subtle fill on a card with a
+        // selectType. Never an outline or a halo: the outline round the whole card is keyboard focus (FOCUS_RING above),
+        // and the active halo (ACTIVE_RING) made a selected card look focused (the owner, 27 September 2026).
+        isSelectable && selected && "border-[var(--ds-accent-ink)]",
         hasSelectType && selected && "bg-[var(--ds-accent-subtle)]",
         disabled && "opacity-disabled cursor-not-allowed",
         className
@@ -5920,7 +5957,8 @@ var CardHeader = forwardRef(function CardHeader2(allProps, ref) {
           className: cn(
             "inline-flex items-center justify-center h-8 w-8 rounded-[var(--ds-radius-md)]",
             "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
-            "transition-colors duration-[var(--ds-transition-speed)]"
+            "transition-colors duration-[var(--ds-transition-speed)]",
+            FOCUS_RING
           ),
           onClick: (e) => e.stopPropagation(),
           children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 16 })
@@ -5998,8 +6036,9 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, lines: lin
       ...props,
       children: action ? (
         // The card's action when the card holds controls of its own (Sprint 25.7): a real button, which a click
-        // elsewhere on the card also runs. Its ::after spans the card to draw the card's focus ring, taking no clicks.
-        // The clamp moves inside, since a button lays out its own lines.
+        // elsewhere on the card also runs. Its ::after spans the card, taking no clicks, and draws keyboard focus round the
+        // whole card, which is what a click runs: FOCUS_RING's outline on that layer, the card's shadow stepping aside
+        // (the card's has-[]). The clamp moves inside, since a button lays out its own lines.
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -6009,7 +6048,8 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, lines: lin
             onClick: action.activate,
             className: cn(
               "block w-full text-left cursor-pointer [text-overflow:inherit] focus-visible:outline-none disabled:cursor-not-allowed",
-              "after:absolute after:inset-0 after:rounded-[var(--ds-radius-md)] after:pointer-events-none focus-visible:after:shadow-[var(--ds-shadow-focus)]"
+              "after:absolute after:inset-0 after:rounded-[var(--ds-radius-md)] after:pointer-events-none",
+              "focus-visible:after:outline-2 focus-visible:after:outline-solid focus-visible:after:outline-offset-2 focus-visible:after:outline-[var(--ds-focus)]"
             ),
             children: /* @__PURE__ */ jsx("span", { ref: (node) => overflowRef(lines > 0 ? node : null), className: cn("block [text-overflow:inherit]", lines > 0 && [lineClampClass, WHOLE_ON_KEYBOARD]), children })
           }
@@ -6080,6 +6120,8 @@ function StatsCard({ value, label, trend, icon, layout = "card", interactive, on
           "hover:scale-[var(--ds-ambient-hover-scale)] hover:-translate-y-[var(--ds-ambient-hover-lift)]"
         ],
         GLASS_SURFACE,
+        // a clickable card is a Tab stop
+        onClick && FOCUS_RING,
         className
       ),
       onClick,
@@ -6109,8 +6151,8 @@ function StatsCard({ value, label, trend, icon, layout = "card", interactive, on
 }
 function TrendBadge({ trend }) {
   const colors = {
-    positive: "text-[var(--ds-status-success)] bg-[var(--ds-status-success-bg)]",
-    negative: "text-[var(--ds-status-error)] bg-[var(--ds-status-error-bg)]",
+    positive: "text-[var(--ds-status-success-text)] bg-[var(--ds-status-success-bg)]",
+    negative: "text-[var(--ds-status-error-text)] bg-[var(--ds-status-error-bg)]",
     neutral: "text-[var(--ds-text-muted)] bg-[var(--ds-bg-muted)]"
   };
   const defaultSentiment = { up: "positive", down: "negative", flat: "neutral" };
@@ -6452,8 +6494,9 @@ function Accordion({ items, type = "single", defaultOpen = [], open: controlledO
           className: cn(
             "flex w-full items-center justify-between text-left cursor-pointer",
             "text-sm font-medium text-[var(--ds-text-primary)]",
-            "hover:text-[var(--ds-accent-primary)] transition-colors",
-            "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)] focus-visible:rounded-[var(--ds-radius-sm)]"
+            "hover:text-[var(--ds-accent-ink)] transition-colors",
+            FOCUS_RING,
+            "focus-visible:rounded-[var(--ds-radius-sm)]"
           ),
           style: { padding: "var(--ds-space-4) 0" },
           children: [
@@ -6545,6 +6588,10 @@ var FRAME_CLASSES = cn(
   GLASS_SURFACE,
   "bg-[var(--ds-bg-surface)]"
 );
+var FRAME_FOCUS_RING = "has-[>[data-table-scroll]:focus-visible]:outline-2 has-[>[data-table-scroll]:focus-visible]:outline-solid has-[>[data-table-scroll]:focus-visible]:outline-offset-2 has-[>[data-table-scroll]:focus-visible]:outline-[var(--ds-focus)] has-[>[data-table-scroll]:focus-visible]:shadow-none";
+var PIN_FOCUS = "[tr:focus-visible>&]:after:pointer-events-none [tr:focus-visible>&]:after:absolute [tr:focus-visible>&]:after:inset-x-0 [tr:focus-visible>&]:after:inset-y-[3px] [tr:focus-visible>&]:after:border-y-2 [tr:focus-visible>&]:after:border-[var(--ds-focus)] [tr:focus-visible>&]:after:content-['']";
+var PIN_FOCUS_START = "[tr:focus-visible>&]:after:left-[3px] [tr:focus-visible>&]:after:border-l-2";
+var PIN_FOCUS_END = "[tr:focus-visible>&]:after:right-[3px] [tr:focus-visible>&]:after:border-r-2";
 var PINNED_BACKGROUND = "linear-gradient(var(--gs-row-tint, transparent), var(--gs-row-tint, transparent)), linear-gradient(var(--gs-pinned-surface), var(--gs-pinned-surface)), var(--gs-pinned-canvas)";
 var PINNED_LAYERS = cn(
   "[--gs-pinned-surface:var(--ds-bg-surface)] [--gs-pinned-canvas:var(--ds-bg-canvas)]",
@@ -6823,6 +6870,7 @@ function Table({
   const mobileBreakpoint = mobileBreakpointProp ?? preferences.tableToCardsBreakpoint ?? "md";
   const narrowScreen = useBreakpoint(mobileBreakpoint);
   const { cards: isMobile, rootRef } = useCardsSwitch(narrowScreen, cardsBelow, title);
+  useRevealFocus(rootRef, isMobile);
   const setRoot = useCallback((node) => {
     rootRef.current = node;
     if (typeof ref === "function") ref(node);
@@ -6888,6 +6936,11 @@ function Table({
     }
     return void 0;
   };
+  const pinFocus = (position, total) => {
+    if (!onRowClick || !pinStyle(position, total)) return void 0;
+    const fromEnd = total - 1 - position;
+    return cn(PIN_FOCUS, position === 0 && PIN_FOCUS_START, fromEnd === 0 && PIN_FOCUS_END);
+  };
   const fade = fadeProps;
   const [renderedKinds, setRenderedKinds] = useState(() => /* @__PURE__ */ new Map());
   useLayoutEffect(() => {
@@ -6988,7 +7041,7 @@ 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__ */ 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: [
+    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 -m-[4px] p-[4px] scroll-p-[4px]", 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);
@@ -7010,8 +7063,9 @@ function Table({
               "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
               "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)]",
+              // selected is chosen, not active (D2): the accent border, never the halo
+              isSelected && "border-[var(--ds-accent-ink)]",
+              onRowClick && ["cursor-pointer hover:bg-[var(--ds-bg-muted)]", FOCUS_RING],
               // 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"
@@ -7054,9 +7108,9 @@ function Table({
                       // 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)]",
+                      "text-[var(--ds-accent-ink)] 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)]"
+                      FOCUS_RING
                     ),
                     children: [
                       /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12, className: cn("transition-transform duration-[var(--ds-transition-speed)]", isExpanded && "rotate-90") }),
@@ -7116,7 +7170,8 @@ function Table({
                   className: cn(
                     "inline-flex items-center gap-ds-1 uppercase tracking-wider cursor-pointer select-none",
                     "[font:inherit] text-inherit hover:text-[var(--ds-text-primary)]",
-                    "rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+                    "rounded-[var(--ds-radius-sm)]",
+                    FOCUS_RING
                   ),
                   children: [
                     col.header,
@@ -7173,9 +7228,9 @@ function Table({
               // the row's tint, as a variable too, so its pinned cells draw it over their solid ground (A35)
               isSelected ? "bg-[var(--ds-accent-subtle)] [--gs-row-tint:var(--ds-accent-subtle)]" : striped && i % 2 === 1 ? "bg-[var(--ds-bg-muted)]/50 [--gs-row-tint:color-mix(in_oklab,var(--ds-bg-muted)_50%,transparent)]" : "hover:bg-[var(--ds-bg-muted)] hover:[--gs-row-tint:var(--ds-bg-muted)]",
               clickable && "cursor-pointer",
-              // an outline inside the row: it shows over the pinned cells, whose solid ground hid the inset
-              // shadow the row drew before (the review of 30 September)
-              onRowClick && "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--ds-border-focus)]"
+              // an outline inside the row, clear of the frame's rounded corners (D8): it shows over the pinned
+              // cells, whose solid ground hid the inset shadow the row drew before (the review of 30 September)
+              onRowClick && FOCUS_INSET
             ),
             onClick: clickable ? (e) => {
               if (!clickIsRows(e)) return;
@@ -7191,13 +7246,13 @@ function Table({
               }
             } : void 0,
             children: [
-              selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-name-${idPart(id)}` : `${headingId}-select` }) }),
-              expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), style: pinStyle(selectable ? 1 : 0, cellCount), children: /* @__PURE__ */ jsx(
+              selectable && /* @__PURE__ */ jsx("td", { className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3", pinFocus(0, cellCount)), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: () => toggleRow(originalIdx), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-name-${idPart(id)}` : `${headingId}-select` }) }),
+              expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3", pinFocus(selectable ? 1 : 0, cellCount)), style: pinStyle(selectable ? 1 : 0, cellCount), children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
                   onClick: () => toggleExpand(id),
-                  className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer",
+                  className: cn("text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] cursor-pointer", FOCUS_RING),
                   "aria-expanded": isExpanded,
                   ...nameIndex >= 0 ? { "aria-labelledby": `${headingId}-details ${headingId}-name-${idPart(id)}` } : { "aria-label": "Details" },
                   children: /* @__PURE__ */ jsx(
@@ -7240,7 +7295,8 @@ function Table({
                       alignClass,
                       shrink && "w-px whitespace-nowrap",
                       whole2 && "whitespace-nowrap",
-                      kind === "identifier" && "[overflow-wrap:anywhere]"
+                      kind === "identifier" && "[overflow-wrap:anywhere]",
+                      pinFocus(lead + c, cellCount)
                     ),
                     style: col.maxWidth || col.width || col.minWidth || c + lead < pinnedStart || c >= columns.length - endCount ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth, ...pinStyle(lead + c, cellCount) } : void 0,
                     children: inner
@@ -7279,7 +7335,7 @@ function Table({
         ref: listRoot,
         "data-ds-list": "",
         "data-gs": "table",
-        className: cn("w-full min-w-0 flex flex-col", FRAME_CLASSES, "has-[>[data-table-scroll]:focus-visible]:shadow-[var(--ds-shadow-focus)]", control && "min-h-0", listClass),
+        className: cn("w-full min-w-0 flex flex-col", FRAME_CLASSES, FRAME_FOCUS_RING, control && "min-h-0", listClass),
         onFocus: noteFocus,
         onBlur: forgetFocus,
         children: [
@@ -7495,9 +7551,11 @@ function SegmentedControl({
               // The selected segment is a kind of button, so it takes a secondary button's surface and edge, as the frame
               // takes a button's edge (the owner, 3 October 2026: the 3:1 strong edge it kept from Sprint 25.14 drew the
               // darker outline 25.19 took off the fields). It shows its state as the raised surface on the muted track, with
-              // the default variant's shadow and its label's stronger colour
+              // the default variant's shadow and its label's stronger colour. While its segment has keyboard focus the shadow
+              // steps aside, as a button's does, so the segment's outline sits clear (Sprint 30, D7)
               "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
               variant === "default" && "shadow-[var(--ds-shadow-sm)]",
+              "[[role=radiogroup]:has([aria-checked=true]:focus-visible)_&]:shadow-none",
               "transition-all motion-reduce:transition-none"
             ),
             "data-animate": animate ? "true" : "false",
@@ -7529,7 +7587,7 @@ function SegmentedControl({
               fullWidth && "flex-1",
               "rounded-[var(--ds-segment-radius)]",
               "transition-colors cursor-pointer",
-              "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+              FOCUS_RING,
               sizes2[size],
               opt.value === value ? "text-[var(--ds-text-primary)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]",
               opt.disabled && "opacity-disabled cursor-not-allowed"
@@ -7599,7 +7657,7 @@ function EventBar({ event, category, compact, onOpen, inert, showTime = true, co
       {
         ref,
         type: "button",
-        className: cn("w-1.5 h-1.5 rounded-[var(--ds-radius-full)] shrink-0 cursor-pointer", className),
+        className: cn("w-1.5 h-1.5 rounded-[var(--ds-radius-full)] shrink-0 cursor-pointer", FOCUS_RING, className),
         style: { backgroundColor: colours.edge },
         onClick: (e) => {
           e.stopPropagation();
@@ -7619,7 +7677,7 @@ function EventBar({ event, category, compact, onOpen, inert, showTime = true, co
         "w-full text-left text-xs leading-tight px-ds-1.5 py-ds-0.5",
         look,
         "truncate cursor-pointer transition-[filter] hover:brightness-95",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        FOCUS_RING,
         className
       ),
       style: paint,
@@ -7751,7 +7809,7 @@ function EventCard({ event, category, anchor, actions, onClose, fallbackFocus, r
             /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words", children: event.location })
           ] }),
           event.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--ds-text-secondary)] whitespace-pre-line break-words", children: event.description }),
-          event.attendees && event.attendees.length > 0 && /* @__PURE__ */ jsx("div", { ref: setAttendeeScroll, className: cn("max-h-32 overflow-y-auto -mx-[2px] p-[2px]", FOCUS_INSET), children: /* @__PURE__ */ jsx("ul", { "aria-label": "Attendees", className: "space-y-ds-1", children: event.attendees.map((person, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-ds-2 text-xs text-[var(--ds-text-primary)]", children: [
+          event.attendees && event.attendees.length > 0 && /* @__PURE__ */ jsx("div", { ref: setAttendeeScroll, className: cn("max-h-32 overflow-y-auto -mx-[calc(var(--ds-focus-inset)+1px)] p-[calc(var(--ds-focus-inset)+1px)]", FOCUS_INSET), children: /* @__PURE__ */ jsx("ul", { "aria-label": "Attendees", className: "space-y-ds-1", children: event.attendees.map((person, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-ds-2 text-xs text-[var(--ds-text-primary)]", children: [
             /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0", children: /* @__PURE__ */ jsx(Avatar, { size: "sm", initials: person.initials ?? person.name }) }),
             /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: person.name })
           ] }, `${person.name}-${i}`)) }) }),
@@ -7904,7 +7962,8 @@ function MonthView({ date, events, categories, selectedDate, onDayClick, canStar
                 "relative min-h-[80px] sm:min-h-[100px] border-[var(--ds-border-subtle)]",
                 !lastRow && "border-b-[length:var(--ds-divider-width)]",
                 di < 6 && "border-r-[length:var(--ds-divider-width)]",
-                "p-ds-1 flex flex-col cursor-pointer transition-colors",
+                // the day's outline sits inside its edge (D8, --ds-focus-inset): its number and events keep clear of it
+                "p-[max(var(--ds-space-1),calc(var(--ds-focus-inset)+1px))] flex flex-col cursor-pointer transition-colors",
                 FOCUS_INSET,
                 "hover:bg-[var(--ds-bg-muted)]",
                 !isCurrentMonth && "[&>.gs-day-number]:opacity-40",
@@ -7947,7 +8006,7 @@ function MonthView({ date, events, categories, selectedDate, onDayClick, canStar
                       type: "button",
                       "aria-haspopup": "dialog",
                       "aria-expanded": !!list2 && isSameDay(list2.day, day),
-                      className: "absolute z-[1] text-2xs text-[var(--ds-accent-text,var(--ds-accent-primary))] font-medium cursor-pointer hover:underline px-ds-1.5 rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                      className: cn("absolute z-[1] text-2xs text-[var(--ds-accent-text,var(--ds-accent-primary))] font-medium cursor-pointer hover:underline px-ds-1.5 rounded-[var(--ds-radius-sm)]", FOCUS_RING),
                       style: { top: NUMBER_ROW + (LANES - 1) * (LANE_H + LANE_GAP), left: INSET, height: LANE_H },
                       onClick: (e) => {
                         e.stopPropagation();
@@ -8036,7 +8095,9 @@ function TimedEvent({ placed, category, onOpen, onFocusEvent }) {
         "border-[length:var(--ds-border-width)] border-solid rounded-[var(--ds-radius-sm)]",
         cutTop && "rounded-t-none border-t-0",
         cutBottom && "rounded-b-none border-b-0",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)] focus-visible:z-[3]"
+        // a week event: the outline inside its edge (P3), raised over the now line and its neighbours while it shows
+        FOCUS_INSET,
+        "focus-visible:z-[3]"
       ),
       style: {
         top: drawnTop,
@@ -8244,7 +8305,7 @@ function WeekView({ date, events, categories, selectedDate, onDayClick, onOpenEv
                   type: "button",
                   "aria-haspopup": "dialog",
                   "aria-expanded": !!list2 && isSameDay(list2.day, day),
-                  className: "absolute z-[1] text-2xs text-[var(--ds-accent-text,var(--ds-accent-primary))] font-medium cursor-pointer hover:underline px-ds-1.5 rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                  className: cn("absolute z-[1] text-2xs text-[var(--ds-accent-text,var(--ds-accent-primary))] font-medium cursor-pointer hover:underline px-ds-1.5 rounded-[var(--ds-radius-sm)]", FOCUS_RING),
                   style: { top: 2 + (ALL_DAY_LANES - 1) * (LANE_H2 + LANE_GAP2), left: 2, height: LANE_H2 },
                   onClick: (e) => {
                     e.stopPropagation();
@@ -8422,7 +8483,7 @@ function MonthRow({
         "aria-label": `${words.monthName(month, "short")} ${year}`,
         className: cn(
           "sticky left-0 z-10 flex items-center justify-center px-ds-2 text-xs font-semibold text-[var(--ds-text-primary)]",
-          "bg-[var(--ds-bg-muted)] cursor-pointer hover:text-[var(--ds-accent-primary)] transition-colors",
+          "bg-[var(--ds-bg-muted)] cursor-pointer hover:text-[var(--ds-accent-ink)] transition-colors",
           "border-r-[length:var(--ds-divider-width)] border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)]",
           FOCUS_INSET
         ),
@@ -8559,7 +8620,9 @@ function CompactMonthView({ date, events, categories, selectedDate, onDayClick,
             },
             className: cn(
               "flex flex-col items-center justify-center py-ds-1.5 rounded-[var(--ds-radius-sm)] cursor-pointer transition-colors",
-              "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+              // a day cell, edge to edge with its neighbours and never filled solid: its outline sits inside its
+              // edge, as the month view's days do
+              FOCUS_INSET,
               !isCurrentMonth && "opacity-30",
               selected && "bg-[var(--ds-accent-subtle)]",
               !selected && "hover:bg-[var(--ds-bg-muted)]"
@@ -8671,8 +8734,9 @@ function MonthDropdown({
         onClick: () => setOpen(!open),
         className: cn(
           "flex items-center gap-ds-1 text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] cursor-pointer",
-          "hover:text-[var(--ds-accent-primary)] transition-colors",
-          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)] rounded-[var(--ds-radius-sm)]",
+          "hover:text-[var(--ds-accent-ink)] transition-colors",
+          "rounded-[var(--ds-radius-sm)]",
+          FOCUS_RING,
           "pl-ds-3 pr-ds-2 py-ds-1"
         ),
         children: [
@@ -8701,7 +8765,7 @@ function MonthDropdown({
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]",
+                  className: cn("p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]", FOCUS_RING),
                   onClick: () => setBrowseYear(browseYear - 1),
                   "aria-label": "Previous year",
                   children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" })
@@ -8711,7 +8775,7 @@ function MonthDropdown({
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]",
+                  className: cn("p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]", FOCUS_RING),
                   onClick: () => setBrowseYear(browseYear + 1),
                   "aria-label": "Next year",
                   children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 })
@@ -8725,7 +8789,7 @@ function MonthDropdown({
                 {
                   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)]",
+                    FOCUS_RING,
                     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": isActive2 || void 0,
@@ -8802,8 +8866,9 @@ function YearDropdown({
         onClick: () => setOpen(!open),
         className: cn(
           "flex items-center gap-ds-1 text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)] cursor-pointer",
-          "hover:text-[var(--ds-accent-primary)] transition-colors",
-          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)] rounded-[var(--ds-radius-sm)]",
+          "hover:text-[var(--ds-accent-ink)] transition-colors",
+          "rounded-[var(--ds-radius-sm)]",
+          FOCUS_RING,
           "pl-ds-3 pr-ds-2 py-ds-1"
         ),
         children: [
@@ -8832,7 +8897,7 @@ function YearDropdown({
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]",
+                  className: cn("p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]", FOCUS_RING),
                   onClick: () => setRangeStart(rangeStart - 9),
                   "aria-label": "Previous years",
                   children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: "rotate-180" })
@@ -8846,7 +8911,7 @@ function YearDropdown({
               /* @__PURE__ */ jsx(
                 "button",
                 {
-                  className: "p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]",
+                  className: cn("p-ds-1 rounded-[var(--ds-radius-sm)] hover:bg-[var(--ds-bg-emphasis)] cursor-pointer text-[var(--ds-text-secondary)]", FOCUS_RING),
                   onClick: () => setRangeStart(rangeStart + 9),
                   "aria-label": "Next years",
                   children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14 })
@@ -8858,7 +8923,7 @@ function YearDropdown({
               {
                 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)]",
+                  FOCUS_RING,
                   y === currentYear ? "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": y === currentYear || void 0,
@@ -9181,7 +9246,7 @@ function Calendar({
                   "button",
                   {
                     onClick: () => navigate(-1),
-                    className: "flex items-center justify-center w-8 h-8 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                    className: cn("flex items-center justify-center w-8 h-8 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer", FOCUS_RING),
                     "aria-label": "Previous month",
                     children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 16 })
                   }
@@ -9190,7 +9255,7 @@ function Calendar({
                   "button",
                   {
                     onClick: goToToday,
-                    className: "text-sm font-medium text-[var(--ds-text-primary)] hover:text-[var(--ds-accent-primary)] transition-colors cursor-pointer px-ds-2",
+                    className: cn("text-sm font-medium text-[var(--ds-text-primary)] hover:text-[var(--ds-accent-ink)] transition-colors cursor-pointer px-ds-2", FOCUS_RING),
                     children: formatMonthYear(currentDate)
                   }
                 ),
@@ -9198,7 +9263,7 @@ function Calendar({
                   "button",
                   {
                     onClick: () => navigate(1),
-                    className: "flex items-center justify-center w-8 h-8 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer",
+                    className: cn("flex items-center justify-center w-8 h-8 rounded-[var(--ds-radius-sm)] text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-surface)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer", FOCUS_RING),
                     "aria-label": "Next month",
                     children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
                   }
@@ -9395,7 +9460,7 @@ function AvatarGroup({ items, max = 4, size = "sm", ring = "canvas", onOverflowC
       );
       return item.name ? /* @__PURE__ */ jsx(Tooltip, { content: item.name, children: avatar }, i) : avatar;
     }),
-    counter && (onOverflowClick ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onOverflowClick, "aria-label": `Show ${hidden.length} more`, className: "inline-flex rounded-[var(--ds-radius-full)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]", children: hiddenNames ? /* @__PURE__ */ jsx(Tooltip, { content: hiddenNames, children: counter }) : counter }) : hiddenNames ? /* @__PURE__ */ jsx(Tooltip, { content: hiddenNames, children: counter }) : counter)
+    counter && (onOverflowClick ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onOverflowClick, "aria-label": `Show ${hidden.length} more`, className: cn("inline-flex rounded-[var(--ds-radius-full)]", FOCUS_RING), children: hiddenNames ? /* @__PURE__ */ jsx(Tooltip, { content: hiddenNames, children: counter }) : counter }) : hiddenNames ? /* @__PURE__ */ jsx(Tooltip, { content: hiddenNames, children: counter }) : counter)
   ] });
 }
 var defaultIcons = {
@@ -9615,6 +9680,8 @@ function ExpandableDescription({ children, className }) {
         "text-xs text-[var(--ds-text-muted)] mt-ds-0.5",
         !expanded && "line-clamp-2",
         isTruncated && !expanded && "cursor-pointer",
+        // a button while it's clamped: a Tab stop that shows the outline
+        FOCUS_RING,
         className
       ),
       onClick: isTruncated && !expanded ? () => setExpanded(true) : void 0,
@@ -9768,7 +9835,7 @@ function CollapsibleTrigger({ children, className }) {
       }
     });
   }
-  return /* @__PURE__ */ jsx("button", { type: "button", className: cn("text-left cursor-pointer", className), onClick: toggle, "aria-expanded": isOpen, children });
+  return /* @__PURE__ */ jsx("button", { type: "button", className: cn("text-left cursor-pointer", FOCUS_RING, className), onClick: toggle, "aria-expanded": isOpen, children });
 }
 function CollapsibleContent({ children, className }) {
   const { isOpen } = useCollapsible();
@@ -10035,12 +10102,12 @@ function TreeNodeRow({
         tabIndex: 0,
         className: cn(
           "flex items-center gap-ds-2 py-ds-1.5 px-ds-2 rounded-[var(--ds-radius-md)] cursor-pointer transition-colors",
-          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+          FOCUS_RING,
           // Active style comes from the theme's --ds-tree-* tokens (rail / tint;
           // pill degrades to tint). Every row carries the rail width as a
           // 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)]",
+          isSelected ? "bg-[var(--ds-tree-active-bg)] text-[var(--ds-tree-active-text)] font-medium border-[var(--ds-accent-ink)]" : "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",
@@ -10070,7 +10137,7 @@ function TreeNodeRow({
                 {
                   name: "chevron-right",
                   size: 14,
-                  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")
+                  className: cn(isSelected ? "text-[var(--ds-tree-active-muted)]" : holdsSelection ? "text-[var(--ds-accent-ink)]" : "text-[var(--ds-text-muted)]", "transition-transform", isExpanded && "rotate-90")
                 }
               )
             }
@@ -10085,7 +10152,7 @@ function TreeNodeRow({
               }
             }
           ),
-          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)]") }),
+          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-ink)]" : "text-[var(--ds-text-muted)]") }),
           /* @__PURE__ */ jsx(TruncLabel2, { children: node.label })
         ]
       }
@@ -10246,7 +10313,7 @@ function Carousel({
                 "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
                 "text-[var(--ds-text-primary)] shadow-[var(--ds-shadow-sm)]",
                 "transition-opacity cursor-pointer hover:bg-[var(--ds-bg-muted)]",
-                "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                FOCUS_RING,
                 !canPrev && "opacity-0 pointer-events-none"
               ),
               children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16, className: "rotate-180" })
@@ -10266,7 +10333,7 @@ function Carousel({
                 "bg-[var(--ds-bg-surface-elevated)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
                 "text-[var(--ds-text-primary)] shadow-[var(--ds-shadow-sm)]",
                 "transition-opacity cursor-pointer hover:bg-[var(--ds-bg-muted)]",
-                "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                FOCUS_RING,
                 !canNext && "opacity-0 pointer-events-none"
               ),
               children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 16 })
@@ -10281,7 +10348,7 @@ function Carousel({
             "aria-label": `Go to slide ${i + 1}`,
             className: cn(
               "w-2 h-2 rounded-[var(--ds-radius-full)] transition-all cursor-pointer",
-              "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+              FOCUS_RING,
               i === current ? "bg-[var(--ds-accent-primary)] w-6" : "bg-[var(--ds-text-muted)] opacity-50 hover:opacity-75"
             )
           },
@@ -10370,7 +10437,7 @@ function SourcesRow({ sources }) {
     ] }, s.href + i))
   ] });
 }
-var StreamingCaret = () => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 inline-block animate-pulse text-[var(--ds-accent-primary)]", children: "\u258D" });
+var StreamingCaret = () => /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-ds-0.5 inline-block animate-pulse text-[var(--ds-accent-ink)]", children: "\u258D" });
 var ChatMessageItem = memo(function ChatMessageItem2({ message: msg, grouped, spaced, layout, onAction, renderContent }) {
   const locale = useFormatLocale();
   const hydrated = useHydrated();
@@ -10440,6 +10507,7 @@ var ChatMessageItem = memo(function ChatMessageItem2({ message: msg, grouped, sp
 function ChatInputBar({ onSend, busy, onStop, onAttach, onVoice, placeholder }) {
   const [text, setText] = useState("");
   const isMobile = useBreakpoint("sm");
+  useInputModality();
   const handleSend = () => {
     if (busy || !text.trim()) return;
     onSend?.(text.trim());
@@ -10463,7 +10531,7 @@ function ChatInputBar({ onSend, busy, onStop, onAttach, onVoice, placeholder })
         "border-[length:var(--ds-border-width)] border-[var(--ds-input-border)]",
         "bg-[var(--ds-input-bg)]",
         "shadow-[var(--ds-input-shadow)]",
-        FOCUS_WITHIN_RING,
+        FIELD_FOCUS_WITHIN_RING,
         "transition-colors duration-[var(--ds-transition-speed)]"
       ),
       children: [
@@ -10543,6 +10611,12 @@ function ChatMessageList({
 }) {
   const scrollRef = useRef(null);
   const columnRef = useRef(null);
+  const [scroller, setScroller] = useState(null);
+  const setScroll = useCallback((node) => {
+    scrollRef.current = node;
+    setScroller(node);
+  }, []);
+  useRevealFocus(scroller);
   const atBottomRef = useRef(true);
   const [showJump, setShowJump] = useState(false);
   const [prevMessages, setPrevMessages] = useState(messages);
@@ -10586,7 +10660,7 @@ function ChatMessageList({
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col flex-1 min-h-0", className), children: [
     /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement }),
     /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-h-0", children: [
-      /* @__PURE__ */ jsx("div", { ref: scrollRef, onScroll, className: "h-full overflow-y-auto", children: empty ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-ds-6 px-ds-4 py-ds-8 text-center", children: [
+      /* @__PURE__ */ jsx("div", { ref: setScroll, onScroll, className: "h-full overflow-y-auto scroll-p-[4px]", children: empty ? /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-ds-6 px-ds-4 py-ds-8 text-center", children: [
         emptyState ?? /* @__PURE__ */ jsx(
           EmptyState,
           {
@@ -11048,28 +11122,18 @@ function TruncText({ children, className }) {
   if (!isTruncated) return text;
   return /* @__PURE__ */ jsx(Tooltip, { content: children, children: text });
 }
-var warnedLegacyProps = false;
 var StackedList = forwardRef(function StackedList2({
   items,
   divided = true,
-  variant: variantProp,
+  variant = "list",
   selectedId,
   className,
-  flush,
-  hover,
   pager
 }, ref) {
   useScrollsInside();
   const isPhone = useBreakpoint("sm");
   const inCard = useContext(CardSurfaceCtx);
   const inPane = !!useContext(SplitPaneCtx);
-  const variant = variantProp ?? (flush || hover === "title" ? "articles" : "list");
-  const legacy = flush !== void 0 || hover !== void 0;
-  useEffect(() => {
-    if (!legacy || warnedLegacyProps) return;
-    warnedLegacyProps = true;
-    console.warn('StackedList: `flush` and `hover` are deprecated \u2014 pass variant="articles" for an article list; the default variant takes its inset from the pane or card it sits in.');
-  }, [legacy]);
   const articles = variant === "articles";
   useWholeListCheck("StackedList", items.length, pager);
   const shown = pagerPart(items, pager);
@@ -11119,7 +11183,9 @@ var StackedList = forwardRef(function StackedList2({
               inset,
               interactive && [
                 "cursor-pointer [transition:var(--ds-transition-interactive)]",
-                "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+                // in a pane the rows run to its edges, which clip: the outline sits inside (D8), and on the selected
+                // row in the row's own text colour, which reads on its fill, the pill style's solid one too (P1)
+                inPane ? cn(FOCUS_INSET, isSelected && "[--ds-focus:var(--ds-nav-v-active-text)]") : FOCUS_RING
               ],
               // list: same colours as the vertical Tabs item — the theme's in-page vertical style decides rail, tint
               // or pill via the --ds-nav-v-* tokens — but a list row is a full-width band: no radius, ever, and a
@@ -11128,7 +11194,7 @@ var StackedList = forwardRef(function StackedList2({
               // articles: no rail, no tint; the title answers the pointer and the current row.
               // The placeholder exists only where a selection can appear, so a plain canvas list aligns exactly with its heading.
               !articles && selectable && "border-l-[length:calc(var(--ds-nav-v-active-rail)*1.5)]",
-              !articles && (isSelected ? "bg-[var(--ds-nav-v-active-bg)] text-[var(--ds-nav-v-active-text)] border-[var(--ds-accent-primary)]" : cn("border-transparent", interactive && "hover:bg-[var(--ds-tab-hover-bg)]")),
+              !articles && (isSelected ? "bg-[var(--ds-nav-v-active-bg)] text-[var(--ds-nav-v-active-text)] border-[var(--ds-accent-ink)]" : cn("border-transparent", interactive && "hover:bg-[var(--ds-tab-hover-bg)]")),
               articles && interactive && "group/row"
             ),
             onClick: item.onClick,
@@ -11150,9 +11216,9 @@ var StackedList = forwardRef(function StackedList2({
                     {
                       className: cn(
                         "text-sm",
-                        isSelected ? articles ? "font-medium text-[var(--ds-accent-primary)]" : "font-medium text-[var(--ds-nav-v-active-text)]" : hasEmphasis && !item.unread ? "text-[var(--ds-text-secondary)]" : "font-medium text-[var(--ds-text-primary)]",
+                        isSelected ? articles ? "font-medium text-[var(--ds-accent-ink)]" : "font-medium text-[var(--ds-nav-v-active-text)]" : hasEmphasis && !item.unread ? "text-[var(--ds-text-secondary)]" : "font-medium text-[var(--ds-text-primary)]",
                         // articles: the title answers the pointer (accent, underline) instead of the row's background
-                        articles && interactive && !isSelected && "transition-colors group-hover/row:text-[var(--ds-accent-primary)] group-hover/row:underline underline-offset-2"
+                        articles && interactive && !isSelected && "transition-colors group-hover/row:text-[var(--ds-accent-ink)] group-hover/row:underline underline-offset-2"
                       ),
                       children: item.title
                     }
@@ -11817,8 +11883,8 @@ var TimeViewport = forwardRef(function TimeViewport2({
         const { labelWidth: lw, headerHeight } = latest.current;
         const box = el.getBoundingClientRect();
         const r = target.getBoundingClientRect();
-        const top = box.top + headerHeight;
-        const bottom = box.top + el.clientHeight;
+        const top = box.top + headerHeight + 4;
+        const bottom = box.top + el.clientHeight - 4;
         if (r.top < top) el.scrollTop -= top - r.top;
         else if (r.bottom > bottom) el.scrollTop += Math.min(r.bottom - bottom, r.top - top);
         const x0 = r.left - box.left - lw + el.scrollLeft;
@@ -11994,7 +12060,7 @@ var TimeViewport = forwardRef(function TimeViewport2({
             tabIndex: tabStop ? 0 : void 0,
             onScroll,
             className: "peer h-full overflow-auto isolate outline-none",
-            style: { scrollPaddingInlineStart: pinnedWidth, scrollPaddingTop: frame.header },
+            style: { scrollPaddingInlineStart: pinnedWidth + 4, scrollPaddingInlineEnd: 4, scrollPaddingTop: frame.header + 4, scrollPaddingBottom: 4 },
             children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col", style: { width: pinnedWidth + drawn.width }, children: [
               hasHeader && /* @__PURE__ */ jsxs("div", { ref: headerRef, className: cn("sticky top-0 z-[3] flex shrink-0 bg-[var(--ds-bg-surface)] border-b-[length:var(--ds-border-width)]", border), children: [
                 /* @__PURE__ */ jsx(
@@ -12031,7 +12097,7 @@ var TimeViewport = forwardRef(function TimeViewport2({
             ] })
           }
         ),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 peer-focus-visible:shadow-[inset_0_0_0_2px_var(--ds-border-focus)] peer-focus-visible:outline-2 peer-focus-visible:-outline-offset-2 peer-focus-visible:outline-transparent" })
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none absolute inset-0", PEER_FOCUS_RING, "peer-focus-visible:-outline-offset-[var(--ds-focus-inset)]") })
       ] })
     ] }) }) })
   );
@@ -12089,7 +12155,7 @@ function TimeBar({ start, end, minWidth = 0, labels, children, className, style,
       ...props,
       ref: barRef,
       "data-gs-clip": "",
-      className: cn("absolute top-ds-2 bottom-ds-2 flex items-center overflow-clip rounded-[var(--ds-radius-sm)] outline-none focus-visible:outline-hidden focus-visible:shadow-[var(--ds-shadow-focus)]", className),
+      className: cn("absolute top-ds-2 bottom-ds-2 flex items-center overflow-clip rounded-[var(--ds-radius-sm)]", FOCUS_RING, className),
       style: { insetInlineStart: x, width: drawnWidth, ...style },
       children: label
     }
@@ -12233,7 +12299,7 @@ var NO_DATES = "no dates";
 var KNOCKOUT = 2;
 var EDGE = "border-[length:1px] border-transparent";
 var EDGE_WIDTH = 1;
-var SELECTED = "outline-solid outline-2 outline-offset-2 outline-[var(--ds-text-primary)]";
+var SELECTED = "border-[var(--ds-accent-ink)]";
 var UNDATED_INSET = 16;
 var NO_GROUPS = [];
 var NO_STATUSES = {};
@@ -12279,7 +12345,7 @@ function NoDates({ cue, selected, className, ...props }) {
       "data-gantt-shape": "undated",
       className: cn(
         "sticky flex cursor-pointer items-center gap-ds-1 whitespace-nowrap rounded-[var(--ds-radius-sm)] border-[length:1px] border-dashed border-[var(--ds-border-default)] px-ds-1.5 py-ds-0.5 text-xs text-[var(--ds-text-secondary)]",
-        "outline-none focus-visible:outline-hidden focus-visible:shadow-[var(--ds-shadow-focus)]",
+        FOCUS_RING,
         selected && SELECTED,
         className
       ),
@@ -12535,8 +12601,8 @@ function Gantt({
       /* @__PURE__ */ jsx("span", { className: "truncate", children: item.title })
     ] });
     const shapeBox = shape.kind === "milestone" ? (
-      // the target's own outline is its focus indicator in forced colours, which drop the diamond's shadow ring
-      /* @__PURE__ */ jsx("div", { ...treeitem(row), "aria-selected": isSelected, className: "group absolute grid cursor-pointer place-items-center outline-none focus-visible:outline-hidden", style: { insetInlineStart: (shape.x0 + shape.x1) / 2 - TARGET / 2, top: (ROW_HEIGHT2 - TARGET) / 2, width: TARGET, height: TARGET }, children: /* @__PURE__ */ jsx("span", { "data-gantt-shape": "milestone", "data-item": item.id, className: cn("block rotate-45 rounded-[2px] group-focus-visible:shadow-[var(--ds-shadow-focus)]", EDGE, tone.fill, isSelected && SELECTED), style: { width: DIAMOND, height: DIAMOND } }) })
+      // the diamond draws the target's focus: its outline, which forced colours keep, so the target draws none of its own
+      /* @__PURE__ */ jsx("div", { ...treeitem(row), "aria-selected": isSelected, className: "group absolute grid cursor-pointer place-items-center outline-none", style: { insetInlineStart: (shape.x0 + shape.x1) / 2 - TARGET / 2, top: (ROW_HEIGHT2 - TARGET) / 2, width: TARGET, height: TARGET }, children: /* @__PURE__ */ jsx("span", { "data-gantt-shape": "milestone", "data-item": item.id, className: cn("block rotate-45 rounded-[2px]", GROUP_FOCUS_RING, EDGE, tone.fill, isSelected && SELECTED), style: { width: DIAMOND, height: DIAMOND } }) })
     ) : (
       // TimeBar keeps the title in view beside the pinned column while the bar's start is scrolled away
       /* @__PURE__ */ jsx(
@@ -12558,12 +12624,16 @@ function Gantt({
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       shapeBox,
       place !== "inside" && // Beside the bar, past the turn an arrow makes; its own background keeps lines that cross the row off the
-      // text. Once it is partly under the pinned column or past the view's end it is hidden, never a fragment.
+      // text. Once it is partly under the pinned column or past the view's end it is hidden, never a fragment. On the
+      // selected row its background takes the row's tint, as the label's does.
       /* @__PURE__ */ jsx(
         "span",
         {
           "aria-hidden": "true",
-          className: "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center gap-ds-1 whitespace-nowrap rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-surface)] text-xs font-medium leading-4 text-[var(--ds-text-primary)]",
+          className: cn(
+            "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center gap-ds-1 whitespace-nowrap rounded-[var(--ds-radius-sm)] bg-[var(--ds-bg-surface)] text-xs font-medium leading-4 text-[var(--ds-text-primary)]",
+            isSelected && "bg-[image:linear-gradient(var(--ds-accent-subtle),var(--ds-accent-subtle))]"
+          ),
           style: { insetInlineStart: beside, paddingInline: KNOCKOUT, opacity: `clamp(0, calc(min(${beside} - var(--time-scroll, 0), var(--time-view-end, 1e9) - ${beside + textWidth}) * 1000), 1)` },
           children: title
         }
@@ -12633,7 +12703,7 @@ function Gantt({
       children: /* @__PURE__ */ jsxs("div", { ref: treeRef, role: "tree", "aria-label": ariaLabel, className: "relative", onKeyDown, onFocus: () => setFocusWithin(true), onBlur: onTreeBlur, children: [
         /* @__PURE__ */ jsx("span", { ref: probeRef, "aria-hidden": "true", className: "pointer-events-none invisible absolute whitespace-nowrap text-xs font-medium", children: "0" }),
         /* @__PURE__ */ jsx(GanttArrows, { arrows, width: scale.width, height: rows.length * ROW_HEIGHT2 }),
-        rows.map((row) => /* @__PURE__ */ jsx(
+        rows.map((row) => /* @__PURE__ */ jsxs(
           TimeRow,
           {
             "data-row-key": row.key,
@@ -12645,7 +12715,10 @@ function Gantt({
               row.item && row.item.id === selected && "bg-[image:linear-gradient(var(--ds-accent-subtle),var(--ds-accent-subtle))] text-[var(--ds-accent-subtle-text)]"
             ),
             onClick: () => onRowClick(row),
-            children: row.group ? renderGroup(row, row.group) : renderItem(row, row.item)
+            children: [
+              row.item && row.item.id === selected && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-[var(--ds-accent-subtle)]" }),
+              row.group ? renderGroup(row, row.group) : renderItem(row, row.item)
+            ]
           },
           row.key
         ))
@@ -12700,7 +12773,7 @@ var BUTTON_ELEVATION_SHADOW_ONLY = "shadow-[var(--ds-shadow-button)] active:shad
 var CORNER_SHAPE = cn(BUTTON_ELEVATION, "hover:-translate-y-[var(--ds-hover-lift)]");
 var LAUNCHER_RADIUS = "calc(var(--ds-radius-base) * 4)";
 var ACCENT_GLYPH = cn(
-  "text-[var(--ds-accent-primary)]",
+  "text-[var(--ds-accent-ink)]",
   "[&_svg]:[stroke:url(#gs-launcher-gradient)]",
   "[&_svg[fill=currentColor]]:[fill:url(#gs-launcher-gradient-fill)] [&_svg[fill=currentColor]]:[stroke:none]"
 );
@@ -12864,7 +12937,9 @@ function Launcher({
       className: cn(
         container ? "absolute" : "fixed",
         "z-[var(--ds-z-sticky)] inline-flex items-center justify-center cursor-pointer select-none font-medium",
-        FOCUS_RING,
+        // a ribbon is flush with the window's edge, where an outline outside it would be cut off: its outline sits inside
+        // (D8), in its own text colour, which reads on its fill as the bold band's does (Sprint 30, P1)
+        isRibbon ? cn(FOCUS_INSET, "[--ds-focus:currentColor]") : FOCUS_RING,
         "transition-[transform,filter,opacity,background-color] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
         hidden && "invisible pointer-events-none",
         TONE_SURFACE[tone],
@@ -13024,7 +13099,19 @@ function useScrollTrack(activeTab, enabled) {
     ...fadeProps
   };
 }
-var SCROLL_TRACK = "overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden max-w-full";
+var SCROLL_TRACK = "overflow-x-auto overflow-y-hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
+function TabStrip({ overflow, fullWidth, track, className, children }) {
+  const scrolls = overflow === "scroll";
+  return /* @__PURE__ */ jsx("div", { className: cn("min-w-0 max-w-full", fullWidth && "w-full", className), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...scrolls ? track : {},
+      "data-gs-clip": scrolls ? void 0 : "",
+      className: cn("relative -m-[4px] p-[4px] scroll-px-[4px]", scrolls ? SCROLL_TRACK : "overflow-hidden"),
+      children: /* @__PURE__ */ jsx("div", { role: "tablist", className: cn(trackClasses("horizontal"), scrolls ? "w-max min-w-full" : "w-full"), children })
+    }
+  ) });
+}
 function getTabsFromDOM(el) {
   const tablist = el.closest('[role="tablist"]');
   if (!tablist) return [];
@@ -13108,11 +13195,11 @@ function TabButton({
           disabled ? "cursor-not-allowed opacity-disabled" : "cursor-pointer",
           "rounded-[var(--ds-nav-v-item-radius)]",
           "transition-colors duration-[var(--ds-transition-speed)]",
-          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+          FOCUS_RING,
           // 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)]",
-          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)]",
+          isActive2 ? "bg-[var(--ds-nav-v-active-bg)] text-[var(--ds-nav-v-active-text)] border-[var(--ds-accent-ink)]" : "border-transparent text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-tab-hover-bg)]",
           className
         ),
         children: [
@@ -13148,11 +13235,11 @@ function TabButton({
         !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)]",
+        FOCUS_RING,
         fullWidth && "flex-1",
         truncate && "flex-1 min-w-0 justify-start",
         "rounded-[var(--ds-nav-h-item-radius)]",
-        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)]",
+        isActive2 ? "bg-[var(--ds-nav-h-active-bg)] text-[var(--ds-nav-h-active-text)] border-[var(--ds-accent-ink)]" : "text-[var(--ds-nav-h-inactive-text)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-nav-h-hover-bg)]",
         className
       ),
       style: isActive2 ? { borderBottomWidth: "var(--ds-nav-h-indicator)", marginBottom: "calc(var(--ds-nav-h-track-border) * -1)" } : void 0,
@@ -13184,22 +13271,7 @@ function TabsList({ children, className }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "tablist",
-      ...overflow === "scroll" ? track : {},
-      "data-gs-clip": overflow === "scroll" ? void 0 : "",
-      className: cn(
-        trackClasses("horizontal"),
-        "max-w-full",
-        overflow === "hidden" ? "overflow-hidden" : overflow === "truncate" ? "overflow-hidden" : SCROLL_TRACK,
-        fullWidth && "w-full",
-        className
-      ),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx(TabStrip, { overflow, fullWidth, track, className, children });
 }
 function TabsTrigger({ value, children, count, icon, disabled, truncate, className }) {
   const { activeTab, onTabChange, orientation, fullWidth, overflow } = useTabsCtx();
@@ -13231,7 +13303,7 @@ function TabsContent({ value, children, className }) {
       role: "tabpanel",
       "aria-labelledby": `ds-tab-${value}`,
       tabIndex: 0,
-      className,
+      className: cn(FOCUS_RING, className),
       children
     }
   );
@@ -13291,22 +13363,7 @@ function TabsRoot(props) {
         }
       );
     }
-    const effectiveOverflow = arrayOverflow;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "tablist",
-        ...effectiveOverflow === "scroll" ? track : {},
-        "data-gs-clip": effectiveOverflow === "scroll" ? void 0 : "",
-        className: cn(
-          trackClasses("horizontal"),
-          effectiveOverflow === "scroll" ? SCROLL_TRACK : "overflow-hidden",
-          fullWidth && "w-full",
-          className
-        ),
-        children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) }, tab.id))
-      }
-    );
+    return /* @__PURE__ */ jsx(TabStrip, { overflow: arrayOverflow, fullWidth, track, className, children: tabs.map((tab) => /* @__PURE__ */ jsx(TabButton, { hasPanel: false, ...tab, orientation: effectiveOrientation, activeTab, onTabChange, fullWidth, onKeyDown: (e) => handleTabKeyDown(e, tab.id, () => tabs, effectiveOrientation, onTabChange) }, tab.id)) });
   }
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { activeTab, onTabChange, orientation: effectiveOrientation, fullWidth, overflow }, children: /* @__PURE__ */ jsx("div", { className, children: props.children }) });
 }
@@ -13454,7 +13511,7 @@ function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal",
             {
               className: cn(
                 "text-xs font-medium",
-                status === "current" ? "text-[var(--ds-accent-primary)]" : kindOf2(step) === "locked" ? "text-[var(--ds-text-muted)]" : "text-[var(--ds-text-primary)]"
+                status === "current" ? "text-[var(--ds-accent-ink)]" : kindOf2(step) === "locked" ? "text-[var(--ds-text-muted)]" : "text-[var(--ds-text-primary)]"
               ),
               children: step.label
             }
@@ -13487,7 +13544,7 @@ function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal",
             {
               className: cn(
                 "text-xs font-medium leading-8",
-                status === "current" ? "text-[var(--ds-accent-primary)]" : kindOf2(step) === "locked" ? "text-[var(--ds-text-muted)]" : "text-[var(--ds-text-primary)]"
+                status === "current" ? "text-[var(--ds-accent-ink)]" : kindOf2(step) === "locked" ? "text-[var(--ds-text-muted)]" : "text-[var(--ds-text-primary)]"
               ),
               children: step.label
             }
@@ -13534,7 +13591,7 @@ function Stepper({ steps, currentStep, onStepChange, orientation = "horizontal",
               {
                 className: cn(
                   "text-xs font-medium",
-                  status === "current" ? "text-[var(--ds-accent-primary)]" : kindOf2(step) === "locked" ? "text-[var(--ds-text-muted)]" : "text-[var(--ds-text-primary)]"
+                  status === "current" ? "text-[var(--ds-accent-ink)]" : kindOf2(step) === "locked" ? "text-[var(--ds-text-muted)]" : "text-[var(--ds-text-primary)]"
                 ),
                 children: step.label
               }
@@ -13552,9 +13609,10 @@ function StepCircle({ status, index, label, kind, onClick }) {
   const look = cn(
     "flex items-center justify-center shrink-0 w-8 h-8 rounded-[var(--ds-radius-full)] text-xs font-bold transition-colors",
     status === "complete" && "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] text-[var(--ds-text-on-primary)]",
-    status === "current" && `border-2 ${ACTIVE_RING} text-[var(--ds-accent-primary)] bg-[var(--ds-bg-surface)]`,
+    // the current step is chosen, not active (D2): the accent border, never the halo
+    status === "current" && "border-2 border-[var(--ds-accent-ink)] text-[var(--ds-accent-ink)] 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 === "loading" && "border-2 border-[var(--ds-accent-ink)] text-[var(--ds-accent-ink)] 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)]"
   );
   const glyph = status === "complete" ? /* @__PURE__ */ jsx(Icon, { name: "check", size: 14 }) : status === "error" ? /* @__PURE__ */ jsx(Icon, { name: "warning", size: 14 }) : index + 1;
@@ -13571,10 +13629,10 @@ function StepCircle({ status, index, label, kind, onClick }) {
       "aria-current": status === "current" ? "step" : void 0,
       className: cn(
         look,
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        FOCUS_RING,
         kind === "open" ? "cursor-pointer" : "cursor-not-allowed opacity-disabled",
         // 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" && kind === "open" && "hover:border-[var(--ds-accent-primary)] hover:text-[var(--ds-accent-primary)]"
+        status === "upcoming" && kind === "open" && "hover:border-[var(--ds-accent-ink)] hover:text-[var(--ds-accent-ink)]"
       ),
       children: glyph
     }
@@ -13588,6 +13646,12 @@ function ScrollArea({
   maxWidth
 }) {
   const viewportRef = useRef(null);
+  const [viewport, setViewport] = useState(null);
+  useRevealFocus(viewport);
+  const viewportRefs = useCallback((node) => {
+    viewportRef.current = node;
+    setViewport(node);
+  }, []);
   const [thumbY, setThumbY] = useState({ top: 0, height: 0, visible: false });
   const [thumbX, setThumbX] = useState({ left: 0, width: 0, visible: false });
   const [hovering, setHovering] = useState(false);
@@ -13675,10 +13739,10 @@ function ScrollArea({
         /* @__PURE__ */ jsx(
           "div",
           {
-            ref: viewportRef,
+            ref: viewportRefs,
             onScroll: updateThumbs,
             className: cn(
-              "h-full w-full",
+              "h-full w-full scroll-p-[4px]",
               orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
               orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
               orientation === "both" && "overflow-auto",
@@ -13802,6 +13866,8 @@ var Sidebar = forwardRef(function Sidebar2({
         "flex flex-col shrink-0 h-full",
         isFloating ? cn("rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-sidebar-border)]", GLASS_SURFACE) : !isMinimal && "border-r-[length:var(--ds-border-width)] border-[var(--ds-sidebar-border)]",
         "text-[var(--ds-sidebar-text)]",
+        // keyboard focus in the sidebar's own focus colour, derived against its background (Sprint 30, P2)
+        "[--ds-focus:var(--ds-sidebar-focus)]",
         isMinimal ? "bg-transparent" : "bg-[var(--ds-sidebar-bg)]",
         !isMinimal && !isFloating && GLASS_BACKDROP,
         !isFloating && "transition-[width] duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
@@ -13840,7 +13906,7 @@ var Sidebar = forwardRef(function Sidebar2({
                 isSm ? "py-ds-1.5 text-xs" : "py-ds-2 text-sm",
                 "transition-colors cursor-pointer",
                 "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]",
-                "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+                FOCUS_RING,
                 collapsed ? "justify-center px-0" : "px-ds-3"
               ),
               style: { marginBottom: "var(--ds-space-3)" },
@@ -14004,6 +14070,7 @@ function CompactFlyout({
                 },
                 className: cn(
                   "flex items-center gap-ds-2 px-ds-2 py-ds-1.5 text-xs rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
+                  FOCUS_RING,
                   child.active ? "bg-[var(--ds-sidebar-active-bg)] [background-image:var(--ds-sidebar-active-image)] text-[var(--ds-sidebar-active-accent)] font-medium" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
                 ),
                 children: [
@@ -14102,6 +14169,7 @@ function SidebarNav({
         },
         className: cn(
           "flex items-center gap-ds-2 transition-colors cursor-pointer",
+          FOCUS_RING,
           isRoot ? cn(rootPy, rootText, isMinimal ? "rounded-[var(--ds-radius-full)]" : "rounded-[var(--ds-radius-md)]") : cn(childPy, "text-xs rounded-[var(--ds-radius-sm)]"),
           isRoot ? collapsed ? "justify-center px-0" : "px-ds-3" : "px-ds-2",
           // Active style comes from the theme's --ds-sidebar-active-* tokens
@@ -14188,6 +14256,7 @@ function SidebarNav({
           "aria-expanded": isExpanded,
           className: cn(
             "flex items-center gap-ds-2 w-full text-left transition-colors cursor-pointer",
+            FOCUS_RING,
             isRoot ? cn(rootPy, rootText, isMinimal ? "rounded-[var(--ds-radius-full)]" : "rounded-[var(--ds-radius-md)]") : cn(childPy, "text-xs rounded-[var(--ds-radius-sm)]"),
             isRoot ? collapsed ? "justify-center px-0" : "px-ds-3" : "px-ds-2",
             // This row has no fill, so its label, icon and chevron keep the plain
@@ -14201,7 +14270,7 @@ function SidebarNav({
               {
                 name: item.icon,
                 size: isRoot ? rootIconSize : childIconSize,
-                className: cn("shrink-0", (item.active || childActive) && "text-[var(--ds-sidebar-accent)]")
+                className: cn("shrink-0", (item.active || childActive) && "text-[var(--ds-sidebar-accent-ink)]")
               }
             ),
             !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -14214,7 +14283,7 @@ function SidebarNav({
                   size: 12,
                   className: cn(
                     "shrink-0 transition-transform",
-                    item.active || childActive ? "text-[var(--ds-sidebar-accent)]" : "text-[var(--ds-sidebar-text-muted)]",
+                    item.active || childActive ? "text-[var(--ds-sidebar-accent-ink)]" : "text-[var(--ds-sidebar-text-muted)]",
                     isExpanded && "rotate-90"
                   )
                 }
@@ -14307,7 +14376,7 @@ function SidebarNav({
         /* @__PURE__ */ jsx(
           "nav",
           {
-            className: "flex-1 flex flex-col",
+            className: "flex-1 flex flex-col [--ds-focus:var(--ds-sidebar-focus)]",
             style: { padding: "var(--ds-space-3) var(--ds-space-2)", gap: "var(--ds-space-3)" },
             children: navContent
           }
@@ -14322,6 +14391,8 @@ function SidebarNav({
               "flex items-center gap-ds-2 mx-ds-2 rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
               isSm ? "py-ds-1.5 text-xs" : "py-ds-2 text-sm",
               "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]",
+              "[--ds-focus:var(--ds-sidebar-focus)]",
+              FOCUS_RING,
               collapsed ? "justify-center px-0" : "px-ds-3"
             ),
             style: { marginBottom: "var(--ds-space-3)" },
@@ -14398,6 +14469,7 @@ function CompactNavItem({
         "aria-controls": !mobile && hasChildren && isOpen ? flyoutId : void 0,
         className: cn(
           "relative flex flex-col items-center justify-center gap-[3px] w-full py-ds-3 px-ds-1 rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
+          FOCUS_RING,
           // Compact tiles have no edge to stroke: they read the fill and text
           // tokens only, never --ds-sidebar-active-rail.
           item.active || childActive ? "bg-[var(--ds-sidebar-active-bg)] [background-image:var(--ds-sidebar-active-image)] text-[var(--ds-sidebar-active-accent)]" : "text-[var(--ds-sidebar-text-secondary)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
@@ -14449,6 +14521,7 @@ function CompactNavItem({
         onClick: () => onItemClick?.(child, ci),
         className: cn(
           "flex items-center gap-ds-2 px-ds-3 py-ds-1.5 text-[length:var(--ds-font-size-xs)] rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer w-full",
+          FOCUS_RING,
           child.active ? "bg-[var(--ds-sidebar-active-bg)] [background-image:var(--ds-sidebar-active-image)] text-[var(--ds-sidebar-active-accent)] font-medium" : "text-[var(--ds-sidebar-text-muted)] hover:bg-[var(--ds-sidebar-item-hover)] hover:text-[var(--ds-sidebar-text)]"
         ),
         children: [
@@ -14466,6 +14539,12 @@ var variantStyles4 = {
   warning: "border-[var(--ds-status-warning)] bg-[var(--ds-status-warning-bg)]",
   error: "border-[var(--ds-status-error)] bg-[var(--ds-status-error-bg)]"
 };
+var actionStyles = {
+  default: "text-[var(--ds-accent-ink)]",
+  success: "text-[var(--ds-status-success-text)]",
+  warning: "text-[var(--ds-status-warning-text)]",
+  error: "text-[var(--ds-status-error-text)]"
+};
 var variantIcons = {
   default: { name: "info", className: "text-[var(--ds-text-muted)]" },
   success: { name: "check", className: "text-[var(--ds-status-success)]" },
@@ -14573,7 +14652,7 @@ function Toast({ variant = "default", message, visible, onDismiss, duration = 5e
           {
             type: "button",
             onClick: pressAction,
-            className: "shrink-0 text-xs font-semibold text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
+            className: cn("shrink-0 text-xs font-semibold hover:underline cursor-pointer", actionStyles[variant], FOCUS_RING),
             children: action.label
           }
         ),
@@ -14583,7 +14662,7 @@ function Toast({ variant = "default", message, visible, onDismiss, duration = 5e
             type: "button",
             onClick: onDismiss,
             "aria-label": "Dismiss notification",
-            className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer shrink-0",
+            className: cn("text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer shrink-0", FOCUS_RING),
             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
           }
         )
@@ -14961,7 +15040,7 @@ function ToastProvider({ children, maxVisible = 3, position = "bottom-right", du
                 waiting,
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: " more waiting" })
               ] }),
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: dismissAll, className: "font-medium text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:underline cursor-pointer", children: "Clear all" })
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: dismissAll, className: cn("font-medium text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:underline cursor-pointer", FOCUS_RING), children: "Clear all" })
             ] })
           ]
         }
@@ -15014,7 +15093,9 @@ function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
               className: cn(
                 "flex flex-col items-center justify-center gap-ds-0.5 w-full h-full",
                 "text-2xs font-medium transition-colors cursor-pointer",
-                overflowHasActive || overflowOpen ? "text-[var(--ds-accent-primary)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
+                // flush with the window's edge, as every bar item is: the outline sits inside (D8)
+                FOCUS_INSET,
+                overflowHasActive || overflowOpen ? "text-[var(--ds-accent-ink)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
               ),
               children: [
                 /* @__PURE__ */ jsx(Icon, { name: "grip-vertical", size: 20 }),
@@ -15043,9 +15124,11 @@ function BottomNav({ items, onItemClick, maxVisible = 5, className, ref }) {
                   },
                   className: cn(
                     "flex items-center gap-ds-2 w-full px-ds-3 py-ds-2 text-sm transition-colors cursor-pointer",
-                    // The panel clips, so focus is a row tint (never an outline that the corner would trim).
-                    "focus-visible:outline-none focus-visible:bg-[var(--ds-bg-muted)] focus-visible:text-[var(--ds-text-primary)]",
-                    item.active ? "text-[var(--ds-accent-primary)] font-medium bg-[var(--ds-bg-muted)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
+                    // Keyboard focus keeps the row tint and adds the shared outline, inside the row: the menu clips its
+                    // full-width rows, which are never filled solid (Sprint 30, P3)
+                    "focus-visible:bg-[var(--ds-bg-muted)] focus-visible:text-[var(--ds-text-primary)]",
+                    FOCUS_INSET,
+                    item.active ? "text-[var(--ds-accent-ink)] font-medium bg-[var(--ds-bg-muted)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
                   ),
                   children: [
                     /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 16 }),
@@ -15070,7 +15153,9 @@ function NavButton({ item, onClick }) {
       className: cn(
         "flex flex-col items-center justify-center gap-ds-0.5 flex-1 h-full",
         "text-2xs font-medium transition-colors cursor-pointer",
-        item.active ? "text-[var(--ds-accent-primary)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
+        // flush with the window's edge (the bar's foot and its ends): the outline sits inside, where it shows whole (D8)
+        FOCUS_INSET,
+        item.active ? "text-[var(--ds-accent-ink)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
       ),
       children: [
         /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 20 }),
@@ -15401,7 +15486,7 @@ function outerHeight(el) {
 function Breadcrumbs2({ items, onLight, onTint, pill, separator = "chevron" }) {
   const follow2 = 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 mutedCls = onLight ? "text-[var(--ds-text-on-primary-muted)]" : onTint ? "text-[var(--ds-text-muted-on-tint)]" : "text-[var(--ds-text-secondary)]";
   const sepEl = (key) => {
     const cls = cn("select-none flex items-center", mutedCls);
     if (separator === "slash") return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cls, children: "/" }, `s${key}`);
@@ -15425,13 +15510,15 @@ function Breadcrumbs2({ items, onLight, onTint, pill, separator = "chevron" }) {
           onClick: (e) => follow2(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)]"),
-            pillCls
+            // on the band, the band's quieter text, its full text on hover (the quieter text can be 90%)
+            onLight ? "text-[var(--ds-text-on-primary-muted)] hover:text-[var(--ds-text-on-primary)]" : cn(mutedCls, "hover:text-[var(--ds-text-primary)]"),
+            pillCls,
+            FOCUS_RING
           ),
           children: item.label
         }
       ) : /* @__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,
+        isCurrent ? cn("font-medium", onLight ? "text-[var(--ds-text-on-primary-muted)]" : "text-[var(--ds-text-primary)]") : onLight ? "text-[var(--ds-text-on-primary-muted)]" : mutedCls,
         pillCls
       ), children: item.label })
     ] }, i);
@@ -15462,8 +15549,8 @@ function BackButton({ onLight, onClick }) {
         "flex items-center justify-center shrink-0 cursor-pointer",
         "w-[var(--ds-control-height-sm)] h-[var(--ds-control-height-sm)] rounded-[var(--ds-radius-md)]",
         "transition-colors duration-[var(--ds-transition-speed)]",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        onLight ? "bg-[var(--ds-text-on-primary)]/10 text-[var(--ds-text-on-primary)]/80 hover:bg-[var(--ds-text-on-primary)]/20 hover:text-[var(--ds-text-on-primary)]" : [
+        FOCUS_RING,
+        onLight ? "bg-[var(--ds-text-on-primary)]/10 text-[var(--ds-text-on-primary-muted)] hover:bg-[var(--ds-text-on-primary)]/20 hover:text-[var(--ds-text-on-primary)]" : [
           "bg-[var(--ds-bg-surface)] text-[var(--ds-text-secondary)]",
           "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
           "hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
@@ -15481,8 +15568,9 @@ function BackLink({ onClick, onLight }) {
       onClick,
       className: cn(
         "inline-flex items-center gap-ds-1 mb-ds-3 text-sm underline underline-offset-4 cursor-pointer",
-        "rounded-[var(--ds-radius-sm)] focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
-        onLight ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)] hover:text-[var(--ds-accent-primary)]"
+        "rounded-[var(--ds-radius-sm)]",
+        FOCUS_RING,
+        onLight ? "text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-primary)] hover:text-[var(--ds-accent-ink)]"
       ),
       children: [
         /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: 14 }),
@@ -15494,11 +15582,13 @@ function BackLink({ onClick, onLight }) {
 function Caption({ children, onLight, onTint }) {
   return /* @__PURE__ */ jsx("p", { className: cn(
     "mb-ds-1 text-sm font-medium",
-    onLight ? "text-[var(--ds-text-on-primary)]/80" : onTint ? "text-[var(--ds-text-muted-on-tint)]" : "text-[var(--ds-text-secondary)]"
+    onLight ? "text-[var(--ds-text-on-primary-muted)]" : 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)]",
+  // on the surface, the page's focus colour again, which the band kept for it (Sprint 30, P2)
+  "[--ds-focus:var(--gs-page-focus)]",
   "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
 );
@@ -15875,7 +15965,7 @@ function ColourfulHeader({
       className: cn(
         "relative overflow-hidden w-full",
         !isFloating && !overlapActive && !noBottomMargin && "mb-ds-6",
-        isBold ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box]" : "bg-[var(--ds-tint-base)]",
+        isBold ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box] [--gs-page-focus:var(--ds-focus)]" : "bg-[var(--ds-tint-base)]",
         isFloating ? cn(
           "rounded-[var(--ds-radius-md)]",
           "border-[length:var(--ds-border-width)]",
@@ -15906,7 +15996,9 @@ function ColourfulHeader({
             className: cn(
               "relative z-10 w-full mx-auto pb-ds-6",
               gutter && "px-ds-6",
-              hasBreadcrumbs ? "pt-ds-3" : "pt-ds-6"
+              hasBreadcrumbs ? "pt-ds-3" : "pt-ds-6",
+              // on the band, keyboard focus is the band's text colour, the one colour proven against all it paints (P1, P2)
+              isBold && "[--ds-focus:var(--ds-text-on-primary)]"
             ),
             style: {
               maxWidth: gutter ? contentMaxWidth ?? "var(--ds-bp-xl)" : void 0,
@@ -15936,7 +16028,7 @@ function ColourfulHeader({
                     ] }),
                     description && /* @__PURE__ */ jsx(ClampedText, { className: cn(
                       "mt-ds-1 text-sm",
-                      isBold ? "text-[var(--ds-text-on-primary)]/70" : "text-[var(--ds-text-secondary)]"
+                      isBold ? "text-[var(--ds-text-on-primary-muted)]" : "text-[var(--ds-text-secondary)]"
                     ), children: description })
                   ] })
                 ] }),
@@ -16090,11 +16182,11 @@ function SnappingHeader({
           "relative overflow-hidden",
           "rounded-[var(--ds-radius-md)]",
           "border-[length:var(--ds-border-width)]",
-          isBoldColourful ? "border-[color-mix(in_srgb,var(--ds-accent-primary)_70%,black)] bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box]" : cn("border-[var(--ds-border-subtle)] bg-[var(--ds-tint-base)]", GLASS_SURFACE)
+          isBoldColourful ? "border-[color-mix(in_srgb,var(--ds-accent-primary)_70%,black)] bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box] [--gs-page-focus:var(--ds-focus)]" : cn("border-[var(--ds-border-subtle)] bg-[var(--ds-tint-base)]", GLASS_SURFACE)
         ] : [
           "relative overflow-hidden",
           !overlapActive && !wrapperHasCard && "mb-ds-6",
-          isBoldColourful ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box] border-b-[2px] border-[color-mix(in_srgb,var(--ds-accent-primary)_70%,black)]" : "bg-[var(--ds-tint-base)] border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
+          isBoldColourful ? "bg-[var(--ds-accent-primary)] [background-image:var(--ds-gradient)] [background-origin:border-box] border-b-[2px] border-[color-mix(in_srgb,var(--ds-accent-primary)_70%,black)] [--gs-page-focus:var(--ds-focus)]" : "bg-[var(--ds-tint-base)] border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
         ]),
         !collapsed && !isColourful && isFloating && !wrapperHasCard && FLOATING_HEADER,
         className
@@ -16137,6 +16229,8 @@ function SnappingHeader({
               className: cn(
                 "transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
                 isColourful && !collapsed && "relative z-10",
+                // on the band, keyboard focus is the band's text colour, as the colourful header's (P1, P2)
+                onLight && "[--ds-focus:var(--ds-text-on-primary)]",
                 collapsed ? cn("flex items-center justify-between gap-ds-4 py-ds-2", !effectiveMaxWidth && "px-ds-4") : [
                   (!isColourful || !overlapActive) && "pb-ds-6",
                   hasBreadcrumbs && !hideExpandedBreadcrumbs ? "pt-ds-3" : "pt-ds-6"
@@ -16171,7 +16265,7 @@ function SnappingHeader({
                               } : {},
                               className: cn(
                                 "text-sm hidden @sm:inline-flex items-center gap-ds-1",
-                                isClickable ? "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] transition-colors duration-[var(--ds-transition-speed)] cursor-pointer" : "text-[var(--ds-text-secondary)]"
+                                isClickable ? cn("text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] transition-colors duration-[var(--ds-transition-speed)] cursor-pointer", FOCUS_RING) : "text-[var(--ds-text-secondary)]"
                               ),
                               children: [
                                 lastCrumb?.label,
@@ -16188,7 +16282,7 @@ function SnappingHeader({
                       ] }),
                       !collapsed && description && /* @__PURE__ */ jsx(ClampedText, { className: cn(
                         "mt-ds-1 text-sm",
-                        onLight ? "text-[var(--ds-text-on-primary)]/70" : "text-[var(--ds-text-secondary)]"
+                        onLight ? "text-[var(--ds-text-on-primary-muted)]" : "text-[var(--ds-text-secondary)]"
                       ), children: description })
                     ] })
                   ] }),
@@ -16382,7 +16476,7 @@ function Dock({
                   "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
                   "shadow-[var(--ds-shadow-button)]",
                   "cursor-pointer origin-bottom",
-                  "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+                  FOCUS_RING
                 ),
                 style: {
                   width: baseSize,
@@ -16431,8 +16525,9 @@ function Dock({
     }
   );
 }
+var NAV_ITEM_TYPES = /* @__PURE__ */ new Set(["tint", "underline", "minimal", "pill"]);
 function resolveNavItemType(type) {
-  return type === "default" ? "tint" : type;
+  return type !== void 0 && NAV_ITEM_TYPES.has(type) ? type : "tint";
 }
 var NavbarTypeContext = createContext("tint");
 var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href, onClick, type: typeProp, className, children }, ref) {
@@ -16442,7 +16537,7 @@ var NavItem = forwardRef(function NavItem2({ label, icon, active = false, href,
     "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)]",
+    FOCUS_RING,
     "text-[length:var(--ds-font-size-sm)]"
   );
   const typeClasses = getTypeClasses(type, active);
@@ -16477,12 +16572,12 @@ function getTypeClasses(type, active) {
     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)]"
+        active ? "text-[var(--ds-accent-ink)] 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)]"
+        active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-ink)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
       );
   }
 }
@@ -16562,7 +16657,7 @@ function NavMenu({
   const triggerClasses = cn(
     "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)]",
+    FOCUS_RING,
     navItemClasses(type, hasActiveChild),
     className
   );
@@ -16651,9 +16746,10 @@ function NavMenuItemRow({
       },
       className: cn(
         "flex items-center gap-ds-2 mx-ds-1 px-ds-2 py-ds-1.5 rounded-[var(--ds-radius-sm)] transition-colors cursor-pointer",
+        FOCUS_RING,
         // The active row takes the accent tint like an active NavItem; it marks
         // the current page, not a hover.
-        item.active ? "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)]"
+        item.active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-ink)] font-medium" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)] hover:text-[var(--ds-text-primary)]"
       ),
       children: [
         item.icon && /* @__PURE__ */ jsx(
@@ -16661,7 +16757,7 @@ function NavMenuItemRow({
           {
             name: item.icon,
             size: 16,
-            className: cn("shrink-0", item.active && "text-[var(--ds-accent-primary)]")
+            className: cn("shrink-0", item.active && "text-[var(--ds-accent-ink)]")
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
@@ -16710,7 +16806,7 @@ function HamburgerButton({ onClick, open, className: cls }) {
         "w-10 h-10 rounded-[var(--ds-radius-md)]",
         "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)]",
         "hover:bg-[var(--ds-bg-muted)] transition-colors",
-        "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
+        FOCUS_RING,
         "cursor-pointer",
         cls
       ),
@@ -16923,7 +17019,7 @@ var Navbar = forwardRef(function Navbar2({
             showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger, open: appShell?.sidebarOpen }),
             logo && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0 whitespace-nowrap", children: logo })
           ] }),
-          navLinks && !hideNavLinks ? /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { ref: navRef, className: "flex items-center gap-ds-2 min-w-0 overflow-x-clip justify-center", "data-navbar-type": type, children: linkRow }) }) : /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "" }),
+          navLinks && !hideNavLinks ? /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { ref: navRef, className: "flex items-center gap-ds-2 min-w-0 overflow-x-clip px-[4px] -mx-[4px] justify-center", "data-navbar-type": type, children: linkRow }) }) : /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-4 justify-end", children: [
             shownSearch && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: shownSearch }),
             actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }),
@@ -16951,7 +17047,7 @@ var Navbar = forwardRef(function Navbar2({
           showHamburger && /* @__PURE__ */ jsx(HamburgerButton, { onClick: handleHamburger, open: appShell?.sidebarOpen }),
           logo && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0 whitespace-nowrap", children: logo }),
           align === "right" && /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "", className: "flex-1" }),
-          navLinks && !hideNavLinks && /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { ref: navRef, className: cn("flex items-center gap-ds-2 min-w-0 overflow-x-clip", align === "left" && "flex-1"), "data-navbar-type": type, children: linkRow }) }),
+          navLinks && !hideNavLinks && /* @__PURE__ */ jsx(NavbarTypeContext.Provider, { value: type, children: /* @__PURE__ */ jsx("nav", { ref: navRef, className: cn("flex items-center gap-ds-2 min-w-0 overflow-x-clip px-[4px] -mx-[4px]", align === "left" && "flex-1"), "data-navbar-type": type, children: linkRow }) }),
           (!navLinks || hideNavLinks) && /* @__PURE__ */ jsx("div", { "data-navbar-spacer": "", className: "flex-1" }),
           shownSearch && /* @__PURE__ */ jsx("div", { className: "flex items-center shrink-0", children: shownSearch }),
           actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-ds-2 shrink-0", children: actions }),
@@ -17009,6 +17105,7 @@ function MobileMenuItem({
         className: cn(
           "flex items-center gap-ds-3 px-ds-3 py-ds-3 text-sm relative cursor-pointer w-full text-left",
           "transition-colors duration-[var(--ds-transition-speed)]",
+          FOCUS_RING,
           "border-b-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
           item.active ? "text-[var(--ds-text-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]"
         ),
@@ -17034,7 +17131,8 @@ function MobileMenuItem({
         className: cn(
           "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm cursor-pointer w-full text-left",
           "transition-colors duration-[var(--ds-transition-speed)]",
-          item.active ? "text-[var(--ds-accent-primary)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
+          FOCUS_RING,
+          item.active ? "text-[var(--ds-accent-ink)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-secondary)]"
         ),
         children: [
           item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 18, className: "shrink-0" }),
@@ -17052,6 +17150,7 @@ function MobileMenuItem({
         className: cn(
           "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm rounded-[var(--ds-radius-md)] cursor-pointer w-full text-left",
           "transition-colors duration-[var(--ds-transition-speed)]",
+          FOCUS_RING,
           item.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)]"
         ),
         children: [
@@ -17069,7 +17168,8 @@ function MobileMenuItem({
       className: cn(
         "flex items-center gap-ds-3 px-ds-3 py-ds-2.5 text-sm rounded-[var(--ds-radius-md)] cursor-pointer w-full text-left",
         "transition-colors duration-[var(--ds-transition-speed)]",
-        item.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)]"
+        FOCUS_RING,
+        item.active ? "bg-[var(--ds-accent-subtle)] text-[var(--ds-accent-ink)] font-[var(--ds-weight-heading)]" : "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]"
       ),
       children: [
         item.icon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 18, className: "shrink-0" }),
@@ -17197,6 +17297,7 @@ function CommandPalette({ open, onOpenChange, commands, placeholder = "Type a co
                       onChange: (e) => setQuery(e.target.value),
                       onKeyDown: handleKeyDown,
                       placeholder,
+                      "data-popup-search": "",
                       className: "flex-1 bg-transparent text-sm text-[var(--ds-text-primary)] placeholder:text-[var(--ds-text-muted)] outline-none"
                     }
                   ),
@@ -17388,6 +17489,7 @@ function ContextMenu({ items, children, className, ref, container }) {
         else if (ref) ref.current = node;
       },
       onContextMenu: handleContextMenu,
+      "data-context-menu": "",
       className,
       children: [
         children,
@@ -17428,9 +17530,11 @@ function ContextMenu({ items, children, className, ref, container }) {
                     className: cn(
                       "flex items-center w-full text-left text-sm cursor-pointer",
                       "px-ds-3 py-ds-1.5 gap-ds-3",
-                      "transition-colors focus-visible:outline-none focus-visible:bg-[var(--ds-bg-muted)]",
+                      "transition-colors focus-visible:bg-[var(--ds-bg-muted)]",
+                      // full-width rows in a panel that clips, never filled solid: the outline sits inside (Sprint 30, P3)
+                      FOCUS_INSET,
                       item.disabled && "opacity-disabled cursor-not-allowed",
-                      item.destructive ? "text-[var(--ds-status-error)]" : "text-[var(--ds-text-primary)]",
+                      item.destructive ? "text-[var(--ds-status-error-text)]" : "text-[var(--ds-text-primary)]",
                       isHighlighted && "bg-[var(--ds-bg-muted)]"
                     ),
                     children: [
@@ -17487,6 +17591,8 @@ function NotificationCenter({
   }, [isControlled, onOpenChangeRef]);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
+  const [list2, setList] = useState(null);
+  useRevealFocus(list2);
   const pos = usePosition(triggerRef, panelRef, open, { side: "bottom", align: "end", offset: 8, flip: true });
   const filter = controlledFilter ?? internalFilter;
   const setFilter = onFilterChange ?? setInternalFilter;
@@ -17528,7 +17634,7 @@ function NotificationCenter({
           {
             type: "button",
             onClick: onMarkAllRead,
-            className: "text-sm text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
+            className: cn("text-sm text-[var(--ds-accent-ink)] hover:underline cursor-pointer", FOCUS_RING),
             children: "Mark all read"
           }
         ) })
@@ -17541,6 +17647,7 @@ function NotificationCenter({
             onClick: () => setFilter("all"),
             className: cn(
               "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
+              FOCUS_RING,
               filter === "all" ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)]"
             ),
             children: "All"
@@ -17553,6 +17660,7 @@ function NotificationCenter({
             onClick: () => setFilter("unread"),
             className: cn(
               "px-ds-3 py-ds-1.5 text-sm rounded-[var(--ds-radius-md)] transition-colors cursor-pointer",
+              FOCUS_RING,
               filter === "unread" ? "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]" : "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-muted)]"
             ),
             children: [
@@ -17602,7 +17710,7 @@ function NotificationCenter({
                     type: "button",
                     onClick: () => onMarkRead(n.id),
                     "aria-label": "Mark as read",
-                    className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
+                    className: cn("text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5", FOCUS_RING),
                     children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 14 })
                   }
                 ),
@@ -17612,7 +17720,7 @@ function NotificationCenter({
                     type: "button",
                     onClick: () => onDismiss(n.id),
                     "aria-label": "Dismiss",
-                    className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
+                    className: cn("text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5", FOCUS_RING),
                     children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 })
                   }
                 )
@@ -17639,7 +17747,7 @@ function NotificationCenter({
           "rounded-[var(--ds-radius-md)]",
           "text-[var(--ds-text-secondary)] hover:text-[var(--ds-text-primary)] hover:bg-[var(--ds-bg-muted)]",
           "transition-colors cursor-pointer",
-          "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+          FOCUS_RING
         ),
         children: [
           /* @__PURE__ */ jsx(Icon, { name: "bell", size: 18 }),
@@ -17670,12 +17778,12 @@ function NotificationCenter({
                 {
                   type: "button",
                   onClick: onMarkAllRead,
-                  className: "text-xs text-[var(--ds-accent-primary)] hover:underline cursor-pointer",
+                  className: cn("text-xs text-[var(--ds-accent-ink)] hover:underline cursor-pointer", FOCUS_RING),
                   children: "Mark all read"
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+            /* @__PURE__ */ jsxs("div", { ref: setList, className: "flex-1 overflow-y-auto pb-[4px] scroll-p-[4px]", children: [
               notifications.length === 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-ds-12 text-[var(--ds-text-muted)]", children: [
                 /* @__PURE__ */ jsx(Icon, { name: "bell", size: 32, className: "opacity-30 mb-ds-2" }),
                 /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No notifications" })
@@ -17716,7 +17824,7 @@ function NotificationCenter({
                             type: "button",
                             onClick: () => onMarkRead(n.id),
                             "aria-label": "Mark as read",
-                            className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
+                            className: cn("text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5", FOCUS_RING),
                             children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 14 })
                           }
                         ),
@@ -17726,7 +17834,7 @@ function NotificationCenter({
                             type: "button",
                             onClick: () => onDismiss(n.id),
                             "aria-label": "Dismiss",
-                            className: "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5",
+                            className: cn("text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer p-ds-0.5", FOCUS_RING),
                             children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 14 })
                           }
                         )
@@ -17889,7 +17997,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                   {
                     type: "button",
                     onClick: onClose,
-                    className: "shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer -mt-ds-0.5",
+                    className: cn("shrink-0 text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)] transition-colors cursor-pointer -mt-ds-0.5", FOCUS_RING),
                     "aria-label": "Close tour",
                     children: /* @__PURE__ */ jsx(Icon, { name: "close", size: 16 })
                   }
@@ -17913,7 +18021,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                       "px-ds-3 py-ds-1.5 text-xs font-medium rounded-[var(--ds-radius-sm)]",
                       "text-[var(--ds-text-secondary)] hover:bg-[var(--ds-bg-emphasis)]",
                       "transition-colors cursor-pointer",
-                      "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+                      FOCUS_RING
                     ),
                     children: "Back"
                   }
@@ -17928,7 +18036,7 @@ function Tour({ steps, open, onClose, onComplete, container }) {
                       "px-ds-3 py-ds-1.5 text-xs font-medium rounded-[var(--ds-radius-sm)]",
                       "bg-[var(--ds-accent-primary)] text-[var(--ds-text-on-primary)]",
                       "transition-colors cursor-pointer",
-                      "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]"
+                      FOCUS_RING
                     ),
                     children: current < steps.length - 1 ? "Next" : "Done"
                   }
@@ -18090,6 +18198,7 @@ function focusHeading() {
   const heading = document.querySelector("main h1") ?? document.querySelector("main");
   if (!heading) return;
   if (!heading.hasAttribute("tabindex")) heading.setAttribute("tabindex", "-1");
+  heading.style.outline = "none";
   heading.focus({ preventScroll: false });
 }
 function focusAfterLeaving() {