material 3.2.6 → 3.3.0

package/dist/components/icon-button/types.d.ts

@@ -2,402 +2,88 @@ import type { TouchEvents } from "../../core/utils/mobile.js";
 import type { ForwardedEventPayload } from "../../core/dom/index.js";
 import { BaseComponentConfig } from "../../core/config/component.js";
 import { IconButtonVariant, IconButtonSize, IconButtonShape, IconButtonWidth } from "./constants.js";
-/**
- * Configuration interface for the IconButton component
- *
- * IconButtons display actions in a compact form using icons.
- * They support both default (single action) and toggle (binary state) modes.
- *
- * @category Components
- * @see https://m3.material.io/components/icon-buttons/overview
- */
 export interface IconButtonConfig extends BaseComponentConfig {
-    /**
-     * IconButton variant that determines visual styling
-     * - filled: Highest emphasis, key actions
-     * - tonal: High emphasis, secondary actions
-     * - outlined: Medium emphasis, not main focus
-     * - standard: Lowest emphasis, on colorful surfaces
-     *
-     * @default 'standard'
-     */
     variant?: IconButtonVariant | string;
-    /**
-     * IconButton size variant
-     * - xs: 32px container, 18px icon
-     * - s: 40px container, 24px icon (default)
-     * - m: 56px container, 24px icon
-     * - l: 96px container, 36px icon
-     * - xl: 136px container, 48px icon
-     *
-     * @default 's'
-     */
     size?: IconButtonSize | string;
-    /**
-     * IconButton shape variant
-     * - round: Full corner radius (default)
-     * - square: Fixed corner radius based on size
-     *
-     * @default 'round'
-     */
     shape?: IconButtonShape | string;
-    /**
-     * IconButton width variant
-     * - narrow: Narrower than default
-     * - default: Standard width matching container size
-     * - wide: Wider than default
-     *
-     * @default 'default'
-     */
     width?: IconButtonWidth | string;
-    /**
-     * Whether the IconButton is initially disabled
-     * @default false
-     */
     disabled?: boolean;
-    /**
-     * Icon HTML content (required for icon buttons).
-     * Markup (HTML). Not sanitized by default: see Markup and sanitizing.
-     * Can be SVG, icon font ligature, or any valid HTML
-     *
-     * @example '<svg viewBox="0 0 24 24">...</svg>'
-     * @example '<span class="material-icons">favorite</span>'
-     */
     icon?: string;
-    /**
-     * Selected state icon HTML content (for toggle buttons).
-     * Markup (HTML). Not sanitized by default: see Markup and sanitizing.
-     * When provided, enables toggle mode
-     * Use filled icon style for selected state
-     *
-     * @example '<svg viewBox="0 0 24 24">...</svg>' // filled heart
-     */
     selectedIcon?: string;
-    /**
-     * Whether the IconButton supports toggle (selection) behavior
-     * When true, the button can be selected/unselected
-     *
-     * @default false
-     */
     toggle?: boolean;
-    /**
-     * Initial selected state (only applies when toggle is true)
-     * @default false
-     */
     selected?: boolean;
-    /**
-     * Whether a click flips the selected state of a toggle button. Set to
-     * false when a container (button group) owns the selection.
-     * @default true
-     */
     toggleOnClick?: boolean;
-    /**
-     * Additional CSS classes to add to the IconButton
-     */
     class?: string;
-    /**
-     * Button value attribute
-     */
     value?: string;
-    /**
-     * Button type attribute
-     * @default 'button'
-     */
     type?: 'button' | 'submit' | 'reset';
-    /**
-     * Whether to enable ripple effect
-     * @default true
-     */
     ripple?: boolean;
-    /**
-     * Component prefix for class names
-     * @default 'mtrl'
-     */
     prefix?: string;
-    /**
-     * Component name used in class generation
-     * @internal
-     */
     componentName?: string;
-    /**
-     * Ripple effect configuration
-     */
     rippleConfig?: {
-        /** How long, in milliseconds, a released wave lingers before it is removed */
         duration?: number;
     };
-    /**
-     * Accessible name for the IconButton (aria-label)
-     * Required for accessibility since icon buttons have no visible text
-     * Should describe the action, not the icon name
-     *
-     * @example 'Add to favorites'
-     * @example 'Open menu'
-     */
-    /**
-     * Accessible name. Required: an icon-only control has no text for a screen
-     * reader to announce, so without this it is just "button" (WCAG 4.1.2).
-     */
     ariaLabel: string;
-    /**
-     * Whether to show tooltip on hover
-     * Tooltip text uses ariaLabel value
-     *
-     * @default true
-     */
     tooltip?: boolean;
 }
