@nxgt/material 3.36.0 → 3.38.0

package/dist/{empty-state-DMr94lsF.js → empty-state-DFWq2CWB.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./use-material-translation-BK2YYCY3.js";
+import { t } from "./use-material-translation-CiYhVc39.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-A4mI4vc1.js";
+import { r as e } from "./i18n-provider-C0RBM8rH.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-DXYCeegh.js";
+import { n as l, r as u, t as d } from "./use-heading-spy-BgG7Q47k.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-A4mI4vc1.js → i18n-provider-C0RBM8rH.js}

@@ -1,4 +1,4 @@
-import { i as e, r as t, t as n } from "./stored-language-CfQGHLq9.js";
+import { i as e, r as t, t as n } from "./stored-language-D8aemZhx.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-CfQGHLq9.js";
-import { n as a, r as o, t as s } from "./i18n-provider-A4mI4vc1.js";
-import { i as c, n as l, o as u, r as d, t as f } from "./translator-BbOZntEF.js";
+import { a as t, i as n, n as r, r as i } from "./stored-language-D8aemZhx.js";
+import { n as a, r as o, t as s } from "./i18n-provider-C0RBM8rH.js";
+import { i as c, n as l, o as u, r as d, t as f } from "./translator-Bq8UHmvu.js";
 import { o as p, t as m } from "./merge-BCZE6HGq.js";
-import { t as h } from "./translate-material-xDh10aWZ.js";
-import { t as g } from "./use-material-translation-BK2YYCY3.js";
+import { t as h } from "./translate-material-B84ufMSF.js";
+import { t as g } from "./use-material-translation-CiYhVc39.js";
 import { useCallback as _ } from "react";
 //#region lib/i18n/merge-resources.ts
 function v(e, t, n = "") {

package/dist/{icon-badge-DXEBeS1y.js → icon-badge-XBoBIt_R.js}

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

package/dist/lib/components/ui/actions/button/button.d.ts

@@ -41,5 +41,13 @@ export type ButtonProps = ComponentProps<'button'> & ButtonVariants & {
     tooltip?: string;
 };
 export declare function Button({ tooltip, ...props }: ButtonProps): import("react").JSX.Element;
+/** One `variant` of `Button`: `filled`, `tonal`, `outlined`, `ghost` or `link`. */
+export type ButtonVariant = NonNullable<ButtonVariants['variant']>;
+/**
+ * The variant of the Cancel / Close button a component draws in its footer:
+ * `tonal`, under a filled Confirm. The components that draw one take a
+ * `cancelVariant` prop to restore another look (`'outlined'`, `'ghost'`).
+ */
+export declare const DEFAULT_CANCEL_VARIANT: ButtonVariant;
 export type { ButtonVariants };
 export { buttonVariants };

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

@@ -0,0 +1,12 @@
+/**
+ * Where a phone's list bar goes when the page that hosts the list has a row
+ * of its own for it (`ServerTable`'s two-row header, #1719): the start group
+ * ("Select all", or the count and "Clear selection") and the sort, each an
+ * element the host renders. Without it, or from 768px, the list bar stays
+ * above the list.
+ */
+export type DataTableListSlots = {
+    start: HTMLElement;
+    sort: HTMLElement;
+};
+export declare const DataTableListSlotsContext: import('react').Context<DataTableListSlots | null>;

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

@@ -1,4 +1,5 @@
 import { Row, RowData } from '@tanstack/react-table';
+import { ButtonVariant } from '../../actions/button/button.js';
 import { DataTableFeatures } from './features.js';
 export declare function useColumnHelpers<T extends RowData>(): {
     columnHelper: import('@tanstack/table-core').ColumnHelper<{
@@ -65,7 +66,11 @@ export type DeleteRowsHandler<T extends RowData> = (rows: Row<DataTableFeatures,
  * {confirmDialog}
  * ```
  */
-export declare function useDeleteRowsHandler<T extends RowData>(onDelete?: (rows: T[]) => void): {
+export declare function useDeleteRowsHandler<T extends RowData>(onDelete?: (rows: T[]) => void, 
+/** `cancelVariant`: the Cancel button's variant, default `'tonal'`. */
+options?: {
+    cancelVariant?: ButtonVariant;
+}): {
     handleDelete: DeleteRowsHandler<T>;
     confirmDialog: import("react").JSX.Element;
 };

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

@@ -1,2 +1,3 @@
+export { type DataTableListSlots, DataTableListSlotsContext, } from './data-table-list-slots.js';
 export { DataTableLink } from './partials/data-table-link.js';
 export { DataTablePager } from './partials/data-table-pager.js';

package/dist/lib/components/ui/collections/data-table/partials/layouts/data-table-list-bar.d.ts

@@ -1,4 +1,5 @@
 import { RowData } from '@tanstack/react-table';
+import { RefObject } from 'react';
 import { DataTableTable } from '../../types.js';
 /** Whether the table has a `select` column ("Select all on this page"). */
 export declare const isSelectable: <TData extends RowData>(table: DataTableTable<TData>) => boolean;
@@ -14,7 +15,16 @@ export declare const hasListBar: <TData extends RowData>(table: DataTableTable<T
  * named and with a tooltip) and the sort, on one row. It keeps its height
  * whatever the selection, so nothing moves; the bulk bar (`actions`) stays in
  * the toolbar above, as for the table.
+ *
+ * Below 768px, when the host gives the list a row of its own
+ * (`DataTableListSlotsContext`: `ServerTable`'s second header row, beside
+ * "Filters"), the bar is not drawn above the list: its start group goes to
+ * the host's start slot, with a short visible "Select all" label that the
+ * count replaces in place while rows are selected, and the sort to its sort
+ * slot (#1719). The names and the behaviour are the same.
  */
-export declare function DataTableListBar<TData extends RowData>({ table, }: {
+export declare function DataTableListBar<TData extends RowData>({ table, rootRef, }: {
     table: DataTableTable<TData>;
+    /** The list's root, where the focus goes once "Clear selection" is gone. */
+    rootRef?: RefObject<HTMLElement | null>;
 }): import("react").JSX.Element;

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

@@ -14,12 +14,20 @@ export declare const SELECT_CHECKBOX_CLASS = "relative before:absolute before:to
  * cell's start, with 8px after the label, which keeps the next column's
  * control clear and the rows' boxes 44px apart). */
 export declare const SELECT_CHECKBOX_LABEL_CLASS = "ms-2 me-3 flex w-fit items-center justify-center pointer-coarse:size-11 pointer-coarse:-ms-1 pointer-coarse:me-2 pointer-coarse:-my-2";
+/** The same label with its text beside the box (`SelectAllCheckbox`'s
+ * `visibleLabel`): on a coarse pointer it is as tall and at least as wide as
+ * the 44px box, the text inside it, so a tap on the words toggles the box. */
+export declare const SELECT_CHECKBOX_LABELLED_CLASS = "ms-2 me-3 flex w-fit items-center gap-2 pointer-coarse:min-h-11 pointer-coarse:min-w-11 pointer-coarse:-ms-1 pointer-coarse:me-2 pointer-coarse:-my-2 pointer-coarse:ps-3.5 pointer-coarse:pe-2";
 /** The `select` column's header: disabled while the table loads, when the
  * rows it would select are inert, and when no row on the page can be
  * selected (`enableRowSelection`). Its state counts only selectable rows. */
-export declare function SelectAllCheckbox<T extends RowData>({ table, label, }: {
+export declare function SelectAllCheckbox<T extends RowData>({ table, label, visibleLabel, }: {
     table: Table<DataTableFeatures, T>;
+    /** The box's name (`aria-label`). */
     label: string;
+    /** A short text beside the box, inside its `<label>` ("Select all"); the
+     * name stays `label`, which contains it. Without it the box has none. */
+    visibleLabel?: string;
 }): import("react").JSX.Element;
 /** A row's `select` checkbox. A row that cannot be selected
  * (`enableRowSelection`) has one of three boxes:

package/dist/lib/components/ui/collections/filter/bar/filter-bar-view.d.ts

@@ -7,4 +7,4 @@ import { FilterViewProps } from '../query/types.js';
  * CSS from the first paint). The live region tells the count; `/` and `F`
  * are its shortcuts (`F` opens the sheet on a phone).
  */
-export declare function FilterBarView({ label, searchLabel, searchPlaceholder, className, detachedChips, sheetTrigger, bandDensity, }: FilterViewProps): import("react").JSX.Element;
+export declare function FilterBarView({ label, searchLabel, searchPlaceholder, className, detachedChips, sheetTrigger, bandDensity, cancelVariant, }: FilterViewProps): import("react").JSX.Element;

package/dist/lib/components/ui/collections/filter/facets/filter-facets.d.ts

@@ -6,4 +6,4 @@ import { FilterViewProps } from '../query/types.js';
  * (N)", which opens the same sheet with the same facets (mounted there
  * only; the server renders the panel, which a phone unmounts once hydrated). One live region, the bar's.
  */
-export declare function FilterFacets({ label, searchLabel, searchPlaceholder, className, }: FilterViewProps): import("react").JSX.Element;
+export declare function FilterFacets({ label, searchLabel, searchPlaceholder, className, cancelVariant, }: FilterViewProps): import("react").JSX.Element;

package/dist/lib/components/ui/collections/filter/facets/partials/filter-facets-footer.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariant } from '../../../../actions/button/button.js';
 /**
  * `apply="staged"`: Reset drops the panel's edits, Apply hands them to the
  * page at once; the focus stays on the button, and the live region tells
@@ -5,4 +6,6 @@
  * focusable, and dimmed) while nothing changed; once something did,
  * "Changes not applied" starts their row and describes Apply.
  */
-export declare function FilterFacetsFooter(): import("react").JSX.Element;
+export declare function FilterFacetsFooter({ cancelVariant, }: {
+    cancelVariant?: ButtonVariant;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/collections/filter/facets/partials/filter-facets-panel.d.ts

@@ -1,4 +1,5 @@
 import { FilterModelField } from '@nxgt/material-core/filter';
+import { ButtonVariant } from '../../../../actions/button/button.js';
 /**
  * The wide panel, from 768px: its title and "Clear all", the page's locked
  * filters, a removable chip for each condition on a field it has no section
@@ -6,6 +7,7 @@ import { FilterModelField } from '@nxgt/material-core/filter';
  * section per field (the sheet's, in its order), and with `apply="staged"`
  * Reset and Apply.
  */
-export declare function FilterFacetsPanel({ sections, }: {
+export declare function FilterFacetsPanel({ sections, cancelVariant, }: {
     sections: readonly FilterModelField[];
+    cancelVariant?: ButtonVariant;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/collections/filter/filter-presets.d.ts

@@ -5,4 +5,4 @@ import { FilterPresetsProps } from './types.js';
  * @deprecated Saved views are planned as `ViewTabs` over the filter bar (see
  * the roadmap). Will be removed in a future major.
  */
-export declare function FilterPresets({ presets, currentPresetId, onLoad, onSave, onDelete, onSetDefault, maxPresets, disabled, className, }: FilterPresetsProps): import("react").JSX.Element;
+export declare function FilterPresets({ presets, currentPresetId, onLoad, onSave, onDelete, onSetDefault, maxPresets, disabled, className, cancelVariant, }: FilterPresetsProps): import("react").JSX.Element;

package/dist/lib/components/ui/collections/filter/internal.d.ts

@@ -15,3 +15,4 @@ export { FILTER_BAND_COMPACT_CLASS, FILTER_BAND_SURFACE_COMPACT_CLASS, } from '.
 export { FilterFormError } from './sections/filter-form-error.js';
 export { FILTER_GAP_CLASS } from './sections/filter-sections-classes.js';
 export { FilterSheetScope } from './sections/sheet/filter-sheet-scope.js';
+export { FilterSheetTrigger } from './sections/sheet/filter-sheet-trigger.js';

package/dist/lib/components/ui/collections/filter/query/types.d.ts

@@ -1,5 +1,6 @@
 import { FilterApply, FilterCountsOption, FilterDefaults, FilterFieldErrors, FilterLockedCondition, FilterModel, FilterPreviewCount, FilterQuery, FilterSearchApplyMode, FilterShortcutsOption } from '@nxgt/material-core/filter';
 import { ReactNode } from 'react';
+import { ButtonVariant } from '../../../actions/button/button.js';
 import { FilterBarFieldProps } from '../editors/custom-types.js';
 /** The bar's spacing: `compact` draws small chips; every target stays 24px or more. */
 export type FilterDensity = 'comfortable' | 'compact';
@@ -24,6 +25,12 @@ export type FilterViewProps = {
     sheetTrigger?: boolean;
     /** `'compact'`: 6px back under the bar; see `FilterQueryProps`. */
     bandDensity?: 'comfortable' | 'compact';
+    /**
+     * The variant of the secondary button in the sheet's and the staged
+     * panel's footer ("Clear all", "Reset"). Default `'tonal'`; `'outlined'`
+     * restores the earlier look.
+     */
+    cancelVariant?: ButtonVariant;
 };
 /**
  * When the search text reaches the query: `'live'` (the default) as it is
@@ -141,6 +148,12 @@ export type FilterQueryProps = {
      * `variant="bar"` only.
      */
     bandDensity?: 'comfortable' | 'compact';
+    /**
+     * The variant of the secondary button in the sheet's and the staged
+     * panel's footer ("Clear all", "Reset"). Default `'tonal'`; `'outlined'`
+     * restores the earlier look.
+     */
+    cancelVariant?: ButtonVariant;
     /**
      * The quick filters' fields, as dashed "+ Field" pills (a switch or a
      * checkbox toggles); default: the fields declared `quick: true`.

package/dist/lib/components/ui/collections/filter/sections/sheet/filter-sheet-footer.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariant } from '../../../../actions/button/button.js';
 import { FilterSheetModel } from './use-filter-sheet.js';
 /**
  * The sheet's footer: "Clear all" (the conditions only, the locked ones and
@@ -5,6 +6,7 @@ import { FilterSheetModel } from './use-filter-sheet.js';
  * "Show N results", busy while the count is on its way, the focus left where
  * it is.
  */
-export declare function FilterSheetFooter({ sheet }: {
+export declare function FilterSheetFooter({ sheet, cancelVariant, }: {
     sheet: FilterSheetModel;
+    cancelVariant?: ButtonVariant;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/collections/filter/sections/sheet/filter-sheet.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariant } from '../../../../actions/button/button.js';
 import { FilterSheetModel } from './use-filter-sheet.js';
 /**
  * The phone sheet, a bottom Drawer named "Filters", mounted below 768px
@@ -5,6 +6,7 @@ import { FilterSheetModel } from './use-filter-sheet.js';
  * on its first section (or the field asked); Close, Escape, a swipe, a click
  * outside or Back dismiss it, and the focus returns to the "Filters (N)" that opened it.
  */
-export declare function FilterSheet({ sheet }: {
+export declare function FilterSheet({ sheet, cancelVariant, }: {
     sheet: FilterSheetModel;
+    cancelVariant?: ButtonVariant;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/collections/filter/types-props.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ButtonVariant } from '../../actions/button/button.js';
 import { FilterPersistenceConfig, FilterPreset, FilterPresetConfig } from './types-persistence.js';
 import { FilterSchema } from './types-schema.js';
 import { FilterValues } from './types-values.js';
@@ -61,4 +62,6 @@ export type FilterPresetsProps = {
     maxPresets?: number;
     disabled?: boolean;
     className?: string;
+    /** The save dialog's Cancel button variant. Default `'tonal'`. */
+    cancelVariant?: ButtonVariant;
 };

package/dist/lib/components/ui/collections/server-table/partials/server-table-band-classes.d.ts

@@ -12,3 +12,13 @@ export { FILTER_BAND_COMPACT_CLASS as SERVER_TABLE_BAND_COMPACT_CLASS, FILTER_BA
  * title that has a row of its own. An action wider than that wraps under the
  * search, as the stacked default puts it above. */
 export declare const SERVER_TABLE_SEARCH_INLINE_CLASS = "max-md:order-none max-md:basis-[calc(100%-3.5rem)]";
+/** Below 768px with a list in cards or tiles (#1719): the band's second row,
+ * after the search's (both are `order-last`, the DOM order breaks the tie):
+ * the list bar's start group (the room left), then the sort, "Filters (N)"
+ * and the page's actions. */
+export declare const SERVER_TABLE_PHONE_ROW_CLASS = "order-last flex min-w-0 basis-full items-center gap-1 md:hidden";
+/** The row's start slot: "Select all", or the count and "Clear selection". */
+export declare const SERVER_TABLE_PHONE_ROW_START_CLASS = "min-w-0 flex-1";
+/** The row's end: the sort slot (`contents`, its child is the item), then
+ * "Filters (N)" and the actions. */
+export declare const SERVER_TABLE_PHONE_ROW_END_CLASS = "flex shrink-0 items-center gap-1";

package/dist/lib/components/ui/collections/server-table/partials/server-table-band.d.ts

@@ -9,19 +9,30 @@ type BandProps = {
     search?: ReactNode;
     /** `'compact'`: half the room under the band (the surface's top is in the root). */
     density?: 'comfortable' | 'compact';
+    /** Below 768px with a list in cards or tiles: the band's second row (the
+     * `actions` go into it, after the list's sort and "Filters (N)"). */
+    phoneRow?: {
+        trigger: boolean;
+        setStart: (element: HTMLElement | null) => void;
+        setSort: (element: HTMLElement | null) => void;
+        /** The selection bar's bulk actions, while rows are selected. */
+        bulk: ReactNode;
+    };
 };
 /** The top band: the title, then the search landmark, then the page's actions. A string title is an `<h2>`. */
-export declare function ServerTableBand({ title, description, actions, search, density, }: BandProps): import("react").JSX.Element | null;
+export declare function ServerTableBand({ title, description, actions, search, density, phoneRow, }: BandProps): import("react").JSX.Element | null;
 /**
  * One `search` landmark: the bar (the search, the quick filters, "Add
  * filter", and "Filters (N)" on a phone), then from 768px the active filters
  * and "Clear all" in a row under it. While the empty page lists the user's
  * filters itself, the row keeps the locked ones only.
  */
-export declare function ServerTableSearch({ filter, emptyShown, inline, }: {
+export declare function ServerTableSearch({ filter, emptyShown, inline, phoneRow, }: {
     filter: ServerTableFilter;
     emptyShown: boolean;
     /** `bandActions: 'inline'`: the landmark shares a phone's row with the actions. */
     inline?: boolean;
+    /** The band has a second row on a phone: "Filters (N)" is in it. */
+    phoneRow?: boolean;
 }): import("react").JSX.Element;
 export {};

package/dist/lib/components/ui/collections/server-table/partials/server-table-bulk-buttons.d.ts

@@ -9,7 +9,7 @@ import { ServerTableSelection } from '../types.js';
  * rows it applies to only, tested on the rows kept for the selection (see
  * `syncSelectedRows`), so the counts hold across pages.
  */
-export declare function ServerTableBulkButtons<T extends RowData>({ actions, ids, selectedRows, selection, onFocusLost, }: {
+export declare function ServerTableBulkButtons<T extends RowData>({ actions, ids, selectedRows, selection, onFocusLost, phone, }: {
     actions: readonly ServerTableBulkAction<T>[];
     /** The selected ids, of every page. */
     ids: string[];
@@ -19,4 +19,8 @@ export declare function ServerTableBulkButtons<T extends RowData>({ actions, ids
     /** Where the focus goes when the focused button disappears and no other
      * bulk button is left (the table's select-all, else the table). */
     onFocusLost?: () => void;
-}): (import("react").JSX.Element | null)[];
+    /** The phone's selection bar: the first three actions keep their icon,
+     * label and count (and wrap onto a second line when they do not fit); the
+     * others go into a "More" menu, each with its count. */
+    phone?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/collections/server-table/partials/server-table-bulk.d.ts

@@ -0,0 +1,10 @@
+import { RowData } from '@tanstack/react-table';
+import { ServerTableProps } from '../types.js';
+import { useServerTable } from '../use-server-table.js';
+/** What `bulkActions` renders for the selected rows: the function's node, or
+ * the declarative list's buttons (on the phone's bar: three buttons, the rest in a More menu). In the table's toolbar, or in the phone's selection bar. */
+export declare function ServerTableBulk<T extends RowData>({ props, state, phone, }: {
+    props: ServerTableProps<T>;
+    state: ReturnType<typeof useServerTable<T>>;
+    phone?: boolean;
+}): 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/collections/server-table/partials/server-table-phone-row.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+/**
+ * The band's second row on a phone (#1719), below the search: the list bar's
+ * start group and sort come into the two slots (`DataTableListSlots`), then
+ * "Filters (N)" (the bar's own trigger is not drawn) and the page's
+ * `actions`, whose icon buttons lose their label to its name and tooltip.
+ */
+export declare function ServerTablePhoneRow({ actions, trigger, setStart, setSort, bulk, }: {
+    actions: ReactNode;
+    /** The Filters trigger: not with `filter.sheetTrigger: false`, where the app places its own. */
+    trigger: boolean;
+    setStart: (element: HTMLElement | null) => void;
+    setSort: (element: HTMLElement | null) => void;
+    /** While rows are selected: the bulk actions, which take the place of the
+     * sort, "Filters (N)" and the actions (hidden, not unmounted). */
+    bulk: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirm-dialog/confirm-dialog.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariant } from '../../actions/button/button.js';
 export interface ConfirmDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -5,6 +6,11 @@ export interface ConfirmDialogProps {
     description: string;
     confirmLabel?: string;
     cancelLabel?: string;
+    /**
+     * The variant of the Cancel button. Default `'tonal'`; `'outlined'` or
+     * `'ghost'` restores the earlier look.
+     */
+    cancelVariant?: ButtonVariant;
     /**
      * Runs when the user confirms. The dialog stays open, with its buttons
      * disabled, until the returned promise settles. It closes on success; on
@@ -23,4 +29,4 @@ export interface ConfirmDialogProps {
      */
     lockOnRefusal?: boolean;
 }
-export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, onConfirm, variant, loading, confirmDisabled, lockOnRefusal, }: ConfirmDialogProps): import("react").JSX.Element;
+export declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, cancelVariant, onConfirm, variant, loading, confirmDisabled, lockOnRefusal, }: ConfirmDialogProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/confirmation-dialog/confirmation-dialog.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { DefaultValues, UseFormReturn } from 'react-hook-form';
 import { default as z } from 'zod';
+import { ButtonVariant } from '../../actions/button/button.js';
 import { IconButtonProps } from '../../actions/icon-button/icon-button.js';
 import { CustomDialogProps } from '../custom-dialog/custom-dialog.js';
 /**
@@ -9,6 +10,11 @@ import { CustomDialogProps } from '../custom-dialog/custom-dialog.js';
  */
 export type ConfirmationDialogProps<T> = {
     cancelText?: ReactNode;
+    /**
+     * The variant of the Cancel button. Default `'tonal'`; `'outlined'` or
+     * `'ghost'` restores the earlier look.
+     */
+    cancelVariant?: ButtonVariant;
     confirmText?: ReactNode;
     /** Called with the schema's parsed output, only once the form is valid. */
     onConfirm?: T extends z.ZodObject<any> ? (values: z.infer<T>) => void : () => void;
@@ -19,4 +25,4 @@ export type ConfirmationDialogProps<T> = {
     } : never;
     iconProps?: IconButtonProps;
 } & Omit<CustomDialogProps, 'footer'> & Pick<IconButtonProps, 'variant' | 'color'>;
-export declare function ConfirmationDialog<T>({ children, formOptions, open, defaultOpen, onOpenChange, cancelText, confirmText, onConfirm, variant, color, iconProps, icon, ...props }: ConfirmationDialogProps<T>): import("react").JSX.Element;
+export declare function ConfirmationDialog<T>({ children, formOptions, open, defaultOpen, onOpenChange, cancelText, cancelVariant, confirmText, onConfirm, variant, color, iconProps, icon, ...props }: ConfirmationDialogProps<T>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/attributes/attribute-dialog.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariant } from '../../actions/button/button.js';
 import { Attribute } from './models/attribute.js';
 export type AttributeDialogProps = {
     open: boolean;
@@ -6,7 +7,9 @@ export type AttributeDialogProps = {
     onSave: (attribute: Attribute) => void;
     onDelete?: () => void;
     disabled?: boolean;
+    /** The Cancel button's variant. Default `'tonal'`; `'outlined'` restores the earlier look. */
+    cancelVariant?: ButtonVariant;
     /** The other attributes' names; the form refuses to save one of them. */
     otherNames?: string[];
 };
-export declare function AttributeDialog({ open, onOpenChange, attribute, onSave, onDelete, disabled, otherNames, }: AttributeDialogProps): import("react").JSX.Element;
+export declare function AttributeDialog({ open, onOpenChange, attribute, onSave, onDelete, disabled, otherNames, cancelVariant, }: AttributeDialogProps): import("react").JSX.Element;

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

@@ -1,4 +1,5 @@
 import { ComponentProps, ReactNode } from 'react';
+import { ButtonVariant } from '../../../actions/button/button.js';
 import { Attribute } from '../models/attribute.js';
 export type AttributesDialogFieldProps = {
     attributes?: Attribute[];
@@ -9,6 +10,8 @@ export type AttributesDialogFieldProps = {
     /** Shows `helperText` as an error. */
     error?: boolean;
     helperText?: ReactNode;
+    /** The dialog's Cancel button variant. Default `'tonal'`; `'outlined'` restores the earlier look. */
+    cancelVariant?: ButtonVariant;
 } & ComponentProps<'div'>;
 /** The attributes as a list, and one dialog that edits one of them at a time. */
-export declare function AttributesDialogField({ attributes, onChange, readonly, disabled, label, error, helperText, className, ...props }: AttributesDialogFieldProps): import("react").JSX.Element;
+export declare function AttributesDialogField({ attributes, onChange, readonly, disabled, label, error, helperText, className, cancelVariant, ...props }: AttributesDialogFieldProps): import("react").JSX.Element;

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

@@ -5,4 +5,4 @@ import { AttributesDialogFieldProps } from './attributes-dialog-field.js';
  * changes from outside (a form `reset`), without echoing it back. A new array
  * with the same content is not a change.
  */
-export declare function AttributesInlineField({ attributes, onChange, disabled, label, error, helperText, className, readonly: _readonly, ...props }: AttributesDialogFieldProps): import("react").JSX.Element;
+export declare function AttributesInlineField({ attributes, onChange, disabled, label, error, helperText, className, readonly: _readonly, cancelVariant: _cancelVariant, ...props }: AttributesDialogFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/contacts/contact-dialog.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariant } from '../../actions/button/button.js';
 import { Contact } from './models.js';
 export type ContactDialogProps = {
     open: boolean;
@@ -6,5 +7,7 @@ export type ContactDialogProps = {
     onSave: (contact: Contact) => void;
     onDelete?: () => void;
     disabled?: boolean;
+    /** The Cancel button's variant. Default `'tonal'`; `'outlined'` restores the earlier look. */
+    cancelVariant?: ButtonVariant;
 };
-export declare function ContactDialog({ open, onOpenChange, contact, onSave, onDelete, disabled, }: ContactDialogProps): import("react").JSX.Element;
+export declare function ContactDialog({ open, onOpenChange, contact, onSave, onDelete, disabled, cancelVariant, }: ContactDialogProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/contacts/contacts-dialog-form-field.d.ts

@@ -1,9 +1,12 @@
 import { ComponentProps } from 'react';
 import { UseControllerProps } from 'react-hook-form';
+import { ButtonVariant } from '../../actions/button/button.js';
 export type ContactsDialogFieldProps<T extends Record<string, any>> = Pick<UseControllerProps<T>, 'control' | 'name'> & {
     className?: string;
     disabled?: boolean;
     label?: string;
+    /** The dialog's Cancel button variant. Default `'tonal'`; `'outlined'` restores the earlier look. */
+    cancelVariant?: ButtonVariant;
 } & Omit<ComponentProps<'div'>, 'name'>;
 /** `ContactsFormField` with `editing="dialog"`: a list, and a dialog per contact. */
-export declare function ContactsDialogField<T extends Record<string, any>>({ control, name, className, disabled, label, ...props }: ContactsDialogFieldProps<T>): import("react").JSX.Element;
+export declare function ContactsDialogField<T extends Record<string, any>>({ control, name, className, disabled, label, cancelVariant, ...props }: ContactsDialogFieldProps<T>): import("react").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { ComponentProps } from 'react';
 import { UseControllerProps } from 'react-hook-form';
+import { ButtonVariant } from '../../actions/button/button.js';
 export type ContactsFormFieldProps<T extends Record<string, any>> = Pick<UseControllerProps<T>, 'control' | 'name'> & {
     className?: string;
     disabled?: boolean;
@@ -12,10 +13,12 @@ export type ContactsFormFieldProps<T extends Record<string, any>> = Pick<UseCont
     editing?: 'inline' | 'dialog';
     /** `editing="inline"` only: `'list'` (default) or `'cards'`. */
     variant?: 'list' | 'cards';
+    /** `editing="dialog"` only: the dialog's Cancel button variant. Default `'tonal'`. */
+    cancelVariant?: ButtonVariant;
 } & Omit<ComponentProps<'div'>, 'name'>;
 /**
  * Contacts in a React Hook Form field (an array of `{ type, value, label?,
  * primary? }`). Inline by default; `editing="dialog"` is today's list and
  * dialog.
  */
-export declare function ContactsFormField<T extends Record<string, any>>({ editing, variant, ...props }: ContactsFormFieldProps<T>): import("react").JSX.Element;
+export declare function ContactsFormField<T extends Record<string, any>>({ editing, variant, cancelVariant, ...props }: ContactsFormFieldProps<T>): import("react").JSX.Element;