material 3.2.6 → 3.3.0

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

@@ -1,113 +1,53 @@
-/**
- * Select variants
- */
 export declare const SELECT_VARIANTS: {
-    /** Filled select field with solid background */
     readonly FILLED: "filled";
-    /** Outlined select field with border */
     readonly OUTLINED: "outlined";
 };
-/**
- * Select menu placement options
- */
 export declare const SELECT_PLACEMENT: {
-    /** Menu appears below the select field, aligned to the left edge */
     readonly BOTTOM_START: "bottom-start";
-    /** Menu appears below the select field, centered */
     readonly BOTTOM: "bottom";
-    /** Menu appears below the select field, aligned to the right edge */
     readonly BOTTOM_END: "bottom-end";
-    /** Menu appears above the select field, aligned to the left edge */
     readonly TOP_START: "top-start";
-    /** Menu appears above the select field, centered */
     readonly TOP: "top";
-    /** Menu appears above the select field, aligned to the right edge */
     readonly TOP_END: "top-end";
 };
-/**
- * Select interaction types
- */
 export declare const SELECT_INTERACTION: {
-    /** Interaction via mouse or touch */
     readonly MOUSE: "mouse";
-    /** Interaction via keyboard */
     readonly KEYBOARD: "keyboard";
 };
-/**
- * Select event names
- */
 export declare const SELECT_EVENTS: {
-    /** Fired when selected option changes */
     readonly CHANGE: "change";
-    /** Fired when options menu opens */
     readonly OPEN: "open";
-    /** Fired when options menu closes */
     readonly CLOSE: "close";
 };
-/**
- * Default icons for select
- */
 export declare const SELECT_ICONS: {
-    /** Dropdown arrow icon */
     readonly DROPDOWN: "<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=\"M7 10l5 5 5-5z\"/></svg>";
-    /** Checkmark icon for selected item */
     readonly CHECKMARK: "<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=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/></svg>";
 };
-/**
- * Default configuration values
- */
 export declare const SELECT_DEFAULTS: {
-    /** Default variant */
     readonly VARIANT: "filled";
-    /** Default menu placement */
     readonly PLACEMENT: "bottom-start";
-    /** Default label */
     readonly LABEL: "Select";
-    /** Default value */
     readonly VALUE: "";
-    /** Whether the select is required by default */
     readonly REQUIRED: false;
-    /** Whether the select is disabled by default */
     readonly DISABLED: false;
-    /** Default supporting text */
     readonly SUPPORTING_TEXT: "";
-    /** Whether in error state by default */
     readonly ERROR: false;
 };
-/**
- * CSS classes for select elements
- */
 export declare const SELECT_CLASSES: {
-    /** Container element */
     readonly CONTAINER: "select";
-    /** The text field (the key is two words; the value is select__text-field) */
     readonly TEXT_FIELD: "select__text-field";
-    /** Dropdown icon */
     readonly DROPDOWN_ICON: "select__dropdown-icon";
-    /** Menu container */
     readonly MENU: "select__menu";
-    /** Menu item */
     readonly MENU_ITEM: "select__menu-item";
-    /** Selected menu item */
     readonly MENU_ITEM_SELECTED: "select__menu-item--selected";
-    /** Disabled menu item */
     readonly MENU_ITEM_DISABLED: "select__menu-item--disabled";
-    /** Menu item checkmark */
     readonly MENU_ITEM_CHECKMARK: "select__menu-item-checkmark";
-    /** Menu item icon */
     readonly MENU_ITEM_ICON: "select__menu-item-icon";
-    /** Menu item text */
     readonly MENU_ITEM_TEXT: "select__menu-item-text";
-    /** Filled variant */
     readonly FILLED: "select--filled";
-    /** Outlined variant */
     readonly OUTLINED: "select--outlined";
-    /** Open state */
     readonly OPEN: "select--open";
-    /** Disabled state */
     readonly DISABLED: "select--disabled";
-    /** Required state */
     readonly REQUIRED: "select--required";
-    /** Error state */
     readonly ERROR: "select--error";
 };

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

@@ -1,26 +1,4 @@
-/**
- * Select Component Module
- *
- * The Select component provides a dropdown select control,
- * combining a text field and menu for a complete selection interface.
- *
- * @module components/select
- * @category Components
- */
 export { default, default as createSelect } from "./select.js";
 export type { SelectEvents } from "./types.js";
 export type { SelectConfig, SelectVariant, SelectComponent, SelectOption, SelectEvent, SelectChangeEvent } from "./types.js";