-/**
- * Icon API interface for managing IconButton icons
- * @category Components
- */
 export interface IconAPI {
-    /**
-     * Sets the icon HTML content
-     * @param html - HTML string for the icon
-     * @returns The icon API for chaining
-     */
     setIcon: (html: string) => IconAPI;
-    /**
-     * Gets the current icon HTML content
-     * @returns HTML string for the icon
-     */
     getIcon: () => string;
-    /**
-     * Gets the icon DOM element
-     * @returns The icon element or null if not present
-     */
     getElement: () => HTMLElement | null;
 }
-/**
- * Toggle state manager interface for IconButton
- * @category Components
- */
 export interface ToggleManager {
-    /**
-     * Selects the IconButton (toggle on)
-     * @returns ToggleManager instance for chaining
-     */
     select: () => ToggleManager;
-    /**
-     * Deselects the IconButton (toggle off)
-     * @returns ToggleManager instance for chaining
-     */
     deselect: () => ToggleManager;
-    /**
-     * Toggles the selection state
-     * @returns ToggleManager instance for chaining
-     */
     toggle: () => ToggleManager;
-    /**
-     * Checks if the IconButton is currently selected
-     * @returns true if selected
-     */
     isSelected: () => boolean;
 }
-/** A toggle icon button's `change`. */
 export interface IconButtonChangePayload {
-    /** Whether the button is now selected */
     selected: boolean;
-    /** The button's value, as `getValue()` returns it */
     value: string;
 }
-/**
- * The icon button's events: native ones forwarded through its emitter, and a
- * toggle button's `change`.
- */
 export interface IconButtonEvents extends TouchEvents {
-    /**
-     * A toggle button's selected state changed on a click. The DOM
-     * `toggle` event on `element` is deprecated and goes in the next release.
-     * `value` is the button's value (`getValue()`), as every model event
-     * carries; `selected` is the toggled state.
-     */
     change: (payload: IconButtonChangePayload) => void;
-    /** Clicks are not forwarded while the button is disabled. */
     click: (payload: ForwardedEventPayload<MouseEvent, HTMLButtonElement>) => void;
-    /** The button took focus. */
     focus: (payload: ForwardedEventPayload<FocusEvent, HTMLButtonElement>) => void;
-    /** The button lost focus. */
     blur: (payload: ForwardedEventPayload<FocusEvent, HTMLButtonElement>) => void;
 }
