material 3.2.5 → 3.2.7

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

@@ -1,195 +1,53 @@
-/**
- * Configuration for a radio option in the Radios component
- * @category Components
- */
 export interface RadioOptionConfig {
-    /**
-     * Radio input value attribute
-     * @example 'option1'
-     */
     value: string;
-    /**
-     * Radio label text content
-     * @example 'Option 1'
-     */
     label: string;
-    /**
-     * Whether the radio is initially disabled
-     * @default false
-     */
     disabled?: boolean;
-    /**
-     * Whether to position the label before the radio
-     * @default false
-     */
     labelBefore?: boolean;
 }
-/**
- * Configuration interface for the Radios component
- * @category Components
- */
 export interface RadiosConfig {
-    /**
-     * Radio input name attribute used for grouping radios
-     * @example 'options'
-     */
     name: string;
-    /**
-     * Array of radio option configurations
-     */
     options?: RadioOptionConfig[];
-    /**
-     * Initial selected value
-     */
     value?: string;
-    /**
-     * Layout direction for radio buttons
-     * @default 'vertical'
-     */
     direction?: 'vertical' | 'horizontal';
-    /**
-     * Whether the entire group is initially disabled
-     * @default false
-     */
     disabled?: boolean;
-    /**
-     * Whether to enable ripple effect
-     * @default true
-     */
     ripple?: boolean;
-    /**
-     * Additional CSS classes to add to the radios component
-     */
     class?: string;
-    /**
-     * Component prefix for class names
-     * @default 'mtrl'
-     */
     prefix?: string;
-    /**
-     * Component name used in class generation
-     */
     componentName?: string;
 }
-/**
- * Interface for a single radio in the Radios component
- * @category Components
- */
 export interface RadioItem {
-    /** The radio container element */
     element: HTMLElement;
-    /** The actual radio input element */
     input: HTMLInputElement;
-    /** The label element */
     label: HTMLLabelElement;
-    /** The radio option configuration */
     config: RadioOptionConfig;
-    /** Destroys the radio and removes event listeners */
     destroy: () => void;
 }
-/** Selection or unknown-value clearing reported by the radio group. */
 export interface RadiosChangePayload {
-    /** Selected value, or null when nothing is selected: the value `getValue()` reads. */
     value: string | null;
-    /** Native input change event; undefined for programmatic clearing. */
     originalEvent: Event | undefined;
-    /** Selected option, or null when an unknown value clears selection. */
     option: RadioOptionConfig | null;
 }
-/** Group emitter events. Native input focus, blur and click are not forwarded. */
 export interface RadiosEvents {
     change: (payload: RadiosChangePayload) => void;
 }
-/**
- * Radios component interface
- * @category Components
- */
 export interface RadiosComponent {
-    /** The radios container DOM element */
     element: HTMLElement;
-    /** Array of radio items in the group */
     radios: RadioItem[];
-    /** 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 selected value
-     * @returns Selected radio value, or null if none is selected
-     */
     getValue: () => string | null;
-    /**
-     * Sets the radios component value (selects a radio). `null`, what
-     * `getValue()` returns when nothing is selected, clears the selection.
-     * Silent either way: a programmatic change emits no `change`.
-     * @param value - Value to select, or null to clear
-     * @returns The radios component for chaining
-     */
     setValue: (value: string | null) => RadiosComponent;
-    /**
-     * Gets the selected radio option's configuration
-     * @returns The selected radio option config or null
-     */
     getSelected: () => RadioOptionConfig | null;
-    /**
-     * Adds a radio option to the radios component
-     * @param option - Radio option configuration
-     * @returns The radios component for chaining
-     */
     addOption: (option: RadioOptionConfig) => RadiosComponent;
-    /**
-     * Removes a radio option from the radios component
-     * @param value - Value of the radio to remove
-     * @returns The radios component for chaining
-     */
     removeOption: (value: string) => RadiosComponent;
-    /**
-     * Enables the radios component
-     * @returns The radios component for chaining
-     */
     enable: () => RadiosComponent;
-    /**
-     * Disables the radios component
-     * @returns The radios component for chaining
-     */
     disable: () => RadiosComponent;
-    /** Whether the whole group is disabled */
     isDisabled: () => boolean;
-    /**
-     * Enables a specific radio option
-     * @param value - Value of the radio to enable
-     * @returns The radios component for chaining
-     */
     enableOption: (value: string) => RadiosComponent;
-    /**
-     * Disables a specific radio option
-     * @param value - Value of the radio to disable
-     * @returns The radios component for chaining
-     */
     disableOption: (value: string) => RadiosComponent;
-    /**
-     * Destroys the radios component and all radio items
-     */
     destroy: () => void;
-    /**
-     * Adds an event listener to the radios component
-     * @param event - Event name ('change')
-     * @param handler - Receives value, the selected option or null, and the original event if present
-     * @returns The radios component for chaining
-     */
     on: <K extends keyof RadiosEvents>(event: K, handler: RadiosEvents[K]) => RadiosComponent;
-    /**
-     * Removes an event listener from the radios component
-     * @param event - Event name
-     * @param handler - Event handler function
-     * @returns The radios component for chaining
-     */
     off: <K extends keyof RadiosEvents>(event: K, handler: RadiosEvents[K]) => RadiosComponent;
 }

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

