material 3.2.6 → 3.2.7

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

@@ -1,138 +1,38 @@
 import type { ForwardedEventPayload } from "../../core/dom/index.js";
-/**
- * List variant types following Material Design 3 guidelines.
- * - standard: the baseline list: no container, square rows (default)
- * - segmented: the expressive list: each row paints its own container and
- *   shape, 2px apart
- *
- * @category Components
- */
 export type ListVariant = 'standard' | 'segmented';
-/**
- * Configuration for the List component
- * @interface ListConfig
- */
 export interface ListConfig<T = unknown> {
-    /**
-     * The list's visual style. It does not change the list's behavior.
-     * An unknown value is the default.
-     * @default 'standard'
-     */
     variant?: ListVariant;
-    /**
-     * Static array of items to display
-     * @required
-     */
     items: T[];
-    /**
-     * Function to render an item
-     * @param {T} item - Item to render
-     * @param {number} index - Item index in the list
-     * @returns {HTMLElement} Rendered DOM element
-     */
     renderItem?: (item: T, index: number) => HTMLElement;
-    /**
-     * Whether to track item selection
-     * When true, clicked items will receive a selected class.
-     *
-     * With `trackSelection`, each row's action is a button with `aria-pressed`,
-     * inside its `listitem`. That is this option's contract and it stays: a row
-     * can also hold a control of the app's, and pressing the selected row again
-     * deselects it. A listbox of options (`role="listbox"`, `aria-selected`,
-     * one tab stop), which allows neither, would be a separate opt-in mode, not
-     * a change to this one.
-     * @default true
-     */
     trackSelection?: boolean;
-    /**
-     * Whether to allow multiple item selection
-     * @default false
-     */
     multiSelect?: boolean;
-    /**
-     * Initial selection state (array of item IDs)
-     */
     initialSelection?: (string | number)[];
-    /**
-     * ARIA label for accessibility
-     */
     ariaLabel?: string;
-    /**
-     * Additional CSS classes
-     */
     class?: string;
-    /**
-     * Default animation behavior for scroll operations
-     * When true, scroll operations will be animated by default
-     * @default false
-     */
     animate?: boolean;
-    /**
-     * Component name used in CSS class generation
-     * @default 'list'
-     */
     componentName?: string;
 }
-/**
- * What the list reads off an item.
- *
- * `ListConfig` is generic in its item type and consumers keep that, but the
- * renderer and the selection feature both reach into an item for the same few
- * optional fields -- an id to target it by, and one of four names for its
- * label. This is that shape, written down once so the two features agree.
- *
- * @category Components
- */
-/** Slot HTML uses the shared safe HTML sink; HTMLElement content is moved, not cloned.
- * Use text for metadata and control/custom for independently interactive content.
- */
 export interface ListSlot {
     type: "icon" | "avatar" | "image" | "video" | "text" | "control" | "custom";
-    /**
-     * For `icon` and `avatar`, a string is markup.
-     * Markup (HTML). Not sanitized by default: see Markup and sanitizing.
-     * An avatar string is not a person's name or an image URL. An `image` is a URL.
-     */
     content: string | HTMLElement;
 }
 export interface ListItem {
-    /** Structural entries are rendered but never selectable. */
     kind?: "item" | "divider" | "subheader";
-    /** Insets a divider to the text column (72px from the leading edge). */
     inset?: boolean;
-    /** One headline line plus optional overline/supporting lines. Inferred when omitted. */
     lines?: 1 | 2 | 3;
     overline?: string;
     supportingText?: string;
     leading?: ListSlot;
-    /**
-     * The slot at the row's end: text, an icon, or a control of the app's
-     * (a checkbox, a radio, a switch). It is sized by its content: a control
-     * that fills its container, such as a slider, is not a list-row control
-     * and goes outside the row.
-     */
     trailing?: ListSlot;
-    /** Blocks user activation; programmatic selection is still allowed. */
     disabled?: boolean;
     id?: string | number;
     text?: string;
     title?: string;
     headline?: string;
     name?: string;
-    /** Selected at creation, which withSelection seeds its set from */
     selected?: boolean;
 }
