@nxgt/material 2.18.1 → 2.20.0

package/dist/{flowDiagram-KWPJA3E3-CAt7iv16.js → flowDiagram-KWPJA3E3-BghxpN0G.js}

@@ -6,12 +6,12 @@ import "./chunk-MBY4JIJT-BFIqOe-8.js";
 import "./chunk-7PRAP22T-0C6_H8Li.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import "./chunk-5DYCD2WN-Cd1zazNp.js";
-import "./chunk-Z7XXMR3K-DDFBvLN4.js";
+import "./chunk-Z7XXMR3K-DY6U0Uq4.js";
 import "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import "./chunk-XXDRQBXY-dKXxu_aj.js";
 import "./chunk-WEXAMYUT-CbFOhEve.js";
 import "./chunk-UA2S7LBM-ChuksCDg.js";
-import "./chunk-GNY47TPC-AFxr6Xhs.js";
+import "./chunk-GNY47TPC-Dzk3o85s.js";
 import "./chunk-LNGE3PJU-DJjGTS7O.js";
-import { n as e } from "./chunk-7M6MHVWA-DSA5AJyK.js";
+import { n as e } from "./chunk-7M6MHVWA-x-N4hnls.js";
 export { e as diagram };

package/dist/{ganttDiagram-FUAMR5RP-g4YEKVC-.js → ganttDiagram-FUAMR5RP-C3aoaoXQ.js}

@@ -1,5 +1,5 @@
 import { a as e, t } from "./rolldown-runtime-BFFgcFxR.js";
-import { $ as n, G as r, H as i, J as a, K as o, Q as s, U as c, W as l, X as u, Y as d, Z as f, et as p, lt as m, nt as h, q as g, rt as _, tt as v, ut as y } from "./components-CEXxj5QP.js";
+import { $ as n, G as r, H as i, J as a, K as o, Q as s, U as c, W as l, X as u, Y as d, Z as f, et as p, lt as m, nt as h, q as g, rt as _, tt as v, ut as y } from "./components-DH5dpaU8.js";
 import { a as b, c as x, g as S, h as C, l as w, m as T, o as E } from "./string-BqyOfyFV.js";
 import { i as D, n as O, t as k } from "./src-CsLQInsN.js";
 import { g as A } from "./chunk-ZIGJFQKS-9VXArDKF.js";

package/dist/{graphlib-DxjKaXeR.js → graphlib-Dc5Siwxn.js}

@@ -1,9 +1,9 @@
-import { _ as e, a as t, f as n, g as r, i, o as a, v as o, y as s } from "./translator-DEde7BKz.js";
-import { a as c, o as l } from "./_overRest-CCAbV-eT.js";
-import { A as u, C as d, M as f, S as p, T as m, b as h, x as g } from "./async-slice-Cuekts5f.js";
-import { d as ee, n as te } from "./_Uint8Array-C7apDrb7.js";
-import { n as ne, r as re, t as _ } from "./isArrayLikeObject-H8k6W51O.js";
-import { i as ie, n as ae, t as v } from "./isEmpty-B0Bavg-e.js";
+import { _ as e, a as t, f as n, g as r, i, o as a, v as o, y as s } from "./translator-B_lmafJN.js";
+import { a as c, o as l } from "./_overRest-DCKNcrF0.js";
+import { A as u, C as d, M as f, S as p, T as m, b as h, x as g } from "./async-slice-DAVXvBm1.js";
+import { d as ee, n as te } from "./_Uint8Array-DGVY6NfN.js";
+import { n as ne, r as re, t as _ } from "./isArrayLikeObject-DeHDPOEB.js";
+import { i as ie, n as ae, t as v } from "./isEmpty-Sic-RRp7.js";
 //#region ../../node_modules/lodash-es/noop.js
 function oe() {}
 //#endregion

package/dist/hooks.js

@@ -1,5 +1,5 @@
-import { r as e } from "./i18n-provider-Dv9ZSmgO.js";
-import { c as t, d as n, i as r, n as i, r as a, s as o, t as s, u as c } from "./use-heading-spy-XkSExwoT.js";
+import { r as e } from "./i18n-provider-Cq_VScPv.js";
+import { c as t, d as n, i as r, n as i, r as a, s as o, t as s, u as c } from "./use-heading-spy-D1Ifooi5.js";
 import { L as l, t as u } from "./number.utils-BiBN2hWJ.js";
 import { useCallback as d, useEffect as f, useMemo as p, useState as m } from "react";
 import { useNavigate as h, useSearchParams as g } from "react-router";