-/**
- * Constants for select configuration
- *
- * @example
- * import { createSelect, SELECT_VARIANTS } from 'material';
- *
- * const select = createSelect({
- *   variant: SELECT_VARIANTS.OUTLINED,
- *   options: [...]
- * });
- *
- * @category Components
- */
 export { SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES } from "./constants.js";

package/dist/components/select/select.d.ts

@@ -1,36 +1,3 @@
 import { SelectConfig, SelectComponent } from "./types.js";
-/**
- * Creates a new Select component with the specified configuration.
- *
- * The Select component implements a Material Design dropdown select control,
- * combining a text field and menu to provide a user-friendly selection interface.
- *
- * @param {SelectConfig} config - Configuration options for the select
- *  This must include an array of selection options. See {@link SelectConfig} for all available options.
- *
- * @returns {SelectComponent} A fully configured select component
- *
- * @throws {Error} Throws an error if select creation fails
- *
- * @example
- * // Create a simple country select
- * const countrySelect = createSelect({
- *   label: 'Country',
- *   options: [
- *     { id: 'us', text: 'United States' },
- *     { id: 'ca', text: 'Canada' },
- *     { id: 'mx', text: 'Mexico' }
- *   ],
- *   value: 'us' // Pre-select United States
- * });
- *
- * // Add to the DOM
- * document.body.appendChild(countrySelect.element);
- *
- * // Listen for changes
- * countrySelect.on('change', (event) => {
- *   console.log(`Selected: ${event.value} (${event.text})`);
- * });
- */
 declare const createSelect: (config: SelectConfig) => SelectComponent;
 export default createSelect;

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

@@ -1,320 +1,87 @@
 import type { MenuColor, MenuVariant } from "../menu/types.js";
 import type { MenuOwner } from "../menu/inner.js";
 import type { TextFieldComponent } from "../text-field/types.js";
-/**
- * Available Select variants
- */
 export type SelectVariant = "filled" | "outlined";
-/**
- * Select variant constants
- */
 export declare const SELECT_VARIANTS: {
     readonly FILLED: "filled";
     readonly OUTLINED: "outlined";
 };
-/**
- * Select option interface
- */
 export interface SelectOption {
-    /**
-     * Unique identifier for the option
-     */
     id: string;
-    /**
-     * Display text for the option
-     */
     text: string;
-    /**
-     * Whether the option is disabled
-     */
     disabled?: boolean;
-    /**
-     * Optional icon to display with the option.
-     * Markup (HTML). Not sanitized by default: see Markup and sanitizing.
-     */
     icon?: string;
-    /**
-     * Whether this option has a submenu
-     */
     hasSubmenu?: boolean;
-    /**
-     * Optional array of submenu options
-     * Only used when hasSubmenu is true
-     */
     submenu?: SelectOption[];
-    /**
-     * Additional data associated with the option
-     */
     data?: unknown;
 }
-/**
- * Configuration interface for the Select component
- */
 export interface SelectConfig {
-    /**
-     * Array of options to display in the select menu
-     */
     options?: SelectOption[];
-    /**
-     * Currently selected value (option id)
-     */
     value?: string;
-    /**
-     * Visual variant (filled, outlined)
-     */
     variant?: SelectVariant | string;
-    /**
-     * Density level (default, compact)
-     */
     density?: "default" | "compact" | string;
-    /**
-     * Label text
-     */
     label?: string;
-    /**
-     * Input name attribute
-     */
     name?: string;
-    /**
-     * Whether select is required
-     */
     required?: boolean;
-    /**
-     * Options handed to the select's menu. By default the menu lives inside
-     * the select's own element with no height of its own, which suits a short
-     * list in a still surface; a long list, or a select inside a scrolling or
-     * clipping container (a drawer, a sheet), wants the menu in the body with a
-     * max height, so it is neither cropped nor taller than the screen.
-     * @example { container: document.body, maxHeight: "320px" }
-     */
     menu?: {
-        /** Where the menu is mounted and positioned against; document.body for a menu that escapes a clipping container */
         container?: HTMLElement | null;
-        /** The menu's max height (a CSS length); the list scrolls inside it */
         maxHeight?: string;
-        /** Whether the menu flips above the field when there is no room below */
         autoFlip?: boolean;
-        /** The menu's variant: 'vertical' is the M3 expressive menu, items apart in a rounded container */
         variant?: MenuVariant;
-        /** The vertical variant's colour mapping */
         color?: MenuColor;
     };
-    /**
-     * `"top"` renders the menu next to the field, in the field's own tree (a
-     * shadow root included), and shows it in the browser's top layer: above
-     * every z-index and outside any clipping ancestor. `menu.container` is then
-     * not used. See the menu's `layer`.
-     */
     layer?: "top";
-    /**
-     * Whether select is disabled
-     */
     disabled?: boolean;
-    /**
-     * Supporting text content
-     */
     supportingText?: string;
-    /**
-     * Whether supporting text indicates an error
-     */
     error?: boolean;
-    /**
-     * Menu placement relative to the text field
-     */
     placement?: string;
-    /**
-     * Additional CSS classes
-     */
     class?: string;
-    /**
-     * Prefix for class names
-     */
     prefix?: string;
-    /**
-     * Component name
-     */
     componentName?: string;
-    /**
-     * Event callbacks
-     */
     on?: {
-        /**
-         * Called when the select value changes
-         */
         change?: (event: SelectChangeEvent) => void;
-        /**
-         * Called when the select menu opens
-         */
         open?: (event: SelectEvent) => void;
-        /**
-         * Called when the select menu closes
-         */
         close?: (event: SelectEvent) => void;
     };
 }
