gridsmith-ui 0.30.2 → 0.31.0

package/dist/index.js

@@ -1,46 +1,46 @@
 "use client";
-import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useCornerInset, NAVBAR_INSET_PRIORITY, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, besideRoom, PANEL_INSET_PRIORITY, Drawer, useRememberedWidth, pxOf, ResizeEdge, LAUNCHER_INSET_PRIORITY, defaultMaxWidth } from './chunk-K6IDOCGE.js';
-export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-K6IDOCGE.js';
-import { Skeleton, TITLE_TEXT } from './chunk-6C2IUMY7.js';
-export { Skeleton } from './chunk-6C2IUMY7.js';
+import { useAppShell, REACT_VERSION_PROBLEM, Breadcrumbs, useCrumbFollow, crumbGoes, useCornerInset, NAVBAR_INSET_PRIORITY, useOverlayMark, useDirtyGuard, useScrollbarInset, DrawerFooterCtx, OverlayMarkScope, OverlayCloseCtx, insetLessScrollbar, DiscardConfirm, OVERLAY_ROOT_ATTR, OverlayMarkCtx, useCompact, useElementWidth, DrawerPanel, useCloseSettle, besideRoom, PANEL_INSET_PRIORITY, Drawer, useRememberedWidth, pxOf, ResizeEdge, LAUNCHER_INSET_PRIORITY, defaultMaxWidth } from './chunk-EKWXPSTI.js';
+export { AppShell, Breadcrumbs, Drawer, SkipLink, useAppShell, useUnsavedChanges } from './chunk-EKWXPSTI.js';
+import { Skeleton, TITLE_TEXT, SegmentedControl } from './chunk-U7WBI4AV.js';
+export { SegmentedControl, Skeleton } from './chunk-U7WBI4AV.js';
 import { useScrollEdges, EDGE_FADE } from './chunk-3BRQRKDO.js';
-import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-ZASGFL5D.js';
-export { Avatar } from './chunk-ZASGFL5D.js';
-import { Link } from './chunk-SQHKC4HA.js';
-export { CodeBlock, Divider, Link } from './chunk-SQHKC4HA.js';
-import { DropdownMenu } from './chunk-HVGHGBKV.js';
-export { DropdownMenu } from './chunk-HVGHGBKV.js';
+import { Avatar, foldForSearch, useActiveOptionInView, shownMentions, matchMentions, mentionOptionId, MentionList, initialsOf } from './chunk-LE72KHIE.js';
+export { Avatar } from './chunk-LE72KHIE.js';
+import { Link } from './chunk-OFACAHRV.js';
+export { CodeBlock, Divider, Link } from './chunk-OFACAHRV.js';
+import { DropdownMenu } from './chunk-YFHTREH5.js';
+export { DropdownMenu } from './chunk-YFHTREH5.js';
 import { useFillHeight, FillContext } from './chunk-DBHVJ7Z3.js';
-import { Badge } from './chunk-BZRZENBS.js';
-export { Badge } from './chunk-BZRZENBS.js';
-import { useKeyboardScroll } from './chunk-ACLKDE5W.js';
-import { localeCache, startOfDay, addDays, useWeekStart, useDateWords, localeDayFirst, dayKey, moveDay, addMonths, DateSegmentFields, getMonthGrid, isSameMonth, isSameDay, DatePicker, timeSegments, pad2, inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, Checkbox, CardValue, SortIndicator, startOfWeek, endOfWeek, addMonthsClamped, isExcludedDay, CutCell, CutEmail, stepValue, separatorMovesOn, TIME_SEPARATORS, typeDigit, getEventsForDay, layoutWeek, isWeekend, getWeekDays, isBarEvent, layoutPieces, dayPieces, groupEventsByDay, timeToFraction } from './chunk-SIWERRP2.js';
-export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-SIWERRP2.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-USHW523V.js';
-export { Dropdown, Field, InlineFieldError, Input, Label, NumberInput, Pagination, Popover, Textarea, Toggle, usePagination } from './chunk-USHW523V.js';
-import { useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, formatRelativeTime, thresholdOf, toMillis, formatFullTime, datedMillis, preferenceActionKey, DAY, HOUR, MINUTE } from './chunk-TYNDXMBV.js';
-export { PreferencesContext, formatFullTime, formatRelativeTime, preferenceActionKey, usePreferences } from './chunk-TYNDXMBV.js';
+import { Badge } from './chunk-GT6M74IZ.js';
+export { Badge } from './chunk-GT6M74IZ.js';
+import { useKeyboardScroll } from './chunk-GP2COVJC.js';
+import { localeCache, startOfDay, addDays, useWeekStart, useDateWords, localeDayFirst, dayKey, moveDay, addMonths, DateSegmentFields, getMonthGrid, isSameMonth, isSameDay, DatePicker, timeSegments, pad2, inferColumnKinds, useCardsSwitch, CARDS_BELOW, kindOfRenderedText, Checkbox, CardValue, SortIndicator, startOfWeek, endOfWeek, addMonthsClamped, isExcludedDay, CutCell, CutEmail, stepValue, separatorMovesOn, TIME_SEPARATORS, typeDigit, getEventsForDay, layoutWeek, isWeekend, getWeekDays, isBarEvent, layoutPieces, dayPieces, groupEventsByDay, timeToFraction } from './chunk-3J67NISC.js';
+export { Checkbox, CheckboxGroup, CheckboxGroupItem, DatePicker, HoverCard, TextOverflow } from './chunk-3J67NISC.js';
+import { useWholeListCheck, pagerPart, Pagination, NumberInput } from './chunk-V2ARGHJN.js';
+export { NumberInput, Pagination, Popover, usePagination } from './chunk-V2ARGHJN.js';
+import { useShellPreferences, PREFERENCE_HOUSE_DEFAULTS, formatRelativeTime, thresholdOf, toMillis, formatFullTime, datedMillis, preferenceActionKey, DAY, HOUR, MINUTE } from './chunk-QOMP4D6V.js';
+export { PreferencesContext, formatFullTime, formatRelativeTime, preferenceActionKey, usePreferences } from './chunk-QOMP4D6V.js';
 import { useFormatLocale, useHydrated, useToday, LocaleContext } from './chunk-LJYSVZMI.js';
 export { useFormatLocale, useHydrated } from './chunk-LJYSVZMI.js';
+import { Input, CHECK_FILL, Dropdown, FilterRowContext, SWITCH_KNOB_ON, SWITCH_KNOB_OFF, SWITCH_KNOB_MOTION, SWITCH_TRACK_ON, SWITCH_TRACK_OFF, useFieldControl, useField, OutsideField, InlineFieldError, Label, AddAnotherRowCtx, Field } from './chunk-BKYWKMUN.js';
+export { Dropdown, Field, InlineFieldError, Input, Label, Textarea, Toggle } from './chunk-BKYWKMUN.js';
 import { formatLocale, localeChoice } from './chunk-7QLXYRPD.js';
 import { useInputModality, inputModality } from './chunk-7RKC5C7G.js';
 export { INPUT_MODALITY_ATTR, inputModality, installInputModality, useInputModality } from './chunk-7RKC5C7G.js';
 import { FormChangeCtx, useReportedChange, useOptionalFormContext, FormCtx } from './chunk-72SDAX54.js';
 export { useFormContext } from './chunk-72SDAX54.js';
-import { Button, CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, ControlSizeContext, triggerType, SurfaceBoundary, Spinner, useFramesItself, TableCardCtx } from './chunk-MIUSSYVE.js';
-export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-MIUSSYVE.js';
-import { elementType } from './chunk-NKUCS67T.js';
+import { CardSurfaceCtx, useScrollsInside, SplitPaneCtx, RowsCtx, PageActionsCtx, SurfaceBoundary, useFramesItself, TableCardCtx } from './chunk-V73LHNRL.js';
+import { Button, elementType, ControlSizeContext, triggerType, Spinner } from './chunk-2Q4HOGEI.js';
+export { Button, ButtonSizeContext, ControlSizeContext, Spinner } from './chunk-2Q4HOGEI.js';
 import { useBreakpoint, readBreakpointPx } from './chunk-ZHUVLBCC.js';
 export { BreakpointWidthProvider, useBreakpoint } from './chunk-ZHUVLBCC.js';
-import { useTextOverflow } from './chunk-ZCDA74RQ.js';
-export { useTextOverflow } from './chunk-ZCDA74RQ.js';
-import { AutoTooltip, useRevealFocus } from './chunk-WWN6CQKI.js';
-export { Tooltip, useRevealFocus } from './chunk-WWN6CQKI.js';
-import { Icon, slotIcon, warnOnce } from './chunk-L6HWACK7.js';
-import { mergeRefs } from './chunk-7Q46JXSK.js';
-import { focusAfterSelfRemoval, FOCUSABLE, useFocusKeptInList, useLatest, FIELD, ZOOM_KEYS, rovingTabStop, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberOpener, focusInitial, OVERLAY_CLOSE_ATTR, usePopupFocus, usePosition, CONTROL_ANCESTOR, useGridKeyboard, focusAfterRemoval, useNonModalDialog, useReturnFocus } from './chunk-4HJDOZ2M.js';
-export { useGridKeyboard } from './chunk-4HJDOZ2M.js';
-import { cn, FOCUS_RING, GLASS_SURFACE, FOCUS_INSET, PEER_FOCUS_RING, GLASS_BACKDROP, FOCUS_ROOM, 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, GLASS_DROPDOWN, ERROR_FOCUS_RING, FIELD_FOCUS_RING, atLeastFocusRoom } from './chunk-YL5KD5RC.js';
+import { useTextOverflow } from './chunk-HUNEJIKV.js';
+export { useTextOverflow } from './chunk-HUNEJIKV.js';
+import { AutoTooltip, mergeRefs, useRevealFocus } from './chunk-XSQD3UGY.js';
+export { Tooltip, useRevealFocus } from './chunk-XSQD3UGY.js';
+import { Icon, slotIcon, warnOnce } from './chunk-53F7GVBQ.js';
+import { cn, FOCUS_RING, focusAfterSelfRemoval, FOCUSABLE, GLASS_SURFACE, useFocusKeptInList, FOCUS_INSET, useLatest, PEER_FOCUS_RING, GLASS_BACKDROP, FIELD, ZOOM_KEYS, rovingTabStop, FOCUS_ROOM, useOverlayLayer, useFocusTrap, useFocusBeforeOpen, rememberOpener, focusInitial, lockBodyScroll, unlockBodyScroll, OVERLAY_CLOSE_ATTR, OVERLAY_SURFACE, GLASS_OVERLAY, usePopupFocus, usePosition, ERROR_HAS_FOCUS_RING, FIELD_HAS_FOCUS_RING, CONTROL_ANCESTOR, GROUP_FOCUS_RING, useGridKeyboard, ERROR_ACTIVE_RING, ACTIVE_RING, ERROR_FOCUS_WITHIN_RING, FIELD_FOCUS_WITHIN_RING, focusAfterRemoval, GLASS_DROPDOWN, ERROR_FOCUS_RING, FIELD_FOCUS_RING, atLeastFocusRoom, useNonModalDialog, useReturnFocus } from './chunk-OWQ7M6R7.js';
+export { useGridKeyboard } from './chunk-OWQ7M6R7.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useRef, useId, useEffect, useState, createContext, useCallback, useLayoutEffect, useMemo, useContext, isValidElement, memo, useImperativeHandle, useSyncExternalStore, Children, Fragment as Fragment$1, cloneElement, useReducer } from 'react';
 import { createPortal, flushSync } from 'react-dom';
@@ -130,7 +130,7 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
   const onChange = useReportedChange(onChangeProp, value);
   useInputModality();
   const contextSize = useContext(ControlSizeContext);
-  const control = useFieldControl({ ...wiring, error: error || void 0 });
+  const control = useFieldControl({ ...wiring, "aria-label": ariaLabel, error: error || void 0 }, { component: "Combobox" });
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
   useOverlayLayer(open);