-/**
- * What withRenderer installs at `component.list`.
- *
- * This static list renders all entries. Legacy paging methods remain no-ops
- * for compatibility; there is no virtual-list dependency.
- *
- * @category Components
- * @internal
- */
 export interface ListRenderer<T = ListItem> {
-    /** @internal Owned row references avoid selector interpolation and nested-list matches. */
     getRows: () => ListRow<T>[];
     onRender: (handler: () => void) => () => void;
     getItems: () => T[];
@@ -171,7 +71,6 @@ export interface ListRenderer<T = ListItem> {
     isLoading: () => boolean;
     hasNextPage: () => boolean;
 }
-/** @internal A rendered data row and its independent native primary action. */
 export interface ListRow<T = ListItem> {
     item: T;
     id: string;
@@ -179,16 +78,7 @@ export interface ListRow<T = ListItem> {
     element: HTMLElement;
     action?: HTMLButtonElement;
 }
-/** Where a scrolled-to item lands in the viewport */
 export type ScrollPosition = "start" | "center" | "end";
-/**
- * What withSelection installs. Present whether or not selection is tracked --
- * with `trackSelection` off the feature returns no-op versions rather than
- * nothing, so a caller never has to check before calling.
- *
- * @category Components
- * @internal
- */
 export interface ListSelection<T = ListItem> {
     getSelectedItems: () => T[];
     getSelectedItemIds: () => string[];
@@ -198,16 +88,6 @@ export interface ListSelection<T = ListItem> {
     clearSelection(): this;
     setSelection(itemIds: (string | number)[]): this;
 }
-/**
- * What a list feature needs from the component it is handed.
- *
- * The list pipe is createBase, withEvents, withElement, then these -- so the
- * element is there before any feature runs. `list` is optional because
- * withSelection reads it and withRenderer is what puts it there.
- *
- * @category Components
- * @internal
- */
 export interface ListFeatureHost {
     element: HTMLElement;
     getClass: (name: string) => string;
@@ -221,187 +101,44 @@ export interface ListFeatureHost {
     };
     list?: ListRenderer;
 }
-/**
- * Selection event data
- * @interface SelectEvent
- */
 export interface SelectEvent<T = unknown> {
-    /**
-     * Selected item data
-     */
     item: T;
-    /**
-     * The item's id as a string, the `value` of the `<m-list>` element's
-     * `activate`
-     */
     value: string;
-    /**
-     * DOM element for the selected item
-     */
     element: HTMLElement;
-    /**
-     * Original DOM event
-     */
     originalEvent: Event;
-    /**
-     * Component instance
-     */
     component: ListComponent<T>;
-    /**
-     * Prevent default behavior
-     */
     preventDefault: () => void;
-    /**
-     * Whether default was prevented
-     */
     defaultPrevented: boolean;
 }
-/**
- * Load event data
- * @interface LoadEvent
- */
 export interface LoadEvent<T = unknown> {
-    /**
-     * Loaded items
-     */
     items: T[];
-    /**
-     * Whether the list is currently loading
-     */
     loading: boolean;
-    /**
-     * Whether there are more items to load
-     */
     hasNext: boolean;
-    /**
-     * Whether there are previous items
-     */
     hasPrev: boolean;
-    /**
-     * Component instance
-     */
     component: ListComponent<T>;
-    /**
-     * Prevent default behavior
-     */
     preventDefault?: () => void;
-    /**
-     * Whether default was prevented
-     */
     defaultPrevented?: boolean;
 }
-/**
- * List component interface
- * @interface ListComponent
- */
 export interface ListComponent<T = unknown> {
-    /**
-     * Component's root DOM element
-     */
     element: HTMLElement;
-    /**
-     * Refreshes the list display
-     * @returns {Promise<ListComponent<T>>} Promise that resolves with component
-     */
     refresh: () => Promise<ListComponent<T>>;
-    /**
-     * Gets all items in the list
-     * @returns {T[]} All items
-     */
     getAllItems: () => T[];
-    /**
-     * Gets all visible items (same as getAllItems for rendered lists)
-     * @returns {T[]} Visible items
-     */
     getVisibleItems: () => T[];
-    /**
-     * Scrolls to a specific item by ID
-     * @param {string | number} itemId - Item ID to scroll to
-     * @param {string} position - Position ('start', 'center', 'end')
-     * @param {boolean} animate - Whether to animate the scroll
-     * @returns {ListComponent} Component instance for chaining
-     */
     scrollToItem: (itemId: string | number, position?: "start" | "center" | "end", animate?: boolean) => ListComponent<T>;
-    /**
-     * Scroll to a specific index in the list
-     * @param {number} index - Index to scroll to (0-based)
-     * @param {string} position - Position ('start', 'center', 'end')
-     * @param {boolean} animate - Whether to animate the scroll
-     * @returns {Promise<ListComponent<T>>} Promise that resolves when scroll is complete
-     */
     scrollToIndex: (index: number, position?: "start" | "center" | "end", animate?: boolean) => Promise<ListComponent<T>>;
-    /**
-     * Checks if the list is currently loading (always false for rendered lists)
-     * @returns {boolean} Always false
-     */
     isLoading: () => boolean;
-    /**
-     * Checks if the list has more items to load (always false for rendered lists)
-     * @returns {boolean} Always false
-     */
     hasNextPage: () => boolean;
-    /**
-     * Gets the currently selected items
-     * @returns {T[]} Selected items
-     */
     getSelectedItems: () => T[];
-    /**
-     * Gets the IDs of currently selected items
-     * @returns {string[]} Selected item IDs
-     */
     getSelectedItemIds: () => string[];
-    /**
-     * Checks if an item is selected
-     * @param {string | number} itemId - Item ID to check
-     * @returns {boolean} True if item is selected
-     */
     isItemSelected: (itemId: string | number) => boolean;
-    /**
-     * Selects an item
-     * @param {string | number} itemId - Item ID to select
-     * @returns {ListComponent} Component instance for chaining
-     */
     selectItem: (itemId: string | number) => ListComponent<T>;
-    /**
-     * Deselects an item
-     * @param {string | number} itemId - Item ID to deselect
-     * @returns {ListComponent} Component instance for chaining
-     */
     deselectItem: (itemId: string | number) => ListComponent<T>;
-    /**
-     * Clears all selections
-     * @returns {ListComponent} Component instance for chaining
-     */
     clearSelection: () => ListComponent<T>;
-    /**
-     * Sets the selection to the specified item IDs
-     * @param {(string | number)[]} itemIds - Item IDs to select
-     * @returns {ListComponent} Component instance for chaining
-     */
     setSelection: (itemIds: (string | number)[]) => ListComponent<T>;
-    /**
-     * Adds an event listener to the list
-     * @param {string} event - Event name
-     * @param {Function} handler - Event handler
-     * @returns {ListComponent} Component instance for chaining
-     */
     on: <K extends keyof ListEvents<T>>(event: K, handler: ListEvents<T>[K]) => ListComponent<T>;
-    /**
-     * Removes an event listener from the list
-     * @param {string} event - Event name
-     * @param {Function} handler - Event handler
-     * @returns {ListComponent} Component instance for chaining
-     */
     off: <K extends keyof ListEvents<T>>(event: K, handler: ListEvents<T>[K]) => ListComponent<T>;
-    /**
-     * Destroys the component and cleans up resources
-     */
     destroy: () => void;
 }
-/**
- * Event handlers for List
- * @interface ListEvents
- */
 export interface ListEvents<T = unknown> {
     select: (event: SelectEvent<T>) => void;
     load: (event: LoadEvent<T>) => void;

package/dist/components/loading-indicator/constants.d.ts

@@ -1,60 +1,25 @@
 import type { MaterialShapeName } from "../../core/shapes/index.js";
-/**
- * Loading indicator measurements and timing (Compose Material 3
- * LoadingIndicatorTokens.kt and LoadingIndicator.kt)
- * @category Components
- */
 export declare const LOADING_INDICATOR_DEFAULTS: {
-    /** Container width and height */
     readonly SIZE: 48;
-    /** The active indicator's diameter within a 48dp container */
     readonly INDICATOR_SIZE: 38;
-    /** Smallest size the guidelines allow */
     readonly MIN_SIZE: 24;
-    /** Largest size the guidelines allow */
     readonly MAX_SIZE: 240;
-    /** Milliseconds between two shape morphs */
     readonly MORPH_INTERVAL: 650;
-    /** Milliseconds for one full turn of the slow global rotation */
     readonly ROTATION_DURATION: 4666;
-    /** Degrees each morph turns the shape */
     readonly MORPH_ROTATION: 90;
-    /** Accessible name when none is given */
     readonly LABEL: "Loading";
-    /** Outline samples per shape */
     readonly SAMPLES: 360;
 };
-/**
- * The morph spring (Compose: `spring(dampingRatio = 0.6f, stiffness = 200f,
- * visibilityThreshold = 0.1f)`)
- * @category Components
- */
 export declare const LOADING_INDICATOR_SPRING: {
     readonly DAMPING: 0.6;
     readonly STIFFNESS: 200;
     readonly THRESHOLD: 0.1;
 };
-/**
- * The shapes the indeterminate indicator morphs through, in order
- * (LoadingIndicatorDefaults.IndeterminateIndicatorPolygons)
- * @category Components
- */
 export declare const LOADING_INDICATOR_SHAPES: readonly MaterialShapeName[];
-/**
- * The shapes the determinate indicator morphs between as the value grows
- * (LoadingIndicatorDefaults.DeterminateIndicatorPolygons)
- * @category Components
- */
 export declare const LOADING_INDICATOR_DETERMINATE_SHAPES: readonly MaterialShapeName[];
-/**
- * CSS class names used by the loading indicator, without the prefix
- * @category Components
- */
 export declare const LOADING_INDICATOR_CLASSES: {
     readonly ROOT: "loading-indicator";
-    /** Drawn on a primary-container circle */
     readonly CONTAINED: "loading-indicator--contained";
-    /** Shows a value rather than looping */
     readonly DETERMINATE: "loading-indicator--determinate";
     readonly CANVAS: "loading-indicator__canvas";
 };

package/dist/components/loading-indicator/features/renderer.d.ts

@@ -1,29 +1,15 @@
 import { RadialProfile, MaterialShapeName } from "../../../core/shapes/index.js";
 import { BaseComponent, LoadingIndicatorConfig } from "../types.js";
-/** A frame: which morph, how far along it, and the rotation in degrees */
 export interface Frame {
-    /** Index of the shape the morph starts from */
     index: number;
-    /** 0 at the shape, 1 at the next; may overshoot */
     progress: number;
-    /** Clockwise rotation in degrees */
     rotation: number;
 }
 export interface Renderer {
-    /** Draws one frame with the given shape sequence */
     draw: (shapes: readonly RadialProfile[], frame: Frame) => void;
-    /** Resizes the canvas to the element's size */
     resize: (size: number) => void;
-    /** Re-reads the indicator colour from the element's computed style */
     refreshColor: () => void;
-    /** The last frame drawn, redrawn on resize and theme change */
     redraw: () => void;
-    /** Profiles for a shape sequence, cached per name */
     profiles: (names: readonly MaterialShapeName[]) => RadialProfile[];
 }
-/**
- * Adds the canvas and the drawing routine
- * @param {LoadingIndicatorConfig} config - Component configuration
- * @returns {Function} Higher-order function that adds the renderer
- */
 export declare const withRenderer: (config: LoadingIndicatorConfig) => (component: BaseComponent) => BaseComponent;

package/dist/components/loading-indicator/loading-indicator.d.ts

@@ -1,9 +1,3 @@
 import { LoadingIndicatorConfig, LoadingIndicatorComponent } from "./types.js";
-/**
- * Creates a loading indicator: the Material 3 expressive shape morph for
- * waits under about five seconds. It animates from creation.
- * @param {LoadingIndicatorConfig} config - Loading indicator configuration
- * @returns {LoadingIndicatorComponent} Loading indicator component instance
- */
 declare const createLoadingIndicator: (config?: LoadingIndicatorConfig) => LoadingIndicatorComponent;
 export default createLoadingIndicator;

package/dist/components/loading-indicator/types.d.ts

@@ -1,61 +1,26 @@
 import type { Renderer } from "./features/renderer.js";
-/**
- * Configuration options for the loading indicator
- * @interface LoadingIndicatorConfig
- */
 export interface LoadingIndicatorConfig {
-    /** Width and height in pixels, 24 to 240 (default 48) */
     size?: number;
-    /**
-     * Draws the indicator on a primary-container circle, for use over other
-     * content; the indicator then takes on-primary-container
-     */
     contained?: boolean;
-    /**
-     * A value from 0 to 1 makes the indicator determinate: the shape morphs
-     * with the value instead of looping. Leave unset for indeterminate.
-     */
     value?: number | null;
-    /** Accessible name: what is loading (default "Loading") */
     ariaLabel?: string;
-    /** Additional CSS classes */
     class?: string;
-    /** Component prefix for CSS classes */
     prefix?: string;
-    /** Component name for CSS classes */
     componentName?: string;
 }
-/**
- * Loading indicator public API
- * @interface LoadingIndicatorComponent
- */
 export interface LoadingIndicatorComponent {
-    /** The root element */
     element: HTMLElement;
-    /** The canvas the shapes are drawn on */
     canvas: HTMLCanvasElement;
-    /** Sets a value from 0 to 1 (determinate) or null (indeterminate) */
     setValue: (value: number | null) => LoadingIndicatorComponent;
-    /** The current value, or null when indeterminate */
     getValue: () => number | null;
-    /** Sets the size in pixels, clamped to 24–240 */
     setSize: (size: number) => LoadingIndicatorComponent;
-    /** The size in pixels */
     getSize: () => number;
-    /** Sets the accessible name */
     setLabel: (label: string) => LoadingIndicatorComponent;
-    /** Runs the indeterminate animation (it runs from creation) */
     start: () => LoadingIndicatorComponent;
-    /** Freezes the indicator on its current frame */
     stop: () => LoadingIndicatorComponent;
-    /** Whether the animation is running */
     isRunning: () => boolean;
-    /** Stops the animation and removes the element */
     destroy: () => void;
 }
-/**
- * The component as it passes through the enhancers
- */
 export interface BaseComponent {
     element: HTMLElement;
     getClass?: (name: string) => string;

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

@@ -1,140 +1,61 @@
-/**
- * Menu position options for alignment relative to opener element
- */
-/**
- * Menu variants
- *
- * The baseline menu is the original M3 design: square-ish corners, a
- * surface-container container, and items that fill the width. The vertical
- * menu is the M3 expressive one: a 16dp container holding 44dp items that
- * sit 2dp apart and change shape as they are hovered, focused, pressed or
- * selected. New designs should take the vertical variant.
- * @category Components
- */
 export declare const MENU_VARIANTS: {
-    /** The original M3 menu (default, for compatibility) */
     readonly BASELINE: "baseline";
-    /** The M3 expressive vertical menu */
     readonly VERTICAL: "vertical";
 };
-/**
- * Colour mappings for the vertical menu
- *
- * Standard is surface-based and carries lower emphasis; vibrant is
- * tertiary-based, is more prominent, and should be used sparingly
- * (m3.material.io menu guidelines, "Color options").
- * @category Components
- */
 export declare const MENU_COLORS: {
     readonly STANDARD: "standard";
     readonly VIBRANT: "vibrant";
 };
 export declare const MENU_POSITION: {
-    /** Places menu below the opener, aligned to left edge */
     readonly BOTTOM_START: "bottom-start";
-    /** Places menu below the opener, centered */
     readonly BOTTOM: "bottom";
-    /** Places menu below the opener, aligned to right edge */
     readonly BOTTOM_END: "bottom-end";
-    /** Places menu above the opener, aligned to left edge */
     readonly TOP_START: "top-start";
-    /** Places menu above the opener, centered */
     readonly TOP: "top";
-    /** Places menu above the opener, aligned to right edge */
     readonly TOP_END: "top-end";
-    /** Places menu to the right of the opener, aligned to top edge */
     readonly RIGHT_START: "right-start";
-    /** Places menu to the right of the opener, centered */
     readonly RIGHT: "right";
-    /** Places menu to the right of the opener, aligned to bottom edge */
     readonly RIGHT_END: "right-end";
-    /** Places menu to the left of the opener, aligned to top edge */
     readonly LEFT_START: "left-start";
-    /** Places menu to the left of the opener, centered */
     readonly LEFT: "left";
-    /** Places menu to the left of the opener, aligned to bottom edge */
     readonly LEFT_END: "left-end";
 };
-/**
- * Default configuration values for menus
- */
 export declare const MENU_DEFAULTS: {
-    /** Default variant; the baseline menu, so existing menus are untouched */
     readonly VARIANT: "baseline";
-    /** Default colour mapping for the vertical variant */
     readonly COLOR: "standard";
-    /** Default menu position */
     readonly POSITION: "bottom-start";
-    /** Default offset from the opener (in pixels) */
     readonly OFFSET: 0;
-    /** Close menu when an item is selected */
     readonly CLOSE_ON_SELECT: true;
-    /** Close menu when clicking outside */
     readonly CLOSE_ON_CLICK_OUTSIDE: true;
-    /** Close menu when escape key is pressed */
     readonly CLOSE_ON_ESCAPE: true;
-    /** Open submenus on hover */
     readonly OPEN_SUBMENU_ON_HOVER: true;
-    /** Automatically flip menu position to stay in viewport */
     readonly AUTO_FLIP: true;
 };
-/**
- * Interaction types for menu opening/closing
- */
 export declare const MENU_INTERACTION_TYPES: {
-    /** Interaction via mouse or touch */
     readonly MOUSE: "mouse";
-    /** Interaction via keyboard */
     readonly KEYBOARD: "keyboard";
 };
-/**
- * Menu item types
- */
 export declare const MENU_ITEM_TYPES: {
-    /** Standard interactive menu item */
     readonly ITEM: "item";
-    /** Non-interactive dividing line */
     readonly DIVIDER: "divider";
 };
-/**
- * Menu event names
- */
 export declare const MENU_EVENTS: {
-    /** Fired when the menu is opened */
     readonly OPEN: "open";
-    /** Fired when the menu is closed */
     readonly CLOSE: "close";
-    /** Fired when a menu item is selected */
     readonly SELECT: "select";
 };
-/**
- * CSS classes for menu elements
- */
 export declare const MENU_CLASSES: {
-    /** Menu container */
     readonly CONTAINER: "menu";
-    /** Visible menu */
     readonly VISIBLE: "menu--visible";
-    /** Menu inner container */
     readonly INNER: "menu__inner";
-    /** Individual menu item */
     readonly ITEM: "menu__item";
-    /** Disabled menu item */
     readonly ITEM_DISABLED: "menu__item--disabled";
-    /** Selected menu item */
     readonly ITEM_SELECTED: "menu__item--selected";
-    /** Menu item with submenu */
     readonly ITEM_HAS_SUBMENU: "menu__item--has-submenu";
-    /** Divider */
     readonly DIVIDER: "menu__divider";
-    /** Item icon */
     readonly ITEM_ICON: "menu__item-icon";
-    /** Item text */
     readonly ITEM_TEXT: "menu__item-text";
-    /** Item keyboard shortcut */
     readonly ITEM_SHORTCUT: "menu__item-shortcut";
-    /** Submenu indicator */
     readonly SUBMENU_INDICATOR: "menu__submenu-indicator";
-    /** Dense/compact variant */
     readonly DENSE: "menu--dense";
 };