package/dist/{i18n-provider-Dv9ZSmgO.js → i18n-provider-Cq_VScPv.js}

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

package/dist/i18n.js

@@ -1,9 +1,9 @@
-import { a as e, i as t, o as n, r } from "./stored-language-BKoohv2_.js";
-import { n as i, r as a, t as o } from "./i18n-provider-Dv9ZSmgO.js";
-import { n as s, r as c, t as l } from "./translator-DEde7BKz.js";
-import { o as u, t as d } from "./merge-Js8537dg.js";
-import { t as f } from "./translate-material-CCJg3yfc.js";
-import { t as p } from "./use-material-translation-Cndoq_iK.js";
+import { a as e, i as t, o as n, r } from "./stored-language-DqlfjXt8.js";
+import { n as i, r as a, t as o } from "./i18n-provider-Cq_VScPv.js";
+import { n as s, r as c, t as l } from "./translator-B_lmafJN.js";
+import { o as u, t as d } from "./merge-VyOzRzYB.js";
+import { t as f } from "./translate-material-B6HO6ykL.js";
+import { t as p } from "./use-material-translation-Bp4ECeT4.js";
 import { useCallback as m } from "react";
 //#region lib/i18n/merge-resources.ts
 function h(e, t, n = "") {

package/dist/{isArrayLikeObject-H8k6W51O.js → isArrayLikeObject-DeHDPOEB.js}

@@ -1,6 +1,6 @@
-import { x as e } from "./translator-DEde7BKz.js";
-import { i as t, o as n, t as r } from "./_overRest-CCAbV-eT.js";
-import { d as i } from "./_Uint8Array-C7apDrb7.js";
+import { x as e } from "./translator-B_lmafJN.js";
+import { i as t, o as n, t as r } from "./_overRest-DCKNcrF0.js";
+import { d as i } from "./_Uint8Array-DGVY6NfN.js";
 //#region ../../node_modules/lodash-es/_baseRest.js
 function a(e, i) {
 	return t(r(e, i, n), e + "");

package/dist/{isEmpty-B0Bavg-e.js → isEmpty-Sic-RRp7.js}

@@ -1,6 +1,6 @@
-import { C as e, o as t, s as n, v as r } from "./translator-DEde7BKz.js";
-import { N as i, j as a, w as o } from "./async-slice-Cuekts5f.js";
-import { a as s, c, d as l, f as u, l as d, p as f, u as p } from "./_Uint8Array-C7apDrb7.js";
+import { C as e, o as t, s as n, v as r } from "./translator-B_lmafJN.js";
+import { N as i, j as a, w as o } from "./async-slice-DAVXvBm1.js";
+import { a as s, c, d as l, f as u, l as d, p as f, u as p } from "./_Uint8Array-DGVY6NfN.js";
 //#region ../../node_modules/lodash-es/_isFlattenable.js
 var m = e ? e.isConcatSpreadable : void 0;
 function h(e) {

package/dist/{journeyDiagram-ZHPQQLJL-v7NsJ_vl.js → journeyDiagram-ZHPQQLJL-DcUX0asi.js}

@@ -1,4 +1,4 @@
-import { ct as e } from "./components-CEXxj5QP.js";
+import { ct as e } from "./components-DH5dpaU8.js";
 import { t } from "./src-CsLQInsN.js";
 import { n } from "./chunk-Y2CYZVJY-BAad7w_K.js";
 import { H as r, U as i, a, c as o, q as s, v as c, w as l, x as u, y as d } from "./chunk-O7XYJQB3-BChweQ_V.js";

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

@@ -0,0 +1,15 @@
+/** The `<table>`'s classes: the gap between rows (4px, 8px from `md`) that
+ * `compact` shrinks to 2px. */
+export declare const TABLE_DENSITY_CLASS = "border-separate border-spacing-y-1 md:border-spacing-y-2 data-[density=compact]:border-spacing-y-0.5 md:data-[density=compact]:border-spacing-y-0.5";
+/** A body cell: 8px of padding, 4px above and below when compact (the sides
+ * stay 8px, aligned with the header, and a checkbox cell keeps its `pr-0`). */
+export declare const CELL_DENSITY_CLASS = "[table[data-density=compact]>tbody>tr>&]:py-1";
+/** A header cell: the sort button (32px) is what sets its height; compact
+ * takes it to 32px for the cell and 24px for the button. */
+export declare const HEAD_DENSITY_CLASS = "[table[data-density=compact]>thead>tr>&]:h-8";
+/** The sort button in a header: 24px, the target-size minimum. */
+export declare const SORT_DENSITY_CLASS = "[table[data-density=compact]>thead_&]:h-6";
+/** A skeleton bar: one line of text. */
+export declare const SKELETON_DENSITY_CLASS = "[table[data-density=compact]>tbody>tr>td>&]:h-4";
+/** The expand column's icon button: 28px instead of 36px. */
+export declare const EXPAND_DENSITY_CLASS = "[table[data-density=compact]>tbody>tr>td>&]:size-7";

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

@@ -1,5 +1,5 @@
 import { RowData } from '@tanstack/react-table';
 import { DataTableProps } from './types';
 export type { DataTableEmpty, DataTableEmptyState, } from './partials/data-table-empty-row';
-export type { DataTableLinkComponent, DataTableLinkProps, DataTableOptions, DataTablePageTarget, DataTableProps, DataTableServerPagination, } from './types';
+export type { DataTableDensity, DataTableLinkComponent, DataTableLinkProps, DataTableOptions, DataTablePageTarget, DataTableProps, DataTableServerPagination, } from './types';
 export declare function DataTable<TData extends RowData>(props: DataTableProps<TData>): import("react").JSX.Element;

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

@@ -35,10 +35,17 @@ export type DataTableServerPagination = {
     next?: DataTablePageTarget | null;
 };
 export type DataTableTable<TData extends RowData> = ReactTable<DataTableFeatures, TData>;
+/** How tight a `DataTable`'s rows are. */
+export type DataTableDensity = 'comfortable' | 'compact';
 export interface DataTableProps<TData extends RowData> {
     columns: ColumnDef<DataTableFeatures, TData, any>[];
     data: TData[];
     className?: string;
+    /** How tight the rows are: `comfortable` (default) or `compact`, which
+     * shrinks the cell padding, the row height, the header height and the gap
+     * between rows, the selection column included. It is set on the table as
+     * `data-density`. The toolbar and the empty state are not changed. */
+    density?: DataTableDensity;
     actions?: (table: DataTableTable<TData>) => ReactNode;
     options?: DataTableOptions;
     renderExpandedRow?: (row: Row<DataTableFeatures, TData>) => ReactNode;

package/dist/lib/components/ui/fields/index.d.ts

@@ -16,6 +16,7 @@ export * from './percent-field';
 export * from './phone-field';
 export * from './postal-address';
 export * from './rating-field';
+export * from './repeatable-group';
 export * from './search-field';
 export * from './slider';
 export * from './switch';

package/dist/lib/components/ui/fields/repeatable-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './repeatable-group';
+export * from './repeatable-group-form-field';

package/dist/lib/components/ui/fields/repeatable-group/partials/repeatable-group-footer.d.ts

@@ -0,0 +1,14 @@
+export type RepeatableGroupFooterProps = {
+    addLabel: string;
+    /** At the maximum: the button is `aria-disabled` and described by it. */
+    full: boolean;
+    maxReached: string;
+    disabled?: boolean;
+    onAdd: () => void;
+};
+/**
+ * The Add button. At the maximum it stays focusable (`aria-disabled`, a
+ * click does nothing) and is described by the reason beside it, so the
+ * focus is not lost and a screen reader says why.
+ */
+export declare function RepeatableGroupFooter({ addLabel, full, maxReached, disabled, onAdd, }: RepeatableGroupFooterProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/repeatable-group/partials/repeatable-group-row.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export type RepeatableGroupRowProps = {
+    /** 0-based. */
+    index: number;
+    count: number;
+    children: ReactNode;
+    names: {
+        remove: (position: number) => string;
+        moveUp: (position: number) => string;
+        moveDown: (position: number) => string;
+    };
+    reorderable?: boolean;
+    removable: boolean;
+    disabled?: boolean;
+    onRemove: () => void;
+    onMove: (direction: 'up' | 'down') => void;
+};
+/** One row: its fields, then its move buttons (when reorderable) and Remove. */
+export declare function RepeatableGroupRow({ index, count, children, names, reorderable, removable, disabled, onRemove, onMove, }: RepeatableGroupRowProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/repeatable-group/partials/repeatable-group-rows.d.ts

@@ -0,0 +1,21 @@
+import { Key, ReactNode } from 'react';
+import { RepeatableGroupProps } from '../types';
+import { RepeatableGroupRowProps } from './repeatable-group-row';
+export type RepeatableGroupRowsProps<TItem> = {
+    items: readonly TItem[];
+    getKey: (item: TItem, index: number) => Key;
+    renderRow: RepeatableGroupProps<TItem>['renderRow'];
+    names: RepeatableGroupRowProps['names'];
+    reorderable: boolean;
+    min?: number;
+    disabled?: boolean;
+    onRemove: (index: number) => void;
+    onMove: (index: number, direction: 'up' | 'down') => void;
+    emptyTitle?: ReactNode;
+    emptyDescription?: ReactNode;
+};
+/**
+ * The rows as a list (`ul` / `li`; the group around it carries the name),
+ * or, with no row, the empty state when it has a title.
+ */
+export declare function RepeatableGroupRows<TItem>({ items, getKey, renderRow, names, reorderable, min, disabled, onRemove, onMove, emptyTitle, emptyDescription, }: RepeatableGroupRowsProps<TItem>): import("react").JSX.Element | null;

package/dist/lib/components/ui/fields/repeatable-group/partials/repeatable-group-status.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The group's polite live region: always in the page (a region that mounts
+ * with its text is not read), visually hidden. A new `id` replaces the
+ * sentence's node, so the same sentence twice is read twice.
+ */
+export declare function RepeatableGroupStatus({ message, }: {
+    message: {
+        text: string;
+        id: number;
+    };
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/repeatable-group/repeatable-group-classes.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The group: a whole row of the form's grid (`.form-grid-layout`
+ * `[data-slot="form-fields"]`), and a container of its own, so its rows lay
+ * their fields out by the group's width, inside a form or standalone.
+ */
+export declare const repeatableGroupRootClass = "@container col-span-full flex w-full min-w-0 flex-col gap-3";
+/** The group's label, above its rows. */
+export declare const repeatableGroupLabelClass = "min-w-0 break-words font-medium text-sm";
+/** The rows, one under the other. */
+export declare const repeatableGroupListClass = "flex min-w-0 flex-col gap-3";
+/**
+ * A row: its fields, then its buttons. One column on a phone (the buttons
+ * under the fields); from `@xl` the buttons sit at the end of the row.
+ */
+export declare const repeatableGroupRowClass = "grid min-w-0 grid-cols-1 gap-2 rounded-md border p-3 @xl:grid-cols-[minmax(0,1fr)_auto] @xl:items-start";
+/**
+ * A row's fields: one column on a phone, then as many columns of at least
+ * 11rem as the row has room for.
+ */
+export declare const repeatableGroupFieldsClass = "grid min-w-0 grid-cols-1 items-start gap-2 @xl:grid-cols-[repeat(auto-fit,minmax(11rem,1fr))]";
+/** A row's move and remove buttons, level with its fields' inputs from `@xl`. */
+export declare const repeatableGroupActionsClass = "flex flex-wrap items-center justify-end gap-1 @xl:pt-6";
+/** Under the rows: the Add button and why it is disabled at the maximum. */
+export declare const repeatableGroupFooterClass = "flex flex-wrap items-center gap-2";
+/**
+ * The Add button at the maximum: `aria-disabled`, not `disabled`, so it
+ * keeps the focus and its reason (`aria-describedby`) can still be read.
+ */
+export declare const repeatableGroupAddClass = "aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+/** Why the Add button is disabled, beside it. */
+export declare const repeatableGroupHintClass = "text-muted-foreground text-sm";
+/** The empty state, compact enough for a form. */
+export declare const repeatableGroupEmptyClass = "min-h-0 gap-3 rounded-md border border-dashed p-6";

package/dist/lib/components/ui/fields/repeatable-group/repeatable-group-form-field.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { ArrayPath, Control, FieldArray, FieldArrayWithId, FieldValues } from 'react-hook-form';
+import { RepeatableGroupProps } from './types';
+/** What `renderRow` is given for each row of a form's array. */
+export type RepeatableGroupFormFieldRow<T extends FieldValues, N extends ArrayPath<T>> = {
+    field: FieldArrayWithId<T, N>;
+    /** 0-based: the row's fields are `${name}.${index}.<key>`. */
+    index: number;
+    /** 1-based, as a user reads it. */
+    position: number;
+    /** The row's own path, `${name}.${index}`. */
+    path: `${N}.${number}`;
+};
+export type RepeatableGroupFormFieldProps<T extends FieldValues, N extends ArrayPath<T>> = Omit<RepeatableGroupProps<FieldArrayWithId<T, N>>, 'items' | 'renderRow' | 'getKey' | 'onAdd' | 'onRemove' | 'onMove' | 'error'> & {
+    control: Control<T>;
+    name: N;
+    /** The value of a row the Add button appends. */
+    newRow: () => FieldArray<T, N>;
+    renderRow: (row: RepeatableGroupFormFieldRow<T, N>) => ReactNode;
+};
+/**
+ * A RepeatableGroup over react-hook-form's `useFieldArray`: Add appends
+ * `newRow()`, Remove and the move buttons edit the array, and an error about
+ * the array itself (`z.array().min()`, a `useFieldArray` rule) shows under
+ * the rows. Each row's fields are the form's own wrappers, named
+ * `${name}.${index}.<key>`, and show their own errors.
+ */
+export declare function RepeatableGroupFormField<T extends FieldValues, N extends ArrayPath<T>>({ control, name, newRow, renderRow, disabled, ...props }: RepeatableGroupFormFieldProps<T, N>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/repeatable-group/repeatable-group-names.d.ts

@@ -0,0 +1,16 @@
+import { RowAnnouncement } from '@nxgt/material-core/repeatable-group';
+import { useMaterialTranslation } from '../../../../i18n/use-material-translation';
+type Translate = ReturnType<typeof useMaterialTranslation>['t'];
+/** Why Add is disabled at `max`. */
+export declare const maxReached: (t: Translate, max?: number) => string;
+/** The group's button names, after the row's `label` and 1-based position. */
+export declare function rowNames(t: Translate, label: string, max?: number): {
+    add: string;
+    remove: (position: number) => string;
+    moveUp: (position: number) => string;
+    moveDown: (position: number) => string;
+    maxReached: string;
+};
+/** What the live region says about a change. */
+export declare function announcement(t: Translate, label: string, said: RowAnnouncement): string;
+export {};

package/dist/lib/components/ui/fields/repeatable-group/repeatable-group.d.ts

@@ -0,0 +1,12 @@
+import { RepeatableGroupProps } from './types';
+export type { RepeatableGroupProps, RepeatableGroupRowContext, } from './types';
+/**
+ * Rows of fields a user adds, removes and, with `reorderable`, moves: a list
+ * (`ul`/`li`) of rows, each from `renderRow`, a Remove button per row named
+ * after it ("Remove period 2"), and an Add button. An added row's first field
+ * takes the focus, a removed row hands it to its neighbour (or to Add), a
+ * moved row keeps it on its move button, and each change is announced
+ * politely. For react-hook-form, `RepeatableGroupFormField` wires it to
+ * `useFieldArray`.
+ */
+export declare function RepeatableGroup<TItem>({ items, renderRow, getKey, label, rowLabel, addLabel, onAdd, onRemove, onMove, reorderable, min, max, disabled, error, emptyTitle, emptyDescription, className, ref, ...props }: RepeatableGroupProps<TItem>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/repeatable-group/types.d.ts

@@ -0,0 +1,45 @@
+import { ComponentProps, Key, ReactNode } from 'react';
+/** What `renderRow` is given for each row. */
+export type RepeatableGroupRowContext<TItem> = {
+    item: TItem;
+    /** 0-based, for the row's field names (`periods.${index}.name`). */
+    index: number;
+    /** 1-based, as a user reads it ("Period 2"). */
+    position: number;
+};
+export type RepeatableGroupProps<TItem> = Omit<ComponentProps<'div'>, 'children' | 'onChange'> & {
+    /** The rows' values, one row each. */
+    items: readonly TItem[];
+    /** Renders one row's fields. */
+    renderRow: (row: RepeatableGroupRowContext<TItem>) => ReactNode;
+    /**
+     * A stable key per row; by default the item's `id` (what react-hook-form's
+     * `useFieldArray` gives each field), else its index.
+     */
+    getKey?: (item: TItem, index: number) => Key;
+    /** The group's label, above the rows; it names the group and the list. */
+    label?: ReactNode;
+    /**
+     * What one row is, lower case: it names the row's buttons ("Remove
+     * period 2") and the announcements. Default "row", translated.
+     */
+    rowLabel?: string;
+    /** The Add button's text. Default "Add {rowLabel}", translated. */
+    addLabel?: string;
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    /** Called by the move buttons, which `reorderable` shows. */
+    onMove?: (from: number, to: number) => void;
+    /** Move up and move down buttons on each row. */
+    reorderable?: boolean;
+    /** No Remove at this many rows. */
+    min?: number;
+    /** The Add button is disabled at this many rows, and says why. */
+    max?: number;
+    disabled?: boolean;
+    /** An error about the whole group (`arrayErrorMessage`), under the rows. */
+    error?: ReactNode;
+    /** With no row: an EmptyState with this title (and description). */
+    emptyTitle?: ReactNode;
+    emptyDescription?: ReactNode;
+};

package/dist/lib/components/ui/fields/repeatable-group/use-repeatable-group.d.ts

@@ -0,0 +1,32 @@
+import { RowMoveDirection } from '@nxgt/material-core/repeatable-group';
+type Options = {
+    items: readonly unknown[];
+    rowLabel?: string;
+    max?: number;
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    onMove?: (from: number, to: number) => void;
+};
+/**
+ * A RepeatableGroup's behaviour: the buttons' names, the focus after a row
+ * is added, removed or moved (the rules are `@nxgt/material-core`'s, shared
+ * with the Vue group), and what the polite live region says.
+ */
+export declare function useRepeatableGroup(options: Options): {
+    setRoot: (node: Element | null) => void;
+    message: {
+        text: string;
+        id: number;
+    };
+    names: {
+        add: string;
+        remove: (position: number) => string;
+        moveUp: (position: number) => string;
+        moveDown: (position: number) => string;
+        maxReached: string;
+    };
+    add: () => void;
+    remove: (index: number) => void;
+    move: (index: number, direction: RowMoveDirection) => void;
+};
+export {};

package/dist/lib/components/ui/fields/search-field/search-field.d.ts

@@ -7,5 +7,11 @@ export type SearchFieldProps = Omit<InputProps, 'type'> & {
     loading?: boolean;
     debounceMs?: number;
     onValueChange?: (value: string) => void;
+    /**
+     * A hint for the key that focuses the field, for example `"/"`: shown as a
+     * `Kbd` while the field is empty and set as `aria-keyshortcuts`. It binds no
+     * key; the page owns the listener.
+     */
+    shortcut?: string;
 };
-export declare function SearchField({ id, value: valueProp, defaultValue, onChange, onValueChange, debounceMs, loading, placeholder, label, helperText, error, disabled, required, name, className, onKeyDown, ...props }: SearchFieldProps): import("react").JSX.Element;
+export declare function SearchField({ id, value: valueProp, defaultValue, onChange, onValueChange, debounceMs, loading, placeholder, label, helperText, error, disabled, required, name, className, onKeyDown, shortcut, ...props }: SearchFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/overlays/command/command-item.d.ts

@@ -0,0 +1,10 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import { ComponentProps } from 'react';
+declare function CommandItem({ className, checked, children, ...props }: ComponentProps<typeof CommandPrimitive.Item> & {
+    /**
+     * Sets `aria-checked` and shows a checkbox indicator. cmdk's
+     * `aria-selected` stays the highlighted item, not the checked one.
+     */
+    checked?: boolean;
+}): import("react").JSX.Element;
+export { CommandItem };

package/dist/lib/components/ui/overlays/command/command.d.ts

@@ -1,16 +1,19 @@
 import { Command as CommandPrimitive } from 'cmdk';
 import { ComponentProps } from 'react';
 import { Dialog } from '../dialog/dialog';
+import { CommandItem } from './command-item';
 declare function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>): import("react").JSX.Element;
 declare function CommandDialog({ title, description, children, ...props }: ComponentProps<typeof Dialog> & {
     title?: string;
     description?: string;
 }): import("react").JSX.Element;
 declare function CommandInput({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>): import("react").JSX.Element;
-declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): import("react").JSX.Element;
+declare function CommandList({ className, multiselectable, ...props }: ComponentProps<typeof CommandPrimitive.List> & {
+    /** Sets `aria-multiselectable`: the items carry a `checked` state. */
+    multiselectable?: boolean;
+}): import("react").JSX.Element;
 declare function CommandEmpty({ ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react").JSX.Element;
 declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react").JSX.Element;
 declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react").JSX.Element;
-declare function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>): import("react").JSX.Element;
 declare function CommandShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/lib/components/ui/overlays/dialog/dialog-outside.d.ts

@@ -1,8 +1,10 @@
 import { Dialog as DialogPrimitive } from 'radix-ui';
 import { ComponentProps } from 'react';
 /**
- * A combobox inside a dialog portals its list outside the dialog's content;
- * a pointer or focus landing there is not "outside" and must not close it.
+ * A `Combobox` or `ComboboxField` inside a dialog portals its list to the
+ * body, outside the dialog's content; a pointer or focus landing there is
+ * not "outside" and must not close it. The Autocomplete's list is inside the
+ * content in a dialog (in its flow since #577), so it never gets here.
  */
 export declare function keepComboboxOverlay(event: Pick<Event, 'target' | 'preventDefault'>): void;
 type Outside = Pick<ComponentProps<typeof DialogPrimitive.Content>, 'onPointerDownOutside' | 'onFocusOutside' | 'onInteractOutside'>;

package/dist/lib/components/ui/overlays/dialog/dialog-parts.d.ts

@@ -0,0 +1,7 @@
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): import("react").JSX.Element;
+declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): import("react").JSX.Element;
+export { DialogDescription, DialogFooter, DialogHeader, DialogTitle };

package/dist/lib/components/ui/overlays/dialog/dialog.d.ts

@@ -7,8 +7,5 @@ declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitiv
 declare function DialogClose({ className, color, children, type, variant, ...props }: ComponentProps<typeof DialogPrimitive.Close> & Partial<Pick<IconButtonProps, 'variant' | 'color'>>): import("react").JSX.Element;
 declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): import("react").JSX.Element;
 declare function DialogContent({ className, children, onInteractOutside, onPointerDownOutside, onFocusOutside, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ref, ...props }: ComponentProps<typeof DialogPrimitive.Content>): import("react").JSX.Element;
-declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): import("react").JSX.Element;
-declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): import("react").JSX.Element;
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+export { DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from './dialog-parts';
+export { Dialog, DialogClose, DialogContent, DialogOverlay, DialogPortal, DialogTrigger, };

package/dist/lib/components/ui/overlays/dialog/in-dialog.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Set by `DialogContent`, `DialogScrollContent`, `AlertDialogContent` and
+ * `SheetContent` around their primitive: a field inside opens its list in
+ * the layer's flow, pushing what follows (the footer) down instead of
+ * floating over the title or the Save button. `PopoverContent`,
+ * `HoverCardContent` and the menus' contents set it back to `false`: a
+ * floating layer opened from a dialog keeps a floating list. Always around
+ * the primitive, never between it and its children, which would break
+ * `asChild`. Not exported: the layers set it, the fields read it.
+ */
+export declare const InDialogContext: import('react').Context<boolean>;
+/** Whether this component renders inside a dialog's content. */
+export declare function useInDialog(): boolean;

package/dist/lib/components/ui/overlays/menubar/menubar-items.d.ts

@@ -0,0 +1,18 @@
+import { Menubar as MenubarPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+declare function MenubarItem({ className, inset, variant, ...props }: ComponentProps<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+    /**
+     * `'error'` matches DropdownMenuItem and ContextMenuItem.
+     * `'destructive'` is @deprecated — kept as an alias of `'error'`.
+     */
+    variant?: 'default' | 'error' | 'destructive';
+}): import("react").JSX.Element;
+declare function MenubarCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof MenubarPrimitive.CheckboxItem>): import("react").JSX.Element;
+declare function MenubarRadioItem({ className, children, ...props }: ComponentProps<typeof MenubarPrimitive.RadioItem>): import("react").JSX.Element;
+declare function MenubarLabel({ className, inset, ...props }: ComponentProps<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+}): import("react").JSX.Element;
+declare function MenubarSeparator({ className, ...props }: ComponentProps<typeof MenubarPrimitive.Separator>): import("react").JSX.Element;
+declare function MenubarShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export { MenubarCheckboxItem, MenubarItem, MenubarLabel, MenubarRadioItem, MenubarSeparator, MenubarShortcut, };

package/dist/lib/components/ui/overlays/menubar/menubar-sub.d.ts

@@ -0,0 +1,8 @@
+import { Menubar as MenubarPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+declare function MenubarSub({ ...props }: ComponentProps<typeof MenubarPrimitive.Sub>): import("react").JSX.Element;
+declare function MenubarSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react").JSX.Element;
+declare function MenubarSubContent({ className, ...props }: ComponentProps<typeof MenubarPrimitive.SubContent>): import("react").JSX.Element;
+export { MenubarSub, MenubarSubContent, MenubarSubTrigger };

package/dist/lib/components/ui/overlays/menubar/menubar.d.ts

@@ -7,24 +7,6 @@ declare function MenubarPortal({ ...props }: ComponentProps<typeof MenubarPrimit
 declare function MenubarRadioGroup({ ...props }: ComponentProps<typeof MenubarPrimitive.RadioGroup>): import("react").JSX.Element;
 declare function MenubarTrigger({ className, ...props }: ComponentProps<typeof MenubarPrimitive.Trigger>): import("react").JSX.Element;
 declare function MenubarContent({ className, align, alignOffset, sideOffset, ...props }: ComponentProps<typeof MenubarPrimitive.Content>): import("react").JSX.Element;
-declare function MenubarItem({ className, inset, variant, ...props }: ComponentProps<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-    /**
-     * `'error'` matches DropdownMenuItem and ContextMenuItem.
-     * `'destructive'` is @deprecated — kept as an alias of `'error'`.
-     */
-    variant?: 'default' | 'error' | 'destructive';
-}): import("react").JSX.Element;
-declare function MenubarCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof MenubarPrimitive.CheckboxItem>): import("react").JSX.Element;
-declare function MenubarRadioItem({ className, children, ...props }: ComponentProps<typeof MenubarPrimitive.RadioItem>): import("react").JSX.Element;
-declare function MenubarLabel({ className, inset, ...props }: ComponentProps<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
-}): import("react").JSX.Element;
-declare function MenubarSeparator({ className, ...props }: ComponentProps<typeof MenubarPrimitive.Separator>): import("react").JSX.Element;
-declare function MenubarShortcut({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
-declare function MenubarSub({ ...props }: ComponentProps<typeof MenubarPrimitive.Sub>): import("react").JSX.Element;
-declare function MenubarSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-}): import("react").JSX.Element;
-declare function MenubarSubContent({ className, ...props }: ComponentProps<typeof MenubarPrimitive.SubContent>): import("react").JSX.Element;
-export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, };
+export { MenubarCheckboxItem, MenubarItem, MenubarLabel, MenubarRadioItem, MenubarSeparator, MenubarShortcut, } from './menubar-items';
+export { MenubarSub, MenubarSubContent, MenubarSubTrigger, } from './menubar-sub';
+export { Menubar, MenubarContent, MenubarGroup, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarTrigger, };

package/dist/lib/components/ui/overlays/sheet/sheet-parts.d.ts

@@ -0,0 +1,7 @@
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import { ComponentProps } from 'react';
+declare function SheetHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function SheetFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+declare function SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>): import("react").JSX.Element;
+declare function SheetDescription({ className, ...props }: ComponentProps<typeof SheetPrimitive.Description>): import("react").JSX.Element;
+export { SheetDescription, SheetFooter, SheetHeader, SheetTitle };