-/**
- * Select component interface
- */
 export interface SelectComponent {
-    /**
-     * The root element of the select
-     */
     element: HTMLElement;
-    /**
-     * The text field component
-     */
     textField: TextFieldComponent;
-    /**
-     * Gets the select's current value (selected option id)
-     */
     getValue: () => string | null;
-    /**
-     * Sets the select's value (by option id)
-     * @param value - Option id to select, or null/undefined to clear
-     * @returns Select component for chaining
-     */
     setValue: (value: string | null | undefined) => SelectComponent;
-    /**
-     * Clears the current selection
-     * @returns Select component for chaining
-     */
     clear: () => SelectComponent;
-    /**
-     * Gets the select's current displayed text
-     */
     getText: () => string;
-    /**
-     * Gets the selected option object
-     */
     getSelectedOption: () => SelectOption | null;
-    /**
-     * Gets all available options
-     */
     getOptions: () => SelectOption[];
-    /**
-     * Sets new options
-     * @param options - New options array
-     * @returns Select component for chaining
-     */
     setOptions: (options: SelectOption[]) => SelectComponent;
-    /**
-     * Opens the select menu. When it returns, `isOpen()` is true, the input has
-     * `aria-expanded="true"` and `open` has been emitted; the surface may be
-     * painted after `open()` returns.
-     * @param interactionType - The type of interaction ('mouse' or 'keyboard')
-     * @returns Select component for chaining
-     */
     open: (interactionType?: "mouse" | "keyboard") => SelectComponent;
-    /**
-     * Closes the select menu. When it returns, `isOpen()` is false, the input
-     * has `aria-expanded="false"` and `close` has been emitted; the surface
-     * fades after that. `close()` then `open()` at once reopens it.
-     * @returns Select component for chaining
-     */
     close: () => SelectComponent;
-    /**
-     * Checks if the menu is open
-     */
     isOpen: () => boolean;
-    /**
-     * Sets the density of the select
-     * @param density - The density level to set
-     * @returns Select component for chaining
-     */
     setDensity: (density: "default" | "compact" | string) => SelectComponent;
-    /**
-     * Gets the current density setting
-     * @returns The current density
-     */
     getDensity: () => string;
-    /**
-     * Adds an event listener
-     * @param event - Event name
-     * @param handler - Event handler
-     * @returns Select component for chaining
-     */
     on: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => SelectComponent;
-    /**
-     * Removes an event listener
-     * @param event - Event name
-     * @param handler - Event handler
-     * @returns Select component for chaining
-     */
     off: <T extends keyof SelectEvents>(event: T, handler: SelectEvents[T]) => SelectComponent;
-    /**
-     * Enables the select
-     * @returns Select component for chaining
-     */
     enable: () => SelectComponent;
-    /**
-     * Disables the select
-     * @returns Select component for chaining
-     */
     disable: () => SelectComponent;
-    /** Whether the select is disabled */
     isDisabled: () => boolean;
-    /**
-     * Sets the error state on the select
-     * @param error - Whether to show error state
-     * @param message - Optional error message to display
-     * @returns Select component for chaining
-     */
     setError: (error: boolean, message?: string) => SelectComponent;
-    /**
-     * Clears the error state on the select
-     * @returns Select component for chaining
-     */
     clearError: () => SelectComponent;
-    /**
-     * Destroys the select component
-     */
     destroy: () => void;
 }
-/**
- * What `open` and `close` carry. Neither can be cancelled: the select is
- * already open, or closed, when its listener runs. `change` cannot either:
- * the value has changed. None carries `preventDefault`.
- */
 export interface SelectEvent {
-    /**
-     * The select component
-     */
     select: SelectComponent;
-    /**
-     * Original DOM event if available
-     */
     originalEvent?: Event;
 }
