material 3.2.6 → 3.2.7

package/dist/components/navigation-rail/constants.d.ts

@@ -1,4 +1,3 @@
-/** M3 Expressive Android navigationrail/res/values/tokens.xml, token version 34.0.0. */
 export declare const NAVIGATION_RAIL_DEFAULTS: {
     readonly EXPANDED: false;
     readonly COLLAPSED_WIDTH: 96;
@@ -7,7 +6,6 @@ export declare const NAVIGATION_RAIL_DEFAULTS: {
     readonly MAX_EXPANDED_WIDTH: 360;
     readonly SHOW_TOGGLE: true;
 };
-/** Material Symbols `menu` and `menu_open`, the M3 rail menu button in each state. */
 export declare const NAVIGATION_RAIL_ICONS: {
     readonly EXPAND: "<svg viewBox=\"0 -960 960 960\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z\"/></svg>";
     readonly COLLAPSE: "<svg viewBox=\"0 -960 960 960\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z\"/></svg>";

package/dist/components/navigation-rail/navigation-rail.d.ts

@@ -1,7 +1,2 @@
 import type { NavigationRailConfig, NavigationRailComponent } from "./types.js";
-/**
- * Creates an M3 Expressive navigation rail with stable destinations during expansion.
- * Import its styles separately with `material/styles/navigation-rail`.
- * Links retain native browser navigation; onSelect can preventDefault for a router.
- */
 export default function createNavigationRail(config?: NavigationRailConfig): NavigationRailComponent;

package/dist/components/navigation-rail/types.d.ts

@@ -1,22 +1,17 @@
 import type { BaseComponentConfig } from "../../core/config/component.js";
-/** A primary destination. Icons are markup supplied by the application. */
 export interface NavigationRailItemConfig {
     id: string;
     label: string;
-    /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     icon: string;
-    /** Markup (HTML). Not sanitized by default: see Markup and sanitizing. Shown while this destination is active. */
     activeIcon?: string;
     href?: string;
     badge?: string | number | boolean;
-    /** Accessible description for a dot badge or count, e.g. "3 unread messages". */
     badgeLabel?: string;
     active?: boolean;
     disabled?: boolean;
 }
 export interface NavigationRailSelectEvent {
     id: string;
-    /** The id again, as the `value` of the `<m-navigation-rail>` element's `change` */
     value: string;
     index: number;
     originalEvent: MouseEvent;
@@ -30,32 +25,21 @@ export interface NavigationRailEvents {
         expanded: false;
     };
 }
-/** Standalone, non-modal M3 Expressive navigation rail. */
 export interface NavigationRailConfig extends BaseComponentConfig {
     items?: NavigationRailItemConfig[];
     expanded?: boolean;
-    /** Standard rail occupies layout space; modal expansion uses a native modal dialog. */
     layout?: 'standard' | 'modal';
-    /** Hide the standard rail when collapsed. Modal rails always hide when collapsed. */
     hideWhenCollapsed?: boolean;
-    /** Expanded width in CSS pixels, clamped to the Android token range 220–360. Default 280. */
     expandedWidth?: number;
-    /** Show the accessible expand/collapse menu button. Default true. */
     showToggle?: boolean;
     expandLabel?: string;
     collapseLabel?: string;
-    /** Menu button icon while collapsed. Default: Material Symbols `menu`. Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     expandIcon?: string;
-    /** Menu button icon while expanded. Default: Material Symbols `menu_open`. Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     collapseIcon?: string;
-    /** Optional application-owned header, such as a FAB. Its lifecycle stays with its owner. */
     header?: HTMLElement;
     ripple?: boolean;
-    /** `select` listener registered at creation. */
     onSelect?: (event: NavigationRailEvents["select"]) => void;
-    /** `expand` listener registered at creation. The argument is `{ expanded: true }`. */
     onExpand?: (event: NavigationRailEvents["expand"]) => void;
-    /** `collapse` listener registered at creation. The argument is `{ expanded: false }`. */
     onCollapse?: (event: NavigationRailEvents["collapse"]) => void;
 }
 export interface NavigationRailComponent {
@@ -67,7 +51,6 @@ export interface NavigationRailComponent {
     isExpanded: () => boolean;
     setActive: (id: string | null) => NavigationRailComponent;
     getActive: () => string | null;
-    /** Reads the current model value without changing selection. */
     getValue: () => string | null;
     setItems: (items: NavigationRailItemConfig[]) => NavigationRailComponent;
     getItems: () => NavigationRailItemConfig[];
@@ -79,11 +62,6 @@ export interface NavigationRailComponent {
         destroy: () => void;
     };
 }
-/**
- * Registers NavigationRailConfig with the global defaults map, so
- * `setComponentDefaults("navigation-rail", ...)` is typed without core
- * importing anything from this component.
- */
 declare module "../../core/config/global" {
     interface ComponentConfigMap {
         "navigation-rail"?: Partial<NavigationRailConfig>;

package/dist/components/progress/constants.d.ts

@@ -18,7 +18,6 @@ export declare const PROGRESS_DEFAULTS: {
     readonly SHAPE: "flat";
     readonly SHOW_LABEL: false;
     readonly INDETERMINATE: false;
-    /** Accessible name when none is given */
     readonly LABEL: "Loading";
 };
 export declare const PROGRESS_CLASSES: {
@@ -34,42 +33,26 @@ export declare const PROGRESS_CLASSES: {
     readonly TEST: "progress--test";
     readonly TRANSITION: "progress--transition";
 };
-/**
- * Colour roles (ProgressIndicatorTokens): the active indicator and the stop
- * indicator take primary, the track secondary-container. A circular
- * indeterminate indicator has no track.
- */
 export declare const PROGRESS_COLORS: {
     readonly INDICATOR: "sys-color-primary";
     readonly TRACK: "sys-color-secondary-container";
     readonly STOP: "sys-color-primary";
-    /** Not an M3 role: the buffer is this library's own extension */
     readonly BUFFER: "sys-color-primary-container";
 };
 export declare const PROGRESS_MEASUREMENTS: {
     readonly LINEAR: {
-        /** Track and active indicator thickness (LinearProgressIndicatorTokens.Height) */
         readonly HEIGHT: 4;
-        /** Space between the active indicator and the track (TrackActiveSpace) */
         readonly GAP: 4;
-        /** The dot that marks the end of the track (StopSize) */
         readonly STOP_INDICATOR: 4;
-        /** How far the stop indicator sits from the trailing edge, at most */
         readonly STOP_TRAILING_SPACE: 6;
-        /** Container height of a wavy linear indicator (WaveHeight) */
         readonly WAVE_HEIGHT: 10;
-        /** Inset from the edge of the element (m3.material.io: 4dp minimum) */
         readonly EDGE_INSET: 4;
         readonly MIN_HEIGHT: 4;
     };
     readonly CIRCULAR: {
-        /** Flat container size (CircularProgressIndicatorTokens.Size) */
         readonly SIZE: 40;
-        /** Wavy container size (CircularProgressIndicatorTokens.WaveSize) */
         readonly WAVE_SIZE: 48;
-        /** Space between the active indicator and the track (TrackActiveSpace) */
         readonly GAP: 4;
-        /** The guidelines' range for a circular indicator */
         readonly MIN_SIZE: 24;
         readonly MAX_SIZE: 240;
     };
@@ -81,43 +64,23 @@ export declare const PROGRESS_THICKNESS: {
     readonly THIN: 4;
     readonly THICK: 8;
 };
-/**
- * Wave geometry (LinearProgressIndicatorTokens, CircularProgressIndicatorTokens).
- * Wavelengths and amplitudes are in dp at the default 4dp thickness and scale
- * with the indicator's size.
- */
 export declare const PROGRESS_WAVE: {
     readonly LINEAR: {
-        /** ActiveWaveWavelength */
         readonly WAVELENGTH: 40;
-        /** IndeterminateActiveWaveWavelength */
         readonly INDETERMINATE_WAVELENGTH: 20;
-        /** ActiveWaveAmplitude */
         readonly AMPLITUDE: 3;
     };
     readonly CIRCULAR: {
-        /** ActiveWaveWavelength */
         readonly WAVELENGTH: 15;
-        /** ActiveWaveAmplitude */
         readonly AMPLITUDE: 1.6;
     };
-    /** The wave travels one wavelength per second (WavyProgressIndicatorDefaults) */
     readonly SPEED: 1;
-    /**
-     * The wave flattens at both ends of the range
-     * (WavyProgressIndicatorDefaults.indicatorAmplitude)
-     */
     readonly AMPLITUDE_START: 0.1;
     readonly AMPLITUDE_END: 0.95;
-    /** How long the amplitude takes to appear or go (MotionTokens.DurationLong2) */
     readonly AMPLITUDE_DURATION: 500;
 };
-/**
- * Indeterminate motion (ProgressIndicator.kt)
- */
 export declare const PROGRESS_MOTION: {
     readonly LINEAR: {
-        /** LinearAnimationDuration */
         readonly DURATION: 1750;
         readonly FIRST_HEAD_DELAY: 0;
         readonly FIRST_HEAD_DURATION: 1000;
@@ -129,34 +92,39 @@ export declare const PROGRESS_MOTION: {
         readonly SECOND_TAIL_DURATION: 850;
     };
     readonly CIRCULAR: {
-        /** CircularAnimationProgressDuration */
         readonly DURATION: 6000;
-        /** CircularAnimationAdditionalRotationDuration */
         readonly ROTATION_DURATION: 300;
-        /** CircularAnimationAdditionalRotationDelay */
         readonly ROTATION_DELAY: 1500;
-        /** CircularGlobalRotationDegreesTarget */
         readonly GLOBAL_ROTATION: 1080;
-        /** CircularAdditionalRotationDegreesTarget */
         readonly ADDITIONAL_ROTATION: 360;
-        /** CircularIndeterminateMinProgress */
         readonly MIN_PROGRESS: 0.1;
-        /** CircularIndeterminateMaxProgress */
         readonly MAX_PROGRESS: 0.87;
     };
-    /** How long a value change takes to animate (MotionTokens.DurationLong2) */
     readonly VALUE_DURATION: 500;
 };
-/**
- * Easing curves (MotionTokens), as cubic Bézier control points
- */
 export declare const PROGRESS_EASING: {
-    /** EasingEmphasizedAccelerateCubicBezier */
-    readonly EMPHASIZED_ACCELERATE: readonly [0.3, 0, 0.8, 0.15];
-    /** EasingEmphasizedDecelerateCubicBezier */
-    readonly EMPHASIZED_DECELERATE: readonly [0.05, 0.7, 0.1, 1];
-    /** EasingStandardCubicBezier */
-    readonly STANDARD: readonly [0.2, 0, 0, 1];
-    /** EasingLinearCubicBezier */
-    readonly LINEAR: readonly [0, 0, 1, 1];
+    readonly EMPHASIZED_ACCELERATE: readonly [
+        0.3,
+        0,
+        0.8,
+        0.15
+    ];
+    readonly EMPHASIZED_DECELERATE: readonly [
+        0.05,
+        0.7,
+        0.1,
+        1
+    ];
+    readonly STANDARD: readonly [
+        0.2,
+        0,
+        0,
+        1
+    ];
+    readonly LINEAR: readonly [
+        0,
+        0,
+        1,
+        1
+    ];
 };

package/dist/components/progress/progress.d.ts

@@ -1,24 +1,3 @@
 import { ProgressConfig, ProgressComponent } from "./types.js";
-/**
- * Creates a new Progress component using canvas rendering
- * @param {ProgressConfig} config - Progress configuration object
- * @returns {ProgressComponent} Progress component instance
- *
- * @example
- * ```ts
- * // Create a linear determinate progress bar
- * const progress = createProgress({
- *   variant: 'linear',
- *   value: 42,
- *   showLabel: true
- * });
- *
- * // Create an indeterminate circular progress
- * const loader = createProgress({
- *   variant: 'circular',
- *   indeterminate: true
- * });
- * ```
- */
 declare const createProgress: (config?: ProgressConfig) => ProgressComponent;
 export default createProgress;

package/dist/components/progress/types.d.ts

@@ -1,328 +1,77 @@
-/**
- * Progress variant types
- * @category Components
- */
 export type ProgressVariant = "linear" | "circular";
-/**
- * Progress thickness options
- * @category Components
- */
 export type ProgressThickness = "thin" | "thick" | number;
-/**
- * Progress shape options (linear only)
- * @category Components
- */
 export type ProgressShape = "flat" | "wavy";
-/**
- * Progress component event types
- * @category Components
- */
 export type ProgressEvent = "change" | "complete";
-/**
- * Configuration interface for the Progress component
- * @category Components
- */
 export interface ProgressConfig {
-    /**
-     * Progress variant that determines visual style
-     * @default 'linear'
-     */
     variant?: ProgressVariant;
-    /**
-     * Initial progress value (0-100)
-     * @default 0
-     */
     value?: number;
-    /**
-     * Whether the progress indicator is initially disabled
-     * @default false
-     */
     disabled?: boolean;
-    /**
-     * Maximum value
-     * @default 100
-     */
     max?: number;
-    /**
-     * Buffer value for linear progress with buffer (like video loading)
-     * @default 0
-     */
     buffer?: number;
-    /**
-     * Additional CSS classes to add to the progress component
-     */
     class?: string;
-    /**
-     * Thickness of the progress track and indicator
-     * Can be a named preset ('thin', 'default', 'thick') or a specific number in pixels
-     * @default 'thin'
-     */
     thickness?: ProgressThickness;
-    /**
-     * Shape of the linear indeterminate progress animation
-     * Only affects linear variant in indeterminate state
-     * @default 'flat'
-     */
     shape?: ProgressShape;
-    /**
-     * Whether to show text label with percentage
-     * @default false
-     */
     showLabel?: boolean;
-    /**
-     * Whether progress is indeterminate (shows animation without specific value)
-     * @default false
-     */
     indeterminate?: boolean;
-    /**
-     * Whether to mark the end of a linear determinate track with a 4dp dot.
-     * The dot is required unless the track has at least 3:1 contrast with
-     * everything around it (M3 progress indicator accessibility), so it is on
-     * by default.
-     * @default true
-     */
     showStopIndicator?: boolean;
-    /**
-     * Accessible name: what is loading, such as "Loading news article"
-     * @default 'Loading'
-     */
     ariaLabel?: string;
-    /**
-     * Custom label formatter function
-     */
     labelFormatter?: (value: number, max: number) => string;
-    /**
-     * Component prefix for class names
-     * @default 'mtrl'
-     */
     prefix?: string;
-    /**
-     * Component name used in class generation
-     * @default 'progress'
-     */
     componentName?: string;
-    /**
-     * DOM structure schema
-     * @internal
-     */
     schema?: object;
-    /**
-     * Size of the circular progress indicator in dp (only for circular variant)
-     * Clamped between 24 and 240
-     * @default 40 (48 when wavy)
-     */
     size?: number;
 }
-/**
- * Progress component interface
- * @category Components
- */
-/** What progress events carry. */
 export interface ProgressEventPayload {
     value: number;
     max: number;
 }
-/**
- * The progress events.
- * @category Components
- */
 export interface ProgressEvents {
-    /** The value was set */
     change: (event: ProgressEventPayload) => void;
-    /** The value reached the maximum */
     complete: (event: ProgressEventPayload) => void;
 }
-/**
- * What the progress draws with. **Not part of the public contract** (3.0.0):
- * these five were on `ProgressComponent`, which tied the public type to one
- * way of drawing the indicator. They are still on the object the factory
- * returns, for the library's own code and tests; how the indicator is drawn
- * may change in any release. The canvas is the element's own:
- * `progress.element.querySelector('canvas')`. Nothing needs to call `resize`:
- * the component observes its own size.
- * @internal
- */
 export interface ProgressInternals {
-    /** The canvas the indicator is drawn on */
     canvas: HTMLCanvasElement;
-    /** Re-measures the canvas and redraws; the component does this on resize */
     resize: () => void;
-    /** The canvas again: these three named the parts of the SVG this replaced */
     track: SVGElement;
     indicator: SVGElement;
     buffer: SVGElement;
 }
 export interface ProgressComponent {
-    /** The component's root DOM element */
     element: HTMLElement;
-    /**
-     * Gets a class name with the component's prefix
-     * @param name - Base class name
-     * @returns Prefixed class name
-     */
     getClass: (name: string) => string;
-    /**
-     * Sets the progress value
-     * @param value - Progress value between 0 and max
-     * @param animate - Whether to animate the value change (default: true)
-     * @returns The component instance for chaining
-     */
     setValue: (value: number, animate?: boolean) => ProgressComponent;
-    /**
-     * Gets the current progress value
-     * @returns Current progress value
-     */
     getValue: () => number;
-    /**
-     * Gets the maximum progress value
-     * @returns Maximum progress value
-     */
     getMax: () => number;
-    /**
-     * Sets the buffer value (for linear variant with buffer indicators)
-     * @param value - Buffer value (between 0 and max)
-     * @returns The progress component for chaining
-     */
     setBuffer: (value: number) => ProgressComponent;
-    /**
-     * Gets the current buffer value
-     * @returns Current buffer value
-     */
     getBuffer: () => number;
-    /**
-     * Enables the progress component
-     * @returns The progress component for chaining
-     */
     enable: () => ProgressComponent;
-    /**
-     * Disables the progress component
-     * @returns The progress component for chaining
-     */
     disable: () => ProgressComponent;
-    /**
-     * Checks if the component is disabled
-     * @returns Whether the component is disabled
-     */
     isDisabled: () => boolean;
-    /**
-     * Hides the progress component
-     * @returns The progress component for chaining
-     */
     hide: () => ProgressComponent;
-    /**
-     * Shows the progress component
-     * @returns The progress component for chaining
-     */
     show: () => ProgressComponent;
-    /**
-     * Checks if the progress component is visible
-     * @returns Whether the component is visible
-     */
     isVisible: () => boolean;
-    /**
-     * Shows the label element
-     * @returns The progress component for chaining
-     */
     showLabel: () => ProgressComponent;
-    /**
-     * Hides the label element
-     * @returns The progress component for chaining
-     */
     hideLabel: () => ProgressComponent;
-    /**
-     * Sets a custom formatter for the label
-     * @param formatter - Function that formats the label text
-     * @returns The progress component for chaining
-     */
     setLabelFormatter: (formatter: (value: number, max: number) => string) => ProgressComponent;
-    /**
-     * Sets the thickness of the progress track and indicator
-     * @param thickness - Thickness value ('thin', 'default', 'thick' or number in pixels)
-     * @returns The progress component for chaining
-     */
     setThickness: (thickness: ProgressThickness) => ProgressComponent;
-    /**
-     * Gets the current thickness value in pixels
-     * @returns Current thickness in pixels
-     */
     getThickness: () => number;
-    /**
-     * Sets the shape of the linear indeterminate progress animation
-     * Only affects linear variant in indeterminate state
-     * @param shape - Shape value ('flat' or 'wavy')
-     * @returns The progress component for chaining
-     */
     setShape: (shape: ProgressShape) => ProgressComponent;
-    /**
-     * Gets the current shape value
-     * @returns Current shape
-     */
     getShape: () => ProgressShape;
-    /**
-     * Sets the indeterminate state
-     * @param indeterminate - Whether progress is indeterminate
-     * @returns The progress component for chaining
-     */
     setIndeterminate: (indeterminate: boolean) => ProgressComponent;
-    /**
-     * Checks if the component is in indeterminate state
-     * @returns Whether the component is indeterminate
-     */
     isIndeterminate: () => boolean;
-    /**
-     * Sets the size of the circular progress indicator
-     * Only applies to circular variant
-     * @param size - Size in pixels (clamped between 24 and 240)
-     * @returns The progress component for chaining
-     */
     setSize: (size: number) => ProgressComponent;
-    /**
-     * Gets the current size of the circular progress indicator
-     * @returns Current size in pixels, or undefined for linear variant
-     */
     getSize: () => number | undefined;
-    /**
-     * Returns a Promise that resolves after the current canvas state
-     * has been painted to screen. Useful when you need to ensure a
-     * value change (e.g. 100%) is visually rendered before proceeding.
-     *
-     * @returns Promise that resolves after the next paint
-     */
     painted: () => Promise<void>;
-    /**
-     * Adds an event listener: `change` when the value is set, `complete` when it
-     * reaches the maximum. Handlers get `{ value, max }` (they got a DOM
-     * CustomEvent, the payload in `event.detail`).
-     */
     on: <K extends keyof ProgressEvents>(event: K, handler: ProgressEvents[K]) => ProgressComponent;
-    /** Removes an event listener */
     off: <K extends keyof ProgressEvents>(event: K, handler: ProgressEvents[K]) => ProgressComponent;
-    /**
-     * Destroys the progress component and cleans up resources
-     */
     destroy: () => void;
-    /**
-     * Adds CSS classes to the progress element
-     * @param classes - One or more class names to add
-     * @returns The progress component for chaining
-     */
     addClass: (...classes: string[]) => ProgressComponent;
-    /**
-     * API for managing disabled state
-     */
     disabled: {
-        /** Enables the progress */
         enable: () => void;
-        /** Disables the progress */
         disable: () => void;
-        /** Checks if the progress is disabled */
         isDisabled: () => boolean;
     };
-    /**
-     * API for managing component lifecycle
-     */
     lifecycle: {
-        /** Destroys the component and cleans up resources */
         destroy: () => void;
     };
 }

package/dist/components/radios/constants.d.ts

@@ -1,40 +1,18 @@
-/**
- * Radio states for styling and behavior
- */
 export declare const RADIO_STATES: {
-    /** Radio is selected */
     readonly CHECKED: "checked";
-    /** Radio is not selected */
     readonly UNCHECKED: "unchecked";
-    /** Radio is disabled */
     readonly DISABLED: "disabled";
-    /** Radio has keyboard focus */
     readonly FOCUSED: "focused";
 };
-/**
- * Radio layout directions
- */
 export declare const RADIO_DIRECTIONS: {
-    /** Radios stacked vertically */
     readonly VERTICAL: "vertical";
-    /** Radios arranged horizontally */
     readonly HORIZONTAL: "horizontal";
 };
-/**
- * Radio events
- */
 export declare const RADIO_EVENTS: {
-    /** Fired when a radio button is selected */
     readonly CHANGE: "change";
-    /** Native input focus event; listen on the input, not the group emitter. */
     readonly FOCUS: "focus";
-    /** Native input blur event; listen on the input, not the group emitter. */
     readonly BLUR: "blur";
 };
-/**
- * Default configuration values
- */
 export declare const RADIO_DEFAULTS: {
-    /** Default radio direction */
     readonly DIRECTION: "vertical";
 };

package/dist/components/radios/radios.d.ts

@@ -1,8 +1,3 @@
 import { RadiosConfig, RadiosComponent } from "./types.js";
-/**
- * Creates a new Radios component
- * @param {RadiosConfig} config - Radios configuration object
- * @returns {RadiosComponent} Radios component instance
- */
 declare const createRadios: (config: RadiosConfig) => RadiosComponent;
 export default createRadios;