gridsmith-ui 0.22.0 → 0.24.0

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, Ref, ReactElement, CSSProperties, HTMLAttributes, RefObject, KeyboardEvent, AnchorHTMLAttributes, ComponentType } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, Ref, ReactElement, CSSProperties, HTMLAttributes, RefObject, KeyboardEvent, AnchorHTMLAttributes, ElementType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconName } from './icons.js';
 import { C as ColumnKind, B as BreakpointKey } from './table-utils-BkjNEWts.js';
 export { a as BreakpointWidthProvider, u as useBreakpoint } from './table-utils-BkjNEWts.js';
 import { P as Pager, A as AppShellPreferences } from './use-pagination-DiJo0aW5.js';
 export { a as PaginationOptions, b as PreferencesContext, R as ResolvedPreferences, p as preferenceActionKey, u as usePagination, c as usePreferences } from './use-pagination-DiJo0aW5.js';
+export { B as BreadcrumbItem, a as Breadcrumbs, b as BreadcrumbsSeparator, c as BreadcrumbsSize, d as BreadcrumbsVariant } from './Breadcrumbs-CGS8GKl-.js';
 
 type ButtonVariant = "default" | "secondary" | "tertiary" | "outline" | "ghost" | "destructive" | "success" | "warning" | "link";
 type ButtonSize = "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg";
@@ -594,13 +595,19 @@ interface FormWrapperProps {
      */
     errorSummary?: boolean | ((errors: FormFieldError[]) => ReactNode);
     /**
-     * Classes for the form. In a SettingsLayout panel the form keeps the narrow page's reading width however wide the
-     * page is (the panel's --ds-form-max, Sprint 25.9); a `max-w-*` class here wins.
+     * The form takes the full width it is given, for the rare form whose fields need it: several columns side by side,
+     * line items. Without it the form, its buttons with it, keeps the narrow reading width wherever it sits.
+     */
+    fullWidth?: boolean;
+    /**
+     * Classes for the form. Wherever it sits — a page of its own, a card, beside a list, under a tab, a settings panel —
+     * the form keeps the narrow page's reading width however wide its box is (--ds-form-max, Sprint 25.9 A4; everywhere
+     * since Sprint 25.16 A8); in a Drawer or a Dialog it takes the overlay's width. A `max-w-*` class here wins.
      */
     className?: string;
     ref?: React.Ref<HTMLFormElement>;
 }