@@ -259,8 +259,8 @@ function Combobox({ value, onChange: onChangeProp, options, placeholder = "Searc
               type: "text",
               id: control.id,
               role: "combobox",
-              "aria-labelledby": wiring["aria-labelledby"],
-              "aria-label": control.labelId ? void 0 : ariaLabel,
+              "aria-labelledby": control.shown ? void 0 : wiring["aria-labelledby"],
+              "aria-label": control.labelId ? void 0 : control.label,
               "aria-describedby": control.describedBy,
               "aria-invalid": control.invalid || void 0,
               "aria-required": control.required || void 0,
@@ -421,6 +421,8 @@ function zoneOptions(locale) {
   return zoneLists(key, build2).options;
 }
 function TimezoneSelect({ value, onChange, placeholder = "Search time zones\u2026", ...rest }) {
+  const control = useFieldControl(rest, { component: "TimezoneSelect" });
+  const { "aria-label": _pageLabel, "aria-labelledby": pageLabelledBy, ...comboboxRest } = rest;
   const locale = useFormatLocale();
   const zones = zoneOptions(locale);
   const stored = value ? canonicalTimeZone(value) : "";
@@ -433,7 +435,7 @@ function TimezoneSelect({ value, onChange, placeholder = "Search time zones\u202
     }
     return zones.some((o) => o.value === stored) ? zones : [{ value: stored, label: labelOf(stored, /* @__PURE__ */ new Date(), locale), keywords: CITY_OF.get(stored) }, ...zones];
   }, [zones, stored, mine, locale]);
-  return /* @__PURE__ */ jsx(Combobox, { value: stored, onChange, options, placeholder, ...rest });
+  return /* @__PURE__ */ jsx(Combobox, { value: stored, onChange, options, placeholder, ...comboboxRest, "aria-label": control.shown ? void 0 : control.label, "aria-labelledby": control.shown ? void 0 : pageLabelledBy });
 }
 var LONGEST_WAIT = DAY;
 var noChange = () => () => {
@@ -508,7 +510,7 @@ function RadioGroup({ value, onChange: onChangeProp, options, orientation = "ver
   const onChange = useReportedChange(onChangeProp, value);
   const groupRef = useRef(null);
   const groupId = useId();
-  const control = useFieldControl(wiring);
+  const control = useFieldControl(wiring, { component: "RadioGroup", ownLabel: label ? groupId : void 0 });
   const enabledOptions = options.filter((o) => !o.disabled);
   const tabStop = rovingTabStop(options, (o) => o.value === value, (o) => !!o.disabled);
   function handleKeyDown(e) {
@@ -540,8 +542,8 @@ function RadioGroup({ value, onChange: onChangeProp, options, orientation = "ver
         ref: groupRef,
         role: "radiogroup",
         id: control.id,
-        "aria-label": label || control.labelId ? void 0 : control.label,
-        "aria-labelledby": label ? groupId : control.labelId,
+        "aria-label": control.labelId ? void 0 : control.label,
+        "aria-labelledby": control.labelId,
         "aria-describedby": control.describedBy,
         "aria-invalid": control.invalid || void 0,
         "aria-required": control.required || void 0,
@@ -668,7 +670,7 @@ function DateRangePicker({
   const presetEdges = useScrollEdges({ enabled: isPhone });
   useRevealFocus(presetEdges.elRef, isPhone);
   const generatedId = useId();
-  const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
+  const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true, component: "DateRangePicker", ownLabel: label ? true : void 0 });
   useInputModality();
   const triggerId = control.id ?? generatedId;
   const locale = useFormatLocale();
@@ -1560,6 +1562,8 @@ function RecurrencePicker({ value, onChange: onChangeProp, start, label, weekSta
     setCustomOpen(false);
     onChange(presets[Number(id.slice("preset-".length))].rule);
   };
+  const { "aria-label": pageName, "aria-labelledby": pageLabelledBy, ...choiceWiring } = wiring;
+  const named = pageName || pageLabelledBy ? { role: "group", "aria-label": pageName, "aria-labelledby": pageLabelledBy } : {};
   const summary = rule && !noDays(rule) ? describeRecurrence(rule, start, locale) : unreadable ? "Repeats by a rule set in another app. Choose another to replace it." : null;
   const describedBy = [wiring["aria-describedby"], summary ? ids.summary : void 0].filter(Boolean).join(" ") || void 0;
   const order = Array.from({ length: 7 }, (_, i) => (weekStart + i) % 7);
@@ -1571,17 +1575,17 @@ function RecurrencePicker({ value, onChange: onChangeProp, start, label, weekSta
   const monthlyOn = custom?.nth ? nthId(custom.nth) : custom?.day === -1 ? "last" : "day";
   const ends = custom?.until ? "until" : custom?.count !== void 0 ? "count" : untilPending ? "until" : "never";
   if (!hydrated) {
-    return /* @__PURE__ */ jsxs("div", { "data-gs": "recurrence-picker", "data-recurrence-pending": "", "aria-busy": "true", className: cn("space-y-ds-2", className), children: [
-      /* @__PURE__ */ jsx(Dropdown, { ...wiring, label: field ? void 0 : label ?? "Repeat", options: PENDING_OPTIONS, value: "pending", onChange: () => {
+    return /* @__PURE__ */ jsxs("div", { "data-gs": "recurrence-picker", "data-recurrence-pending": "", "aria-busy": "true", ...named, className: cn("space-y-ds-2", className), children: [
+      /* @__PURE__ */ jsx(Dropdown, { ...choiceWiring, label: field ? void 0 : label ?? "Repeat", options: PENDING_OPTIONS, value: "pending", onChange: () => {
       } }),
       (rule && !noDays(rule) || unreadable) && /* @__PURE__ */ jsx("p", { "aria-hidden": "true", className: "text-xs", children: "\xA0" })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { "data-gs": "recurrence-picker", className: cn("space-y-ds-2", className), children: [
+  return /* @__PURE__ */ jsxs("div", { "data-gs": "recurrence-picker", ...named, className: cn("space-y-ds-2", className), children: [
     /* @__PURE__ */ jsx(
       Dropdown,
       {
-        ...wiring,
+        ...choiceWiring,
         "aria-describedby": describedBy,
         label: field ? void 0 : label ?? "Repeat",
         options,
@@ -2084,7 +2088,7 @@ var running = (item) => item.status === "queued" || item.status === "uploading";
 var failureOf = (err) => err instanceof Error && err.message ? err.message : "The upload didn't work.";
 var percentOf = (value) => typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
 var STILL_UPLOADING = "Wait for your files to finish uploading";
-function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accept, multiple = true, maxSize, className, error = false, label, id, "aria-label": ariaLabel }) {
+function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accept, multiple = true, maxSize, className, error = false, label, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) {
   const controlled = files !== void 0;
   const [own, setOwn] = useState([]);
   const shown = controlled ? files : own;
@@ -2104,6 +2108,7 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
   const constraintsId = `${ownId}-constraints`;
   const rejectedId = `${ownId}-rejected`;
   const showLabel = label != null && !field;
+  const control = useFieldControl({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, { component: "FileUpload", ownLabel: showLabel ? true : void 0 });
   const constraints = fileConstraints(accept, maxSize, multiple);
   const patch = (itemId, change) => setOwn((prev) => prev.map((i) => i.id === itemId ? { ...i, ...change } : i));
   const stop = (itemId) => {
@@ -2315,8 +2320,8 @@ function FileUpload({ onFiles, files, upload, onCancel, onRetry, onRemove, accep
                 accept,
                 multiple,
                 className: "sr-only",
-                "aria-label": field ? void 0 : ariaLabel,
-                "aria-labelledby": field ? field.labelId : void 0,
+                "aria-label": control.labelId ? void 0 : control.label,
+                "aria-labelledby": control.labelId,
                 "aria-describedby": describedBy,
                 "aria-invalid": invalid || void 0,
                 onChange: (e) => {
@@ -2383,6 +2388,7 @@ function SliderRange({
   error = false,
   label,
   "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   "aria-describedby": describedByProp,
   trackStyle,
   formatValue
@@ -2391,9 +2397,10 @@ function SliderRange({
   const field = useField();
   const ownId = useId();
   const showLabel = label != null && !field;
-  const nameId = field ? field.labelId : showLabel ? `${ownId}-label` : void 0;
+  const control = useFieldControl({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, { component: "SliderRange", ownLabel: showLabel ? `${ownId}-label` : void 0 });
+  const nameId = control.labelId;
   const describedBy = [...new Set([describedByProp, field?.describedBy].join(" ").split(" ").filter(Boolean))].join(" ") || void 0;
-  const thumbName = (part) => nameId ? { "aria-labelledby": part ? `${nameId} ${ownId}-${part}` : nameId } : { "aria-label": ariaLabel ? part ? `${ariaLabel} ${part}` : ariaLabel : void 0 };
+  const thumbName = (part) => nameId ? { "aria-labelledby": part ? `${nameId} ${ownId}-${part}` : nameId } : { "aria-label": control.label ? part ? `${control.label} ${part}` : control.label : void 0 };
   const isRange = Array.isArray(value);
   const low = isRange ? value[0] : value;
   const high = isRange ? value[1] : value;
@@ -2607,7 +2614,7 @@ function TimePicker({
 }) {
   const onChange = useReportedChange(onChangeProp, value);
   const contextSize = useContext(ControlSizeContext);
-  const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true });
+  const control = useFieldControl({ ...wiring, id, error: error || void 0 }, { requiredInDescription: true, component: "TimePicker" });
   useInputModality();
   const size = sizeProp ?? contextSize ?? "md";
   const [open, setOpen] = useState(false);
@@ -3293,6 +3300,7 @@ function PinInput({
   id,
   "aria-label": ariaLabel
 }) {
+  const control = useFieldControl({ "aria-label": ariaLabel }, { component: "PinInput" });
   const onChange = useReportedChange(onChangeProp, value);
   useInputModality();
   const contextSize = useContext(ControlSizeContext);
@@ -3350,7 +3358,8 @@ function PinInput({
     "div",
     {
       role: "group",
-      "aria-label": ariaLabel ?? "PIN input",
+      "aria-labelledby": control.labelId,
+      "aria-label": control.labelId ? void 0 : control.label ?? "PIN input",
       "aria-invalid": error || void 0,
       className: cn("inline-flex w-fit items-center gap-ds-2", className),
       children: digits.map((digit, i) => /* @__PURE__ */ jsx(
@@ -3442,7 +3451,8 @@ function Rating({
   const onChange = useReportedChange(onChangeProp, value);
   const [hoverValue, setHoverValue] = useState(null);
   const displayValue = hoverValue ?? value;
-  const control = useFieldControl({ ...wiring, error: error || void 0 });
+  const control = useFieldControl({ ...wiring, error: error || void 0 }, { component: "Rating" });
+  const valueId = `${useId()}-value`;
   const handleClick = useCallback(
     (starIdx, isLeftHalf) => {
       if (readOnly || !onChangeProp) return;
@@ -3505,13 +3515,13 @@ function Rating({
       i
     );
   });
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       role: readOnly ? "img" : "radiogroup",
       id: control.id,
-      "aria-label": readOnly ? `${control.label ?? "Rating"}: ${value} out of ${max}` : control.labelId ? void 0 : control.label ?? `Rating: ${value} out of ${max}`,
-      "aria-labelledby": readOnly ? void 0 : control.labelId,
+      "aria-label": control.labelId ? void 0 : readOnly ? `${control.label ?? "Rating"}: ${value} out of ${max}` : control.label ?? `Rating: ${value} out of ${max}`,
+      "aria-labelledby": readOnly && control.labelId ? `${control.labelId} ${valueId}` : control.labelId,
       "aria-describedby": control.describedBy,
       "aria-invalid": readOnly ? void 0 : control.invalid || void 0,
       "aria-required": readOnly ? void 0 : control.required || void 0,
@@ -3524,7 +3534,10 @@ function Rating({
         className
       ),
       onMouseLeave: () => setHoverValue(null),
-      children: stars
+      children: [
+        readOnly && control.labelId && /* @__PURE__ */ jsx("span", { id: valueId, hidden: true, children: `${value} out of ${max}` }),
+        stars
+      ]
     }
   );
 }
@@ -3591,28 +3604,103 @@ var DEFAULT_SWATCHES = [
   "#000000",
   "#ffffff"
 ];
+function parseHex(value) {
+  return /^#?([0-9a-f]{6}|[0-9a-f]{8})$/i.test(value.trim()) ? hexToHsl(value.trim()) : null;
+}
+var sameColor = (a, b) => a.trim().toLowerCase() === b.trim().toLowerCase();
+var NEUTRAL = { h: 0, s: 0, l: 50, a: 1 };
 function ColorPicker({
   value,
   onChange: onChangeProp,
   showAlpha = false,
   swatches = DEFAULT_SWATCHES,
+  swatchesOnly = false,
   disabled = false,
   className,
-  error = false,
-  "aria-label": ariaLabel
+  ...wiring
 }) {
+  const control = useFieldControl(wiring, { requiredInDescription: !swatchesOnly, component: "ColorPicker" });
+  const named = {
+    id: control.id,
+    "aria-label": control.labelId ? void 0 : control.label,
+    "aria-labelledby": control.labelId,
+    "aria-describedby": control.describedBy,
+    "aria-invalid": control.invalid || void 0
+  };
   const onChange = useReportedChange(onChangeProp, value);
   useInputModality();
-  const [hsl, setHsl] = useState(() => hexToHsl(value));
+  const [hsl, setHsl] = useState(() => parseHex(value) ?? NEUTRAL);
   const [hexInput, setHexInput] = useState(value);
   const satLightRef = useRef(null);
   const draggingRef = useRef(false);
+  const swatchRefs = useRef([]);
   const [prevValue, setPrevValue] = useState(value);
   if (value !== prevValue) {
     setPrevValue(value);
-    setHsl(hexToHsl(value));
+    setHsl((was) => parseHex(value) ?? was);
     setHexInput(value);
   }
+  const items = swatches.map((s) => typeof s === "string" ? { value: s, label: s } : s);
+  const repeated = items.find((s, i) => items.findIndex((o) => sameColor(o.value, s.value)) !== i)?.value;
+  useEffect(() => {
+    if (repeated) warnOnce("ColorPicker", `two swatches share the colour "${repeated}": give each swatch a colour of its own, so the one chosen is the one shown as chosen.`);
+  }, [repeated]);
+  const chosen = items.findIndex((s) => sameColor(s.value, value));
+  const stop = Math.max(0, chosen);
+  const choose = (index) => {
+    const swatch = items[index];
+    if (!swatch || disabled) return;
+    setHsl((was) => parseHex(swatch.value) ?? was);
+    setHexInput(swatch.value);
+    if (!sameColor(swatch.value, value)) onChange(swatch.value);
+  };
+  const onSwatchKey = (e, index) => {
+    const step = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+    const to = step ? (index + step + items.length) % items.length : e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : -1;
+    if (to < 0) return;
+    e.preventDefault();
+    swatchRefs.current[to]?.focus();
+    choose(to);
+  };
+  const swatchRow = /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      ...swatchesOnly ? { ...named, "aria-required": control.required || void 0 } : { "aria-label": "Swatches" },
+      "aria-disabled": disabled || void 0,
+      className: cn("flex flex-wrap gap-ds-2", swatchesOnly && disabled && "opacity-disabled", swatchesOnly && className),
+      children: items.map((swatch, i) => /* @__PURE__ */ jsx(AutoTooltip, { content: swatch.label, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: (el) => {
+            swatchRefs.current[i] = el;
+          },
+          type: "button",
+          role: "radio",
+          "aria-checked": i === chosen,
+          "aria-label": swatch.label,
+          tabIndex: i === stop ? 0 : -1,
+          disabled,
+          onClick: () => choose(i),
+          onKeyDown: (e) => onSwatchKey(e, i),
+          className: cn(
+            "w-7 h-7 rounded-[var(--ds-radius-sm)] cursor-pointer disabled:cursor-not-allowed",
+            "flex items-center justify-center",
+            "border-[length:var(--ds-border-width)]",
+            "hover:scale-110 transition-transform",
+            FOCUS_RING,
+            // selected is a choice's look: the accent border, never the halo (that is active's) or an outline
+            i === chosen ? "border-[var(--ds-accent-ink)]" : "border-[var(--ds-border-default)]"
+          ),
+          style: { backgroundColor: swatch.value },
+          children: i === chosen && /* @__PURE__ */ jsxs("svg", { "data-swatch-check": "", "aria-hidden": "true", width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", className: "pointer-events-none", children: [
+            /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5", vectorEffect: "non-scaling-stroke", strokeWidth: 6.5, style: { stroke: "var(--ds-text-primary)" } }),
+            /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5", vectorEffect: "non-scaling-stroke", strokeWidth: 2.5, style: { stroke: "var(--ds-bg-canvas)" } })
+          ] })
+        }
+      ) }, `${swatch.value}-${i}`))
+    }
+  );
   const emitChange = useCallback(
     (newHsl) => {
       setHsl(newHsl);
@@ -3661,23 +3749,24 @@ function ColorPicker({
     },
     [onChange]
   );
+  if (swatchesOnly) return swatchRow;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "group",
-      "aria-label": ariaLabel,
-      "aria-invalid": error || void 0,
+      ...named,
       className: cn(
         "w-full max-w-64 p-ds-3 space-y-ds-3",
         "bg-[var(--ds-bg-surface)] text-[var(--ds-text-primary)]",
         "border-[length:var(--ds-border-width)]",
-        error ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-default)]",
+        control.invalid ? "border-[var(--ds-status-error)]" : "border-[var(--ds-border-default)]",
         "rounded-[var(--ds-radius-lg)]",
         "shadow-[var(--ds-shadow-md)]",
         disabled && "opacity-disabled pointer-events-none",
         className
       ),
       children: [
+        control.requiredNote,
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -3710,6 +3799,7 @@ function ColorPicker({
           {
             type: "range",
             "aria-label": "Hue",
+            disabled,
             min: 0,
             max: 360,
             value: hsl.h,
@@ -3725,6 +3815,7 @@ function ColorPicker({
           {
             type: "range",
             "aria-label": "Opacity",
+            disabled,
             min: 0,
             max: 100,
             value: Math.round(hsl.a * 100),
@@ -3740,7 +3831,7 @@ function ColorPicker({
             "div",
             {
               className: "w-8 h-8 rounded-[var(--ds-radius-sm)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] shrink-0",
-              style: { backgroundColor: hslToHex(hsl) }
+              style: { backgroundColor: parseHex(value) ? hslToHex(hsl) : value }
             }
           ),
           /* @__PURE__ */ jsx(
@@ -3748,6 +3839,7 @@ function ColorPicker({
             {
               type: "text",
               "aria-label": "Hex colour",
+              disabled,
               value: hexInput,
               onChange: (e) => handleHexChange(e.target.value),
               className: cn(
@@ -3761,27 +3853,7 @@ function ColorPicker({
             }
           )
         ] }),
-        swatches.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-ds-2", children: swatches.map((swatch) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              const parsed = hexToHsl(swatch);
-              emitChange(parsed);
-            },
-            className: cn(
-              "w-7 h-7 rounded-[var(--ds-radius-sm)] cursor-pointer",
-              "border-[length:var(--ds-border-width)]",
-              "hover:scale-110 transition-transform",
-              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
-          },
-          swatch
-        )) })
+        swatches.length > 0 && swatchRow
       ]
     }
   );
@@ -4513,7 +4585,7 @@ function MentionInput({
   "aria-label": ariaLabel,
   ...wiring
 }) {
-  const control = useFieldControl({ ...wiring, error: error || void 0 });
+  const control = useFieldControl({ ...wiring, "aria-label": ariaLabel, error: error || void 0 }, { component: "MentionInput" });
   useInputModality();
   const [internalValue, setInternalValue] = useState("");
   const value = controlledValue ?? internalValue;
@@ -4632,8 +4704,8 @@ function MentionInput({
       {
         ref: inputRef,
         id: control.id,
-        "aria-labelledby": wiring["aria-labelledby"],
-        "aria-label": control.labelId ? void 0 : ariaLabel,
+        "aria-labelledby": control.shown ? void 0 : wiring["aria-labelledby"],
+        "aria-label": control.labelId ? void 0 : control.label,
         "aria-describedby": control.describedBy,
         "aria-invalid": control.invalid || void 0,
         "aria-required": control.required || void 0,
@@ -5782,6 +5854,131 @@ function rowMarks(row, index, field, id) {
   return typeof v === "string" || typeof v === "number" ? { "data-row-key": String(id) } : { "data-row-index": String(index) };
 }
 var idPart = (id) => String(id).replace(/\s+/g, "_");
+var an = (word) => /^[aeiou]/i.test(word) ? "an" : "a";
+var MAX_TREE_DEPTH = 64;
+var MAX_TREE_ROWS = 1e5;
+var COPY_BUDGET = 1e3;
+var isPlainObject = (o) => {
+  const proto = Object.getPrototypeOf(o);
+  return proto === Object.prototype || proto === null;
+};
+function isCopy(above, row, field) {
+  if (above === row) return true;
+  if (!Object.is(above[field], row[field])) return false;
+  let left = COPY_BUDGET;
+  const alike = (a, b) => {
+    if (Object.is(a, b)) return true;
+    if (typeof a === "function" && typeof b === "function") return true;
+    if (typeof a !== "object" || typeof b !== "object" || a === null || b === null || --left < 0) return false;
+    if (isValidElement(a) || isValidElement(b)) return isValidElement(a) && isValidElement(b) && a.type === b.type && a.key === b.key && alike(a.props, b.props);
+    if (Array.isArray(a) || Array.isArray(b)) return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((v, i) => alike(v, b[i]));
+    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+    if (!isPlainObject(a) || !isPlainObject(b)) return false;
+    const keys = Object.keys(a);
+    return keys.length === Object.keys(b).length && keys.every((k) => Object.hasOwn(b, k) && alike(a[k], b[k]));
+  };
+  return alike(above, row);
+}
+function treeOf(data, ids, field, childrenOf) {
+  const byKey = /* @__PURE__ */ new Map();
+  const all = [];
+  const own = /* @__PURE__ */ new Set();
+  let unnamed = false;
+  let repeated = null;
+  let looped = null;
+  let tooDeep = false;
+  let tooMany = false;
+  const named = (row) => {
+    const v = row[field];
+    if (typeof v !== "string" && typeof v !== "number") return false;
+    if (own.has(String(v))) repeated ??= String(v);
+    own.add(String(v));
+    return true;
+  };
+  const roots = data.map((row, i) => ({ row, originalIdx: i, id: ids[i] ?? i, level: 1, parent: null, children: [] }));
+  for (const node of roots) {
+    byKey.set(String(node.id), node);
+    if (!named(node.row)) unnamed = true;
+  }
+  const grow = (node, path) => {
+    all.push(node);
+    if (all.length >= MAX_TREE_ROWS) {
+      tooMany = true;
+      return;
+    }
+    const rows = childrenOf(node.row, { level: node.level, parent: node.parent?.row ?? null });
+    if (!rows?.length) return;
+    if (node.level >= MAX_TREE_DEPTH) {
+      tooDeep = true;
+      return;
+    }
+    path.push(node.row);
+    rows.forEach((row, i) => {
+      const place = `${node.id}/${i}`;
+      if (path.some((above) => isCopy(above, row, field))) {
+        looped ??= typeof row[field] === "string" || typeof row[field] === "number" ? String(row[field]) : place;
+        return;
+      }
+      const hasOwn = named(row);
+      if (!hasOwn) unnamed = true;
+      const v = row[field];
+      const id = hasOwn && !byKey.has(String(v)) ? v : hasOwn ? `${v}~${place}` : place;
+      const child = { row, originalIdx: -1, id, level: node.level + 1, parent: node, children: [] };
+      byKey.set(String(id), child);
+      node.children.push(child);
+      grow(child, path);
+    });
+    path.pop();
+  };
+  for (const node of roots) grow(node, []);
+  return { roots, byKey, all, unnamed, repeated, looped, tooDeep, tooMany };
+}
+function keysUnder(node, out = []) {
+  out.push(String(node.id));
+  for (const child of node.children) keysUnder(child, out);
+  return out;
+}
+function settleSelection(roots, chosen) {
+  const set = new Set(chosen);
+  const partly = /* @__PURE__ */ new Set();
+  const down = (node, on) => {
+    const now = on || set.has(String(node.id));
+    if (now) set.add(String(node.id));
+    for (const child of node.children) down(child, now);
+  };
+  const up = (node) => {
+    const key = String(node.id);
+    if (!node.children.length) return set.has(key) ? "all" : "none";
+    const states = node.children.map(up);
+    const all = states.every((s) => s === "all");
+    if (all) set.add(key);
+    else set.delete(key);
+    if (!all && states.some((s) => s !== "none")) partly.add(key);
+    return all ? "all" : partly.has(key) ? "some" : "none";
+  };
+  for (const root of roots) down(root, false);
+  for (const root of roots) up(root);
+  return { set, partly };
+}
+var TREE_TOGGLE = cn(
+  "relative shrink-0 w-4 h-4 flex items-center justify-center cursor-pointer rounded-[var(--ds-radius-sm)]",
+  "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]",
+  "before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']",
+  FOCUS_RING
+);
+function rowsOfKey(body, ownKey, key) {
+  return key === "" ? [] : Array.from(body.querySelectorAll(`:scope > tr[data-grid-key="${CSS.escape(ownKey + key)}"], :scope > tr[data-panel-of="${CSS.escape(key)}"]`));
+}
+var HEAD_KEY = "
head:";
+var TreeHeldCtx = createContext(false);
+var CARD_TOGGLE = cn(
+  // at least 24 px tall: the card around it is a target too, so its own box must meet the size (WCAG 2.5.8)
+  "inline-flex min-h-[24px] items-center gap-ds-1 text-xs font-medium cursor-pointer",
+  "transition-colors duration-[var(--ds-transition-speed)]",
+  "text-[var(--ds-accent-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_RING
+);
 function TableHeading({ title, description, actions, titleId, descriptionId, inset }) {
   const heading = /* @__PURE__ */ jsx("h3", { id: titleId, className: TITLE_CLASSES, children: title });
   const actionsBlock = actions ? /* @__PURE__ */ jsx("div", { className: HEADER_LAYOUT.actions, children: actions }) : null;
@@ -5819,6 +6016,12 @@ function Table({
   selectable,
   selectedRows = [],
   onSelectionChange,
+  selectedKeys,
+  onSelectedKeysChange,
+  getChildRows,
+  openParents: openParentsProp,
+  defaultOpenParents,
+  onOpenParentsChange,
   expandable,
   renderExpanded,
   rowKey = "id",
@@ -5879,8 +6082,13 @@ function Table({
     },
     [sortKey, sortDir, onSortChange, pager]
   );
+  const { ids: rowIds, repeated } = useMemo(() => rowIdsOf(data, rowKey), [data, rowKey]);
+  const tree = useMemo(() => getChildRows ? treeOf(data, rowIds, rowKey, getChildRows) : null, [data, rowIds, rowKey, getChildRows]);
+  const nested = tree;
+  const idOf = (_row, index) => rowIds[index] ?? index;
   const columnKeys = useMemo(() => columns.map((c) => c.key), [columns]);
-  const inferredKinds = useMemo(() => inferColumnKinds(data, columnKeys), [data, columnKeys]);
+  const allRows = useMemo(() => nested ? nested.all.map((n) => n.row) : data, [nested, data]);
+  const inferredKinds = useMemo(() => inferColumnKinds(allRows, columnKeys), [allRows, columnKeys]);
   const kindOf2 = useCallback(
     (col) => col.kind ?? inferredKinds.get(col.key),
     [inferredKinds]
@@ -5888,9 +6096,9 @@ function Table({
   const sortColumn = sortKey ? columns.find((c) => c.key === sortKey) : void 0;
   const sortKind = sortColumn ? kindOf2(sortColumn) : void 0;
   const locale = useFormatLocale();
-  const { sortedAll, unsortable } = useMemo(() => {
+  const { sortedAll, unsortable, childOrder } = useMemo(() => {
     const indexed = data.map((row, i) => ({ row, originalIdx: i }));
-    if (!sortKey || !sortDir) return { sortedAll: indexed, unsortable: null };
+    if (!sortKey || !sortDir) return { sortedAll: indexed, unsortable: null, childOrder: null };
     const read = (row) => {
       if (sortColumn?.sortValue) return sortableValue(sortColumn.sortValue(row));
       const v = sortableValue(row[sortKey]);
@@ -5898,29 +6106,33 @@ function Table({
       return (sortKind === "number" ? numberOf(v) : sortKind === "date" ? timeOf(v) : void 0) ?? v;
     };
     const valued = indexed.map((entry) => ({ ...entry, value: read(entry.row) }));
-    const elements = valued.some((v) => v.value === null);
-    const sorted = elements ? indexed : valued.sort((a, b) => {
+    const levels = nested ? nested.all.filter((n) => n.children.length).map((n) => ({ key: String(n.id), rows: n.children.map((c) => ({ c, value: read(c.row) })) })) : [];
+    const elements = valued.some((v) => v.value === null) || levels.some((l) => l.rows.some((r) => r.value === null));
+    const compare = (a, b) => {
       if (a.value === void 0 || b.value === void 0) return a.value === b.value ? 0 : a.value === void 0 ? 1 : -1;
       const cmp = compareValues(a.value, b.value, locale);
       return sortDir === "asc" ? cmp : -cmp;
-    });
-    return { sortedAll: sorted, unsortable: elements ? sortKey : null };
-  }, [data, sortKey, sortDir, sortColumn, sortKind, locale]);
+    };
+    const sorted = elements ? indexed : valued.sort(compare);
+    const childOrder2 = elements || !nested ? null : new Map(levels.map((l) => [l.key, l.rows.sort(compare).map((r) => r.c)]));
+    return { sortedAll: sorted, unsortable: elements ? sortKey : null, childOrder: childOrder2 };
+  }, [data, sortKey, sortDir, sortColumn, sortKind, locale, nested]);
   const canSort = useMemo(() => {
     const can = /* @__PURE__ */ new Set();
-    for (const col of columns) if (col.sortValue || data.every((row) => sortableValue(row[col.key]) !== null)) can.add(col.key);
+    for (const col of columns) if (col.sortValue || allRows.every((row) => sortableValue(row[col.key]) !== null)) can.add(col.key);
     return can;
-  }, [columns, data]);
+  }, [columns, allRows]);
   useEffect(() => {
     if (unsortable) warnOnce("Table", `the column "${unsortable}" is sortable, but its cells are elements, which can't be compared: give it a sortValue, (row) => the name, number or date it shows (data_display#1).`);
   }, [unsortable]);
   const pageSorts = !!onSortChange;
+  const sortsBy = (col) => col.header.trim() !== "" && (pageSorts ? col.sortable ?? (!!sortable && canSort.has(col.key)) : (col.sortable ?? !!sortable) && canSort.has(col.key));
   const refused = pageSorts ? "" : columns.filter((col) => col.sortable && !canSort.has(col.key)).map((col) => col.key).join(", ");
   useEffect(() => {
     if (refused) warnOnce("Table", `the column "${refused}" is marked sortable, but its cells are elements the Table can't compare, so it draws no sort button: give it a sortValue, (row) => the name, number or date it shows, or sort the rows yourself with sortKey and onSortChange (data_display#1).`);
   }, [refused]);
   useEffect(() => {
-    if (pager && data.length !== pager.totalItems) warnOnce("Table", `the pager counts ${pager.totalItems} rows but data holds ${data.length}: give the table and usePagination the same rows, every row of the list, and the table draws the pager's part (Sprint 25.13 A3).`);
+    if (pager && data.length !== pager.totalItems) warnOnce("Table", `the pager counts ${pager.totalItems} rows but data holds ${data.length}: give the table and usePagination the same rows, every row of the list, and the table draws the pager's part.`);
   }, [pager, data.length]);
   const rangeStart = pager ? pager.range[0] : null;
   const rangeEnd2 = pager ? pager.range[1] : null;
@@ -5929,14 +6141,65 @@ function Table({
     [sortedAll, rangeStart, rangeEnd2]
   );
   const drawnStart = rangeStart ? rangeStart - 1 : 0;
+  const openControlled = openParentsProp !== void 0;
+  const [ownOpen, setOwnOpen] = useState(defaultOpenParents ?? []);
+  const open = openControlled ? openParentsProp : ownOpen;
+  const openSet = new Set(open.map(String));
+  const setOpen = (next) => {
+    if (!openControlled) setOwnOpen(next);
+    onOpenParentsChange?.(next);
+  };
+  const toggleOpen = (id) => setOpen(openSet.has(String(id)) ? open.filter((k) => String(k) !== String(id)) : [...open, id]);
+  const visible = nested ? [] : null;
+  if (nested && visible) {
+    const walk = (nodes, first, size) => nodes.forEach((node, i) => {
+      visible.push({ node, pos: first + i, size });
+      if (!node.children.length || !openSet.has(String(node.id))) return;
+      const under = childOrder?.get(String(node.id)) ?? node.children;
+      walk(under, 1, under.length);
+    });
+    walk(drawn.map((d) => nested.roots[d.originalIdx]), drawnStart + 1, data.length);
+  }
+  const visibleKeys = visible ? visible.map((v) => String(v.node.id)) : [];
+  const reportRows = useReportedChange(onSelectionChange, selectedRows);
+  const reportKeys = useReportedChange(onSelectedKeysChange, selectedKeys);
   const selectedSet = new Set(selectedRows);
   const drawnIdx = drawn.map((d) => d.originalIdx);
-  const allSelected = drawnIdx.length > 0 && drawnIdx.every((i) => selectedSet.has(i));
-  const someSelected = !allSelected && drawnIdx.some((i) => selectedSet.has(i));
+  const keyed = selectedKeys !== void 0 || onSelectedKeysChange !== void 0;
+  const chosen = useMemo(() => {
+    if (!keyed) return null;
+    const keys = (selectedKeys ?? []).map(String);
+    return nested ? settleSelection(nested.roots, keys) : { set: new Set(keys), partly: /* @__PURE__ */ new Set() };
+  }, [keyed, selectedKeys, nested]);
+  const scopeKeys = chosen ? nested ? drawn.flatMap((d) => keysUnder(nested.roots[d.originalIdx])) : drawn.map((d) => String(idOf(d.row, d.originalIdx))) : null;
+  const allSelected = scopeKeys ? scopeKeys.length > 0 && scopeKeys.every((k) => chosen.set.has(k)) : drawnIdx.length > 0 && drawnIdx.every((i) => selectedSet.has(i));
+  const someSelected = !allSelected && (scopeKeys ? scopeKeys.some((k) => chosen.set.has(k)) : drawnIdx.some((i) => selectedSet.has(i)));
+  const emitKeys = (next) => {
+    const settled = nested ? settleSelection(nested.roots, next).set : next;
+    const out = [];
+    const placed = /* @__PURE__ */ new Set();
+    const put = (key) => {
+      if (!settled.has(String(key)) || placed.has(String(key))) return;
+      placed.add(String(key));
+      out.push(key);
+    };
+    for (const key of selectedKeys ?? []) put(key);
+    for (const key of nested ? nested.all.map((n) => n.id) : rowIds) put(key);
+    reportKeys(out);
+  };
   const toggleAll = () => {
+    if (chosen && scopeKeys) {
+      const next = new Set(chosen.set);
+      for (const key of scopeKeys) {
+        if (allSelected) next.delete(key);
+        else next.add(key);
+      }
+      emitKeys(next);
+      return;
+    }
     const shown = new Set(drawnIdx);
-    if (allSelected) onSelectionChange?.(selectedRows.filter((r) => !shown.has(r)));
-    else onSelectionChange?.([...selectedRows.filter((r) => !shown.has(r)), ...drawnIdx]);
+    if (allSelected) reportRows(selectedRows.filter((r) => !shown.has(r)));
+    else reportRows([...selectedRows.filter((r) => !shown.has(r)), ...drawnIdx]);
   };
   const anchor = useRef(null);
   const toggleRow = (idx, shiftKey2 = false) => {
@@ -5945,22 +6208,81 @@ function Table({
     anchor.current = idx;
     if (shiftKey2 && from >= 0 && to >= 0 && from !== to) {
       const run = drawnIdx.slice(Math.min(from, to), Math.max(from, to) + 1);
-      onSelectionChange?.([...selectedRows.filter((r) => !run.includes(r)), ...run]);
+      reportRows([...selectedRows.filter((r) => !run.includes(r)), ...run]);
       return;
     }
-    if (selectedSet.has(idx)) onSelectionChange?.(selectedRows.filter((r) => r !== idx));
-    else onSelectionChange?.([...selectedRows, idx]);
+    if (selectedSet.has(idx)) reportRows(selectedRows.filter((r) => r !== idx));
+    else reportRows([...selectedRows, idx]);
+  };
+  const anchorKey = useRef(null);
+  const toggleKey = (id, shiftKey2 = false) => {
+    if (!chosen) return;
+    const key = String(id);
+    const node = nested?.byKey.get(key);
+    const order = nested ? visibleKeys : drawn.map((d) => String(idOf(d.row, d.originalIdx)));
+    const from = anchorKey.current === null ? -1 : order.indexOf(anchorKey.current);
+    const to = order.indexOf(key);
+    anchorKey.current = key;
+    const under = (k) => {
+      const n = nested?.byKey.get(k);
+      return n ? keysUnder(n) : [k];
+    };
+    const next = new Set(chosen.set);
+    if (shiftKey2 && from >= 0 && to >= 0 && from !== to) {
+      for (const k of order.slice(Math.min(from, to), Math.max(from, to) + 1)) for (const s of under(k)) next.add(s);
+    } else if (chosen.set.has(key)) {
+      for (const s of under(key)) next.delete(s);
+      for (let p = node?.parent; p; p = p.parent) next.delete(String(p.id));
+    } else {
+      for (const s of under(key)) next.add(s);
+    }
+    emitKeys(next);
+  };
+  const boxOf = (originalIdx, id) => {
+    if (chosen) return { checked: chosen.set.has(String(id)), mixed: chosen.partly.has(String(id)) };
+    return originalIdx < 0 ? null : { checked: selectedSet.has(originalIdx), mixed: false };
   };
+  const toggleBox = (originalIdx, id, shiftKey2 = false) => chosen ? toggleKey(id, shiftKey2) : toggleRow(originalIdx, shiftKey2);
+  useEffect(() => {
+    if (nested && selectable && !keyed) warnOnce("Table", "a tree table (getChildRows) selects by key: give it selectedKeys and onSelectedKeysChange, as a row under another has no index in data, and selectedRows reaches the top-level rows only.");
+  }, [nested, selectable, keyed]);
+  useEffect(() => {
+    if (nested?.unnamed) warnOnce("Table", `a tree table (getChildRows) names its rows by their ${rowKey}: give every row its own, the rows under a row too (rowKey), so an open row, a selection and focus stay on their row.`);
+  }, [nested, rowKey]);
+  useEffect(() => {
+    if (nested?.looped != null) warnOnce("Table", `a tree table's row "${nested.looped}" is under itself: getChildRows gave it, or a copy of it, among the rows under it or under a row below it, so the tree would never end, and it is left out there. Give getChildRows the rows each row holds, by the level and the parent it gives.`);
+  }, [nested, rowKey]);
+  useEffect(() => {
+    if (nested?.tooMany) warnOnce("Table", `a tree table's rows come to more than ${MAX_TREE_ROWS.toLocaleString("en-GB")}, and the rest are drawn with no rows under them: give getChildRows an end, answering by the level it gives and giving no rows past the last level.`);
+  }, [nested]);
+  useEffect(() => {
+    if (nested?.tooDeep) warnOnce("Table", `a tree table's rows go deeper than ${MAX_TREE_DEPTH} levels, and the last is drawn with no rows under it: give getChildRows's rows an end, answering by the level it gives.`);
+  }, [nested]);
+  useEffect(() => {
+    if (nested?.repeated != null) warnOnce("Table", `a tree table (getChildRows) needs ${an(rowKey)} ${rowKey} of its own for each row, one per row across every level: "${nested.repeated}" names more than one, so an open row, a selection and focus may go to the other. Number the levels' rows apart ("task-3", "task-3/step-1").`);
+  }, [nested, rowKey]);
   const expandControlled = expandedRowsProp !== void 0;
   const [ownExpanded, setOwnExpanded] = useState(defaultExpandedRows ?? []);
   const expanded = expandControlled ? expandedRowsProp : ownExpanded;
   const expandedSet = new Set(expanded.map(String));
-  const { ids: rowIds, repeated } = useMemo(() => rowIdsOf(data, rowKey), [data, rowKey]);
+  const expandedKey = expanded.map(String).join("
");
+  const [revealed, setRevealed] = useState([]);
+  if (nested && expandControlled) {
+    const fresh = [...expandedSet].filter((key) => !revealed.includes(key) && nested.byKey.has(key));
+    const kept = revealed.filter((key) => expandedSet.has(key));
+    if (fresh.length || kept.length !== revealed.length) {
+      setRevealed([...kept, ...fresh]);
+      const shut = [];
+      for (const key of fresh) {
+        for (let p = nested.byKey.get(key)?.parent; p; p = p.parent) if (!openSet.has(String(p.id)) && !shut.includes(p.id)) shut.push(p.id);
+      }
+      if (shut.length && !openControlled) setOwnOpen([...ownOpen, ...shut]);
+    }
+  }
   useEffect(() => {
-    if (repeated !== null) warnOnce("Table", `two rows share the ${rowKey} "${repeated}": give each row its own, or name a field that is one (rowKey), so an opened row and focus stay on their row.`);
-  }, [repeated, rowKey]);
-  const idOf = (_row, index) => rowIds[index] ?? index;
-  const marksOf = (row, index) => rowMarks(row, index, rowKey, idOf(row, index));
+    if (repeated !== null && !nested) warnOnce("Table", `two rows share the ${rowKey} "${repeated}": give each row its own, or name a field that is one (rowKey), so an opened row and focus stay on their row.`);
+  }, [repeated, rowKey, nested]);
+  const marksOf = (row, index, id = idOf(row, index)) => rowMarks(row, index < 0 ? String(id) : index, rowKey, id);
   const openedHere = useRef(null);
   const toggleExpand = (id) => {
     const opening = !expandedSet.has(String(id));
@@ -5985,9 +6307,11 @@ function Table({
   }, [ref, rootRef]);
   const tableRef = useRef(null);
   const [pins, setPins] = useState(NO_PINS);
-  const lead = (selectable ? 1 : 0) + (expandable ? 1 : 0);
-  const endCount = columns.filter((c) => c.pin === "end").length;
-  const nameIndex = columns.length > endCount ? lead : -1;
+  const trail = expandable && nested ? 1 : 0;
+  const lead = (selectable ? 1 : 0) + (expandable && !nested ? 1 : 0);
+  const endColumns = columns.filter((c) => c.pin === "end").length;
+  const endCount = endColumns + trail;
+  const nameIndex = columns.length > endColumns ? lead : -1;
   const { ref: scrollRef, elRef: scrollEl, measure: measureScroll, scrollable, edges, fadeProps } = useScrollEdges({
     enabled: !isMobile,
     noFade: { left: lead + (pins.nameFits ? 1 : 0) > 0, right: endCount > 0 }
@@ -6019,7 +6343,9 @@ function Table({
       const nameFits = nameIndex >= 0 && frame > 0 && at + nameWidth + fromRight <= frame / 2;
       if (nameFits) start.push(at);
       const pad4 = (cell, side) => cell ? parseFloat(getComputedStyle(cell)[side]) || 0 : 0;
-      const panel = cells.length > lead ? [at + pad4(cells[lead], "paddingLeft"), pad4(cells[cells.length - 1], "paddingRight")] : null;
+      let trailing = 0;
+      for (let i = cells.length - trail; i < cells.length; i++) trailing += widths[i] ?? 0;
+      const panel = cells.length > lead ? [at + pad4(cells[lead], "paddingLeft"), trailing + pad4(cells[cells.length - 1 - trail], "paddingRight")] : null;
       const next = { start, end, nameFits, frame, panel };
       setPins((prev) => samePins(prev, next) ? prev : next);
     };
@@ -6029,7 +6355,7 @@ function Table({
     observer.observe(table2);
     observer.observe(scroller);
     return () => observer.disconnect();
-  }, [isMobile, lead, endCount, nameIndex, scrollEl, columns, drawn.length]);
+  }, [isMobile, lead, trail, endCount, nameIndex, scrollEl, columns, drawn.length, visibleKeys.length]);
   const pinnedStart = lead + (pins.nameFits ? 1 : 0);
   const pinStyle = (position, total) => {
     if (position < pinnedStart && pins.start[position] !== void 0) {
@@ -6044,7 +6370,7 @@ function Table({
     return void 0;
   };
   const pinFocus = (position, total) => {
-    if (!onRowClick || !pinStyle(position, total)) return void 0;
+    if (!(onRowClick || nested) || !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);
   };
@@ -6061,8 +6387,228 @@ function Table({
       if (kind) next.set(col.key, kind);
     }
     setRenderedKinds((prev) => prev.size === next.size && [...next].every(([k, v]) => prev.get(k) === v) ? prev : next);
-  }, [columns, kindOf2, drawn, isMobile]);
-  const expandedKey = expanded.map(String).join("
");
+  }, [columns, kindOf2, drawn, isMobile, visibleKeys.length]);
+  const [focusKey, setFocusKey] = useState(null);
+  const visibleSet = new Set(visibleKeys);
+  const ownKey = `${headingId}~`;
+  const gridKey = (key) => ownKey + key;
+  const fromGrid = (attr) => attr !== null && attr.startsWith(ownKey) ? attr.slice(ownKey.length) : null;
+  const heldOuter = useContext(TreeHeldCtx);
+  const headKeys = nested ? [...selectable ? [`${HEAD_KEY}select`] : [], ...columns.filter(sortsBy).map((col) => `${HEAD_KEY}${col.key}`)] : [];
+  const visibleJoined = visibleKeys.join("
");
+  const [stood, setStood] = useState({ joined: "", keys: [] });
+  if (nested && focusKey !== null && !focusKey.startsWith(HEAD_KEY) && !nested.byKey.has(focusKey)) {
+    const at = stood.keys.indexOf(focusKey);
+    let next = null;
+    for (let i = at - 1; at >= 0 && i >= 0 && next === null; i--) if (visibleSet.has(stood.keys[i])) next = stood.keys[i];
+    for (let i = at + 1; at >= 0 && i < stood.keys.length && next === null; i++) if (visibleSet.has(stood.keys[i])) next = stood.keys[i];
+    setFocusKey(next);
+  }
+  if (nested && stood.joined !== visibleJoined) setStood({ joined: visibleJoined, keys: visibleKeys });
+  let activeKey = visibleKeys[0] ?? "";
+  if (focusKey !== null && headKeys.includes(focusKey)) activeKey = focusKey;
+  else {
+    for (let n = focusKey === null ? void 0 : nested?.byKey.get(focusKey); n; n = n.parent ?? void 0) {
+      if (visibleSet.has(String(n.id))) {
+        activeKey = String(n.id);
+        break;
+      }
+    }
+  }
+  const grid = useGridKeyboard({
+    container: tableRef,
+    active: activeKey,
+    setActive: setFocusKey,
+    keyOf: gridKey,
+    move: (from, e) => {
+      const node = nested?.byKey.get(from);
+      const at = visibleKeys.indexOf(from);
+      if (!node || at < 0 || e.shiftKey) return null;
+      const isOpen = openSet.has(from);
+      switch (e.key) {
+        case "ArrowDown":
+          return visibleKeys[at + 1] ?? from;
+        case "ArrowUp":
+          return visibleKeys[at - 1] ?? headKeys[0] ?? from;
+        case "Home":
+          return visibleKeys[0];
+        case "End":
+          return visibleKeys[visibleKeys.length - 1];
+        case "ArrowRight":
+          if (!node.children.length) return from;
+          if (!isOpen) {
+            toggleOpen(node.id);
+            return from;
+          }
+          return visibleKeys[at + 1] ?? from;
+        case "ArrowLeft":
+          if (node.children.length && isOpen) {
+            toggleOpen(node.id);
+            return from;
+          }
+          return node.parent ? String(node.parent.id) : from;
+        default:
+          return null;
+      }
+    },
+    // Enter and Space do what a click on the row does, onRowClick, else its Details (the second review, N8: on an
+    // expandable table a click opened Details where Enter showed the rows); on a row a click does nothing on, its
+    // selection, else its rows
+    onActivate: (key, e) => {
+      const node = nested?.byKey.get(key);
+      if (!node) return;
+      if (onRowClick) onRowClick(node.row, node.originalIdx);
+      else if (canOpenByClick) toggleExpand(node.id);
+      else if (selectable && boxOf(node.originalIdx, node.id)) toggleBox(node.originalIdx, node.id, e.shiftKey);
+      else if (node.children.length) toggleOpen(node.id);
+    }
+  });
+  const onTreeKeyDown = (e) => {
+    if (e.target instanceof HTMLElement && e.target.parentElement === e.currentTarget) grid.onKeyDown(e);
+  };
+  const onHeadKeyDown = (e) => {
+    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+    const key = e.target instanceof HTMLElement ? fromGrid(e.target.getAttribute("data-grid-key")) : null;
+    const at = key === null ? -1 : headKeys.indexOf(key);
+    if (key === null || at < 0) return;
+    let next;
+    switch (e.key) {
+      case "ArrowLeft":
+        next = headKeys[at - 1] ?? key;
+        break;
+      case "ArrowRight":
+        next = headKeys[at + 1] ?? key;
+        break;
+      case "Home":
+        next = headKeys[0];
+        break;
+      case "End":
+        next = headKeys[headKeys.length - 1];
+        break;
+      case "ArrowDown":
+        next = visibleKeys[0] ?? key;
+        break;
+      case "ArrowUp":
+        next = key;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    setFocusKey(next);
+    grid.focus(next);
+  };
+  const onHeadFocus = (e) => {
+    const key = fromGrid(e.target.getAttribute("data-grid-key"));
+    if (key !== null && headKeys.includes(key)) setFocusKey(key);
+  };
+  const selectAllRef = useRef(null);
+  useLayoutEffect(() => {
+    const input = selectAllRef.current;
+    if (!input) return;
+    if (nested) {
+      input.setAttribute("data-grid-key", gridKey(`${HEAD_KEY}select`));
+      input.tabIndex = !heldOuter && activeKey === `${HEAD_KEY}select` ? 0 : -1;
+    } else if (input.hasAttribute("data-grid-key")) {
+      input.removeAttribute("data-grid-key");
+      input.removeAttribute("tabindex");
+    }
+  });
+  const [rowsBody, setRowsBody] = useState(null);
+  const [held] = useState(() => /* @__PURE__ */ new WeakMap());
+  const stopRef = useRef("");
+  const holding = useRef(null);
+  const stopKey = heldOuter ? "" : activeKey;
+  useLayoutEffect(() => {
+    const was = stopRef.current;
+    stopRef.current = stopKey;
+    if (was === stopKey || !rowsBody || !holding.current) return;
+    holding.current([...rowsOfKey(rowsBody, ownKey, was), ...rowsOfKey(rowsBody, ownKey, stopKey)]);
+  }, [stopKey, rowsBody, ownKey]);
+  const treeShown = !!nested && !isMobile;
+  useLayoutEffect(() => {
+    const body = rowsBody;
+    if (!treeShown || !body) return;
+    const ours = (el) => el.closest("table[role='treegrid']") === body.parentElement;
+    const release = (el) => {
+      const own = held.get(el) ?? "";
+      held.delete(el);
+      if (own === "") el.removeAttribute("tabindex");
+      else el.setAttribute("tabindex", own);
+    };
+    const settle = (tr) => {
+      const grid2 = tr.getAttribute("data-grid-key");
+      const owner = grid2?.startsWith(ownKey) ? grid2.slice(ownKey.length) : tr.getAttribute("data-panel-of");
+      if (owner === null) return;
+      if (owner === stopRef.current) {
+        for (const el of Array.from(tr.querySelectorAll("[tabindex]"))) if (held.has(el)) release(el);
+        return;
+      }
+      for (const el of Array.from(tr.querySelectorAll(FOCUSABLE))) {
+        if (!ours(el)) continue;
+        if (!held.has(el) || el.getAttribute("tabindex") !== "-1") held.set(el, el.getAttribute("tabindex") ?? "");
+        if (el.getAttribute("tabindex") !== "-1") el.setAttribute("tabindex", "-1");
+      }
+    };
+    const touched = (records) => {
+      const rows = /* @__PURE__ */ new Set();
+      for (const r of records) {
+        const target = r.target instanceof Element ? r.target : r.target.parentElement;
+        if (!target) continue;
+        if (r.type === "attributes" && r.attributeName === "tabindex" && target instanceof HTMLElement && held.has(target)) held.set(target, target.getAttribute("tabindex") ?? "");
+        if (target === body) {
+          r.addedNodes.forEach((n) => {
+            if (n instanceof Element) rows.add(n);
+          });
+          continue;
+        }
+        if (target.parentElement === body) {
+          if (r.type === "childList") rows.add(target);
+          continue;
+        }
+        let tr = target.closest("tr");
+        while (tr && tr.parentElement !== body) tr = tr.parentElement?.closest("tr") ?? null;
+        if (tr) rows.add(tr);
+      }
+      return rows;
+    };
+    const sync = (also = []) => {
+      const rows = touched(observer.takeRecords());
+      for (const tr of also) rows.add(tr);
+      for (const tr of rows) settle(tr);
+      observer.takeRecords();
+    };
+    const observer = new MutationObserver((records) => {
+      for (const tr of touched(records)) settle(tr);
+      observer.takeRecords();
+    });
+    observer.observe(body, { childList: true, subtree: true, attributes: true, attributeFilter: ["tabindex", "disabled"] });
+    holding.current = sync;
+    sync(Array.from(body.rows));
+    return () => {
+      observer.disconnect();
+      holding.current = null;
+      for (const el of Array.from(body.querySelectorAll("[tabindex]"))) if (held.has(el)) release(el);
+    };
+  }, [treeShown, rowsBody, held, ownKey]);
+  const focusIn = useRef(null);
+  useLayoutEffect(() => {
+    const was = focusIn.current;
+    if (!nested || was === null || visibleSet.has(was)) return;
+    focusIn.current = null;
+    const now = document.activeElement;
+    if (now && now !== document.body && now.isConnected) return;
+    grid.focus(activeKey);
+  });
+  const onRowsBlur = (e) => {
+    if (e.target.isConnected && !e.currentTarget.contains(e.relatedTarget)) focusIn.current = null;
+  };
+  const onRowFocus = (e) => {
+    const key = fromGrid(e.currentTarget.getAttribute("data-grid-key")) ?? e.currentTarget.getAttribute("data-panel-of");
+    if (key === null) return;
+    focusIn.current = key;
+    setFocusKey(key);
+  };
   const shownBefore = useRef(/* @__PURE__ */ new Set());
   const pendingScroll = useRef(null);
   const scrollFrame = useRef(0);
@@ -6076,6 +6622,32 @@ function Table({
       row.scrollIntoView({ block: "nearest" });
     });
   }, [rootRef]);
+  const addressRow = (key) => {
+    let top = key;
+    let waits = false;
+    const above = [];
+    for (let p = nested?.byKey.get(key)?.parent; p; p = p.parent) above.unshift(p);
+    if (above.length) {
+      top = String(above[0].id);
+      const shut = above.filter((p) => !openSet.has(String(p.id)));
+      if (shut.length && openControlled) {
+        onOpenParentsChange?.([...open, ...shut.map((p) => p.id)]);
+        pendingScroll.current = key;
+        waits = true;
+      }
+    }
+    if (pager) {
+      const position = sortedAll.findIndex((r) => String(idOf(r.row, r.originalIdx)) === top);
+      if (position >= 0 && (position < drawnStart || position >= drawnStart + drawn.length)) {
+        pendingScroll.current = key;
+        pager.setPage(Math.floor(position / pager.pageSize) + 1);
+        return;
+      }
+    }
+    if (waits) return;
+    scrollToRow(key);
+  };
+  const awaitedRow = useRef(null);
   useEffect(() => {
     const now = new Set(expanded.map(String));
     const added = [...now].filter((k) => !shownBefore.current.has(k) && k !== openedHere.current);
@@ -6084,22 +6656,25 @@ function Table({
     if (!expandControlled) return;
     const key = added[added.length - 1];
     if (key === void 0) return;
-    if (pager) {
-      const position = sortedAll.findIndex((r) => String(idOf(r.row, r.originalIdx)) === key);
-      if (position >= 0 && (position < drawnStart || position >= drawnStart + drawn.length)) {
-        pendingScroll.current = key;
-        pager.setPage(Math.floor(position / pager.pageSize) + 1);
-        return;
-      }
+    if (tree && !tree.byKey.has(key)) {
+      awaitedRow.current = key;
+      return;
     }
-    scrollToRow(key);
+    awaitedRow.current = null;
+    addressRow(key);
   }, [expandedKey]);
+  useEffect(() => {
+    const key = awaitedRow.current;
+    if (key === null || !tree?.byKey.has(key)) return;
+    awaitedRow.current = null;
+    addressRow(key);
+  }, [tree]);
   useEffect(() => {
     const key = pendingScroll.current;
-    if (!key || !drawn.some((r) => String(idOf(r.row, r.originalIdx)) === key)) return;
+    if (!key || !(nested ? visibleSet.has(key) : drawn.some((r) => String(idOf(r.row, r.originalIdx)) === key))) return;
     pendingScroll.current = null;
     scrollToRow(key);
-  }, [drawnStart, drawn.length, scrollToRow]);
+  }, [drawnStart, drawn.length, visibleKeys.length, scrollToRow]);
   const cardHeading = title ? /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: false }) : null;
   const titledCards = (body) => /* @__PURE__ */ jsxs("div", { ref: listRoot, "data-ds-list": "", "data-gs": "table", className: cn("flex flex-col", listClass), onFocus: noteFocus, onBlur: forgetFocus, children: [
     cardHeading,
@@ -6143,7 +6718,7 @@ function Table({
     if (!row) return;
     const controls = Array.from(row.querySelectorAll(FOCUSABLE));
     const same = was.control === null ? null : controls.find((el) => (el.getAttribute("aria-labelledby") ?? el.getAttribute("aria-label") ?? el.textContent) === was.control);
-    (same ?? (row.tabIndex >= 0 ? row : controls[0]))?.focus({ preventScroll: true });
+    (same ?? (row.tabIndex >= 0 || row.hasAttribute("data-grid-key") ? row : controls[0]))?.focus({ preventScroll: true });
   }, [isMobile, rootRef]);
   if (isMobile) {
     if (loading && data.length === 0) {
@@ -6164,289 +6739,363 @@ function Table({
     const cards = /* @__PURE__ */ jsx(TableCardCtx, { value: true, children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: /* @__PURE__ */ jsxs("div", { ref: setCards, "data-ds-list": title ? void 0 : "", "data-gs": title ? void 0 : "table", className: cn("relative flex flex-col gap-ds-3 overflow-y-auto -m-[4px] p-[4px] scroll-p-[4px]", FOCUS_INSET, title ? "min-h-0" : listClass), onFocus: title ? void 0 : noteFocus, onBlur: title ? void 0 : forgetFocus, children: [
       loading && data.length > 0 && /* @__PURE__ */ jsx(RefreshLine, { className: "inset-x-[4px] rounded-full" }),
       selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select`, children: "Select" }),
-      drawn.map(({ row, originalIdx }) => {
-        const isSelected = selectedSet.has(originalIdx);
-        const id = idOf(row, originalIdx);
-        const opens = !!expandable && !!renderExpanded;
-        const isExpanded = opens && expandedSet.has(String(id));
-        const toggleCard = (card) => {
-          const closing = isExpanded;
-          const inDetail = closing && card.querySelector("[data-card-detail]")?.contains(document.activeElement);
-          toggleExpand(id);
-          if (inDetail) card.querySelector("[data-card-toggle]")?.focus();
-        };
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-row": "",
-            ...marksOf(row, originalIdx),
-            className: cn(
-              "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",
-              // 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"
-            ),
-            onClick: onRowClick ? (e) => {
-              if (clickIsCard(e)) onRowClick(row, originalIdx);
-            } : canOpenByClick ? (e) => {
-              if (clickIsCard(e)) toggleCard(e.currentTarget);
-            } : void 0,
-            tabIndex: onRowClick ? 0 : void 0,
-            onKeyDown: onRowClick ? (e) => {
-              if (e.target !== e.currentTarget) return;
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                onRowClick(row, originalIdx);
+      nested && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-under`, children: "under" }),
+      nested && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-rows-under`, children: "Rows under" }),
+      nested ? drawn.map((d) => treeCards(nested.roots[d.originalIdx])) : drawn.map(({ row, originalIdx }) => cardOf(row, originalIdx))
+    ] }) }) });
+    return withControl(title ? titledCards(cards) : cards);
+  }
+  function cardOf(row, originalIdx, node) {
+    const id = node ? node.id : idOf(row, originalIdx);
+    const box = boxOf(originalIdx, id);
+    const isSelected = !!box?.checked;
+    const opens = !!expandable && !!renderExpanded;
+    const isExpanded = opens && expandedSet.has(String(id));
+    const toggleCard = (card) => {
+      const closing = isExpanded;
+      const inDetail = closing && card.querySelector("[data-card-detail]")?.contains(document.activeElement);
+      toggleExpand(id);
+      if (inDetail) card.querySelector("[data-card-toggle]")?.focus();
+    };
+    const under = node?.children.length ?? 0;
+    const isOpen = under > 0 && openSet.has(String(id));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-row": "",
+        ...marksOf(row, originalIdx, id),
+        className: cn(
+          "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",
+          // 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"
+        ),
+        onClick: onRowClick ? (e) => {
+          if (clickIsCard(e)) onRowClick(row, originalIdx);
+        } : canOpenByClick ? (e) => {
+          if (clickIsCard(e)) toggleCard(e.currentTarget);
+        } : void 0,
+        tabIndex: onRowClick ? 0 : void 0,
+        onKeyDown: onRowClick ? (e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onRowClick(row, originalIdx);
+          }
+        } : void 0,
+        children: [
+          selectable && box && // "Select" and the row's name, as in the table (T15); a parent with some of its rows chosen is mixed
+          /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, indeterminate: box.mixed, onChange: (_, { shiftKey: shiftKey2 }) => toggleBox(originalIdx, id, shiftKey2), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-card-name-${idPart(id)}` : `${headingId}-select` }),
+          columns.map((col, c) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-ds-2 text-sm", children: [
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
+            /* @__PURE__ */ jsx(CardValue, { value: row[col.key], id: lead + c === nameIndex ? `${headingId}-card-name-${idPart(id)}` : void 0 })
+          ] }, col.key)),
+          under > 0 && // item 14: the rows under it, shown and hidden as the Details are, with how many and the row's name
+          /* @__PURE__ */ jsx("div", { className: "pt-ds-1", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "data-card-rows-toggle": "",
+              "aria-expanded": isOpen,
+              "aria-labelledby": nameIndex >= 0 ? `${headingId}-card-rows-${idPart(id)} ${headingId}-under ${headingId}-card-name-${idPart(id)}` : `${headingId}-card-rows-${idPart(id)}`,
+              onClick: (e) => {
+                e.stopPropagation();
+                toggleOpen(id);
+              },
+              className: CARD_TOGGLE,
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12, className: cn("transition-transform duration-[var(--ds-transition-speed)]", isOpen && "rotate-90") }),
+                /* @__PURE__ */ jsx("span", { id: `${headingId}-card-rows-${idPart(id)}`, children: `${isOpen ? "Hide" : "Show"} ${under} ${under === 1 ? "row" : "rows"}` })
+              ]
+            }
+          ) }),
+          opens && // Alert's disclosure: a button that says whether it is open, at the card's foot, the detail below it, so
+          // the control the user pressed stays where it was. Its name carries the row's (T15).
+          /* @__PURE__ */ jsxs("div", { className: "pt-ds-1", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                "data-card-toggle": "",
+                "aria-expanded": isExpanded,
+                ...nameIndex >= 0 ? { "aria-labelledby": `${headingId}-card-toggle-${idPart(id)} ${headingId}-card-name-${idPart(id)}` } : {},
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggleCard(e.currentTarget.closest("[data-row]"));
+                },
+                className: CARD_TOGGLE,
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12, className: cn("transition-transform duration-[var(--ds-transition-speed)]", isExpanded && "rotate-90") }),
+                  /* @__PURE__ */ jsx("span", { id: `${headingId}-card-toggle-${idPart(id)}`, children: isExpanded ? "Hide details" : "Show details" })
+                ]
               }
-            } : void 0,
-            children: [
-              selectable && // "Select" and the row's name, as in the table (T15)
-              /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: (_, { shiftKey: shiftKey2 }) => toggleRow(originalIdx, shiftKey2), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${headingId}-card-name-${idPart(id)}` : `${headingId}-select` }),
-              columns.map((col, c) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-ds-2 text-sm", children: [
-                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[var(--ds-text-secondary)] font-medium text-xs uppercase tracking-wider", children: col.header }),
-                /* @__PURE__ */ jsx(CardValue, { value: row[col.key], id: lead + c === nameIndex ? `${headingId}-card-name-${idPart(id)}` : void 0 })
-              ] }, col.key)),
-              opens && // Alert's disclosure: a button that says whether it is open, at the card's foot, the detail below it, so
-              // the control the user pressed stays where it was. Its name carries the row's (T15).
-              /* @__PURE__ */ jsxs("div", { className: "pt-ds-1", children: [
+            ),
+            isExpanded && /* @__PURE__ */ jsx("div", { "data-card-detail": "", className: "mt-ds-3 pt-ds-3 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-sm text-[var(--ds-text-secondary)]", children: /* @__PURE__ */ jsx(PanelContent, { children: renderExpanded(row, originalIdx) }) })
+          ] })
+        ]
+      },
+      String(id)
+    );
+  }
+  function treeCards(node) {
+    const key = String(node.id);
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      cardOf(node.row, node.originalIdx, node),
+      node.children.length > 0 && openSet.has(key) && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "group",
+          "data-card-rows": "",
+          "aria-labelledby": nameIndex >= 0 ? `${headingId}-rows-under ${headingId}-card-name-${idPart(node.id)}` : `${headingId}-rows-under`,
+          className: "ml-ds-5 pl-ds-3 border-l-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] flex flex-col gap-ds-3",
+          children: (childOrder?.get(key) ?? node.children).map(treeCards)
+        }
+      )
+    ] }, key);
+  }
+  const cellCount = columns.length + lead + trail;
+  const bodyRows = visible ? visible.map((v) => ({ row: v.node.row, originalIdx: v.node.originalIdx, tree: v })) : drawn;
+  const table = (
+    // a tree table is a treegrid (item 14): its rows have levels, and the arrow keys move between them
+    /* @__PURE__ */ jsxs("table", { ref: tableRef, role: nested ? "treegrid" : void 0, "aria-busy": loading || void 0, className: cn("w-full text-sm", PINNED_LAYERS), ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : ariaLabel ? { "aria-label": ariaLabel } : {}, children: [
+      /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), onKeyDown: nested ? onHeadKeyDown : void 0, onFocus: nested ? onHeadFocus : void 0, children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] [--gs-row-tint:var(--ds-bg-muted)]", children: [
+        selectable && // data-ds-select-all: the selection's own control, where a BulkActionBar's Clear selection sends focus
+        /* @__PURE__ */ jsx("th", { "data-ds-select-all": "", 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,
+          {
+            ref: selectAllRef,
+            checked: allSelected,
+            indeterminate: someSelected,
+            onChange: toggleAll,
+            "aria-labelledby": `${headingId}-select-all`
+          }
+        ) }),
+        expandable && !trail && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), style: pinStyle(selectable ? 1 : 0, cellCount) }),
+        columns.map((col, c) => {
+          const isSortable = sortsBy(col);
+          const isActiveSort = sortKey === col.key && !!sortDir && (pageSorts || unsortable !== col.key);
+          const headerKind = kindOf2(col);
+          const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
+          const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
+          const style = { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth, ...pinStyle(lead + c, cellCount) };
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              "aria-sort": isSortable && isActiveSort ? sortDir === "asc" ? "ascending" : "descending" : void 0,
+              className: cn(
+                density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
+                shrink && "w-px whitespace-nowrap",
+                "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
+                "text-xs uppercase tracking-wider",
+                headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left"
+              ),
+              style,
+              children: isSortable ? (
+                // A47: a button with the column's name, reached with Tab and pressed with Enter or Space
                 /* @__PURE__ */ jsxs(
                   "button",
                   {
                     type: "button",
-                    "data-card-toggle": "",
-                    "aria-expanded": isExpanded,
-                    ...nameIndex >= 0 ? { "aria-labelledby": `${headingId}-card-toggle-${idPart(id)} ${headingId}-card-name-${idPart(id)}` } : {},
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      toggleCard(e.currentTarget.closest("[data-row]"));
-                    },
+                    onClick: () => handleSort(col.key),
+                    ...nested ? { "data-grid-key": gridKey(`${HEAD_KEY}${col.key}`), tabIndex: heldOuter ? -1 : grid.tabIndexOf(`${HEAD_KEY}${col.key}`) } : {},
                     className: cn(
-                      // at least 24 px tall: the card around it is a target too, so its own box must meet the size (WCAG 2.5.8)
-                      "inline-flex min-h-[24px] items-center gap-ds-1 text-xs font-medium cursor-pointer",
-                      "transition-colors duration-[var(--ds-transition-speed)]",
-                      "text-[var(--ds-accent-ink)] hover:bg-[var(--ds-accent-muted)]",
-                      "rounded-[var(--ds-radius-sm)] px-ds-1.5 py-ds-0.5 -mx-ds-1.5",
+                      "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)]",
+                      // in a right-aligned column the indicator goes before the label, so the label ends where the
+                      // column's values end; the sorted column's label in full colour (the look check, 14 October).
+                      // Set at the line's top, not its baseline: reversed, the button takes its baseline from the
+                      // indicator, which has no text, and stood 2 px above the other headers' labels
+                      headerAlign === "right" && "flex-row-reverse",
+                      "align-top",
+                      isActiveSort && "text-[var(--ds-text-primary)]",
                       FOCUS_RING
                     ),
                     children: [
-                      /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 12, className: cn("transition-transform duration-[var(--ds-transition-speed)]", isExpanded && "rotate-90") }),
-                      /* @__PURE__ */ jsx("span", { id: `${headingId}-card-toggle-${idPart(id)}`, children: isExpanded ? "Hide details" : "Show details" })
+                      col.header,
+                      /* @__PURE__ */ jsx(SortIndicator, { sorted: isActiveSort ? sortDir : false })
                     ]
                   }
-                ),
-                isExpanded && /* @__PURE__ */ jsx("div", { "data-card-detail": "", className: "mt-ds-3 pt-ds-3 border-t-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] text-sm text-[var(--ds-text-secondary)]", children: /* @__PURE__ */ jsx(PanelContent, { children: renderExpanded(row, originalIdx) }) })
-              ] })
-            ]
-          },
-          String(id)
-        );
-      })
-    ] }) }) });
-    return withControl(title ? titledCards(cards) : cards);
-  }
-  const cellCount = columns.length + lead;
-  const table = /* @__PURE__ */ jsxs("table", { ref: tableRef, "aria-busy": loading || void 0, className: cn("w-full text-sm", PINNED_LAYERS), ...title ? { "aria-labelledby": titleId, "aria-describedby": description ? descriptionId : void 0 } : ariaLabel ? { "aria-label": ariaLabel } : {}, children: [
-    /* @__PURE__ */ jsx("thead", { className: cn("bg-[var(--ds-bg-muted)]", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] [--gs-row-tint:var(--ds-bg-muted)]", children: [
-      selectable && // data-ds-select-all: the selection's own control, where a BulkActionBar's Clear selection sends focus
-      /* @__PURE__ */ jsx("th", { "data-ds-select-all": "", 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,
+                )
+              ) : /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-ds-1", children: col.header })
+            },
+            col.key
+          );
+        }),
+        trail > 0 && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), style: pinStyle(cellCount - 1, cellCount) })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { ref: nested ? setRowsBody : void 0, onKeyDown: nested ? onTreeKeyDown : void 0, onBlur: nested ? onRowsBlur : void 0, children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: loading && data.length === 0 ? (
+        // the rows' shape on a first load (item 16), each cell's bar where its text will be; the rows are hidden
+        // from a screen reader, which hears the status beside the table
+        Array.from({ length: SKELETON_ROWS }, (_, r) => /* @__PURE__ */ jsxs("tr", { "data-table-skeleton": "", className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0", children: [
+          selectable && /* @__PURE__ */ jsx("td", { "aria-hidden": true, className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(SkeletonLine, { width: "16px" }) }),
+          expandable && /* @__PURE__ */ jsx("td", { "aria-hidden": true, className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3") }),
+          columns.map((col, c) => /* @__PURE__ */ jsx("td", { className: density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3", children: /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: /* @__PURE__ */ jsx(SkeletonLine, { width: SKELETON_WIDTHS[(r + c) % SKELETON_WIDTHS.length], end: (col.align ?? (kindOf2(col) === "number" ? "right" : "left")) === "right" }) }) }, col.key))
+        ] }, `skeleton-${r}`))
+      ) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+        "td",
         {
-          checked: allSelected,
-          indeterminate: someSelected,
-          onChange: toggleAll,
-          "aria-labelledby": `${headingId}-select-all`
+          colSpan: cellCount,
+          className: "px-ds-4 py-ds-10 text-center text-sm text-[var(--ds-text-muted)]",
+          children: emptyState
         }
-      ) }),
-      expandable && /* @__PURE__ */ jsx("th", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3"), style: pinStyle(selectable ? 1 : 0, cellCount) }),
-      columns.map((col, c) => {
-        const isSortable = col.header.trim() !== "" && (pageSorts ? col.sortable ?? (!!sortable && canSort.has(col.key)) : (col.sortable ?? !!sortable) && canSort.has(col.key));
-        const isActiveSort = sortKey === col.key && !!sortDir && (pageSorts || unsortable !== col.key);
-        const headerKind = kindOf2(col);
-        const headerAlign = col.align ?? (headerKind === "number" ? "right" : "left");
-        const shrink = (headerKind === "number" || headerKind === "date") && !col.maxWidth;
-        const style = { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth, ...pinStyle(lead + c, cellCount) };
-        return /* @__PURE__ */ jsx(
-          "th",
-          {
-            "aria-sort": isSortable && isActiveSort ? sortDir === "asc" ? "ascending" : "descending" : void 0,
-            className: cn(
-              density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
-              shrink && "w-px whitespace-nowrap",
-              "font-[var(--ds-weight-heading)] text-[var(--ds-text-secondary)]",
-              "text-xs uppercase tracking-wider",
-              headerAlign === "right" ? "text-right" : headerAlign === "center" ? "text-center" : "text-left"
-            ),
-            style,
-            children: isSortable ? (
-              // A47: a button with the column's name, reached with Tab and pressed with Enter or Space
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => handleSort(col.key),
-                  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)]",
-                    // in a right-aligned column the indicator goes before the label, so the label ends where the
-                    // column's values end; the sorted column's label in full colour (the look check, 14 October).
-                    // Set at the line's top, not its baseline: reversed, the button takes its baseline from the
-                    // indicator, which has no text, and stood 2 px above the other headers' labels
-                    headerAlign === "right" && "flex-row-reverse",
-                    "align-top",
-                    isActiveSort && "text-[var(--ds-text-primary)]",
-                    FOCUS_RING
-                  ),
-                  children: [
-                    col.header,
-                    /* @__PURE__ */ jsx(SortIndicator, { sorted: isActiveSort ? sortDir : false })
-                  ]
-                }
-              )
-            ) : /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-ds-1", children: col.header })
-          },
-          col.key
-        );
-      })
-    ] }) }),
-    /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: loading && data.length === 0 ? (
-      // the rows' shape on a first load (item 16), each cell's bar where its text will be; the rows are hidden
-      // from a screen reader, which hears the status beside the table
-      Array.from({ length: SKELETON_ROWS }, (_, r) => /* @__PURE__ */ jsxs("tr", { "data-table-skeleton": "", className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0", children: [
-        selectable && /* @__PURE__ */ jsx("td", { "aria-hidden": true, className: cn("w-10", density === "compact" ? "px-ds-2 py-ds-2" : "px-ds-3 py-ds-3"), children: /* @__PURE__ */ jsx(SkeletonLine, { width: "16px" }) }),
-        expandable && /* @__PURE__ */ jsx("td", { "aria-hidden": true, className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3") }),
-        columns.map((col, c) => /* @__PURE__ */ jsx("td", { className: density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3", children: /* @__PURE__ */ jsx("div", { "aria-hidden": true, children: /* @__PURE__ */ jsx(SkeletonLine, { width: SKELETON_WIDTHS[(r + c) % SKELETON_WIDTHS.length], end: (col.align ?? (kindOf2(col) === "number" ? "right" : "left")) === "right" }) }) }, col.key))
-      ] }, `skeleton-${r}`))
-    ) : data.length === 0 && emptyState ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-      "td",
-      {
-        colSpan: cellCount,
-        className: "px-ds-4 py-ds-10 text-center text-sm text-[var(--ds-text-muted)]",
-        children: emptyState
-      }
-    ) }) : drawn.map(({ row, originalIdx }, i) => {
-      const isSelected = selectedSet.has(originalIdx);
-      const id = idOf(row, originalIdx);
-      const isExpanded = expandedSet.has(String(id));
-      const clickable = !!onRowClick || canOpenByClick;
-      return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-        /* @__PURE__ */ jsxs(
-          "tr",
-          {
-            ...marksOf(row, originalIdx),
-            className: cn(
-              // an opened row's divider is under its panel (A6)
-              !(expandable && isExpanded && renderExpanded) && "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
-              // the row's background and its tint change together, so its pinned cells and the rest fade as one
-              // (roots.css registers --gs-row-tint as a colour so it can)
-              "transition-[background-color,--gs-row-tint]",
-              // 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, 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;
-              if (onRowClick) onRowClick(row, originalIdx);
-              else toggleExpand(id);
-            } : void 0,
-            tabIndex: onRowClick ? 0 : void 0,
-            onKeyDown: onRowClick ? (e) => {
-              if (e.target !== e.currentTarget) return;
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                onRowClick(row, originalIdx);
-              }
-            } : 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", pinFocus(0, cellCount)), style: pinStyle(0, cellCount), children: /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onChange: (_, { shiftKey: shiftKey2 }) => toggleRow(originalIdx, shiftKey2), "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(AutoTooltip, { content: "Details", children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => toggleExpand(id),
-                  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(
-                    Icon,
-                    {
-                      name: "chevron-right",
-                      size: 14,
-                      className: cn("transition-transform", isExpanded && "rotate-90")
-                    }
-                  )
-                }
-              ) }) }),
-              columns.map((col, c) => {
-                const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
-                const kind = kindOf2(col);
-                const alignClass = col.align ? col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left" : kind === "number" ? "text-right" : "text-left";
-                const cellContent = row[col.key];
-                const shrink = (kind === "number" || kind === "date") && !col.maxWidth;
-                const whole2 = !kind && renderedKinds.has(col.key);
-                let inner;
-                if (truncLines > 0) {
-                  inner = /* @__PURE__ */ jsx(CutCell, { lines: truncLines, children: cellContent });
-                } else if (kind === "email") {
-                  inner = /* @__PURE__ */ jsx(CutEmail, { children: cellContent });
-                } else {
-                  inner = cellContent;
-                }
-                const align = col.align ?? (kind === "number" ? "right" : "left");
-                if (align !== "left" && cellContent !== null && cellContent !== void 0 && typeof cellContent !== "string" && typeof cellContent !== "number") {
-                  inner = /* @__PURE__ */ jsx("div", { className: cn("flex items-center", align === "center" ? "justify-center" : "justify-end"), children: inner });
-                }
-                return /* @__PURE__ */ jsx(
-                  "td",
-                  {
-                    id: lead > 0 && lead + c === nameIndex ? `${headingId}-name-${idPart(id)}` : void 0,
-                    "data-col": col.key,
-                    className: cn(
-                      density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
-                      "text-[var(--ds-text-primary)]",
-                      alignClass,
-                      shrink && "w-px whitespace-nowrap",
-                      whole2 && "whitespace-nowrap",
-                      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
-                  },
-                  col.key
-                );
-              })
-            ]
-          }
-        ),
-        expandable && isExpanded && renderExpanded && /* @__PURE__ */ jsx("tr", { className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0", children: /* @__PURE__ */ jsx(
-          "td",
+      ) }) : bodyRows.map(({ row, originalIdx, tree: place }, i) => {
+        const node = place?.node;
+        const id = node ? node.id : idOf(row, originalIdx);
+        const box = boxOf(originalIdx, id);
+        const isSelected = !!box?.checked;
+        const isExpanded = expandedSet.has(String(id));
+        const clickable = !!onRowClick || canOpenByClick;
+        const isParent = !!node?.children.length;
+        const isOpen = isParent && openSet.has(String(id));
+        const treeRow = place ? {
+          "aria-level": place.node.level,
+          "aria-setsize": place.size,
+          "aria-posinset": place.pos,
+          "aria-expanded": isParent ? isOpen : void 0,
+          "data-grid-key": gridKey(String(id)),
+          onFocus: onRowFocus
+        } : {};
+        const nameRef = node ? `${headingId}-tree-name-${idPart(id)}` : `${headingId}-name-${idPart(id)}`;
+        const detailsAt = trail ? cellCount - 1 : selectable ? 1 : 0;
+        const details = expandable && /* @__PURE__ */ jsx("td", { className: cn("w-8", density === "compact" ? "px-ds-1 py-ds-2" : "px-ds-2 py-ds-3", pinFocus(detailsAt, cellCount)), style: pinStyle(detailsAt, cellCount), children: /* @__PURE__ */ jsx(AutoTooltip, { content: "Details", children: /* @__PURE__ */ jsx(
+          "button",
           {
-            colSpan: cellCount,
-            className: cn("py-ds-4 text-sm text-[var(--ds-text-primary)]", !pins.panel && (density === "compact" ? "px-ds-3" : "px-ds-4")),
-            style: pins.panel ? { paddingLeft: pins.panel[0], paddingRight: pins.panel[1] } : void 0,
+            type: "button",
+            onClick: () => toggleExpand(id),
+            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 ${nameRef}` } : { "aria-label": "Details" },
             children: /* @__PURE__ */ jsx(
-              "div",
+              Icon,
               {
-                "data-row-panel": "",
-                className: "sticky",
-                style: pins.panel ? { left: pins.panel[0], maxWidth: pins.frame ? pins.frame - pins.panel[0] - pins.panel[1] : void 0 } : { left: 0 },
-                children: /* @__PURE__ */ jsx(PanelContent, { children: renderExpanded(row, originalIdx) })
+                name: "chevron-right",
+                size: 14,
+                className: cn("transition-transform", isExpanded && "rotate-90")
               }
             )
           }
-        ) })
-      ] }, String(id));
-    }) }) })
-  ] });
+        ) }) });
+        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              ...marksOf(row, originalIdx, id),
+              ...treeRow,
+              className: cn(
+                // an opened row's divider is under its panel (A6)
+                !(expandable && isExpanded && renderExpanded) && "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0",
+                // the row's background and its tint change together, so its pinned cells and the rest fade as one
+                // (roots.css registers --gs-row-tint as a colour so it can)
+                "transition-[background-color,--gs-row-tint]",
+                // 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, 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 || place) && FOCUS_INSET
+              ),
+              onClick: clickable ? (e) => {
+                if (!clickIsRows(e)) return;
+                if (onRowClick) onRowClick(row, originalIdx);
+                else toggleExpand(id);
+              } : void 0,
+              tabIndex: place ? heldOuter ? -1 : grid.tabIndexOf(String(id)) : onRowClick ? 0 : void 0,
+              onKeyDown: onRowClick && !place ? (e) => {
+                if (e.target !== e.currentTarget) return;
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onRowClick(row, originalIdx);
+                }
+              } : 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", pinFocus(0, cellCount)), style: pinStyle(0, cellCount), children: box && /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, indeterminate: box.mixed, onChange: (_, { shiftKey: shiftKey2 }) => toggleBox(originalIdx, id, shiftKey2), "aria-labelledby": nameIndex >= 0 ? `${headingId}-select ${nameRef}` : `${headingId}-select` }) }),
+                !trail && details,
+                columns.map((col, c) => {
+                  const truncLines = col.truncate === true ? 1 : col.truncate ? col.truncate.lines : 0;
+                  const kind = kindOf2(col);
+                  const alignClass = col.align ? col.align === "right" ? "text-right" : col.align === "center" ? "text-center" : "text-left" : kind === "number" ? "text-right" : "text-left";
+                  const cellContent = row[col.key];
+                  const shrink = (kind === "number" || kind === "date") && !col.maxWidth;
+                  const whole2 = !kind && renderedKinds.has(col.key);
+                  let inner;
+                  if (truncLines > 0) {
+                    inner = /* @__PURE__ */ jsx(CutCell, { lines: truncLines, children: cellContent });
+                  } else if (kind === "email") {
+                    inner = /* @__PURE__ */ jsx(CutEmail, { children: cellContent });
+                  } else {
+                    inner = cellContent;
+                  }
+                  const align = col.align ?? (kind === "number" ? "right" : "left");
+                  if (align !== "left" && cellContent !== null && cellContent !== void 0 && typeof cellContent !== "string" && typeof cellContent !== "number") {
+                    inner = /* @__PURE__ */ jsx("div", { className: cn("flex items-center", align === "center" ? "justify-center" : "justify-end"), children: inner });
+                  }
+                  if (node && c === 0) {
+                    const nameId = nameRef;
+                    const under = node.children.length;
+                    inner = /* @__PURE__ */ jsxs("div", { "data-tree-indent": "", className: cn("flex items-center gap-ds-2", align === "center" ? "justify-center" : align === "right" && "justify-end"), style: node.level > 1 ? { paddingLeft: `calc(var(--ds-space-3) * ${node.level - 1})` } : void 0, children: [
+                      isParent ? (
+                        // named by its own words and then the row's name, which it points to: the cell's text stays the name
+                        /* @__PURE__ */ jsx("button", { type: "button", tabIndex: -1, "data-tree-toggle": "", id: `${nameId}-toggle`, "aria-label": `${isOpen ? "Hide" : "Show"} ${under} ${under === 1 ? "row" : "rows"} under`, "aria-labelledby": `${nameId}-toggle ${nameId}`, className: TREE_TOGGLE, onClick: (e) => {
+                          toggleOpen(id);
+                          e.currentTarget.closest("tr")?.focus();
+                        }, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: 14, className: cn("transition-transform", isOpen && "rotate-90") }) })
+                      ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0 w-4 h-4" }),
+                      /* @__PURE__ */ jsx("div", { id: nameId, className: "min-w-0", children: inner })
+                    ] });
+                  }
+                  return /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      id: !node && lead > 0 && lead + c === nameIndex ? `${headingId}-name-${idPart(id)}` : void 0,
+                      "data-col": col.key,
+                      className: cn(
+                        density === "compact" ? "px-ds-3 py-ds-2" : "px-ds-4 py-ds-3",
+                        "text-[var(--ds-text-primary)]",
+                        alignClass,
+                        shrink && "w-px whitespace-nowrap",
+                        whole2 && "whitespace-nowrap",
+                        kind === "identifier" && "[overflow-wrap:anywhere]",
+                        pinFocus(lead + c, cellCount)
+                      ),
+                      style: col.maxWidth || col.width || col.minWidth || c + lead < pinnedStart || c >= columns.length - endColumns ? { maxWidth: col.maxWidth, width: col.width, minWidth: col.minWidth, ...pinStyle(lead + c, cellCount) } : void 0,
+                      children: inner
+                    },
+                    col.key
+                  );
+                }),
+                trail > 0 && details
+              ]
+            }
+          ),
+          expandable && isExpanded && renderExpanded && // in a tree table the panel's controls join its row's in the Tab order, focus in it makes its row the
+          // stop, and the panel is at its row's level, so a screen reader never places it a level apart (item 14)
+          /* @__PURE__ */ jsx("tr", { "data-panel-of": place ? String(id) : void 0, "aria-level": place ? place.node.level : void 0, onFocus: place ? onRowFocus : void 0, className: "border-b-[length:var(--ds-divider-width)] border-[var(--ds-border-subtle)] last:border-b-0", children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: cellCount,
+              className: cn("py-ds-4 text-sm text-[var(--ds-text-primary)]", !pins.panel && (density === "compact" ? "px-ds-3" : "px-ds-4")),
+              style: pins.panel ? { paddingLeft: pins.panel[0], paddingRight: pins.panel[1] } : void 0,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-row-panel": "",
+                  className: "sticky",
+                  style: pins.panel ? { left: pins.panel[0], maxWidth: pins.frame ? pins.frame - pins.panel[0] - pins.panel[1] : void 0 } : { left: 0 },
+                  children: place ? /* @__PURE__ */ jsx(TreeHeldCtx, { value: String(id) !== stopKey, children: /* @__PURE__ */ jsx(PanelContent, { children: renderExpanded(row, originalIdx) }) }) : /* @__PURE__ */ jsx(PanelContent, { children: renderExpanded(row, originalIdx) })
+                }
+              )
+            }
+          ) })
+        ] }, String(id));
+      }) }) })
+    ] })
+  );
   const region = scrollable || regionFocused ? { tabIndex: 0, role: "region", ...title ? { "aria-labelledby": titleId } : { "aria-label": ariaLabel ?? "Table" } } : {};
   return withControl(
     /* @__PURE__ */ jsxs(
@@ -6462,7 +7111,7 @@ function Table({
           loading && data.length > 0 && /* @__PURE__ */ jsx(RefreshLine, { className: "inset-x-0 rounded-t-[inherit]" }),
           loading && data.length === 0 && /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: LOADING_LABEL }),
           title && /* @__PURE__ */ jsx(TableHeading, { title, description, actions, titleId, descriptionId, inset: true }),
-          selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select-all`, children: "Select all rows shown" }),
+          selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select-all`, children: nested ? pager ? "Select all rows on this page" : "Select all rows" : "Select all rows shown" }),
           selectable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-select`, children: "Select" }),
           expandable && /* @__PURE__ */ jsx("span", { hidden: true, id: `${headingId}-details`, children: "Details" }),
           /* @__PURE__ */ jsx(
@@ -6488,266 +7137,32 @@ function Table({
     )
   );
 }
-function optionsKeyForFit(options) {
-  return options.map((o) => `${o.value}:${o.label}`).join("|");
-}
-var sizes2 = {
-  xs: "text-xs px-ds-2",
-  sm: "text-xs px-ds-3",
-  md: "text-sm px-ds-3",
-  lg: "text-base px-ds-3"
-};
-var containerPadding = {
-  xs: "p-[2px] gap-[2px]",
-  sm: "p-ds-1 gap-ds-0.5",
-  md: "p-ds-1 gap-ds-0.5",
-  lg: "p-ds-1 gap-ds-0.5"
-};
-var indicatorInset = {
-  xs: "2px",
-  sm: "4px",
-  md: "4px",
-  lg: "4px"
-};
-function segmentRadius(inset, bordered) {
-  return `max(var(--ds-radius-sm), calc(var(--ds-radius-md) - ${inset}${bordered ? " - var(--ds-border-width)" : ""}))`;
-}
-function SegmentedControl({
-  value,
-  onChange: onChangeProp,
-  options,
-  size: sizeProp,
-  variant = "default",
-  fullWidth = false,
-  onHoverChange,
-  className,
-  "aria-label": ariaLabel,
-  maxOptions = 6,
-  ...wiring
-}) {
-  const onChange = useReportedChange(onChangeProp, value);
-  const contextSize = useContext(ControlSizeContext);
-  const control = useFieldControl(wiring);
-  const named = !ariaLabel && control.labelId ? { "aria-labelledby": control.labelId } : {};
-  const size = sizeProp ?? contextSize ?? "md";
-  const containerRef = useRef(null);
-  const [indicator, setIndicator] = useState({ left: 0, width: 0 });
-  const parentRef = useRef(null);
-  const neededRef = useRef(0);
-  const [overflows, setOverflows] = useState(false);
-  const measureFit = useCallback(() => {
-    const row = containerRef.current;
-    if (row) {
-      parentRef.current = row.parentElement;
-      if (row.scrollWidth > 0) neededRef.current = row.scrollWidth;
-    }
-    const parent = parentRef.current;
-    const needed = neededRef.current;
-    if (!parent || !needed) return;
-    const style = getComputedStyle(parent);
-    const available = parent.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
-    if (available <= 0) return;
-    setOverflows((prev) => prev ? needed > available - 8 : needed > available);
-  }, []);
-  useLayoutEffect(() => {
-    measureFit();
-    const parent = parentRef.current;
-    if (!parent || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(measureFit);
-    observer.observe(parent);
-    return () => observer.disconnect();
-  }, [measureFit, optionsKeyForFit(options)]);
-  const collapsed = options.length > maxOptions || overflows;
-  const updateIndicator = useCallback(() => {
-    if (!containerRef.current) return;
-    const active = containerRef.current.querySelector("[data-active='true']");
-    if (active) {
-      setIndicator({
-        left: active.offsetLeft,
-        width: active.offsetWidth
-      });
-    }
-  }, []);
-  const optionsKey = options.map((o) => `${o.value}:${o.label}`).join("|");
-  useLayoutEffect(() => {
-    updateIndicator();
-  }, [value, optionsKey, updateIndicator]);
-  useEffect(() => {
-    const fonts = document.fonts;
-    if (!fonts?.ready) return;
-    let live = true;
-    fonts.ready.then(() => {
-      if (live) updateIndicator();
-    });
-    return () => {
-      live = false;
-    };
-  }, [updateIndicator]);
-  const [animate, setAnimate] = useState(false);
-  const select = useCallback((v) => {
-    setAnimate(true);
-    onChange(v);
-  }, [onChange]);
-  useLayoutEffect(() => {
-    if (collapsed || !containerRef.current || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(updateIndicator);
-    observer.observe(containerRef.current);
-    containerRef.current.querySelectorAll("button").forEach((b) => observer.observe(b));
-    return () => observer.disconnect();
-  }, [updateIndicator, optionsKey, collapsed]);
-  const containerHeight = {
-    xs: "h-ds-6",
-    sm: "h-[var(--ds-control-height-sm)]",
-    md: "h-[var(--ds-control-height-md)]",
-    lg: "h-[var(--ds-control-height-lg)]"
-  };
-  const tabStop = rovingTabStop(options, (o) => o.value === value, (o) => !!o.disabled);
-  const handleKeyDown = (e) => {
-    const enabled = options.filter((o) => !o.disabled);
-    if (enabled.length === 0) return;
-    const idx = Math.max(0, enabled.findIndex((o) => o.value === value));
-    let next = null;
-    if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (idx + 1) % enabled.length;
-    else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (idx - 1 + enabled.length) % enabled.length;
-    else if (e.key === "Home") next = 0;
-    else if (e.key === "End") next = enabled.length - 1;
-    if (next === null) return;
-    e.preventDefault();
-    select(enabled[next].value);
-    const buttons = containerRef.current?.querySelectorAll('[role="radio"]');
-    buttons?.forEach((b) => {
-      if (b.dataset.value === enabled[next].value) b.focus();
-    });
-  };
-  if (collapsed) {
-    return /* @__PURE__ */ jsx(
-      Dropdown,
-      {
-        "aria-label": ariaLabel,
-        ...wiring,
-        size: size === "md" || size === "lg" ? "md" : "sm",
-        options: options.filter((o) => !o.disabled).map((o) => ({ id: o.value, label: o.label })),
-        value,
-        onChange: (v) => onChange(v),
-        className: cn("inline-block", fullWidth ? "w-full" : "w-auto", className)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      role: "radiogroup",
-      id: control.id,
-      "aria-label": ariaLabel,
-      ...named,
-      "aria-describedby": control.describedBy,
-      "aria-invalid": control.invalid || void 0,
-      "aria-required": control.required || void 0,
-      onKeyDown: handleKeyDown,
-      className: cn(
-        "relative items-center",
-        // Sprint 25.14 A21: in a Field's column a track that isn't full width keeps its own width; w-fit, not self-start,
-        // so a row or a centred column still aligns it (the review of 30 September)
-        fullWidth ? "flex w-full" : "inline-flex w-fit",
-        containerPadding[size],
-        containerHeight[size],
-        "bg-[var(--ds-bg-muted)]",
-        // The owner's review of 1 October 2026: the frame's corner is a field's, so the two change together with the
-        // theme's radius; the segments inside sit concentric with it (SEGMENT_RADIUS)
-        "rounded-[var(--ds-radius-md)]",
-        // The frame's edge is a button's: each segment is a labelled button, so the frame isn't what identifies the
-        // control, and WCAG 1.4.11 asks no 3:1 of it
-        variant === "default" && "border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
-        control.invalid && "border-[length:var(--ds-border-width)] border-[var(--ds-status-error)]",
-        className
-      ),
-      style: { "--ds-segment-radius": segmentRadius(indicatorInset[size], variant === "default" || !!control.invalid) },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "absolute rounded-[var(--ds-segment-radius)]",
-              "bg-[var(--ds-bg-surface)]",
-              // 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. 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",
-            style: {
-              left: indicator.left,
-              width: indicator.width,
-              top: indicatorInset[size],
-              bottom: indicatorInset[size],
-              transitionDuration: animate ? "var(--ds-transition-speed)" : "0ms",
-              transitionTimingFunction: "var(--ds-transition-ease)"
-            }
-          }
-        ),
-        options.map((opt, i) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            role: "radio",
-            "aria-checked": opt.value === value,
-            "data-active": opt.value === value,
-            "data-value": opt.value,
-            tabIndex: i === tabStop ? 0 : -1,
-            disabled: opt.disabled,
-            onClick: () => !opt.disabled && select(opt.value),
-            onMouseEnter: onHoverChange && !opt.disabled ? () => onHoverChange(opt.value) : void 0,
-            onMouseLeave: onHoverChange ? () => onHoverChange(null) : void 0,
-            className: cn(
-              "relative z-10 inline-flex items-center justify-center self-stretch font-medium whitespace-nowrap",
-              fullWidth && "flex-1",
-              "rounded-[var(--ds-segment-radius)]",
-              "transition-colors cursor-pointer",
-              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"
-            ),
-            children: opt.label
-          },
-          opt.value
-        ))
-      ]
-    }
-  );
-}
 
 // ../../showcase/src/components/Calendar/event-colours.ts
 function eventColours(category) {
   const colour = category?.color;
   if (colour === void 0 || colour === "accent" || colour === "var(--ds-accent-primary)") return ACCENT;
-  if (colour === "neutral") return NEUTRAL;
-  if (typeof colour === "number") return Number.isInteger(colour) && colour >= 1 ? supporting(colour) : NEUTRAL;
+  if (colour === "neutral") return NEUTRAL2;
+  if (typeof colour === "number") return Number.isInteger(colour) && colour >= 1 ? supporting(colour) : NEUTRAL2;
   const named = SUPPORTING_TOKEN.exec(colour.trim());
   if (named) return supporting(Number(named[1]));
   const chart = CHART_TOKEN.exec(colour.trim());
   if (chart) return Number(chart[1]) === 1 ? ACCENT : supporting(Number(chart[1]) - 1);
-  return { ...NEUTRAL, edge: colour };
+  return { ...NEUTRAL2, edge: colour };
 }
 var SUPPORTING_TOKEN = /^var\(\s*--ds-palette-(\d+)-[a-z-]+\s*\)$/;
 var CHART_TOKEN = /^var\(\s*--ds-chart-(\d+)\s*\)$/;
 var supporting = (n) => ({
-  fill: `var(--ds-palette-${n}-bg, ${NEUTRAL.fill})`,
-  text: `var(--ds-palette-${n}-text, ${NEUTRAL.text})`,
-  edge: `var(--ds-palette-${n}-chart, ${NEUTRAL.edge})`
+  fill: `var(--ds-palette-${n}-bg, ${NEUTRAL2.fill})`,
+  text: `var(--ds-palette-${n}-text, ${NEUTRAL2.text})`,
+  edge: `var(--ds-palette-${n}-chart, ${NEUTRAL2.edge})`
 });
 var ACCENT = {
   fill: "var(--ds-accent-bg, var(--ds-accent-subtle))",
   text: "var(--ds-accent-text, var(--ds-text-primary))",
   edge: "var(--ds-chart-1)"
 };
-var NEUTRAL = {
+var NEUTRAL2 = {
   fill: "var(--ds-bg-muted)",
   text: "var(--ds-text-primary)",
   edge: "var(--ds-control-edge-strong)"
@@ -8846,9 +9261,9 @@ function ExpandableDescription({ children, className }) {
     }
   );
 }
-function HorizontalLayout({ items, minItemWidth, className }) {
+function HorizontalLayout({ items, minItemWidth, label, className }) {
   const [row, setRow] = useState(null);
-  useKeyboardScroll(row, "Timeline", true, false, "x");
+  useKeyboardScroll(row, label, true, false, "x");
   return /* @__PURE__ */ jsx("div", { ref: setRow, "data-timeline-row": "", className: cn("relative flex items-start overflow-x-auto snap-x", FOCUS_INSET, className), children: items.map((item, i) => {
     const isFirst = i === 0;
     const isLast = i === items.length - 1;
@@ -8927,7 +9342,7 @@ function VerticalLayout({ items, className }) {
     ] })
   ] }, i)) });
 }
-function Timeline({ items: allItems, orientation = "vertical", minItemWidth = 200, className, ref, pager }) {
+function Timeline({ items: allItems, orientation = "vertical", minItemWidth = 200, className, ref, pager, "aria-label": ariaLabel = "Timeline" }) {
   useScrollsInside();
   useWholeListCheck("Timeline", allItems.length, pager);
   const items = pagerPart(allItems, pager);
@@ -8940,7 +9355,7 @@ function Timeline({ items: allItems, orientation = "vertical", minItemWidth = 20
   }, [ref]);
   const fits = width === 0 || width >= items.length * minItemWidth;
   const horizontal = orientation === "horizontal" || orientation === "responsive" && fits;
-  const list2 = /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className: pager ? void 0 : className, children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) }) });
+  const list2 = /* @__PURE__ */ jsx("div", { ref: setRefs, "data-ds-list": "", "data-timeline-orientation": horizontal ? "horizontal" : "vertical", className: pager ? void 0 : className, children: /* @__PURE__ */ jsx(RowsCtx, { value: true, children: horizontal ? /* @__PURE__ */ jsx(HorizontalLayout, { items, minItemWidth, label: ariaLabel }) : /* @__PURE__ */ jsx(VerticalLayout, { items }) }) });
   if (!pager) return list2;
   return /* @__PURE__ */ jsxs("div", { "data-gs-paged": "", className: cn("flex flex-col min-w-0", className), children: [
     list2,
@@ -17895,6 +18310,6 @@ function DangerZone({ title = "Danger zone", description, children, className })
   ] });
 }
 
-export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, AvatarGroup, BottomNav, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DangerZone, DataList, DateRangePicker, DescriptionList, Dialog, Dock, EmptyState, EntityCell, FileUpload, FlowSaved, FormWrapper, Gantt, Kbd, Launcher, LocaleProvider, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageActions, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, RecurrencePicker, RecurrenceScopeDialog, RelativeTime, ScrollArea, SectionHeading, SegmentedControl, SettingsLayout, Sheet, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, TimezoneSelect, Toast, ToastProvider, Tour, TransferList, TreeView, browserTimeZone, canonicalTimeZone, countEdited, dateOfDay, dayOf, deleteOccurrence, describeRecurrence, endDayOf, fitLabel, fitLabels, formatDateRange, nthOf, occurrenceOn, occurrences, parseRRule, readFlowProgress, readRecurrence, recurrencePresets, sameRecurrence, saveOccurrence, timeExtent, timeZoneOffset, toRRule, useBrowserTimeZone, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useRelativeTimeFormat, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
+export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, Alert, AsidePanel, AvatarGroup, BottomNav, BulkActionBar, Calendar, Card, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, ChatMessageList, ChatPanel, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, Combobox, CommandPalette, ContextMenu, CornerPanel, DEFAULT_DATE_RANGE_PRESETS, DangerZone, DataList, DateRangePicker, DescriptionList, Dialog, Dock, EmptyState, EntityCell, FileUpload, FlowSaved, FormWrapper, Gantt, Kbd, Launcher, LocaleProvider, MentionInput, MobileHeaderMenu, NavItem, NavMenu, Navbar, NotificationCenter, PageActions, PageContainer, PageHeader, PinInput, Progress, RadioGroup, Rating, RecurrencePicker, RecurrenceScopeDialog, RelativeTime, ScrollArea, SectionHeading, SettingsLayout, Sheet, Sidebar, SidebarNav, SliderRange, StackedList, StatsCard, StatusDot, Stepper, TIME_ZOOMS, Table, TableToolbar, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, TimeBar, TimePicker, TimeRow, TimeScaleHeader, TimeViewport, Timeline, TimezoneSelect, Toast, ToastProvider, Tour, TransferList, TreeView, browserTimeZone, canonicalTimeZone, countEdited, dateOfDay, dayOf, deleteOccurrence, describeRecurrence, endDayOf, fitLabel, fitLabels, formatDateRange, nthOf, occurrenceOn, occurrences, parseRRule, readFlowProgress, readRecurrence, recurrencePresets, sameRecurrence, saveOccurrence, timeExtent, timeZoneOffset, toRRule, useBrowserTimeZone, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useRelativeTimeFormat, useSidebar, useTextMeasure, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map