@nxgt/material 3.10.2 → 3.12.0

package/dist/lib/components/ui/layout/app-shell/watch-content.d.ts

@@ -0,0 +1,19 @@
+import { Box } from './keep-shapes-inside.js';
+/**
+ * The boxes of the text (its glyph runs, not its block) and the controls of the region, in the content's own coordinates.
+ * Both walks stop at `MAX_CONTENT_BOXES`: text past it is not collected.
+ */
+export declare function collectOccupied(region: Element): Box[];
+/**
+ * Hides, never moves, the shapes of the backdrop that lie over the page's text
+ * or controls: a shape whose box meets an occupied box (8px margin) gets
+ * `data-hidden` (activity-backdrop.css fades it out) and loses it once clear.
+ * The occupied boxes are collected when the content changes or resizes and
+ * kept in content coordinates, so a scroll only shifts them: the scroll
+ * handler is a rAF-throttled loop over the cached boxes, no layout read.
+ */
+export declare function watchContent(column: HTMLElement, shapes: () => Element[]): {
+    /** Reads again, then applies: after layout, a resize or a change of the content. */
+    refresh(driftOf: (el: Element) => number): void;
+    stop(): void;
+};

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

@@ -5,7 +5,7 @@ import { VariantProps } from 'class-variance-authority';
  * layer, so a utility in `className` still wins (`rounded-lg`, `bg-background`).
  */
 export declare const dialogContentVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | "full" | null | undefined;
     mobilePresentation?: "dialog" | "fullscreen" | "bottom-sheet" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type DialogContentVariants = VariantProps<typeof dialogContentVariants>;

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

@@ -9,7 +9,7 @@ import { ComponentProps } from 'react';
  */
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outlined" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "lg" | "sm" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): import("react").JSX.Element;
 export { Toggle, toggleVariants };

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

@@ -1,13 +1,23 @@
-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?: "primary" | "error" | "default" | "muted" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type TypographyProps = ComponentProps<'p'> & VariantProps<typeof typographyVariants> & {
+import { TypographyVariantProps } from './typography.variants.js';
+export { typographyVariants } from './typography.variants.js';
+export type TypographyProps = ComponentProps<'p'> & Omit<TypographyVariantProps, 'variant'> & {
+    /**
+     * A step of the type scale, `<role>-<size>`: role `display`, `headline`,
+     * `title`, `body` or `label`, size `lg`, `md` or `sm`. Default `body-md`.
+     *
+     * The fifteen former names are kept as aliases of the scale and are
+     * deprecated: `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` and `caption`.
+     */
+    variant?: TypographyVariantProps['variant'];
+    /** The heavier weight of the same step (`text-<step>-em`): same size, line height and tracking. No effect on a deprecated alias that is emphasized already. */
+    emphasized?: boolean | null;
     /** The element to render, `div` by default. Intrinsic tags only. */
     as?: keyof React.JSX.IntrinsicElements;
     /** Merge the typography classes onto the single child instead of rendering an element. */
     asChild?: boolean;
 };
-export declare function Typography({ className, variant, tone, as, asChild, ...props }: TypographyProps): import("react").JSX.Element;
+export declare function Typography({ className, variant, emphasized, tone, as, asChild, ...props }: TypographyProps): import("react").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { VariantProps } from 'class-variance-authority';
+/** The five roles of the type scale (lib/components/type-scale.css). */
+export declare const typeRoles: readonly ["display", "headline", "title", "body", "label"];
+export declare const typeSizes: readonly ["lg", "md", "sm"];
+type Role = (typeof typeRoles)[number];
+type Size = (typeof typeSizes)[number];
+/** `display-lg`, `title-md`… the fifteen scale variants. */
+export type ScaleVariant = `${Role}-${Size}`;
+export declare const scaleVariants: ScaleVariant[];
+/**
+ * The fifteen variants this component had before the scale, each mapped by
+ * name onto it: the old semibold ones to the emphasized variant, the others
+ * to the plain one. The sizes follow the scale, so they changed (the changelog
+ * has the table). `emphasized` has no effect on an alias that is emphasized
+ * already.
+ */
+export declare const aliases: {
+    /** @deprecated Use `body-md`. */
+    readonly normal: "body-md";
+    /** @deprecated Use `display-lg` with `emphasized`. */
+    readonly 'huge-larger': "display-lg-em";
+    /** @deprecated Use `display-lg` with `emphasized`. */
+    readonly 'huge-large': "display-lg-em";
+    /** @deprecated Use `display-md` with `emphasized`. */
+    readonly 'huge-medium': "display-md-em";
+    /** @deprecated Use `display-sm` with `emphasized`. */
+    readonly 'huge-small': "display-sm-em";
+    /** @deprecated Use `display-sm` with `emphasized`. */
+    readonly 'headline-larger': "display-sm-em";
+    /** @deprecated Use `headline-lg` with `emphasized`. */
+    readonly 'headline-large': "headline-lg-em";
+    /** @deprecated Use `headline-md` with `emphasized`. */
+    readonly 'headline-medium': "headline-md-em";
+    /** @deprecated Use `headline-sm` with `emphasized`. */
+    readonly 'headline-small': "headline-sm-em";
+    /** @deprecated Use `title-lg` with `emphasized`. */
+    readonly 'title-large': "title-lg-em";
+    /** @deprecated Use `title-md` with `emphasized`. */
+    readonly 'title-medium': "title-md-em";
+    /** @deprecated Use `title-sm` with `emphasized`. */
+    readonly 'title-small': "title-sm-em";
+    /** @deprecated Use `body-md`. */
+    readonly 'body-medium': "body-md";
+    /** @deprecated Use `body-sm`. */
+    readonly 'body-small': "body-sm";
+    /** @deprecated Use `label-sm` with `tone="muted"`. */
+    readonly caption: "label-sm";
+};
+export declare const typographyVariants: (props?: ({
+    variant?: "caption" | "normal" | "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "body-lg" | "body-md" | "body-sm" | "label-lg" | "label-md" | "label-sm" | "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;
+    emphasized?: boolean | null | undefined;
+    tone?: "primary" | "error" | "default" | "muted" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TypographyVariantProps = VariantProps<typeof typographyVariants>;
+export {};

package/dist/lib/components/ui/selection/choice-group/use-choice-group-field.d.ts

@@ -52,13 +52,13 @@ export declare function useChoiceGroupField(props: ChoiceGroupBase<HTMLButtonEle
     name: string | undefined;
     dom: {
         id?: string;
+        title?: string | undefined | undefined;
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: import('react').CSSProperties | undefined;
-        title?: string | undefined | undefined;
         key?: import('react').Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -329,13 +329,13 @@ export declare function useChoiceGroupField(props: ChoiceGroupBase<HTMLButtonEle
         onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
     } | {
         id?: string;
+        title?: string | undefined | undefined;
         content?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         color?: string | undefined | undefined;
         prefix?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         style?: import('react').CSSProperties | undefined;
-        title?: string | undefined | undefined;
         key?: import('react').Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;

package/dist/lib/components/ui/tones.d.ts

@@ -1,7 +1,7 @@
 import { ShapeTone } from './display/shape/shape-tones.js';
 /**
  * The tones an application adds to the eight of the library, for the
- * components that take a `tone` (`Shape`, `Avatar`, `StatCard`, the metric
+ * components that take a `tone` (`Shape`, `Avatar`, `Badge`, `StatCard`, the metric
  * cards, `Sparkline`, `Fab`). An app names its own in the interface and draws it in CSS, with no `style`:
  *
  * ```ts