-/**
- * IconButton component interface
- * @category Components
- */
 export interface IconButtonComponent {
-    /** The IconButton's DOM element */
     element: HTMLButtonElement;
-    /** API for managing IconButton icons */
     icon: IconAPI;
-    /** API for managing disabled state */
     disabled: {
-        /** Enables the IconButton */
         enable: () => void;
-        /** Disables the IconButton */
         disable: () => void;
-        /** Checks if the IconButton is disabled */
         isDisabled: () => boolean;
     };
-    /** API for managing component lifecycle */
     lifecycle: {
-        /** Destroys the component and cleans up resources */
         destroy: () => void;
     };
-    /**
-     * Gets a class name with the component's prefix
-     * @param name - Base class name
-     * @returns Prefixed class name
-     */
     getClass: (name: string) => string;
-    /**
-     * Gets the IconButton's value attribute
-     * @returns IconButton value
-     */
     getValue: () => string;
-    /**
-     * Sets the IconButton's value attribute
-     * @param value - New value
-     * @returns The IconButton component for chaining
-     */
     setValue: (value: string) => IconButtonComponent;
-    /**
-     * Gets the IconButton's current variant
-     * @returns Current variant name
-     */
     getVariant: () => IconButtonVariant | string;
-    /**
-     * Sets the IconButton's variant
-     * @param variant - New variant to apply
-     * @returns The IconButton component for chaining
-     */
     setVariant: (variant: IconButtonVariant | string) => IconButtonComponent;
-    /**
-     * Gets the IconButton's current size
-     * @returns Current size name
-     */
     getSize: () => IconButtonSize | string;
-    /**
-     * Sets the IconButton's size
-     * @param size - New size to apply
-     * @returns The IconButton component for chaining
-     */
     setSize: (size: IconButtonSize | string) => IconButtonComponent;
-    /**
-     * Gets the IconButton's current shape
-     * @returns Current shape name
-     */
     getShape: () => IconButtonShape | string;
-    /**
-     * Sets the IconButton's shape
-     * @param shape - New shape to apply
-     * @returns The IconButton component for chaining
-     */
     setShape: (shape: IconButtonShape | string) => IconButtonComponent;
-    /**
-     * Gets the IconButton's current width
-     * @returns Current width name
-     */
     getWidth: () => IconButtonWidth | string;
-    /**
-     * Sets the IconButton's width
-     * @param width - New width to apply
-     * @returns The IconButton component for chaining
-     */
     setWidth: (width: IconButtonWidth | string) => IconButtonComponent;
-    /**
-     * Enables the IconButton
-     * @returns The IconButton component for chaining
-     */
     enable: () => IconButtonComponent;
-    /**
-     * Disables the IconButton
-     * @returns The IconButton component for chaining
-     */
     disable: () => IconButtonComponent;
-    /** Whether the icon button is disabled */
     isDisabled: () => boolean;
-    /**
-     * Sets the IconButton's icon
-     * @param icon - Icon HTML content
-     * @returns The IconButton component for chaining
-     */
     setIcon: (icon: string) => IconButtonComponent;
-    /**
-     * Gets the IconButton's icon HTML content
-     * @returns Icon HTML
-     */
     getIcon: () => string;
-    /**
-     * Sets the selected state icon (for toggle buttons)
-     * @param icon - Icon HTML content for selected state
-     * @returns The IconButton component for chaining
-     */
     setSelectedIcon: (icon: string) => IconButtonComponent;
-    /**
-     * Gets the selected state icon HTML content
-     * @returns Selected icon HTML or empty string if not set
-     */
     getSelectedIcon: () => string;
-    /**
-     * Checks if the IconButton is in toggle mode
-     * @returns true if toggle mode is enabled
-     */
     isToggle: () => boolean;
-    /**
-     * Selects the IconButton (for toggle buttons)
-     * @returns The IconButton component for chaining
-     */
     select: () => IconButtonComponent;
-    /**
-     * Deselects the IconButton (for toggle buttons)
-     * @returns The IconButton component for chaining
-     */
     deselect: () => IconButtonComponent;
-    /**
-     * Toggles the selection state (for toggle buttons)
-     * @returns The IconButton component for chaining
-     */
     toggleSelected: () => IconButtonComponent;
-    /**
-     * Checks if the IconButton is selected
-     * @returns true if selected
-     */
     isSelected: () => boolean;
-    /**
-     * Sets the aria-label attribute for accessibility
-     * @param label - Aria label text
-     * @returns The IconButton component for chaining
-     */
     setAriaLabel: (label: string) => IconButtonComponent;
-    /**
-     * Destroys the IconButton component and cleans up resources
-     */
     destroy: () => void;
-    /**
-     * Adds an event listener to the IconButton
-     * @param event - Forwarded event name: 'click', 'focus', or 'blur'
-     * @param handler - Receives the native event and button root in a payload
-     * @returns The IconButton component for chaining
-     */
     on: <K extends keyof IconButtonEvents>(event: K, handler: IconButtonEvents[K]) => IconButtonComponent;
-    /**
-     * Removes an event listener from the IconButton
-     * @param event - Event name
-     * @param handler - Event handler function
-     * @returns The IconButton component for chaining
-     */
     off: <K extends keyof IconButtonEvents>(event: K, handler: IconButtonEvents[K]) => IconButtonComponent;
-    /**
-     * Adds CSS classes to the IconButton element
-     * @param classes - One or more class names to add
-     * @returns The IconButton component for chaining
-     */
     addClass: (...classes: string[]) => IconButtonComponent;
-    /**
-     * Removes CSS classes from the IconButton element
-     * @param classes - One or more class names to remove
-     * @returns The IconButton component for chaining
-     */
     removeClass: (...classes: string[]) => IconButtonComponent;
 }

package/dist/components/index.d.ts

@@ -1,12 +1,3 @@
-/**
- * Component library exports
- *
- * This file exports all component creators and their types.
- * Constants are NOT re-exported here to enable proper tree-shaking.
- * Import constants directly from component paths if needed.
- *
- * @packageDocumentation
- */
 export { default as createBadge } from "./badge/index.js";
 export { default as createBottomAppBar } from "./bottom-app-bar/index.js";
 export { default as createBottomSheet } from "./bottom-sheet/index.js";

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