@@ -1,34 +1,15 @@
-/**
- * Search component states (bar = collapsed, view = expanded)
- * @category Components
- */
 export declare const SEARCH_STATES: {
-    /** Collapsed search bar state */
     readonly BAR: "bar";
-    /** Expanded search view state */
     readonly VIEW: "view";
 };
-/**
- * Search view display modes
- * @category Components
- */
 export declare const SEARCH_VARIANTS: {
-    /** M3 Expressive: a filled bar, results in their own container */
     readonly CONTAINED: "contained";
-    /** Baseline: a divider between the bar and its results */
     readonly DIVIDED: "divided";
 };
 export declare const SEARCH_VIEW_MODES: {
-    /** Inline docked view (360-720dp width, max 2/3 screen height) */
     readonly DOCKED: "docked";
-    /** Full-screen overlay view */
     readonly FULLSCREEN: "fullscreen";
 };
-/**
- * MD3 Search component measurements
- * @see https://m3.material.io/components/search/specs
- * @category Components
- */
 export declare const SEARCH_MEASUREMENTS: {
     readonly BAR_HEIGHT: 56;
     readonly BAR_MIN_WIDTH: 360;
@@ -43,68 +24,32 @@ export declare const SEARCH_MEASUREMENTS: {
     readonly AVATAR_SIZE: 30;
     readonly ICON_SPACING: 16;
 };
-/**
- * Search component event types
- * @category Components
- */
 export declare const SEARCH_EVENTS: {
-    /** Fired when search input receives focus */
     readonly FOCUS: "focus";
-    /** Fired when search input loses focus */
     readonly BLUR: "blur";
-    /** Fired when input value changes */
     readonly INPUT: "input";
-    /** Fired when search is submitted (Enter key or submit action) */
     readonly SUBMIT: "submit";
-    /** Fired when search input is cleared */
     readonly CLEAR: "clear";
-    /** Fired when search bar expands to view */
     readonly EXPAND: "expand";
-    /** Fired when search view collapses to bar */
     readonly COLLAPSE: "collapse";
-    /** Fired when a suggestion is selected */
     readonly SUGGESTION_SELECT: "suggestionSelect";
 };
-/**
- * Default search icons (MD3 standard)
- * @category Components
- */
 export declare const SEARCH_ICONS: {
-    /** Search/magnifying glass icon */
     readonly SEARCH: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"/></svg>";
-    /** Back/arrow left icon (for view state) */
     readonly BACK: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z\"/></svg>";
-    /** Clear/close icon */
     readonly CLEAR: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>";
-    /** Microphone icon (voice search) */
     readonly MIC: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z\"/></svg>";
-    /** History/clock icon (for recent searches) */
     readonly HISTORY: "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z\"/></svg>";
 };
-/**
- * Default configuration values
- * @category Components
- */
 export declare const SEARCH_DEFAULTS: {
-    /** Default state (collapsed bar) */
     readonly STATE: "bar";
-    /** Default view mode when expanded */
     readonly VIEW_MODE: "docked";
-    /** Default placeholder/supporting text */
     readonly PLACEHOLDER: "Search";
-    /** Default value */
     readonly VALUE: "";
-    /** Whether to show clear button when input has value */
     readonly SHOW_CLEAR_BUTTON: true;
-    /** Default disabled state */
     readonly DISABLED: false;
-    /** Default full-width state */
     readonly FULL_WIDTH: false;
 };
-/**
- * CSS class names used by the search component
- * @category Components
- */
 export declare const SEARCH_CLASSES: {
     readonly ROOT: "search";
     readonly STATE_BAR: "search--bar";
@@ -139,10 +84,6 @@ export declare const SEARCH_CLASSES: {
     readonly SUGGESTION_DIVIDER: "search__suggestion-divider";
     readonly STATUS: "search__status";
 };
-/**
- * Keyboard keys for search interaction
- * @category Components
- */
 export declare const SEARCH_KEYS: {
     readonly ENTER: "Enter";
     readonly ESCAPE: "Escape";

package/dist/components/search/search.d.ts

@@ -1,35 +1,3 @@
 import { SearchConfig, SearchComponent } from "./types.js";
-/**
- * Creates a new Search component following Material Design 3 specifications
- *
- * The Search component provides:
- * - Search Bar: Collapsed state with pill shape (56dp height)
- * - Search View: Expanded state with suggestions (docked or fullscreen)
- *
- * @example
- * ```ts
- * // Basic search bar
- * const search = createSearch({
- *   placeholder: 'Search products...',
- *   onSubmit: (event) => console.log('Search:', event.value)
- * });
- *
- * // Search with suggestions
- * const search = createSearch({
- *   placeholder: 'Search...',
- *   suggestions: ['Apple', 'Banana', 'Cherry'],
- *   onSuggestionSelect: (event) => console.log('Selected:', event.suggestion)
- * });
- *
- * // Fullscreen search view (mobile)
- * const search = createSearch({
- *   viewMode: 'fullscreen',
- *   expandOnFocus: true
- * });
- * ```
- *
- * @param config Search configuration object
- * @returns Search component instance
- */
 declare const createSearch: (config?: SearchConfig) => SearchComponent;
 export default createSearch;

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

@@ -1,94 +1,34 @@
-/**
- * Search component state
- * - 'bar': Collapsed search bar (default)
- * - 'view': Expanded search view with suggestions
- */
 export type SearchState = "bar" | "view";
-/**
- * Search view display mode
- * - 'docked': Inline expanded view (360-720dp width, max 2/3 screen height)
- * - 'fullscreen': Full-screen overlay (mobile-first)
- */
 export type SearchViewMode = "docked" | "fullscreen";
-/**
- * Search variant, M3's style
- * - 'contained': M3 Expressive. The bar keeps its pill and filled container
- *   when focused, and the results sit in their own container
- * - 'divided': the baseline. The bar squares off and a divider separates the
- *   results
- */
 export type SearchVariant = "contained" | "divided";
-/**
- * Valid event types for search component per MD3 spec: the names in {@link SearchEvents}
- */
 export type SearchEventType = keyof SearchEvents;
-/**
- * Trailing content item configuration
- */
 export interface SearchTrailingItem {
-    /** Unique identifier for the item */
     id: string;
-    /**
-     * HTML content (icon SVG or avatar image).
-     * Markup (HTML). Not sanitized by default: see Markup and sanitizing.
-     * An avatar is not a person's name or an image URL.
-     */
     content: string;
-    /** Type of trailing content */
     type: "icon" | "avatar";
-    /** Accessible label for the item */
     ariaLabel?: string;
-    /** Click handler */
     onClick?: (event: MouseEvent) => void;
 }
-/**
- * Search suggestion item
- */
 export interface SearchSuggestion {
-    /** Display text */
     text: string;
-    /** Value to use when selected (defaults to text) */
     value?: string;
-    /** Optional leading icon HTML. Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     icon?: string;
-    /** A second line under the text: a two-line list item */
     supportingText?: string;
-    /** Optional group identifier for dividers */
     group?: string;
 }
-/**
- * Search event data
- */
 export interface SearchEvent {
-    /** The search component instance */
     component: SearchComponent;
-    /** Current search value */
     value: string;
-    /** Original DOM event if available */
     originalEvent: Event | null;
-    /** Selected suggestion (for suggestionSelect event) */
     suggestion?: SearchSuggestion;
-    /** Prevents default behavior */
     preventDefault: () => void;
-    /** Whether default was prevented */
     defaultPrevented: boolean;
 }
-/**
- * What `expand` and `collapse` carry: the search after the change. Not a
- * {@link SearchEvent}: there is no value, no DOM event and nothing to prevent.
- */
 export interface SearchStateEvent {
-    /** The search component instance */
     component: SearchComponent;
-    /** The state after the change: `view` on expand, `bar` on collapse */
     state: SearchState;
-    /** The view mode the search has */
     viewMode: SearchViewMode;
 }
-/**
- * The search's events and what each hands its listener. A config `on*` option
- * is the same listener, registered at creation.
- */
 export interface SearchEvents {
     focus: (event: SearchEvent) => void;
     blur: (event: SearchEvent) => void;
@@ -99,186 +39,87 @@ export interface SearchEvents {
     expand: (event: SearchStateEvent) => void;
     collapse: (event: SearchStateEvent) => void;
 }
-/**
- * Configuration options for the Search component
- * Aligned with Material Design 3 specifications
- */
 export interface SearchConfig {
-    /** Initial state: 'bar' (collapsed) or 'view' (expanded). Default: 'bar' */
     initialState?: SearchState;
-    /** View mode when expanded: 'docked' or 'fullscreen'. Default: 'docked' */
     viewMode?: SearchViewMode;
-    /** 'contained' (M3 Expressive) or 'divided' (baseline). Default: 'contained' */
     variant?: SearchVariant;
-    /** Whether the search component is disabled */
     disabled?: boolean;
-    /** Placeholder/supporting text. Default: 'Search' */
     placeholder?: string;
-    /** Initial input value */
     value?: string;
-    /**
-     * Form field name. Set on the text input itself, so the search takes part
-     * in a surrounding form and its value appears in `FormData`. Without it the
-     * search submits nothing.
-     */
     name?: string;
-    /** Custom leading icon HTML (replaces default search icon). Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     leadingIcon?: string;
-    /** Trailing content items (icons, avatar) */
     trailingItems?: SearchTrailingItem[];
-    /** Suggestions to display in view mode */
     suggestions?: SearchSuggestion[] | string[];
-    /** Show clear button when input has value. Default: true */
     showClearButton?: boolean;
-    /** Auto-expand to view on focus. Default: true */
     expandOnFocus?: boolean;
-    /** Auto-collapse on blur (with delay). Default: true */
     collapseOnBlur?: boolean;
-    /** Collapse delay in ms when collapseOnBlur is true. Default: 150 */
     collapseDelay?: number;
-    /** Minimum width in pixels. Default: 360 */
     minWidth?: number;
-    /** Maximum width in pixels. Default: 720 */
     maxWidth?: number;
-    /** Full width mode (ignores min/max width) */
     fullWidth?: boolean;
-    /** Additional CSS classes */
     class?: string;
-    /** Component prefix for class names */
     prefix?: string;
-    /** `submit` listener registered at creation. */
     onSubmit?: SearchEvents["submit"];
-    /** `input` listener registered at creation. */
     onInput?: SearchEvents["input"];
-    /** `clear` listener registered at creation. */
     onClear?: SearchEvents["clear"];
-    /** `expand` listener registered at creation. */
     onExpand?: SearchEvents["expand"];
-    /** `collapse` listener registered at creation. */
     onCollapse?: SearchEvents["collapse"];
-    /** `suggestionSelect` listener registered at creation. */
     onSuggestionSelect?: SearchEvents["suggestionSelect"];
-    /** Event handlers map */
     on?: Partial<SearchEvents>;
 }
-/**
- * Search component public API interface
- * Aligned with Material Design 3 specifications
- */
 export interface SearchComponent {
-    /** The root element of the search component */
     element: HTMLElement;
-    /** Sets the search input value. Silent unless `triggerEvent` is true. */
     setValue: (value: string, triggerEvent?: boolean) => SearchComponent;
-    /** Gets the current search input value */
     getValue: () => string;
-    /** Sets the placeholder/supporting text */
     setPlaceholder: (text: string) => SearchComponent;
-    /** Gets the current placeholder text */
     getPlaceholder: () => string;
-    /** Expands to search view */
     expand: () => SearchComponent;
-    /** Collapses to search bar */
     collapse: () => SearchComponent;
-    /** Gets the current state ('bar' or 'view') */
     getState: () => SearchState;
-    /** Checks if currently expanded */
     isExpanded: () => boolean;
-    /** Sets the view mode ('docked' or 'fullscreen') */
     setViewMode: (mode: SearchViewMode) => SearchComponent;
-    /** Gets the current view mode */
     getViewMode: () => SearchViewMode;
-    /** Sets the variant ('contained' or 'divided') */
     setVariant: (variant: SearchVariant) => SearchComponent;
-    /** Gets the current variant */
     getVariant: () => SearchVariant;
-    /** Focuses the search input */
     focus: () => SearchComponent;
-    /** Blurs the search input */
     blur: () => SearchComponent;
-    /** Clears the search input. Silent: only the clear button emits `input` and `clear`. */
     clear: () => SearchComponent;
-    /** Submits the current search value */
     submit: () => SearchComponent;
-    /** Sets the leading icon HTML */
     setLeadingIcon: (iconHtml: string) => SearchComponent;
-    /** Adds a trailing item */
     addTrailingItem: (item: SearchTrailingItem) => SearchComponent;
-    /** Removes a trailing item by id */
     removeTrailingItem: (id: string) => SearchComponent;
-    /** Sets all trailing items */
     setTrailingItems: (items: SearchTrailingItem[]) => SearchComponent;
-    /** Sets the suggestions list */
     setSuggestions: (suggestions: SearchSuggestion[] | string[]) => SearchComponent;
-    /** Gets the current suggestions */
     getSuggestions: () => SearchSuggestion[];
-    /** Clears all suggestions */
     clearSuggestions: () => SearchComponent;
-    /** Enables the search component */
     enable: () => SearchComponent;
-    /** Disables the search component */
     disable: () => SearchComponent;
-    /** Checks if the component is disabled */
     isDisabled: () => boolean;
-    /** Adds an event listener */
     on: <K extends keyof SearchEvents>(event: K, handler: SearchEvents[K]) => SearchComponent;
-    /** Removes an event listener */
     off: <K extends keyof SearchEvents>(event: K, handler: SearchEvents[K]) => SearchComponent;
-    /** Destroys the component and cleans up resources */
     destroy: () => void;
 }
-/**
- * Internal component structure references
- * @internal
- */
 export interface SearchStructure {
-    /**
-     * The bar and, when expanded, its results: what shows in the top layer while
-     * the view is open
-     */
     surface: HTMLElement;
-    /** Main container element */
     container: HTMLElement;
-    /** Input element */
     input: HTMLInputElement;
-    /** Input wrapper element */
     inputWrapper: HTMLElement;
-    /** Leading icon container */
     leadingIcon: HTMLElement;
-    /** Clear button element */
     clearButton: HTMLElement | null;
-    /** Trailing items container */
     trailingContainer: HTMLElement | null;
-    /** Header divider (view mode) */
     divider: HTMLElement | null;
-    /** Suggestions container (view mode) */
     suggestionsContainer: HTMLElement | null;
-    /** Suggestions list element */
     suggestionsList: HTMLElement | null;
-    /** The live region that announces the suggestion count */
     status: HTMLElement;
 }
-/**
- * Internal search state
- * @internal
- */
 export interface SearchInternalState {
-    /** Current component state */
     state: SearchState;
-    /** Current view mode */
     viewMode: SearchViewMode;
-    /** Current input value */
     value: string;
-    /** Current placeholder */
     placeholder: string;
-    /** Whether input is focused */
     isFocused: boolean;
-    /** Whether component is disabled */
     isDisabled: boolean;
-    /** Current suggestions */
     suggestions: SearchSuggestion[];
-    /** Currently highlighted suggestion index (-1 = none) */
     highlightedIndex: number;
-    /** Trailing items */
     trailingItems: SearchTrailingItem[];
 }