package/dist/lib/components/ui/overlays/sheet/sheet.d.ts

@@ -8,8 +8,5 @@ declare function SheetContent({ className, children, side, withCloseButton, onOp
     side?: 'top' | 'right' | 'bottom' | 'left';
     withCloseButton?: boolean;
 }): import("react").JSX.Element;
-declare function SheetHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function SheetFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
-declare function SheetTitle({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>): import("react").JSX.Element;
-declare function SheetDescription({ className, ...props }: ComponentProps<typeof SheetPrimitive.Description>): import("react").JSX.Element;
-export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, };
+export { SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from './sheet-parts';
+export { Sheet, SheetClose, SheetContent, SheetTrigger };

package/dist/lib/components/ui/primitives/typography/typography.d.ts

@@ -2,6 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
 export declare const typographyVariants: (props?: ({
     variant?: "caption" | "normal" | "huge-larger" | "huge-large" | "huge-medium" | "huge-small" | "headline-larger" | "headline-large" | "headline-medium" | "headline-small" | "title-large" | "title-medium" | "title-small" | "body-medium" | "body-small" | null | undefined;
+    tone?: "error" | "default" | "primary" | "muted" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type TypographyProps = ComponentProps<'p'> & VariantProps<typeof typographyVariants> & {
     /** The element to render, `div` by default. Intrinsic tags only. */
@@ -9,4 +10,4 @@ export type TypographyProps = ComponentProps<'p'> & VariantProps<typeof typograp
     /** Merge the typography classes onto the single child instead of rendering an element. */
     asChild?: boolean;
 };
-export declare function Typography({ className, variant, as, asChild, ...props }: TypographyProps): import("react").JSX.Element;
+export declare function Typography({ className, variant, tone, as, asChild, ...props }: TypographyProps): import("react").JSX.Element;