-/**
- * Select change event interface
- */
 export interface SelectChangeEvent extends SelectEvent {
-    /**
-     * The selected option id
-     */
     value: string | null;
-    /**
-     * The selected option text
-     */
     text: string;
-    /**
-     * The complete selected option object
-     */
     option: SelectOption;
 }
-/**
- * Select events interface for type-checking
- * @internal
- */
 export interface SelectEvents {
     change: (event: SelectChangeEvent) => void;
     open: (event: SelectEvent) => void;
     close: (event: SelectEvent) => void;
 }
-/**
- * API options interface
- * @internal
- */
 export interface ApiOptions {
     select: {
         getValue: () => string | null;
@@ -340,10 +107,6 @@ export interface ApiOptions {
         destroy: () => void;
     };
 }
-/**
- * Select controller added by the menu feature
- * @internal
- */
 export interface SelectController {
     getValue: () => string | null;
     setValue: (value: string | null | undefined) => BaseComponent;
@@ -356,10 +119,6 @@ export interface SelectController {
     close: (event?: Event) => BaseComponent;
     isOpen: () => boolean;
 }
-/**
- * Base component interface
- * @internal
- */
 export interface BaseComponent extends MenuOwner {
     element: HTMLElement;
     textField?: TextFieldComponent;

package/dist/components/side-sheet/constants.d.ts

@@ -1,45 +1,20 @@
-/**
- * Side sheet variants.
- *
- * A standard sheet is docked: it sits in the layout beside the page and leaves
- * it usable. A modal sheet floats over the page behind a scrim and takes focus.
- * They differ in colour as well as behaviour, which is why the variant is not
- * only a class (m3.material.io/components/side-sheets).
- */
 export declare const SIDE_SHEET_VARIANTS: {
     readonly STANDARD: "standard";
     readonly MODAL: "modal";
 };
-/**
- * Which edge the sheet is docked to.
- *
- * These are logical, not physical: `end` is the right edge in a left-to-right
- * document and the left edge in a right-to-left one, so a sheet does not need
- * reconfiguring per language.
- */
 export declare const SIDE_SHEET_POSITIONS: {
     readonly START: "start";
     readonly END: "end";
 };
-/**
- * Defaults, from the M3 side sheet specs and the Android implementation.
- */
 export declare const SIDE_SHEET_DEFAULTS: {
     readonly VARIANT: "modal";
-    /** Side sheets dock to the trailing edge unless told otherwise */
     readonly POSITION: "end";
-    /** The width the Android implementation uses for a standard sheet */
     readonly WIDTH: 256;
-    /** m3.material.io side sheet specs, container maximum width */
     readonly MAX_WIDTH: 400;
-    /** A modal sheet offers a way out of itself */
     readonly CLOSE_BUTTON: true;
     readonly CLOSE_ON_SCRIM_CLICK: true;
     readonly CLOSE_ON_ESCAPE: true;
 };
-/**
- * Class names, without the prefix. `getClass` adds it.
- */
 export declare const SIDE_SHEET_CLASSES: {
     readonly ROOT: "side-sheet";
     readonly SCRIM: "side-sheet__scrim";
@@ -51,9 +26,6 @@ export declare const SIDE_SHEET_CLASSES: {
     readonly CONTENT: "side-sheet__content";
     readonly ACTIONS: "side-sheet__actions";
 };
-/**
- * Events the sheet emits.
- */
 export declare const SIDE_SHEET_EVENTS: {
     readonly OPEN: "open";
     readonly CLOSE: "close";

package/dist/components/side-sheet/side-sheet.d.ts

@@ -1,24 +1,3 @@
 import { SideSheetConfig, SideSheetComponent } from "./types.js";
-/**
- * Creates a side sheet: a surface docked to a vertical edge, holding content
- * that supports the page rather than replacing it.
- *
- * A standard sheet sits beside the page and leaves it usable. A modal sheet
- * floats over it behind a scrim and takes focus.
- *
- * @param {SideSheetConfig} config - Side sheet configuration
- * @returns {SideSheetComponent} Side sheet instance
- *
- * @example
- * ```ts
- * const filters = createSideSheet({
- *   title: 'Filters',
- *   content: '<p>Narrow the results.</p>',
- *   on: { close: () => applyFilters() }
- * });
- *
- * filters.open();
- * ```
- */
 declare const createSideSheet: (config?: SideSheetConfig) => SideSheetComponent;
 export default createSideSheet;