@@ -1,86 +1,39 @@
-/**
- * Default list item configuration
- */
 export declare const LIST_DEFAULTS: {
-    /** Default collection name for API-connected lists */
     readonly COLLECTION: "items";
-    /** Default API base URL */
     readonly BASE_URL: "http://localhost:4000/api";
-    /** Default number of items per page */
     readonly PAGE_SIZE: 20;
-    /** Default number of extra items to render above/below viewport */
     readonly RENDER_BUFFER_SIZE: 5;
-    /** Default item height in pixels */
     readonly ITEM_HEIGHT: 56;
 };
-/**
- * List variants (m3.material.io lists)
- * - STANDARD: the baseline list: no container, square rows (default)
- * - SEGMENTED: the expressive list: each row paints its own container and
- *   shape, 2px apart
- */
 export declare const LIST_VARIANTS: {
     readonly STANDARD: "standard";
     readonly SEGMENTED: "segmented";
 };
-/**
- * List types for rendering and behavior
- */
 export declare const LIST_TYPES: {
-    /** Standard list with no selection */
     readonly DEFAULT: "default";
-    /** List with single-select behavior */
     readonly SINGLE_SELECT: "single-select";
-    /** List with multi-select behavior */
     readonly MULTI_SELECT: "multi-select";
 };
-/**
- * List selection modes
- */
 export declare const LIST_SELECTION_MODES: {
-    /** No selection allowed */
     readonly NONE: "none";
-    /** Only one item can be selected at a time */
     readonly SINGLE: "single";
-    /** Multiple items can be selected */
     readonly MULTIPLE: "multiple";
 };
-/**
- * List events
- */
 export declare const LIST_EVENTS: {
-    /** Fired when an item is selected */
     readonly SELECT: "select";
-    /** Fired when items are loaded */
     readonly LOAD: "load";
-    /** Fired when the list is scrolled */
     readonly SCROLL: "scroll";
 };
-/**
- * Scroll position options for scrollToItem method
- */
 export declare const LIST_SCROLL_POSITIONS: {
-    /** Align item at the top of viewport */
     readonly START: "start";
-    /** Center item in the viewport */
     readonly CENTER: "center";
-    /** Align item at the bottom of viewport */
     readonly END: "end";
 };
-/**
- * CSS classes used in the list component
- */
 export declare const LIST_CLASSES: {
-    /** Container element */
     readonly CONTAINER: "list";
-    /** List element */
     readonly LIST: "list";
-    /** List item */
     readonly ITEM: "list__item";
-    /** Selected list item */
     readonly SELECTED: "list__item--selected";
-    /** Loading indicator */
     readonly LOADING: "list--loading";
-    /** Empty state */
     readonly EMPTY: "list--empty";
 };

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

@@ -1,4 +1,3 @@
-/** Material list anatomy for static data. */
 export { default, default as createList } from "./list.js";
 export { LIST_DEFAULTS, LIST_VARIANTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, } from "./constants.js";
 export type { ListConfig, ListVariant, ListItem, ListSlot, ListComponent, SelectEvent, LoadEvent, } from "./types.js";

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

@@ -1,29 +1,3 @@
 import type { ListComponent, ListConfig, ListItem } from "./types.js";
-/**
- * Creates a new List component
- *
- * The List component provides a simple way to render static arrays of data
- * with Material item anatomy and built-in selection capabilities.
- *
- * `variant` is the list's style. `'standard'` (the default) is the baseline
- * list: no container, square rows in every state. `'segmented'` is the
- * expressive list: each row paints its own container colour and shape, with
- * a gap between rows; the list itself has no background and no radius.
- *
- * A segmented list reads five custom properties, named as the button's
- * `--mtrl-button-shape` and `--mtrl-button-shape-pressed`:
- * `--mtrl-list-item-shape` (4px at rest), `--mtrl-list-item-shape-outer`
- * (16px, the outer corners of the first and the last row),
- * `--mtrl-list-item-shape-hover` (12px), `--mtrl-list-item-shape-active`
- * (16px focused, pressed or selected) and `--mtrl-list-segmented-gap` (2px
- * between rows). The row colour is `--mtrl-list-item-container-color` in
- * both variants (surface by default in standard, surface-container in
- * segmented); set it to `transparent` for rows without their own colour.
- * The list reads these and does not declare them, so set them on the list,
- * on any ancestor, or on the `<m-list>` element.
- *
- * @param config - Configuration options for the list
- * @returns List component instance
- */
 declare const createList: (config?: Partial<ListConfig<ListItem>>) => ListComponent<ListItem>;
 export default createList;