@nxgt/material 3.12.1 → 3.13.0

package/dist/{empty-state-WaU4-T2c.js → empty-state-ZtqqpX0S.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./use-material-translation-B3V_bz-5.js";
+import { t } from "./use-material-translation-DGeVp-qP.js";
 import { i as n } from "./escape-owner-C4W_sOAU.js";
 import { a as r, c as i, i as a, n as o, o as s, r as c, t as l, u } from "./state-scenes-BX03WmSu.js";
 import { AlertCircle as d, Construction as f, FileQuestion as p, PackageOpen as m, Search as h, ShieldAlert as g, WifiOff as _ } from "lucide-react";

package/dist/hooks.js

@@ -1,8 +1,8 @@
-import { r as e } from "./i18n-provider-C6HhBw34.js";
+import { r as e } from "./i18n-provider-GV4Ukoe2.js";
 import { a as t, i as n, o as r, r as i, s as a } from "./theme-store-CSl51uNH.js";
 import { n as o, t as s } from "./use-theme-DMcyJ52N.js";
 import { t as c } from "./number.utils-BG_eEt5g.js";
-import { n as l, r as u, t as d } from "./use-heading-spy-DXo6IOX9.js";
+import { n as l, r as u, t as d } from "./use-heading-spy-DETdqnB6.js";
 import { r as f } from "./use-csp-nonce-ZKs9k-ov.js";
 import { t as p } from "./use-mobile-BDro060N.js";
 import { t as m } from "./use-scroll-away-PQRFZkT2.js";

package/dist/{i18n-provider-C6HhBw34.js → i18n-provider-GV4Ukoe2.js}

@@ -1,4 +1,4 @@
-import { i as e, r as t, t as n } from "./stored-language-BeIKw3-K.js";
+import { i as e, r as t, t as n } from "./stored-language-BAAP7qS3.js";
 import { createContext as r, useCallback as i, useContext as a, useMemo as o, useState as s } from "react";
 import { jsx as c } from "react/jsx-runtime";
 //#region lib/i18n/i18n-provider.tsx

package/dist/i18n.js

@@ -1,10 +1,10 @@
 import { t as e } from "./is-production-GLw59WU8.js";
-import { a as t, i as n, n as r, r as i } from "./stored-language-BeIKw3-K.js";
-import { n as a, r as o, t as s } from "./i18n-provider-C6HhBw34.js";
-import { i as c, n as l, o as u, r as d, t as f } from "./translator-Dje8HrNz.js";
+import { a as t, i as n, n as r, r as i } from "./stored-language-BAAP7qS3.js";
+import { n as a, r as o, t as s } from "./i18n-provider-GV4Ukoe2.js";
+import { i as c, n as l, o as u, r as d, t as f } from "./translator-BU07gNva.js";
 import { o as p, t as m } from "./merge-BCZE6HGq.js";
-import { t as h } from "./translate-material-Bd_KgfB8.js";
-import { t as g } from "./use-material-translation-B3V_bz-5.js";
+import { t as h } from "./translate-material-C0aOnHpZ.js";
+import { t as g } from "./use-material-translation-DGeVp-qP.js";
 import { useCallback as _ } from "react";
 //#region lib/i18n/merge-resources.ts
 function v(e, t, n = "") {

package/dist/{icon-badge-DUAq9f7H.js → icon-badge-_tY1MwU9.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { f as t } from "./dialog-BQp5IdFl.js";
+import { f as t } from "./dialog-rOMjlKJ7.js";
 import { a as n, i as r, n as i } from "./field-blur-context-Cft9s7Hg.js";
 import { t as a } from "./icon-button-ifTpXt0A.js";
 import { isValidElement as o, useId as s } from "react";

package/dist/lib/backgrounds/background/types.d.ts

@@ -54,7 +54,8 @@ export interface BackgroundProps extends ComponentProps<'div'> {
     iconStyle?: IconStyleInput;
     /** The `icons` preset: `layout` (`'scatter'`, `'grid'`, `'constellation'`,
      * `'drift'`), `sizeRange`, `rotation`, `duotone` (`'opacity'` or `'tones'`),
-     * `secondaryOpacity` and `calm`. A new object with the same values is the
+     * `secondaryOpacity`, `calm` and `quiet` (a band the icons fade out of, for
+     * text over the motif). A new object with the same values is the
      * same scene. */
     iconMotif?: IconMotifOptions;
     /** `'viewport'` is the viewport's size (as in `/components`);

package/dist/lib/backgrounds/index.d.ts

@@ -9,6 +9,6 @@
  * name (same props, plus every preset's), with the types and the engine's
  * tables re-exported from `@nxgt/material-core/backgrounds` by name.
  */
-export { BACKGROUND_INTENSITIES, BACKGROUND_PRESETS, BACKGROUND_TONES, type BackgroundIntensity, type BackgroundPreset, type BackgroundTone, type CelestialPreset, type IconLayout, type IconMotifOptions, type IconStyleInput, type IconStyleRef, type IconsInput, MOTIF_SHAPES, MOTIF_SHAPES_ALL, type MoonOptions, type MotifDensity, type MotifOptions, type MotifShape, type MotifSize, type OpacitySpread, type PresetInfo, SHIPPED_BACKGROUND_PRESETS, type ShapeFill, type ShippedBackgroundPreset, type SkyPreset, } from '@nxgt/material-core/backgrounds';
+export { BACKGROUND_INTENSITIES, BACKGROUND_PRESETS, BACKGROUND_TONES, type BackgroundIntensity, type BackgroundPreset, type BackgroundTone, type CelestialPreset, type IconLayout, type IconMotifOptions, type IconQuiet, type IconStyleInput, type IconStyleRef, type IconsInput, MOTIF_SHAPES, MOTIF_SHAPES_ALL, type MoonOptions, type MotifDensity, type MotifOptions, type MotifShape, type MotifSize, type OpacitySpread, type PresetInfo, SHIPPED_BACKGROUND_PRESETS, type ShapeFill, type ShippedBackgroundPreset, type SkyPreset, } from '@nxgt/material-core/backgrounds';
 export { Background, type BackgroundProps } from './background/index.js';
 export { AVAILABLE_BACKGROUND_PRESETS, type AvailableBackgroundPreset, } from './background/available.js';

package/dist/lib/components/ui/collections/data-table/numeric-class.d.ts

@@ -0,0 +1,2 @@
+/** A `meta.numeric` column: flush to the end, digits one width. */
+export declare const NUMERIC_CLASS = "text-end tabular-nums";

package/dist/lib/components/ui/collections/data-table/table-meta.d.ts

@@ -1,8 +1,8 @@
 import { CellData, RowData, TableFeatures } from '@tanstack/react-table';
 /**
- * `columnDef.meta.className`, read by `DataTable` on each header and cell of
- * the column, and `columnDef.meta.label`, the column's plain name. Declared
- * on TanStack's `ColumnMeta`, so it types a consumer's
+ * `columnDef.meta.className` and `columnDef.meta.numeric`, read by `DataTable`
+ * on each header and cell of the column, and `columnDef.meta.label`, the
+ * column's plain name. Declared on TanStack's `ColumnMeta`, so it types a consumer's
  * column definitions too: `index.ts` re-exports this module so that the
  * published declarations carry the augmentation wherever `DataTable` is
  * imported from.
@@ -10,6 +10,11 @@ import { CellData, RowData, TableFeatures } from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
         className?: string;
+        /**
+         * A column of figures: its header and cells are flush to the end and set
+         * in tabular digits (`tabular-nums`), so decimals line up down the column.
+         */
+        numeric?: boolean;
         /** The column's plain name, where a render function `header` has none to
          * give: the sort control's option in the `cards` layout. Default: a
          * string `header`, then the column's id. */

package/dist/lib/components/ui/display/entity-header/entity-header.d.ts

@@ -5,11 +5,17 @@ export type { EntityStat } from './entity-stats.js';
 export type EntityHeaderProps = {
     icon?: React.ReactNode;
     /**
-     * The heading (an `h1`). Leave it out when the page's `h1` is elsewhere, such
+     * The heading (an `h1`, or the `headingLevel` you choose). Leave it out when the page's `h1` is elsewhere, such
      * as the app bar's `handle.title`: no heading is rendered, and the root stays
      * a plain `div`, never a landmark, so nothing is left unnamed.
      */
     title?: React.ReactNode;
+    /**
+     * The title's heading level, `1` by default. Pass `2` or `3` when the page
+     * already has its `h1` (a list title beside a detail header), so the
+     * outline stays in order. The look does not change with the level.
+     */
+    headingLevel?: 1 | 2 | 3;
     status?: React.ReactNode;
     metadata?: {
         label: string;
@@ -23,4 +29,4 @@ export type EntityHeaderProps = {
     stats?: EntityStat[];
     actions?: ResponsiveButtonProps[] | React.ReactNode;
 } & Pick<IconButtonProps, 'variant' | 'color'> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
-export declare function EntityHeader({ color, variant, icon, title, status, metadata, stats, actions, className, children, ...props }: EntityHeaderProps): import("react").JSX.Element;
+export declare function EntityHeader({ color, variant, icon, title, headingLevel, status, metadata, stats, actions, className, children, ...props }: EntityHeaderProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/entity-header/entity-stats.d.ts

@@ -9,7 +9,7 @@ export type EntityStat = {
 export declare const hasStatValue: (stat: EntityStat) => boolean;
 /**
  * The figures of an EntityHeader (counts, a mean) as compact StatCard tiles in
- * a row that wraps. A tile with a `tone` is tonal; without one it is outlined.
+ * a StatCardGroup: 2×2 on a phone, a row that wraps beside. A tile with a `tone` is tonal; without one it is outlined.
  */
 export declare function EntityStats({ data }: {
     data: EntityStat[];

package/dist/lib/components/ui/display/entity-header/partials/entity-header-body.d.ts

@@ -3,8 +3,9 @@ import { EntityStat } from '../entity-stats.js';
  * The column beside the icon: the heading and the status on one line, the
  * metadata and the stats under it.
  */
-export declare function EntityHeaderBody({ title, status, metadata, stats, }: {
+export declare function EntityHeaderBody({ title, headingLevel, status, metadata, stats, }: {
     title?: React.ReactNode;
+    headingLevel?: 1 | 2 | 3;
     status?: React.ReactNode;
     metadata: {
         label: string;

package/dist/lib/components/ui/display/list-tile/list-tile.d.ts

@@ -1,9 +1,26 @@
 import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
 import { LinkComponent } from '../../primitives/link/link-component.js';
-export type ListTileProps = {
+import { ListTileToggle } from './partials/list-tile-toggle.js';
+export type { ListTileToggle } from './partials/list-tile-toggle.js';
+export type ListTileCommonProps = {
     leading?: ReactNode;
     /** Inside the row (and the link): decoration, never a button. */
     trailing?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /**
+     * The tile is the current one. A link tile (`href`) gets
+     * `aria-current="page"` (pass your own `aria-current`, such as `"true"`
+     * for a selection that is not a page, to replace it) and the selected look;
+     * a button tile (`onClick`) gets `aria-pressed`. For list-detail
+     * navigation, give `selected` from the router's location and the tile
+     * keeps a shareable URL.
+     */
+    selected?: boolean;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'title' | 'onClick'>;
+export type ListTileLinkOrButtonProps = {
     /**
      * Buttons at the end of the tile, vertically centred, outside the link: a
      * link tile's `trailing` sits inside its `<a>`, which cannot hold
@@ -11,10 +28,6 @@ export type ListTileProps = {
      * sit above it; the tab order is the link, then the actions.
      */
     actions?: ReactNode;
-    title: ReactNode;
-    subtitle?: ReactNode;
-    selected?: boolean;
-    size?: 'sm' | 'md';
     href?: string;
     /**
      * A discreet chevron after `trailing`, flipped in right-to-left, decorative
@@ -30,7 +43,29 @@ export type ListTileProps = {
      * router `Link` wrapper for client-side navigation.
      */
     linkComponent?: LinkComponent;
-    disabled?: boolean;
     onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
-} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'title' | 'onClick'>;
-export declare function ListTile({ title, subtitle, leading, trailing, actions, className, selected, size, href, chevron, linkComponent, disabled, onClick, ...props }: ListTileProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+    toggle?: undefined;
+};
+export type ListTileSwitchProps = {
+    /**
+     * Makes the tile a switch row: the tile is a `<label>` for a Switch at its
+     * end, so a press anywhere on the row toggles it. The switch is the one tab
+     * stop, named by `title` and described by `subtitle`. It takes the Switch's
+     * props (`checked`, `onCheckedChange`, `name`…); `disabled` on the tile
+     * disables it too. A switch row is neither a link nor a button: `href`,
+     * `onClick`, `actions` and `chevron` do not apply to it.
+     */
+    toggle: ListTileToggle;
+    href?: never;
+    onClick?: never;
+    actions?: never;
+    chevron?: never;
+    linkComponent?: never;
+};
+/**
+ * A link or button tile, or a switch row (`toggle`): a switch row is neither
+ * a link nor a button, so `href`, `onClick`, `actions`, `chevron` and
+ * `linkComponent` do not type-check beside `toggle`.
+ */
+export type ListTileProps = ListTileCommonProps & (ListTileLinkOrButtonProps | ListTileSwitchProps);
+export declare function ListTile({ toggle, ...props }: ListTileProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/list-tile/partials/list-tile-body.d.ts

@@ -7,6 +7,9 @@ type ListTileBodyProps = {
     subtitle?: ReactNode;
     compact: boolean;
     selected?: boolean;
+    /** Ids of the title and the subtitle, for a control that is named by them. */
+    titleId?: string;
+    subtitleId?: string;
 };
-export declare function ListTileBody({ leading, trailing, chevron, title, subtitle, compact, selected, }: ListTileBodyProps): import("react").JSX.Element;
+export declare function ListTileBody({ leading, trailing, chevron, title, subtitle, compact, selected, titleId, subtitleId, }: ListTileBodyProps): import("react").JSX.Element;
 export {};

package/dist/lib/components/ui/display/list-tile/partials/list-tile-line.d.ts

@@ -0,0 +1,3 @@
+import { ListTileCommonProps, ListTileLinkOrButtonProps } from '../list-tile.js';
+/** A link, a button or a plain tile, with or without `actions` beside it. */
+export declare function ListTileLine({ title, subtitle, leading, trailing, actions, className, selected, size, href, chevron, linkComponent, disabled, onClick, ...props }: ListTileCommonProps & Omit<ListTileLinkOrButtonProps, 'toggle'>): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/lib/components/ui/display/list-tile/partials/list-tile-toggle.d.ts

@@ -0,0 +1,20 @@
+import { SwitchControlProps } from '../../../fields/switch/partials/switch-control.js';
+import { ListTileCommonProps } from '../list-tile.js';
+/**
+ * The switch of a switch row (`ListTile`'s `toggle`): a Switch's own props,
+ * `checked`, `defaultChecked`, `onCheckedChange`, `disabled`, `name`,
+ * `thumbIcons`… The row names it, so the naming props are left out.
+ */
+export type ListTileToggle = Omit<SwitchControlProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'children'>;
+type ListTileToggleRowProps = ListTileCommonProps & {
+    toggle: ListTileToggle;
+};
+/**
+ * A switch row: the tile is a `<label>` for its switch, so a press anywhere
+ * on the row toggles it. The switch is the only tab stop (Space or Enter
+ * toggle it); it is named by the title and described by the subtitle, so a
+ * screen reader reads "Notifications, switch, on, Email and push" rather
+ * than the row's whole text as the name.
+ */
+export declare function ListTileToggleRow({ toggle, title, subtitle, leading, trailing, selected, size, disabled, className, ...rootProps }: ListTileToggleRowProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/display/stat-card/index.d.ts

@@ -2,3 +2,5 @@ export type { StatDeltaTone } from './format-stat-delta.js';
 export { formatStatDelta } from './format-stat-delta.js';
 export type { StatCardProps, StatCardSize, StatCardValueSize, StatCardVariant, } from './stat-card.js';
 export { StatCard } from './stat-card.js';
+export type { StatCardGroupProps } from './stat-card-group.js';
+export { StatCardGroup } from './stat-card-group.js';

package/dist/lib/components/ui/display/stat-card/stat-card-group.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+export type StatCardGroupProps = ComponentProps<'div'>;
+/**
+ * A band of `StatCard size="sm"` tiles with an even layout (#1493): two
+ * columns of equal tiles while the group is narrow (a phone: four tiles make
+ * a 2×2 grid, an odd last tile takes the whole row), and one row of tiles
+ * that hug their content, wrapping when it must, from `md` (28 rem) of the
+ * group's own width. It reads the group's width, not the viewport's, so it
+ * holds in a side panel or a header as well. Pass the tiles as children;
+ * `EntityHeader`'s `stats` use it.
+ */
+export declare function StatCardGroup({ className, children, ...props }: StatCardGroupProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/alert/alert-tone-icon.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { AlertVariantProps } from './alert-variants.js';
+export type AlertTone = NonNullable<AlertVariantProps['variant']>;
+/**
+ * The icon each tone shows when none is passed, shared by Alert and Banner so
+ * the two cannot drift. The neutral tones (`primary`, `secondary`,
+ * `foreground`) read as information.
+ */
+export declare const TONE_ICON: Record<AlertTone, ReactNode>;

package/dist/lib/components/ui/feedback/alert/alert.d.ts

@@ -1,6 +1,10 @@
 import { ComponentProps, ReactNode } from 'react';
 import { AlertVariantProps } from './alert-variants.js';
 export type AlertProps = {
+    /**
+     * Unset: the tone's icon (the same as Banner's). `null` (or `false`)
+     * shows no icon; any node replaces the tone's icon.
+     */
     icon?: ReactNode;
     title?: ReactNode;
     description?: ReactNode;

package/dist/lib/components/ui/fields/form-section/form-section-heading-classes.d.ts

@@ -0,0 +1,4 @@
+/** The title: `title-md` emphasized, in the text colour. */
+export declare const formSectionHeadingTitleClass = "min-w-0 break-words text-title-md-em";
+/** The description: `body-md`, muted (4.5:1 on the form's background). */
+export declare const formSectionHeadingDescriptionClass = "break-words text-body-md text-muted-foreground";

package/dist/lib/components/ui/fields/form-section/form-section.d.ts

@@ -1,6 +1,7 @@
 import { ComponentProps, ReactNode } from 'react';
 import { FormSectionTitleElement } from './form-section-classes.js';
 export type { FormSectionTitleElement } from './form-section-classes.js';
+export type FormSectionVariant = 'label' | 'heading';
 export type FormSectionProps = Omit<ComponentProps<'div'>, 'title'> & {
     /** The section's heading. */
     title: ReactNode;
@@ -13,6 +14,13 @@ export type FormSectionProps = Omit<ComponentProps<'div'>, 'title'> & {
     description?: ReactNode;
     /** Controls beside the title (e.g. "Add"), wrapping under it on a phone. */
     actions?: ReactNode;
+    /**
+     * `label` (default) is the small uppercase muted title that sets the
+     * section apart from its fields' labels. `heading` puts the title on the
+     * type scale (`title-md` emphasized) and the description in `body-md`,
+     * muted: a section title like the design rules ask for.
+     */
+    variant?: FormSectionVariant;
     /** A rule above the section when it follows another FormSection. Default `true`. */
     separated?: boolean;
 };
@@ -22,4 +30,4 @@ export type FormSectionProps = Omit<ComponentProps<'div'>, 'title'> & {
  * `[data-slot="form-fields"]` it takes a whole row and lays its fields out
  * in the form's columns; one column on a phone.
  */
-export declare function FormSection({ title, titleAs: Title, description, actions, separated, className, children, ...props }: FormSectionProps): import("react").JSX.Element;
+export declare function FormSection({ title, titleAs: Title, description, actions, variant, separated, className, children, ...props }: FormSectionProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/list-details-layout/list-details-layout.d.ts

@@ -1,10 +1,12 @@
 import { ComponentProps } from 'react';
+import { ListDetailsBack } from './partials/list-details-back.js';
 import { ListPosition, ViewState } from './partials/list-details-context.js';
 import { ListDetailsDetails } from './partials/list-details-details.js';
 import { ListDetailsList } from './partials/list-details-list.js';
 import { ListDetailsTrigger } from './partials/list-details-trigger.js';
+export { ListDetailsBack, type ListDetailsBackProps, } from './partials/list-details-back.js';
 export { useListDetails } from './partials/list-details-context.js';
-export { ListDetailsDetails } from './partials/list-details-details.js';
+export { ListDetailsDetails, type ListDetailsDetailsProps, } from './partials/list-details-details.js';
 export { ListDetailsList, type ListDetailsListProps, } from './partials/list-details-list.js';
 export { ListDetailsTrigger, type ListDetailsTriggerProps, } from './partials/list-details-trigger.js';
 export interface ListDetailsLayoutProps extends ComponentProps<'div'> {
@@ -12,11 +14,19 @@ export interface ListDetailsLayoutProps extends ComponentProps<'div'> {
     onActiveViewChange?: (view: ViewState) => void;
     defaultActiveView?: ViewState;
     listPosition?: ListPosition;
+    /**
+     * What the phone layout (one pane at a time) follows: `'viewport'`
+     * (default) the window, at 648px or less; `'container'` the layout's own
+     * width, at 648px or less, for a layout in a column, a dialog or a split
+     * pane of a wide window.
+     */
+    breakpoint?: 'viewport' | 'container';
 }
-export declare function ListDetailsLayout({ children, className, activeView: controlledActiveView, onActiveViewChange, defaultActiveView, listPosition, ...props }: ListDetailsLayoutProps): import("react").JSX.Element;
+export declare function ListDetailsLayout({ children, className, activeView: controlledActiveView, onActiveViewChange, defaultActiveView, listPosition, breakpoint, ...props }: ListDetailsLayoutProps): import("react").JSX.Element;
 export declare namespace ListDetailsLayout {
     var displayName: string;
     var List: typeof ListDetailsList;
     var Details: typeof ListDetailsDetails;
     var Trigger: typeof ListDetailsTrigger;
+    var Back: typeof ListDetailsBack;
 }

package/dist/lib/components/ui/layout/list-details-layout/partials/list-details-back.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../../../actions/button/button.js';
+export interface ListDetailsBackProps extends Omit<ButtonProps, 'children' | 'onClick'> {
+    /** The visible label; the default is the translated "Back to the list". */
+    children?: ReactNode;
+    onClick?: ButtonProps['onClick'];
+}
+/**
+ * The way back from the details to the list on a phone, where one pane shows
+ * at a time. It renders nothing otherwise (a wide screen, or the list showing).
+ * The layout moves the focus back to the list item that opened the details.
+ */
+export declare function ListDetailsBack({ children, onClick, ...props }: ListDetailsBackProps): import("react").JSX.Element | null;
+export declare namespace ListDetailsBack {
+    var displayName: string;
+}

package/dist/lib/components/ui/layout/list-details-layout/partials/list-details-details.d.ts

@@ -1,8 +1,16 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { ListDetailsChildren } from './list-details-context.js';
-export declare function ListDetailsDetails({ children, className, ...props }: Omit<ComponentProps<'div'>, 'children'> & {
+export type ListDetailsDetailsProps = Omit<ComponentProps<'div'>, 'children'> & {
     children: ListDetailsChildren;
-}): import("react").JSX.Element;
+    /**
+     * A bar with the way back to the list, over the details, on a phone only
+     * (one pane shows at a time there). `true` shows the translated
+     * "Back to the list"; a node is its label. Leave it out to place a
+     * {@link ListDetailsBack} yourself, in your own header.
+     */
+    back?: boolean | ReactNode;
+};
+export declare function ListDetailsDetails({ children, className, back, ...props }: ListDetailsDetailsProps): import("react").JSX.Element;
 export declare namespace ListDetailsDetails {
     var displayName: string;
 }

package/dist/lib/components/ui/layout/list-details-layout/partials/pane-opener.d.ts

@@ -0,0 +1,15 @@
+/** What the record logic needs of an element: no DOM global, so it tests without a browser. */
+export type OpenerNode = {
+    closest(selector: string): OpenerNode | null;
+    isConnected: boolean;
+};
+/**
+ * The element of the list pane a focus or a pointer press landed on: for a
+ * press, the closest pressable (Safari and iOS do not focus a button or a link
+ * on a tap); for a focus, the element itself. `null` outside the list pane.
+ */
+export declare function openerOf<T extends OpenerNode = OpenerNode>(target: unknown, kind: 'focus' | 'pointer'): T | null;
+/** The record is still worth focusing: attached and inside the list pane. */
+export declare function usableOpener<T extends OpenerNode>(opener: T | null, list: {
+    contains(node: never): boolean;
+} | null | undefined): opener is T;

package/dist/lib/components/ui/layout/list-details-layout/partials/use-container-narrow.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * Whether the element is at most `width` px wide, watched with a
+ * ResizeObserver. `false` until measured (the server and the hydrating client
+ * both render the wide layout, as the viewport query does).
+ */
+export declare function useContainerNarrow(ref: RefObject<HTMLElement | null>, width: number, enabled: boolean): boolean;

package/dist/lib/components/ui/layout/list-details-layout/partials/use-pane-focus.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+import { ViewState } from './list-details-context.js';
+/**
+ * On a phone one pane shows at a time, so the focus must follow the view:
+ * opening the details focuses the details pane; coming back focuses the list
+ * item that opened them (or the list pane when it is gone). Nothing moves on
+ * the first render, on a wide screen, or when the view did not change.
+ * The opener is the last element focused inside the list pane, tracked with
+ * `focusin` or, for a tap that focuses nothing (Safari, iOS), `pointerdown`;
+ * the last one wins, so it holds whatever changes the view: the context, a
+ * controlled `activeView` driven by a URL, or a link row.
+ */
+export declare function usePaneFocus(root: RefObject<HTMLElement | null>, activeView: ViewState, matches: boolean): void;

package/dist/lib/components/ui/widgets/drawing/drawing-types.d.ts

@@ -16,10 +16,16 @@ export type NodeClick = (id: string, event: MouseEvent<SVGGElement>) => void;
 /** The root takes a name or is decorative, never neither: the type enforces it. */
 export type DrawingName = {
     title: string;
+    /**
+     * A long description for assistive technology, such as a chart's data:
+     * a `<desc>` the root names in `aria-describedby`.
+     */
+    description?: string;
     decorative?: never;
 } | {
     decorative: true;
     title?: never;
+    description?: never;
 };
 type Root = Omit<ComponentProps<'svg'>, 'children' | 'style' | 'title' | 'role' | 'width' | 'height' | 'viewBox' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'>;
 type Shared = Root & {

package/dist/lib/components/ui/widgets/drawing/partials/drawing-root.d.ts

@@ -3,6 +3,10 @@ import { RootRole } from '../drawing-a11y.js';
 type Props = {
     role: RootRole;
     title?: string;
+    /** A `<desc>` named by `aria-describedby`; needs a title. */
+    description?: string;
+    /** The `<desc>`'s id. */
+    descriptionId?: string;
     /** `width`, `height` and `viewBox`. */
     attrs: Record<string, string | number>;
     rest: Record<string, unknown>;
@@ -13,5 +17,5 @@ type Props = {
  * `createElement`: the role is data (drawing-a11y.ts), and there is never a
  * `<title>` (React 19 would hoist it into the document head).
  */
-export declare function DrawingRoot({ role, title, attrs, rest, children }: Props): import('react').ReactSVGElement;
+export declare function DrawingRoot({ role, title, description, descriptionId, attrs, rest, children, }: Props): import('react').ReactSVGElement;
 export {};

package/dist/lib/draw-animate/morph-drawing.d.ts

@@ -1,17 +1,11 @@
 import { Scene } from '@nxgt/material-core/draw';
-import { SceneDrawingProps } from '../components/ui/widgets/drawing/drawing-types.js';
+import { DrawingName, SceneDrawingProps } from '../components/ui/widgets/drawing/drawing-types.js';
 export type MorphDrawingProps = Omit<SceneDrawingProps, 'scene' | 'ref' | 'handlers' | 'from' | 'to'> & {
     from: Scene;
     to: Scene;
     /** False draws `from`, true draws `to`; a change morphs between them. */
     active: boolean;
-} & ({
-    title: string;
-    decorative?: never;
-} | {
-    decorative: true;
-    title?: never;
-});
+} & DrawingName;
 /**
  * A drawing that morphs from one scene to the other when `active` changes,
  * writing each frame into the `d` of the paths the two scenes share by `id`

package/dist/lib/i18n/resources/en/en.d.ts

@@ -2671,5 +2671,8 @@ export declare const en: {
                 "scatter-series": string;
             };
         };
+        "list-details": {
+            back: string;
+        };
     };
 };

package/dist/lib/i18n/resources/en/material.json.d.ts

@@ -2660,6 +2660,9 @@ declare const _default: {
 			"scatter-range": "{axis} from {min} to {max}.",
 			"scatter-series": "{series}: {count, plural, one {# point} other {# points}}."
 		}
+	},
+	"list-details": {
+		"back": "Back to the list"
 	}
 }
 ;

package/dist/lib/i18n/resources/fr/fr.d.ts

@@ -2671,5 +2671,8 @@ export declare const fr: {
                 "scatter-series": string;
             };
         };
+        "list-details": {
+            back: string;
+        };
     };
 };

package/dist/lib/i18n/resources/fr/material.json.d.ts

@@ -2660,6 +2660,9 @@ declare const _default: {
 			"scatter-range": "{axis} de {min} à {max}.",
 			"scatter-series": "{series} : {count, plural, one {# point} other {# points}}."
 		}
+	},
+	"list-details": {
+		"back": "Retour à la liste"
 	}
 }
 ;

package/dist/lib/i18n/resources/resources.d.ts

@@ -2669,6 +2669,9 @@ export declare const resources: {
                     "scatter-series": string;
                 };
             };
+            "list-details": {
+                back: string;
+            };
         };
     };
     fr: {
@@ -5335,6 +5338,9 @@ export declare const resources: {
                     "scatter-series": string;
                 };
             };
+            "list-details": {
+                back: string;
+            };
         };
     };
 };