-declare function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions: actionsProp, actionsAlign: actionsAlignProp, onCancel, cancelLabel, focusFirstError, errorSummary, className, ref }: FormWrapperProps): react_jsx_runtime.JSX.Element;
+declare function FormWrapper({ onSubmit, validationMode: validationModeProp, children, actions: actionsProp, actionsAlign: actionsAlignProp, onCancel, cancelLabel, focusFirstError, errorSummary, fullWidth, className, ref }: FormWrapperProps): react_jsx_runtime.JSX.Element;
 
 interface AddAnotherProps<T> {
     /** The rows. Each keeps its own id (`getId`), never its index, so its values, field ids and errors stay with it when another row goes. */
@@ -1060,6 +1067,10 @@ interface AvatarGroupItem {
     initials?: string;
     src?: string;
     alt?: string;
+    /**
+     * @deprecated Ignored: a group draws no status (the owner, 30 September 2026: dots on overlapping avatars read as
+     * broken). Show someone's status with a single Avatar.
+     */
     status?: AvatarStatus;
     color?: AvatarColor;
 }
@@ -1077,7 +1088,8 @@ interface AvatarGroupProps {
 /**
  * Overlapping row of avatars with a "+N" counter for the rest. Use for
  * members, assignees, participants — anywhere several people share one
- * slot. Do not hand-roll this with -space-x and ring classes.
+ * slot. Do not hand-roll this with -space-x and ring classes. A group shows
+ * no status; a single Avatar does.
  */
 declare function AvatarGroup({ items, max, size, ring, onOverflowClick, className }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
 
@@ -1304,12 +1316,18 @@ interface TreeViewProps {
     checkable?: boolean;
     defaultExpanded?: string[];
     defaultSelected?: string[];
+    /**
+     * The selected ids, when the app holds the selection: the address names the open item, or a crumb of its path
+     * selects a folder (Sprint 25.16 A19). `onSelect` reports a click and the app passes the new selection back.
+     * Without it the tree keeps its own, starting from `defaultSelected`.
+     */
+    selected?: string[];
     defaultChecked?: string[];
     onSelect?: (ids: string[]) => void;
     onCheck?: (ids: string[]) => void;
     className?: string;
 }
-declare function TreeView({ nodes, selectable, multiSelect, checkable, defaultExpanded, defaultSelected, defaultChecked, onSelect, onCheck, className, }: TreeViewProps): react_jsx_runtime.JSX.Element;
+declare function TreeView({ nodes, selectable, multiSelect, checkable, defaultExpanded, defaultSelected, selected: selectedProp, defaultChecked, onSelect, onCheck, className, }: TreeViewProps): react_jsx_runtime.JSX.Element;
 
 interface CarouselProps {
     children: ReactNode[];
@@ -2060,9 +2078,11 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
      * Render through a router link component instead of a plain anchor
      * (e.g. `component={RouterLink}` from react-router or next/link). The
      * component receives the same props; `href` is also passed as `to` for
-     * react-router compatibility.
+     * react-router compatibility. Any element type: a router's Link requires
+     * its own props (react-router's `to`), which a narrower type refused under
+     * strict TypeScript (Sprint 25.16 A19).
      */
-    component?: ComponentType<Record<string, unknown>>;
+    component?: ElementType;
     iconLeft?: ReactNode;
     iconRight?: ReactNode;
 }
@@ -2271,33 +2291,6 @@ interface SettingsLayoutProps {
  */
 declare function SettingsLayout({ sections, value, onChange, layout: layoutProp, railWidth, collapseBelow: collapseBelowProp, "aria-label": ariaLabel, children, className, }: SettingsLayoutProps): react_jsx_runtime.JSX.Element;
 
-interface BreadcrumbItem$1 {
-    label: string;
-    href?: string;
-    onClick?: () => void;
-    icon?: IconName;
-}
-type BreadcrumbsVariant = "inline" | "contained" | "pill";
-type BreadcrumbsSeparator = "slash" | "chevron" | "dot" | "arrow";
-type BreadcrumbsSize = "sm" | "md";
-interface BreadcrumbsProps {
-    items: BreadcrumbItem$1[];
-    separator?: BreadcrumbsSeparator;
-    variant?: BreadcrumbsVariant;
-    /** Visual treatment of individual breadcrumb items — independent of layout variant. */
-    itemVariant?: "default" | "pill";
-    size?: BreadcrumbsSize;
-    showIcons?: boolean;
-    maxItems?: number;
-    /** Full-bleed: contained background extends edge-to-edge, breaking out of parent padding. Text stays aligned with sibling content. */
-    bleed?: boolean;
-    /** Max-width for bleed content alignment. Defaults to --ds-bp-xl. */
-    contentMaxWidth?: string;
-    className?: string;
-    container?: Element | DocumentFragment;
-}
-declare const Breadcrumbs: react.ForwardRefExoticComponent<BreadcrumbsProps & react.RefAttributes<HTMLElement>>;
-
 interface PaginationProps {
     currentPage: number;
     totalPages: number;
@@ -2327,6 +2320,8 @@ interface Step {
     label: string;
     description?: string;
     status?: "complete" | "error" | "loading";
+    /** Not reached yet, so it can't be gone to: its circle can't be pressed (Sprint 25.16 A30, useFlowSteps' stepper). */
+    disabled?: boolean;
 }
 interface StepperProps {
     steps: Step[];
@@ -2490,6 +2485,11 @@ interface PageHeaderProps {
     onBack?: () => void;
     actions?: ReactNode;
     avatar?: ReactNode;
+    /**
+     * Controls that filter the page (Dropdown, DatePicker, SegmentedControl, Input), in one row at the small size; a text
+     * field takes a search field's width, not a line of its own. On a bold colourful header the row sits on a strip drawn
+     * as the cards are, that hugs its controls, as the tab row does.
+     */
     filters?: ReactNode;
     bannerImage?: string;
     as?: HeadingLevel;
@@ -2611,12 +2611,12 @@ interface NavMenuProps {
     items: NavMenuItem[];
     /** Whether any child route is currently active (highlights the trigger) */
     active?: boolean;
-    /** Matches the parent Navbar type for consistent styling (`default` is the deprecated name for `tint`) */
+    /** The navbar's style; by default the one the Navbar gives its items (`default` is the deprecated name for `tint`) */
     type?: NavbarType;
     onItemClick?: (item: NavMenuItem) => void;
     className?: string;
 }
-declare function NavMenu({ label, items, active, type, onItemClick, className, }: NavMenuProps): react_jsx_runtime.JSX.Element;
+declare function NavMenu({ label, items, active, type: typeProp, onItemClick, className, }: NavMenuProps): react_jsx_runtime.JSX.Element;
 
 /** Mirrors NavbarType. `default` is the deprecated pre-20.8 name for `tint`. */
 type MobileHeaderMenuType = "tint" | "underline" | "minimal" | "pill" | "default";
@@ -2667,6 +2667,7 @@ interface DrawerProps {
     open: boolean;
     onClose: () => void;
     position?: "left" | "right" | "bottom";
+    /** Pass none: the Drawer takes the app's width, which the shell carries (AppShell's drawerWidth, 520 px by default; 400 px outside a shell). For a deliberate wide or narrow drawer only. A non-modal side panel (modal={false}, such as the shell's assistant) keeps the width it is given. */
     width?: string;
     title?: ReactNode;
     children: ReactNode;
@@ -2691,7 +2692,8 @@ interface DrawerProps {
      * Default true. false makes the drawer a persistent, non-modal panel the user works alongside
      * (an assistant, help): no backdrop, no scroll lock, no focus trap — the page stays operable.
      * It closes only on Escape while focus is inside it, its close control, or onClose from the
-     * consumer; an outside click does nothing. At phone width the Sheet is always modal.
+     * consumer; an outside click does nothing. At phone width the sheet it becomes is modal: a backdrop, the focus trap,
+     * the scroll lock and Escape from anywhere, and focus moves in if the window narrows while it is open.
      */
     modal?: boolean;
     /**
@@ -2809,8 +2811,6 @@ interface SheetProps {
     title?: ReactNode;
     children: ReactNode;
     footer?: ReactNode;
-    /** A strip between the content and the footer (the Drawer's unsaved-changes question). */
-    confirm?: ReactNode;
     /**
      * The content has unsaved changes: every close path — Escape, the backdrop, dragging it down, the close control and a
      * FormWrapper's Cancel — asks before discarding them, inside the sheet, as a Drawer and a Dialog do (the review of
@@ -2832,7 +2832,11 @@ interface SheetProps {
     /** id of the element that names the dialog when no title is rendered. */
     labelledBy?: string;
 }
-declare function Sheet({ open, onClose: onCloseProp, title, children, footer, confirm, dirty, onDiscard, snapPoints, container, flush, keepMounted, id, labelledBy }: SheetProps): react.ReactPortal | null;
+/**
+ * A bottom sheet with snap heights. It is the Drawer's phone form, drawn by the same panel (Sprint 25.14 A50), so a
+ * sheet and a drawer share their inset, their drag and their focus handling.
+ */
+declare function Sheet({ open, onClose: onCloseProp, title, children, footer, dirty, onDiscard, snapPoints, container, flush, keepMounted, id, labelledBy }: SheetProps): react_jsx_runtime.JSX.Element;
 
 interface Notification {
     id: string;
@@ -3119,6 +3123,16 @@ interface AppShellContextValue {
     hasUnsavedChanges: boolean;
     /** Set by useUnsavedChanges; not for pages to call. Returns the release. */
     addUnsavedChanges: () => () => void;
+    /** The width every Drawer in the app takes when it is given none (Sprint 25.14 A24): AppShell's drawerWidth, 520 px by default. */
+    drawerWidth: string;
+    /** The app's router (AppShell's `navigate`), or null: the library's links in the shell (a breadcrumb's crumb) and a flow's steps go through it. */
+    navigate: ((href: string, options?: {
+        replace?: boolean;
+    }) => void) | null;
+    /** A page that has left the flow is showing (<FlowSaved>, Sprint 25.16 A30): focus mode draws no exit control. */
+    flowLeft: boolean;
+    /** Set by FlowSaved; not for pages to call. Returns the release. */
+    markFlowLeft: () => () => void;
 }
 /**
  * Focus mode (Sprint 25.7, C1): a task flow the user completes before or outside the app — setup, onboarding,
@@ -3181,10 +3195,25 @@ interface AppShellProps {
     theme?: AppShellTheme;
     /** The customer's UX preferences, passed once by the generated shell so pages and components carry nothing (Sprint 25.6). */
     preferences?: AppShellPreferences;
+    /**
+     * The width of every Drawer in the app that is given none (Sprint 25.14 A24): pages pass no width, so the app's
+     * drawers share one. Default "520px". A Drawer's own width prop still wins, for a deliberate wide or narrow one.
+     */
+    drawerWidth?: string;
     /** The current route's path, so the shell knows which page is home. */
     currentPath?: string;
     /** The home page's path. Default "/". */
     homePath?: string;
+    /**
+     * The app's router: `(href, options) => navigate(href, options)` with React Router, `(href, options) =>
+     * (options?.replace ? router.replace(href) : router.push(href))` with Next.js. The library's links in the shell — a
+     * breadcrumb's crumb, a SplitView's path — go through it on a plain click, so the page changes with no reload, and so
+     * do a flow's steps (useFlowSteps), which replace an address that isn't a step reached (Sprint 25.16 A19, A30).
+     * Without it they are ordinary links. The generated layout passes it.
+     */
+    navigate?: (href: string, options?: {
+        replace?: boolean;
+    }) => void;
     /**
      * Focus mode for a flow outside the navigation (setup, onboarding, checkout). The sidebar, mobile menu and bottom
      * nav are not rendered, and the Navbar drops its links and search; the logo, the assistant (its launcher and its
@@ -3195,6 +3224,139 @@ interface AppShellProps {
 }
 declare const AppShell: react.ForwardRefExoticComponent<AppShellProps & react.RefAttributes<HTMLDivElement>>;
 
+interface FlowStep<A> {
+    /** The step's name in the Stepper ("Team size"). */
+    label: string;
+    /** The page's title on this step ("How big is your team?"). */
+    title: string;
+    /** The step is shown only while this holds, so the total follows the answers ("Just me" leaves out the team's step). */
+    when?: (answers: A) => boolean;
+}
+/**
+ * What a flow keeps between visits: the furthest step reached, the step the user was on, and the answers so far. The
+ * answers are kept as JSON: strings, numbers, booleans, arrays and plain objects (a Date comes back as its string).
+ */
+interface FlowProgress<A> {
+    furthest: number;
+    current?: number;
+    answers: A;
+}
+type FlowNavigate = (href: string, options?: {
+    replace?: boolean;
+}) => void;
+interface UseFlowStepsOptions<A, S extends FlowStep<A>> {
+    /** Every step, in order; a step with `when` is shown only while it holds. */
+    steps: readonly S[];
+    /** The step the address names: the flow's one `:step` route parameter ("3"). */
+    at: string | undefined;
+    /** Step n's address, counting the steps shown from 1: (n) => `/setup/${n}`. */
+    href: (step: number) => string;
+    /**
+     * The flow's name in the browser's storage, where its progress and answers are kept between visits. With sign-in,
+     * name it for the user (`setup:${userId}`), so the next person on the browser starts afresh; pass undefined until the
+     * user is known, and the flow waits (draws nothing, moves nothing, writes nothing).
+     */
+    storageKey: string | undefined;
+    /** The answers before the user has given any. */
+    initialAnswers: A;
+    /**
+     * Where saveAndExit goes with no sign-in: a page drawing <FlowSaved> (the shell's exit, "Save and continue later",
+     * goes there too). An app with sign-in leaves through the shell's "Save and log out" instead, and resumes on return.
+     */
+    exitTo: string;
+    /** Where Finish goes once the flow is done: the app's home. */
+    finishTo: string;
+    /** The app's router. Left out, the shell's (AppShell's navigate); with neither, a page load. */
+    navigate?: FlowNavigate;
+}
+interface FlowSteps<A, S extends FlowStep<A>> {
+    /**
+     * False until the flow's progress has been read and the address names a step reached. Draw nothing until then: an
+     * address not reached yet, past the last step or not a step at all is being moved to the furthest step reached.
+     */
+    ready: boolean;
+    /** This step, counting the steps shown from 1. */
+    step: number;
+    /** How many steps are shown, which follows the answers. */
+    total: number;
+    /** This step's own entry in `steps`: pick its form from it. */
+    current: S;
+    /** "Step 2 of 6": PageHeader's caption. */
+    caption: string;
+    /** This step's title: PageHeader's title. The browser tab's title follows it. */
+    title: string;
+    /** The answers so far, kept with the progress. */
+    answers: A;
+    /** Merges answers in. One that changes which steps follow this one means walking them again: they count as not reached. */
+    setAnswers: (patch: Partial<A>) => void;
+    /** The furthest step reached: any step up to it can be gone to. */
+    furthest: number;
+    isFirst: boolean;
+    isLast: boolean;
+    /** Goes on to the next step, which then counts as reached; answers given with it are kept in the same move. */
+    next: (patch?: Partial<A>) => void;
+    /** PageHeader's onBack: the step before, or undefined on the first step (no Back link there). */
+    back: (() => void) | undefined;
+    /** Goes to a step reached; any other is ignored. */
+    goTo: (step: number) => void;
+    /** The Stepper's props: the steps shown (done before the furthest, and a step past it can't be pressed), this one, and going to one. */
+    stepper: {
+        steps: {
+            label: string;
+            status?: "complete";
+            disabled?: boolean;
+        }[];
+        currentStep: number;
+        onStepChange: (index: number) => void;
+    };
+    /** Keeps the progress and leaves the flow, for exitTo. */
+    saveAndExit: () => void;
+    /** Ends the flow: its stored progress and answers go, and the user goes on to finishTo. */
+    finish: () => void;
+}
+/** A flow's stored progress: its record under the prefix, its answers merged over the initial ones. Null when none (or unreadable). */
+declare function readFlowProgress<A>(storageKey: string, initialAnswers: A): FlowProgress<A> | null;
+/**
+ * Sprint 25.16 A30 (R28-57, R28-58; P22): the library owns a flow's step. A flow with an address per step has one
+ * `:step` route, and this hook reads the step from it: the step and the total, next, back and go-to, never past the
+ * furthest step reached. An address not reached yet, past the last step or not a step at all ("/setup/9",
+ * "/setup/abc") goes to the furthest step reached, the address changing with it: a fresh "/setup/3" lands on
+ * "/setup/1". Steps can be conditional, so the total follows the answers. The progress (the furthest step, and the step
+ * on screen) and the answers are kept in the browser's storage under the flow's name, so a return resumes; they go once
+ * the flow finishes. Every caller with that name (a layout and its step, a page that mounts anew on each step, another
+ * tab) shares one flow: its progress, its finish, the focus after a move and the tab's title. Its save-and-exit leaves
+ * the flow (GOV.UK's save and return): with sign-in, the shell's "Save and log out", resumed after signing in; with
+ * none, a page drawing <FlowSaved>, whose Continue resumes at the step the user was on. The focus shell's PageHeader
+ * reads its caption, title, Stepper and Back from it; after a move the new step's heading takes focus and the browser
+ * tab names the step.
+ */
+declare function useFlowSteps<A, S extends FlowStep<A>>(options: UseFlowStepsOptions<A, S>): FlowSteps<A, S>;
+
+interface FlowSavedProps {
+    /** The flow's storageKey, as its useFlowSteps has it. */
+    storageKey: string;
+    /** The flow's step addresses, as its useFlowSteps has them: Continue goes to the step the user was on. */
+    href: (step: number) => string;
+    /** The page's one heading. Default "Your progress has been saved". */
+    title?: string;
+    /** What the user should know about coming back. Default: the answers are kept in this browser. */
+    children?: ReactNode;
+    /** The app's router. Left out, the shell's (AppShell's navigate). */
+    navigate?: (href: string, options?: {
+        replace?: boolean;
+    }) => void;
+}
+/**
+ * Sprint 25.16 A30 (R28-58): where a flow's "Save and continue later" goes when the app has no sign-in to leave to —
+ * save and return: a page saying the progress has been saved, whose Continue resumes at the step the user was on. It
+ * has left the flow, so the focus shell draws no exit while it shows; its heading takes focus, as the pressed exit has
+ * gone. A status page, as "Page not found" is: one centred message under the page's one heading. With nothing saved
+ * (a bookmark, cleared storage) it says so, and Continue starts the flow. Continue goes back to the step when the user
+ * has just left it for this page (so Back from the step doesn't show it twice), else replaces this page with it; the
+ * step's heading takes focus either way.
+ */
+declare function FlowSaved({ storageKey, href, title, children, navigate }: FlowSavedProps): react_jsx_runtime.JSX.Element;
+
 interface DestructiveActionOptions {
     /** The action's key as the preference lists name it ("remove_range"); derived from `title` when omitted. */
     action?: string;
@@ -3269,8 +3431,9 @@ interface PageContainerProps {
     maxWidth?: MaxWidth;
     /**
      * Caps the content under the header without narrowing the page: the header and tab strip keep the page's width, the
-     * content column below is capped at this width and left-aligned. For a form tab inside a tabbed area (round 17,
-     * 54.1) — `contentWidth="narrow"`; a layout pattern that wraps PageContainer passes it through. Never a hand-rolled
+     * content column below is capped at this width and left-aligned. For a tab whose content is a form (round 17, 54.1)
+     * — `contentWidth="narrow"`; a layout pattern that wraps PageContainer passes it through. A tab with lists or tables
+     * beside its form keeps the full width: FormWrapper caps the fields itself (Sprint 25.16 A8). Never a hand-rolled
      * `max-w-` wrapper around the form.
      */
     contentWidth?: PageContainerWidth;
@@ -3296,6 +3459,15 @@ interface PageContainerProps {
  * `useContentWidth("narrow")` at the top of the page; the cap lifts when the page unmounts.
  */
 declare function useContentWidth(width: PageContainerWidth): void;
+/**
+ * Sprint 25.16 A4 (R28-7): a page's own actions in the header its area layout draws ("Invite user" on Users, "Save" on
+ * Roles), beside useContentWidth. Put them anywhere in the page: they render in the layout's PageHeader, as the page's
+ * own live elements (its state and handlers, never a stale copy), and go when the page does. The layout passes no
+ * actions per tab. Outside a PageContainer with a header they render nothing.
+ */
+declare function PageActions({ children }: {
+    children: ReactNode;
+}): react.ReactPortal | null;
 /**
  * The page's width constraint, and — when a PageHeader is among its direct
  * children — the page's composition: the header is placed inside the column
@@ -3311,6 +3483,15 @@ declare const PageContainer: react.ForwardRefExoticComponent<PageContainerProps
 interface SectionHeadingProps {
     /** Wraps onto more lines rather than being cut (an insight above a chart); a pane's title keeps one line. */
     title: string;
+    /**
+     * Makes the title editable, for a view whose name the user changes in place (a document, a board): called with each
+     * new title as the user types. The title shows as a field at the title's size, filling the title's line. The actions
+     * stay beside it while it keeps about 20 characters, and move under it when it can't, as they always do on a phone,
+     * so a phone never squeezes the name to a few letters (the owner's review of 1 October: run 71's "Sys").
+     */
+    onTitleChange?: (title: string) => void;
+    /** The editable title's name for a screen reader, what it is the title of ("Document title"). Default "Title". */
+    titleLabel?: string;
     description?: string;
     /** The section's buttons. Below sm they sit under the title, like PageHeader's actions. */
     actions?: ReactNode;
@@ -3324,7 +3505,8 @@ interface SectionHeadingProps {
      * "section" (default): a heading within a page, spaced below by --ds-heading-gap. "pane": the title block at the
      * top of a SplitView pane on a fill page (an inbox, a library), where there is no PageHeader — a 16 px inset that
      * matches the list rows under it, a rule at the bottom and no margin below (Sprint 25.4 C-9, folded in from
-     * PaneHeader on the owner's review).
+     * PaneHeader on the owner's review). At the top of the detail, an item's own header: there it insets at the page's
+     * gutter, as the item's path above it does.
      */
     variant?: "section" | "pane";
     className?: string;
@@ -3389,4 +3571,4 @@ interface UseTextOverflowResult {
  */
 declare function useTextOverflow(options?: UseTextOverflowOptions): UseTextOverflowResult;
 
-export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, type AddAnotherProps, Alert, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellFocus, AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, type BreadcrumbItem$1 as BreadcrumbItem, Breadcrumbs, type BreadcrumbsSeparator, type BreadcrumbsSize, type BreadcrumbsVariant, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, type CalendarDay, Card, CardContent, CardDescription, CardFooter, CardGrid, type CardGridProps, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DataList, type DateInput, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeWords, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, type DropdownMenuDivider, type DropdownMenuEntry, type DropdownMenuItem, EmptyState, EntityCell, Field, type FieldControlProps, type FieldLabel, type FieldProps, FileUpload, type FileUploadItem, type FileUploadRequestOptions, type FileUploadStatus, type FitLabelsOptions, type FittedLabel, FormWrapper, Gantt, type GanttGroup, type GanttItem, type GanttProps, type GanttStatus, type GanttTone, type GridKeyboard, type GridKeyboardOptions, HoverCard, InlineFieldError, Input, Kbd, Label, type LabelBox, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, Pager, Pagination, PinInput, Popover, Progress, type PromiseToastMessages, RadioGroup, Rating, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, type SortDir, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, TIME_ZOOMS, type Tab, Table, type TableDensity, type TableProps, type TableRow, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimeBar, type TimeBarProps, TimePicker, TimeRow, type TimeRowProps, type TimeScale, TimeScaleHeader, type TimeScaleHeaderProps, type TimeScaleOptions, type TimeTick, TimeViewport, type TimeViewportHandle, type TimeViewportLayout, type TimeViewportProps, type TimeViewportState, type TimeZoom, Timeline, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseTextOverflowOptions, type UseTextOverflowResult, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, timeExtent, useAppShell, useContentWidth, useDestructiveAction, useFittedLabels, useFormContext, useGridKeyboard, useSidebar, useTextMeasure, useTextOverflow, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional, useUnsavedChanges };
+export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, type AddAnotherProps, Alert, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellFocus, AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, type CalendarDay, Card, CardContent, CardDescription, CardFooter, CardGrid, type CardGridProps, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DataList, type DateInput, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeWords, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, type DropdownMenuDivider, type DropdownMenuEntry, type DropdownMenuItem, EmptyState, EntityCell, Field, type FieldControlProps, type FieldLabel, type FieldProps, FileUpload, type FileUploadItem, type FileUploadRequestOptions, type FileUploadStatus, type FitLabelsOptions, type FittedLabel, type FlowNavigate, type FlowProgress, FlowSaved, type FlowSavedProps, type FlowStep, type FlowSteps, FormWrapper, Gantt, type GanttGroup, type GanttItem, type GanttProps, type GanttStatus, type GanttTone, type GridKeyboard, type GridKeyboardOptions, HoverCard, InlineFieldError, Input, Kbd, Label, type LabelBox, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, PageActions, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, Pager, Pagination, PinInput, Popover, Progress, type PromiseToastMessages, RadioGroup, Rating, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, type SortDir, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, TIME_ZOOMS, type Tab, Table, type TableDensity, type TableProps, type TableRow, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimeBar, type TimeBarProps, TimePicker, TimeRow, type TimeRowProps, type TimeScale, TimeScaleHeader, type TimeScaleHeaderProps, type TimeScaleOptions, type TimeTick, TimeViewport, type TimeViewportHandle, type TimeViewportLayout, type TimeViewportProps, type TimeViewportState, type TimeZoom, Timeline, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseFlowStepsOptions, type UseTextOverflowOptions, type UseTextOverflowResult, dateOfDay, dayOf, endDayOf, fitLabel, fitLabels, formatDateRange, readFlowProgress, timeExtent, useAppShell, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useFormContext, useGridKeyboard, useSidebar, useTextMeasure, useTextOverflow, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional, useUnsavedChanges };