material 3.2.6 → 3.3.0

package/dist/components/fab-menu/types.d.ts

@@ -1,19 +1,11 @@
 import type { ElementComponent } from "../../core/compose/index.js";
 import type { BaseComponentConfig } from "../../core/config/component.js";
 import type { FabMenuColor, FabMenuSize, FabMenuPresentation, FabMenuPlacement } from "./constants.js";
-/** An action of the menu */
 export interface FabMenuItem {
-    /** Identifies the item in `select` */
     id: string;
-    /** The label: always shown (m3.material.io FAB menu guidelines) */
     text: string;
-    /** Icon HTML, 24dp. Markup (HTML). Not sanitized by default: see Markup and sanitizing. The menu opts out of server rendering, so the server leaves this escaped until the component upgrades. */
     icon?: string;
 }
-/**
- * What the menu presentation needs from a menu: the baseline menu
- * (createMenu), or one the app brings.
- */
 export interface FabMenuMenu {
     open(event?: Event, interactionType?: "mouse" | "keyboard"): unknown;
     close(event?: Event, restoreFocus?: boolean): unknown;
@@ -24,107 +16,35 @@ export interface FabMenuMenu {
     destroy(): void;
     element: HTMLElement;
 }
-/**
- * Configuration of a FAB menu
- * @category Components
- * @see https://m3.material.io/components/fab-menu/overview
- */
 export interface FabMenuConfig extends BaseComponentConfig {
-    /** The FAB's icon HTML. Markup (HTML). Not sanitized by default: see Markup and sanitizing. The menu opts out of server rendering, so the server leaves this escaped until the component upgrades. */
     icon: string;
-    /** The FAB's accessible name: it describes the menu the FAB opens */
     ariaLabel: string;
-    /**
-     * The actions, 2 to 6 (m3.material.io FAB menu guidelines). Top to bottom:
-     * the last one is nearest the FAB.
-     */
     items: FabMenuItem[];
-    /**
-     * Colour set: the FAB is the role's container, the close button the role,
-     * the items the container
-     * @default 'primary'
-     */
     color?: FabMenuColor | string;
-    /**
-     * The size of the FAB the menu opens from
-     * @default 'default'
-     */
     size?: FabMenuSize | string;
-    /**
-     * The expressive list (compact windows), the baseline menu (the site's rule
-     * on the web), or either by the window's width
-     * @default 'auto'
-     */
     presentation?: FabMenuPresentation | string;
-    /**
-     * Where the FAB sits in its positioned container: 16dp from the window
-     * edges, 24dp in large windows. `'none'` leaves it in the flow.
-     * @default 'none'
-     */
     placement?: FabMenuPlacement | string;
-    /** The icon of the close button, 20dp. Default: a close icon. Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     closeIcon?: string;
-    /**
-     * A menu of the app's own for the menu presentation, in place of the
-     * baseline menu the FAB menu loads when it needs one. Built with the FAB as
-     * its opener; the FAB menu opens and closes it.
-     */
     menu?: (opener: HTMLElement, items: FabMenuItem[]) => FabMenuMenu;
-    /** Additional CSS classes */
     class?: string;
 }
-/** Events of a FAB menu */
 export interface FabMenuEvents {
-    /** The menu opened */
     open: () => void;
-    /** The menu closed */
     close: () => void;
-    /**
-     * An item was chosen; the menu closes. `value` is the item's id again, as
-     * the `value` of `<m-fab-menu>`'s `select` (the payload rule)
-     */
     select: (event: {
         id: string;
         value: string;
     }) => void;
 }
-/**
- * A FAB menu
- * @category Components
- */
 export interface FabMenuComponent extends ElementComponent {
-    /** The FAB, which becomes the close button of the list */
     fab: HTMLElement;
-    /** The list of the list presentation: `role="menu"` */
     list: HTMLElement;
-    /**
-     * Opens the menu. When it returns, `isOpen()` is true, the FAB has
-     * `aria-expanded="true"` and `open` has been emitted. In the `menu`
-     * presentation the surface is a module loaded on demand: it may be painted
-     * after `open()` returns, and not at all when `close()` comes first. On an
-     * open menu it does nothing and emits nothing.
-     *
-     * While that module loads for the first time: Escape and a click outside
-     * do not close the menu yet (they are the surface's own, once it is
-     * shown), and a second click on the FAB does; opened again, the surface
-     * opens as the last call asked; and if the module fails to load the menu
-     * closes again, with `close`. On `<m-fab-menu>` opened by its `open`
-     * attribute, which dispatches no `open`, that `close` is dispatched alone.
-     */
     open(event?: Event): this;
-    /**
-     * Closes the menu. When it returns, `isOpen()` is false and `close` has
-     * been emitted. On a closed menu it does nothing and emits nothing.
-     */
     close(): this;
-    /** Opens or closes the menu */
     toggle(event?: Event): this;
-    /** Whether the menu is open */
     isOpen(): boolean;
-    /** The presentation in use: 'list' or 'menu' */
     getPresentation(): "list" | "menu";
     on<K extends keyof FabMenuEvents>(event: K, handler: FabMenuEvents[K]): this;
     off<K extends keyof FabMenuEvents>(event: K, handler: FabMenuEvents[K]): this;
-    /** Removes the FAB menu, its listeners and its menu */
     destroy(): void;
 }

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

@@ -1,125 +1,44 @@
-/**
- * IconButton variants following Material Design 3 guidelines
- *
- * Four built-in color styles, in order of emphasis:
- * - filled: Highest emphasis, key actions
- * - tonal: High emphasis, secondary actions
- * - outlined: Medium emphasis, not main focus
- * - standard: Lowest emphasis, on colorful surfaces
- */
 export declare const ICON_BUTTON_VARIANTS: {
-    /** Primary action button with solid background (highest emphasis) */
     readonly FILLED: "filled";
-    /** Secondary action button with tonal background (high emphasis) */
     readonly TONAL: "tonal";
-    /** Button with outline border and transparent background (medium emphasis) */
     readonly OUTLINED: "outlined";
-    /** Button with no background, just icon (lowest emphasis) */
     readonly STANDARD: "standard";
 };
-/**
- * IconButton variant type
- */
 export type IconButtonVariant = typeof ICON_BUTTON_VARIANTS[keyof typeof ICON_BUTTON_VARIANTS];
-/**
- * IconButton sizes following Material Design 3 specifications
- *
- * | Size | Container | Icon Size |
- * |------|-----------|-----------|
- * | XS   | 32dp      | 20dp      |
- * | S    | 40dp      | 24dp      |
- * | M    | 56dp      | 24dp      |
- * | L    | 96dp      | 32dp      |
- * | XL   | 136dp     | 40dp      |
- */
 export declare const ICON_BUTTON_SIZES: {
-    /** Extra small - 32px container, 20px icon */
     readonly XS: "xs";
-    /** Small - 40px container, 24px icon (default) */
     readonly S: "s";
-    /** Medium - 56px container, 24px icon */
     readonly M: "m";
-    /** Large - 96px container, 32px icon */
     readonly L: "l";
-    /** Extra large - 136px container, 40px icon */
     readonly XL: "xl";
 };
-/**
- * IconButton size type
- */
 export type IconButtonSize = typeof ICON_BUTTON_SIZES[keyof typeof ICON_BUTTON_SIZES];
-/**
- * IconButton shapes following Material Design 3 specifications
- *
- * - round: Full corner radius (default)
- * - square: Fixed corner radius per size
- */
 export declare const ICON_BUTTON_SHAPES: {
-    /** Round shape - full corner radius (default) */
     readonly ROUND: "round";
-    /** Square shape - fixed corner radius based on size */
     readonly SQUARE: "square";
 };
-/**
- * IconButton shape type
- */
 export type IconButtonShape = typeof ICON_BUTTON_SHAPES[keyof typeof ICON_BUTTON_SHAPES];
-/**
- * IconButton width variants following Material Design 3 specifications
- *
- * | Size | Narrow | Default | Wide   |
- * |------|--------|---------|--------|
- * | XS   | 28dp   | 32dp    | 40dp   |
- * | S    | 32dp   | 40dp    | 52dp   |
- * | M    | 48dp   | 56dp    | 72dp   |
- * | L    | 64dp   | 96dp    | 128dp  |
- * | XL   | 104dp  | 136dp   | 184dp  |
- */
 export declare const ICON_BUTTON_WIDTHS: {
-    /** Narrow width */
     readonly NARROW: "narrow";
-    /** Default width */
     readonly DEFAULT: "default";
-    /** Wide width */
     readonly WIDE: "wide";
 };
-/**
- * IconButton width type
- */
 export type IconButtonWidth = typeof ICON_BUTTON_WIDTHS[keyof typeof ICON_BUTTON_WIDTHS];
-/**
- * Button types for IconButton
- */
 export declare const ICON_BUTTON_TYPES: {
     readonly BUTTON: "button";
     readonly SUBMIT: "submit";
     readonly RESET: "reset";
 };
-/**
- * CSS classes used by the IconButton component
- */
 export declare const ICON_BUTTON_CLASSES: {
-    /** Root element class */
     readonly ROOT: "icon-button";
-    /** Class for the icon container */
     readonly ICON: "icon-button__icon";
-    /** Applied when button is selected (toggle state) */
     readonly SELECTED: "icon-button--selected";
-    /** Applied when button is disabled */
     readonly DISABLED: "icon-button--disabled";
-    /** Applied when button is pressed (for shape morph) */
     readonly PRESSED: "icon-button--pressed";
 };
-/**
- * Default ripple effect configuration for IconButton
- */
 export declare const DEFAULT_RIPPLE_CONFIG: {
     readonly DURATION: 450;
 };
-/**
- * Corner radius values for square shape per size (in dp)
- * Round shape uses full corner radius (50%)
- */
 export declare const ICON_BUTTON_CORNER_RADIUS: {
     readonly XS: {
         readonly square: 12;
@@ -142,9 +61,6 @@ export declare const ICON_BUTTON_CORNER_RADIUS: {
         readonly pressed: 16;
     };
 };
-/**
- * Icon sizes per button size (in dp)
- */
 export declare const ICON_BUTTON_ICON_SIZES: {
     readonly XS: 20;
     readonly S: 24;
@@ -152,9 +68,6 @@ export declare const ICON_BUTTON_ICON_SIZES: {
     readonly L: 32;
     readonly XL: 40;
 };
-/**
- * Container sizes per button size (in dp)
- */
 export declare const ICON_BUTTON_CONTAINER_SIZES: {
     readonly XS: 32;
     readonly S: 40;
@@ -162,9 +75,6 @@ export declare const ICON_BUTTON_CONTAINER_SIZES: {
     readonly L: 96;
     readonly XL: 136;
 };
-/**
- * Width values per size and width variant (in dp)
- */
 export declare const ICON_BUTTON_WIDTH_VALUES: {
     readonly XS: {
         readonly narrow: 28;

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

@@ -1,86 +1,3 @@
 import { IconButtonConfig, IconButtonComponent } from "./types.js";
-/**
- * Creates a new IconButton component with the specified configuration.
- *
- * IconButtons display actions in a compact form using icons. They must use
- * a system icon with a clear meaning. IconButtons support both default
- * (single action) and toggle (binary state) modes.
- *
- * The IconButton component is created using a functional composition pattern,
- * applying various features through the pipe function. This approach allows
- * for flexible and modular component construction.
- *
- * @param config - Configuration options for the icon button
- *   This can include icon content, variant styling, size, shape, width,
- *   toggle behavior, and other properties. See {@link IconButtonConfig}
- *   for available options.
- *
- * @returns A fully configured IconButton component instance with
- *   all requested features applied. The returned component has methods for
- *   manipulation, event handling, and lifecycle management.
- *
- * @throws Error if IconButton creation fails for any reason
- *
- * @example
- * ```ts
- * // Create a standard icon button
- * const menuButton = createIconButton({
- *   icon: '<svg>...</svg>',
- *   ariaLabel: 'Open menu'
- * });
- *
- * // Create a filled icon button
- * const addButton = createIconButton({
- *   icon: '<svg>...</svg>',
- *   variant: 'filled',
- *   ariaLabel: 'Add item'
- * });
- *
- * // Create a toggle icon button (favorite)
- * const favoriteButton = createIconButton({
- *   icon: '<svg>...</svg>', // outlined heart
- *   selectedIcon: '<svg>...</svg>', // filled heart
- *   toggle: true,
- *   variant: 'standard',
- *   ariaLabel: 'Add to favorites'
- * });
- *
- * // Listen for toggle events
- * favoriteButton.on('change', ({ selected }) => {
- *   console.log('Selected:', selected);
- * });
- *
- * // Create different sizes
- * const smallButton = createIconButton({
- *   icon: '<svg>...</svg>',
- *   size: 'xs',
- *   ariaLabel: 'Small action'
- * });
- *
- * const largeButton = createIconButton({
- *   icon: '<svg>...</svg>',
- *   size: 'xl',
- *   variant: 'tonal',
- *   ariaLabel: 'Large action'
- * });
- *
- * // Create square shaped button
- * const squareButton = createIconButton({
- *   icon: '<svg>...</svg>',
- *   shape: 'square',
- *   variant: 'outlined',
- *   ariaLabel: 'Square action'
- * });
- *
- * // Create with different widths
- * const wideButton = createIconButton({
- *   icon: '<svg>...</svg>',
- *   width: 'wide',
- *   ariaLabel: 'Wide action'
- * });
- * ```
- *
- * @category Components
- */
 declare const createIconButton: (config: IconButtonConfig) => IconButtonComponent;
 export default createIconButton;

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

@@ -1,47 +1,3 @@
-/**
- * @module IconButton
- *
- * Icon Button component following Material Design 3 guidelines.
- * Icon buttons display actions in a compact form using icons.
- * They support both default (single action) and toggle (binary state) modes.
- *
- * Features:
- * - Four variants (filled, tonal, outlined, standard)
- * - Five size options (xs, s, m, l, xl)
- * - Shape options (round, square)
- * - Width options (narrow, default, wide)
- * - Toggle mode with selected/unselected states
- * - Shape morphing on press and selection (CSS-driven)
- * - Ripple effect on interaction
- * - Full accessibility support
- *
- * @example
- * ```typescript
- * // Create a standard icon button
- * const menuButton = createIconButton({
- *   icon: '<svg viewBox="0 0 24 24">...</svg>',
- *   ariaLabel: 'Open menu'
- * });
- *
- * // Create a toggle icon button (favorite)
- * const favoriteButton = createIconButton({
- *   icon: '<svg>...</svg>', // outlined heart
- *   selectedIcon: '<svg>...</svg>', // filled heart
- *   toggle: true,
- *   ariaLabel: 'Add to favorites'
- * });
- *
- * // Listen for toggle events
- * favoriteButton.on('change', ({ selected }) => {
- *   console.log('Selected:', selected);
- * });
- *
- * // Attach to DOM
- * container.appendChild(menuButton.element);
- * ```
- *
- * @category Components
- */
 export { default, default as createIconButton } from "./icon-button.js";
 export type { IconButtonConfig, IconButtonComponent, IconButtonEvents, IconButtonChangePayload, IconAPI, ToggleManager } from "./types.js";
 export { ICON_BUTTON_VARIANTS, ICON_BUTTON_SIZES, ICON_BUTTON_SHAPES, ICON_BUTTON_WIDTHS, ICON_BUTTON_CLASSES, ICON_BUTTON_CONTAINER_SIZES, ICON_BUTTON_ICON_SIZES, ICON_BUTTON_WIDTH_VALUES, ICON_BUTTON_CORNER_RADIUS } from "./constants.js";