@nxgt/material 3.35.1 → 3.37.0

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

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { f as t } from "./dialog-Cdv9IXVo.js";
+import { f as t } from "./dialog-DR9rACzY.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 { t as a } from "./icon-button-CN9r5TNE.js";
 import { isValidElement as o, useId as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { describedBy as u } from "@nxgt/material-core/described-by";

package/dist/{icon-button-ifTpXt0A.js → icon-button-CN9r5TNE.js}

@@ -8,8 +8,14 @@ import { t as f } from "./button-group-context-CaP0X5p_.js";
 import { shapeOutline as p, toSvgPath as m } from "@nxgt/material-core/shapes";
 import { useContext as h, useEffect as g, useRef as _ } from "react";
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region lib/components/ui/display/count-badge/format-count.ts
+function b(e, t = 99) {
+	let n = Math.max(0, Math.round(e));
+	return n > t ? `${t}+` : String(n);
+}
+//#endregion
 //#region lib/components/ui/actions/icon-button/icon-button.compound-variants.ts
-var b = [
+var x = [
 	{
 		variant: "filled",
 		color: "primary",
@@ -185,7 +191,7 @@ var b = [
 		color: "default",
 		class: `${u.default} ${d.default} ${l.default} underline-offset-4 hover:underline hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
 	}
-], x = i("inline-flex center gap-2 cursor-pointer whitespace-nowrap text-sm font-medium disabled:pointer-events-none [&_svg]:bg-transparent [&_svg]:text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--btn-ic,1rem) shrink-0 [&_svg]:shrink-0", {
+], S = i("inline-flex center gap-2 cursor-pointer whitespace-nowrap text-sm font-medium disabled:pointer-events-none [&_svg]:bg-transparent [&_svg]:text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--btn-ic,1rem) shrink-0 [&_svg]:shrink-0", {
 	variants: {
 		look: {
 			btn: "nxgt-btn nxgt-morph-fill aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)]",
@@ -220,22 +226,22 @@ var b = [
 		size: "legacy",
 		width: "default"
 	},
-	compoundVariants: [...b, {
+	compoundVariants: [...x, {
 		look: "btn",
 		size: "legacy",
 		width: "default",
 		class: "[--btn-round:50%]"
 	}]
 });
-function S(e) {
-	return (t) => x({
+function C(e) {
+	return (t) => S({
 		...t,
 		look: e,
 		size: t?.size ?? "legacy",
 		color: t?.variant === "ghost" && t.color == null ? "default" : t?.color
 	});
 }
-var C = S("btn"), w = S("shaped"), T = {
+var w = C("btn"), T = C("shaped"), E = {
 	filled: {
 		primary: "fill-primary",
 		secondary: "fill-secondary dark:fill-[color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))]",
@@ -282,7 +288,7 @@ var C = S("btn"), w = S("shaped"), T = {
 		default: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50"
 	}
 };
-function E({ shape: n, variant: r, color: i }) {
+function D({ shape: n, variant: r, color: i }) {
 	let a = p(n), o = _(null);
 	return t(o, a, !0), /* @__PURE__ */ v("svg", {
 		"data-slot": "icon-button-shape",
@@ -295,61 +301,74 @@ function E({ shape: n, variant: r, color: i }) {
 			d: m(a),
 			vectorEffect: "non-scaling-stroke",
 			paintOrder: "stroke",
-			className: e("stroke-transparent stroke-1 transition-[fill]", T[r][i], "group-focus-visible/icon-button:stroke-ring/50 group-focus-visible/icon-button:stroke-[6px]", "forced-colors:fill-none forced-colors:stroke-[ButtonText] forced-colors:group-focus-visible/icon-button:stroke-[Highlight]")
+			className: e("stroke-transparent stroke-1 transition-[fill]", E[r][i], "group-focus-visible/icon-button:stroke-ring/50 group-focus-visible/icon-button:stroke-[6px]", "forced-colors:fill-none forced-colors:stroke-[ButtonText] forced-colors:group-focus-visible/icon-button:stroke-[Highlight]")
 		})
 	});
 }
 //#endregion
 //#region lib/components/ui/actions/icon-button/icon-button.tsx
-function D({ variant: t, color: i, size: a, width: c, className: l, asChild: u, type: d = "button", shape: p, morph: m = "pill", children: _, ...b }) {
-	let x = u ? r : "button", S = h(f), T = a ?? S, D = !!(b["aria-label"] || b["aria-labelledby"]), O = !!p && c != null && c !== "default";
+function O(e) {
+	return e === void 0 || !Number.isFinite(e) || e < .5 ? null : b(e);
+}
+function k({ variant: t, color: i, size: a, width: c, className: l, asChild: u, type: d = "button", shape: p, morph: m = "pill", badge: _, badgeTone: b = "primary", children: x, ...S }) {
+	let C = u ? r : "button", E = h(f), k = a ?? E, A = !!(S["aria-label"] || S["aria-labelledby"]), j = !!p && c != null && c !== "default";
 	g(() => {
-		O && !o() && console.warn("IconButton: `width` is ignored with `shape`; a shaped button is as wide as it is high.");
-	}, [O]);
-	let k = !p && m !== "none" && b["aria-pressed"] !== void 0, A = b["aria-pressed"] === !0 || b["aria-pressed"] === "true";
+		j && !o() && console.warn("IconButton: `width` is ignored with `shape`; a shaped button is as wide as it is high.");
+	}, [j]);
+	let M = !p && m !== "none" && S["aria-pressed"] !== void 0, N = O(_), P = S["aria-pressed"] === !0 || S["aria-pressed"] === "true";
 	return /* @__PURE__ */ v(s, {
-		value: D,
-		children: /* @__PURE__ */ y(x, {
+		value: A,
+		children: /* @__PURE__ */ y(C, {
 			"data-slot": "icon-button",
 			"data-icon-button": "",
 			"data-variant": t ?? "filled",
 			"data-color": i,
 			type: u ? void 0 : d,
-			"data-size": T,
+			"data-size": k,
 			"data-shape": p,
-			"data-morph": k ? m : void 0,
-			"data-selected": k && A ? "true" : void 0,
-			className: e(p ? w({
+			"data-morph": M ? m : void 0,
+			"data-selected": M && P ? "true" : void 0,
+			className: e(p ? T({
 				variant: t,
 				color: i,
-				size: T
-			}) : C({
+				size: k
+			}) : w({
 				variant: t,
 				color: i,
-				size: T,
+				size: k,
 				width: c
 			}), p && "group/icon-button nxgt-touch-target relative isolate bg-transparent! border-0! shadow-none! ring-0! focus-visible:ring-0! aria-invalid:ring-0! forced-colors:[&_svg]:stroke-[ButtonText] forced-colors:[&_svg]:text-[ButtonText]", l),
-			...b,
-			children: [p ? /* @__PURE__ */ v(E, {
-				shape: p,
-				variant: t ?? "filled",
-				color: i ?? (t === "ghost" ? "default" : "primary")
-			}) : null, /* @__PURE__ */ v(n, { children: _ })]
+			...S,
+			children: [
+				p ? /* @__PURE__ */ v(D, {
+					shape: p,
+					variant: t ?? "filled",
+					color: i ?? (t === "ghost" ? "default" : "primary")
+				}) : null,
+				/* @__PURE__ */ v(n, { children: x }),
+				N === null ? null : /* @__PURE__ */ v("span", {
+					"data-slot": "icon-button-badge",
+					"aria-hidden": "true",
+					"data-tone": b,
+					className: "nxgt-icon-button-badge",
+					children: N
+				})
+			]
 		})
 	});
 }
-function O({ tooltip: e, "aria-label": t, ...n }) {
+function A({ tooltip: e, "aria-label": t, ...n }) {
 	let r = t ?? (typeof e == "string" ? e : void 0);
 	return e ? /* @__PURE__ */ v(a, {
 		content: e,
-		children: /* @__PURE__ */ v(D, {
+		children: /* @__PURE__ */ v(k, {
 			"aria-label": r,
 			...n
 		})
-	}) : /* @__PURE__ */ v(D, {
+	}) : /* @__PURE__ */ v(k, {
 		"aria-label": r,
 		...n
 	});
 }
 //#endregion
-export { C as n, O as t };
+export { w as n, b as r, A as t };

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/actions/icon-button/icon-button.d.ts

@@ -37,6 +37,20 @@ export type IconButtonProps = {
      * are unaffected.
      */
     morph?: 'round' | 'pill' | 'none';
+    /**
+     * A count drawn on the button's top end corner (the top left in a
+     * right-to-left page): "99+" past 99, nothing at 0, below 0.5, when not
+     * finite or when unset. It takes no room, so the button keeps its size and
+     * its 44px touch target, and it is decorative (`aria-hidden`): give the
+     * button the full accessible name yourself, e.g.
+     * `aria-label="Publish 2 items"`. A `tooltip` string names the button too.
+     */
+    badge?: number;
+    /**
+     * The colour of the `badge`: `primary` (default: a count is not an
+     * alert), `error` (a notification) or `neutral` (the page's text colour).
+     */
+    badgeTone?: 'primary' | 'error' | 'neutral';
 };
 export declare function IconButton({ tooltip, 'aria-label': ariaLabel, ...props }: IconButtonProps): import("react").JSX.Element;
 export { variants as iconButtonVariants };

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/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/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/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;

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

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

package/dist/lib/components/ui/fields/opening-hours/opening-hours-dialog.d.ts

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

package/dist/lib/components/ui/fields/opening-hours/opening-hours-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';
 import { WeekStart } from './logic/week.js';
 export type OpeningHoursFormFieldProps<T extends Record<string, any>> = Pick<UseControllerProps<T>, 'control' | 'name'> & {
     className?: string;
@@ -13,6 +14,8 @@ export type OpeningHoursFormFieldProps<T extends Record<string, any>> = Pick<Use
     editing?: 'inline' | 'dialog';
     /** `editing="dialog"` only: the "Add All Days" button. */
     showAddAllDays?: boolean;
+    /** `editing="dialog"` only: the dialog's Cancel button variant. Default `'tonal'`. */
+    cancelVariant?: ButtonVariant;
     /** `editing="inline"` only: the first day of the week, `0` Sunday. */
     weekStartsOn?: WeekStart;
     /** `editing="inline"` only: the locale of day and time names. */
@@ -22,4 +25,4 @@ export type OpeningHoursFormFieldProps<T extends Record<string, any>> = Pick<Use
  * Opening hours in a React Hook Form field (an array of one entry per
  * range). Inline by default; `editing="dialog"` is today's list and dialog.
  */
-export declare function OpeningHoursFormField<T extends Record<string, any>>({ editing, showAddAllDays, weekStartsOn, locale, ...props }: OpeningHoursFormFieldProps<T>): import("react").JSX.Element;
+export declare function OpeningHoursFormField<T extends Record<string, any>>({ editing, showAddAllDays, cancelVariant, weekStartsOn, locale, ...props }: OpeningHoursFormFieldProps<T>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/postal-address/postal-address-dialog.d.ts

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

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

@@ -1,8 +1,11 @@
 import { ComponentProps } from 'react';
 import { UseControllerProps } from 'react-hook-form';
+import { ButtonVariant } from '../../actions/button/button.js';
 export type PostalAddressFormFieldProps<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'>;
-export declare function PostalAddressFormField<T extends Record<string, any>>({ control, name, className, disabled, label, ...props }: PostalAddressFormFieldProps<T>): import("react").JSX.Element;
+export declare function PostalAddressFormField<T extends Record<string, any>>({ control, name, className, disabled, label, cancelVariant, ...props }: PostalAddressFormFieldProps<T>): import("react").JSX.Element;

package/dist/lib/components/ui/media/image-cropper/image-cropper.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariant } from '../../actions/button/button.js';
 import { ImageCropResult, ImageCropShape } from './types.js';
 export type ImageCropperProps = {
     src: string;
@@ -6,6 +7,8 @@ export type ImageCropperProps = {
     fileName?: string;
     onCrop: (result: ImageCropResult) => void;
     onCancel?: () => void;
+    /** The Cancel button's variant. Default `'tonal'`; `'ghost'` restores the earlier look. */
+    cancelVariant?: ButtonVariant;
     className?: string;
 };
-export declare function ImageCropper({ src, aspect: aspectProp, cropShape, fileName, onCrop, onCancel, className, }: ImageCropperProps): import("react").JSX.Element;
+export declare function ImageCropper({ src, aspect: aspectProp, cropShape, fileName, onCrop, onCancel, cancelVariant, className, }: ImageCropperProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/rich-text-editor/types.d.ts

@@ -1,3 +1,4 @@
+import { ButtonVariant } from '../../actions/button/button.js';
 import { RichTextMentionSuggestion } from '../editor/extensions/mention/mention-items.js';
 import { LegacyFeatureFlags } from '../editor/kit/legacy-flags.js';
 /** The 15 on/off flags of the old editor (`options.features`); the core owns the type. */
@@ -9,6 +10,8 @@ export interface RichTextEditorOptions {
         save?: string;
         cancel?: string;
     };
+    /** The Cancel button's variant. Default `'tonal'`; `'ghost'` restores the earlier look. */
+    cancelVariant?: ButtonVariant;
     /**
      * `@` suggestions: plain names, or `MentionItem`s (the type `MentionList`
      * and `ChatComposer` take). An item inserts its `id` and shows its `label`.