material 3.2.5 → 3.2.7

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

@@ -1,270 +1,70 @@
 import type { ForwardedEventPayload } from "../../core/dom/index.js";
 import { BaseComponentConfig } from "../../core/config/component.js";
-/**
- * Drawer variant type — controls layout behavior
- * @category Components
- * @remarks
- * - standard: Inline drawer, can be permanently visible or toggled. Best for expanded+ window sizes.
- * - modal: Overlay drawer with scrim. Best for compact/medium window sizes.
- */
 export type DrawerVariant = "standard" | "modal";
-/**
- * Drawer position — which edge the drawer anchors to
- * @category Components
- */
 export type DrawerPosition = "start" | "end";
-/**
- * Configuration for a navigation destination item
- * @category Components
- */
 export interface DrawerItemConfig {
-    /** Item type — defaults to 'item' if omitted */
     type?: "item" | "divider" | "section";
-    /** Unique identifier for the item */
     id?: string;
-    /** Destination label text */
     label?: string;
-    /** Icon HTML content (placed before label). Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     icon?: string;
-    /** Badge text (e.g. unread count) */
     badge?: string;
-    /** Whether this item is initially active/selected */
     active?: boolean;
-    /** Section label text (only when type is 'section') */
     sectionLabel?: string;
-    /** Whether the item is disabled */
     disabled?: boolean;
 }
-/**
- * Event detail emitted when a drawer item is selected
- * @category Components
- */
 export interface DrawerSelectEvent {
-    /** The selected item's id */
     id: string;
-    /** The id again, as the `value` of the `<m-drawer>` element's `change` */
     value: string;
-    /** The selected item's label */
     label: string;
-    /** The selected item's index within navigation items (excludes dividers/sections) */
     index: number;
-    /** The underlying DOM event */
     originalEvent: Event;
 }
-/** Events emitted by drawer state, navigation items and root DOM forwarding. */
 export interface DrawerEvents {
     open: () => void;
     close: () => void;
-    /** User activation only; setActive() is silent. */
     select: (payload: DrawerSelectEvent) => void;
     click: (payload: ForwardedEventPayload<MouseEvent, HTMLElement>) => void;
     keydown: (payload: ForwardedEventPayload<KeyboardEvent, HTMLElement>) => void;
 }
-/**
- * Configuration interface for the Drawer component
- * @category Components
- */
 export interface DrawerConfig extends BaseComponentConfig {
-    /**
-     * Drawer variant that determines layout behavior
-     * @default 'standard'
-     */
     variant?: DrawerVariant | string;
-    /**
-     * Drawer anchor position
-     * @default 'start'
-     */
     position?: DrawerPosition | string;
-    /**
-     * Whether the drawer is initially open
-     * @default false
-     */
     open?: boolean;
-    /**
-     * Whether the modal drawer can be dismissed by clicking the scrim, or with
-     * Escape.
-     *
-     * Escape is a key press, handled by the topmost open modal only, after
-     * whatever is open inside it has had the key: `false` holds for any number
-     * of presses. The remaining limit, with `layer: "top"`: a close request
-     * that is not a key press (a back gesture) is the browser's `cancel`, which
-     * it forces on the third refusal in a row.
-     * @default true
-     */
     dismissible?: boolean;
-    /**
-     * `"top"` makes a modal drawer's root a `<dialog>` element, rendered where
-     * the drawer is, and opens it with `showModal()`: in the browser's top
-     * layer, above every z-index and outside any clipping ancestor, with the
-     * rest of the page inert, a shadow root's page included. The scrim is its
-     * `::backdrop`, and Escape reaches the drawer as the dialog's `cancel`
-     * event. The sheet slides as without it.
-     *
-     * A standard drawer stays in the page, and where the browser has no
-     * `showModal()` the drawer behaves as without it.
-     */
     layer?: "top";
-    /**
-     * Optional headline text displayed at the top of the drawer
-     * @example 'Mail'
-     */
     headline?: string;
-    /**
-     * The drawer's accessible name. Default: the headline, or "Navigation".
-     */
     ariaLabel?: string;
-    /**
-     * Navigation items configuration array.
-     * Supports destination items, dividers, and section labels.
-     * @example
-     * [
-     *   { id: 'inbox', label: 'Inbox', icon: '<svg>...</svg>', badge: '24', active: true },
-     *   { type: 'divider' },
-     *   { type: 'section', label: 'Labels' },
-     *   { id: 'family', label: 'Family', icon: '<svg>...</svg>' },
-     * ]
-     */
     items?: DrawerItemConfig[];
-    /**
-     * Drawer width as a CSS value
-     * @default 360
-     */
     width?: string | number;
-    /**
-     * When true, renders a compact drawer with smaller items and tighter spacing.
-     * Useful in dense UIs like admin panels where the standard 56px item height
-     * is too large.
-     * @default false
-     */
     dense?: boolean;
-    /**
-     * Whether items show a ripple on press. The ripple is clipped to the
-     * item shape, so it reads as part of the active indicator.
-     * @default true
-     */
     ripple?: boolean;
-    /**
-     * Additional CSS classes to add to the drawer
-     */
     class?: string;
-    /**
-     * Component prefix for class names
-     * @default 'mtrl'
-     */
     prefix?: string;
-    /**
-     * Component name used in class generation
-     */
     componentName?: string;
-    /** `select` listener registered at creation. */
     onSelect?: DrawerEvents["select"];
-    /** `open` listener registered at creation. */
     onOpen?: DrawerEvents["open"];
-    /** `close` listener registered at creation. */
     onClose?: DrawerEvents["close"];
 }
-/**
- * Drawer component interface — public API
- * @category Components
- */
 export interface DrawerComponent {
-    /** The drawer's root DOM element */
     element: HTMLElement;
-    /**
-     * Gets a class name with the component's prefix
-     * @param name - Base class name
-     * @returns Prefixed class name
-     */
     getClass: (name: string) => string;
-    /**
-     * Opens the drawer
-     * @returns The drawer component for chaining
-     */
     open: () => DrawerComponent;
-    /**
-     * Closes the drawer
-     * @returns The drawer component for chaining
-     */
     close: () => DrawerComponent;
-    /**
-     * Toggles the drawer open/closed state
-     * @returns The drawer component for chaining
-     */
     toggle: () => DrawerComponent;
-    /**
-     * Checks if the drawer is currently open
-     * @returns True if the drawer is open
-     */
     isOpen: () => boolean;
-    /**
-     * Sets the active navigation item by id
-     * @param id - Item id to activate
-     * @returns The drawer component for chaining
-     */
     setActive: (id: string) => DrawerComponent;
-    /**
-     * Gets the currently active item id
-     * @returns Active item id or null
-     */
     getActive: () => string | null;
-    /** Reads the current model value without changing selection. */
     getValue: () => string | null;
-    /**
-     * Sets the headline text
-     * @param text - Headline text
-     * @returns The drawer component for chaining
-     */
     setHeadline: (text: string) => DrawerComponent;
-    /**
-     * Gets the headline text
-     * @returns Headline text
-     */
     getHeadline: () => string;
-    /**
-     * Sets the navigation items
-     * @param items - Array of item configurations
-     * @returns The drawer component for chaining
-     */
     setItems: (items: DrawerItemConfig[]) => DrawerComponent;
-    /**
-     * Gets the current items configuration
-     * @returns Array of item configurations
-     */
     getItems: () => DrawerItemConfig[];
-    /**
-     * Sets a badge on a specific item
-     * @param id - Item id
-     * @param badge - Badge text or empty string to remove
-     * @returns The drawer component for chaining
-     */
     setBadge: (id: string, badge: string) => DrawerComponent;
-    /**
-     * Adds an event listener
-     * @param event - Event name ('select', 'open', 'close')
-     * @param handler - Event handler function
-     * @returns The drawer component for chaining
-     */
     on: <K extends keyof DrawerEvents>(event: K, handler: DrawerEvents[K]) => DrawerComponent;
-    /**
-     * Removes an event listener
-     * @param event - Event name
-     * @param handler - Event handler function
-     * @returns The drawer component for chaining
-     */
     off: <K extends keyof DrawerEvents>(event: K, handler: DrawerEvents[K]) => DrawerComponent;
-    /**
-     * Adds CSS classes to the drawer element
-     * @param classes - One or more class names to add
-     * @returns The drawer component for chaining
-     */
     addClass: (...classes: string[]) => DrawerComponent;
-    /**
-     * Destroys the drawer component and cleans up resources
-     */
     destroy: () => void;
-    /** API for managing component lifecycle */
     lifecycle: {
-        /** Destroys the component and cleans up resources */
         destroy: () => void;
     };
 }

package/dist/components/extended-fab/constants.d.ts

@@ -1,92 +1,46 @@
-/**
- * Extended FAB variants following Material Design 3 guidelines
- */
 export declare const EXTENDED_FAB_VARIANTS: {
-    /** Primary container colour (default) */
     readonly PRIMARY_CONTAINER: "primary-container";
-    /** Secondary container colour */
     readonly SECONDARY_CONTAINER: "secondary-container";
-    /** Tertiary container colour */
     readonly TERTIARY_CONTAINER: "tertiary-container";
-    /** Primary tone colour */
     readonly PRIMARY: "primary";
-    /** Secondary tone colour */
     readonly SECONDARY: "secondary";
-    /** Tertiary tone colour */
     readonly TERTIARY: "tertiary";
 };
-/** Expressive extended FAB sizes. */
 export declare const EXTENDED_FAB_SIZES: {
     readonly SMALL: "small";
     readonly MEDIUM: "medium";
     readonly LARGE: "large";
 };
-/**
- * Extended FAB width behavior
- */
 export declare const EXTENDED_FAB_WIDTH: {
-    /** Maintains a constant width regardless of content (default) */
     readonly FIXED: "fixed";
-    /** Adjusts width based on content length */
     readonly FLUID: "fluid";
 };
-/**
- * Extended FAB position on the screen
- */
 export declare const EXTENDED_FAB_POSITIONS: {
-    /** Position in the top-right corner */
     readonly TOP_RIGHT: "top-right";
-    /** Position in the top-left corner */
     readonly TOP_LEFT: "top-left";
-    /** Position in the bottom-right corner (most common for primary actions) */
     readonly BOTTOM_RIGHT: "bottom-right";
-    /** Position in the bottom-left corner */
     readonly BOTTOM_LEFT: "bottom-left";
 };
-/**
- * Icon position options
- */
 export declare const EXTENDED_FAB_ICON_POSITIONS: {
-    /** Icon appears before the text (default) */
     readonly START: "start";
-    /** Icon appears after the text */
     readonly END: "end";
 };
-/**
- * Extended FAB CSS classes
- */
 export declare const EXTENDED_FAB_CLASSES: {
-    /** Root element class */
     readonly ROOT: "extended-fab";
-    /** Class for the icon container */
     readonly ICON: "extended-fab__icon";
-    /** Class for the text container */
     readonly TEXT: "extended-fab__text";
-    /** Applied to fixed width FABs */
     readonly FIXED: "extended-fab--fixed";
-    /** Applied to fluid width FABs */
     readonly FLUID: "extended-fab--fluid";
-    /** Applied when FAB is lowered (pressed state) */
     readonly LOWERED: "extended-fab--lowered";
-    /** Applied when FAB is collapsed to a regular FAB */
     readonly COLLAPSED: "extended-fab--collapsed";
-    /** Applied when icon is positioned at the end */
     readonly ICON_END: "extended-fab--icon-end";
 };
-/**
- * Button types for Extended FAB
- */
 export declare const EXTENDED_FAB_TYPES: {
     readonly BUTTON: "button";
     readonly SUBMIT: "submit";
     readonly RESET: "reset";
 };
-/**
- * Default animations for Extended FAB
- */
 export declare const EXTENDED_FAB_ANIMATIONS: {
-    /** Entrance animation duration in milliseconds */
     readonly ENTRANCE_DURATION: 250;
-    /** Collapse/expand animation duration in milliseconds */
     readonly COLLAPSE_DURATION: 200;
 };

package/dist/components/extended-fab/extended-fab.d.ts

@@ -1,61 +1,3 @@
 import { ExtendedFabConfig, ExtendedFabComponent } from "./types.js";
-/**
- * Creates a new Extended Floating Action Button (Extended FAB) component
- *
- * Extended FABs are a variant of the standard Floating Action Button that include
- * both an icon and text label. They're designed for primary actions that need
- * more description than just an icon, and can be positioned in various corners
- * of the interface.
- *
- * Extended FABs follow Material Design 3 guidelines with support for:
- * - Multiple color variants (primary, secondary, tertiary, surface)
- * - Icon and text label configuration
- * - Fixed or fluid width
- * - Automatic collapse on scroll
- * - Various positioning options
- *
- * @param {ExtendedFabConfig} config - Extended FAB configuration object
- * @returns {ExtendedFabComponent} Extended FAB component instance
- *
- * @throws {Error} If the Extended FAB cannot be created due to invalid configuration
- *
- * @category Components
- *
- * @example
- * ```typescript
- * // Create a basic Extended FAB with icon and text
- * const extendedFab = createExtendedFab({
- *   icon: '<svg>...</svg>',
- *   text: 'Create',
- *   ariaLabel: 'Create new item'
- * });
- *
- * // Create a tertiary Extended FAB with a custom position
- * const customExtendedFab = createExtendedFab({
- *   text: 'Add to cart',
- *   icon: '<svg>...</svg>',
- *   variant: 'tertiary',
- *   position: 'bottom-right',
- *   collapseOnScroll: true
- * });
- *
- * // Add click handler
- * extendedFab.on('click', () => {
- *   console.log('Extended FAB clicked');
- * });
- *
- * // Attach to DOM
- * document.body.appendChild(extendedFab.element);
- *
- * // Programmatically collapse and expand
- * document.querySelector('#collapseBtn').addEventListener('click', () => {
- *   extendedFab.collapse();
- * });
- *
- * document.querySelector('#expandBtn').addEventListener('click', () => {
- *   extendedFab.expand();
- * });
- * ```
- */
 declare const createExtendedFab: (config?: ExtendedFabConfig) => ExtendedFabComponent;
 export default createExtendedFab;

package/dist/components/extended-fab/index.d.ts

@@ -1,36 +1,2 @@
-/**
- * @module ExtendedFab
- *
- * Extended Floating Action Button (Extended FAB) component following Material Design 3 guidelines.
- * Extended FABs are wider than standard FABs, containing both an icon and a text label.
- * They provide a primary action that's prominently displayed and easily accessible.
- *
- * Features:
- * - Multiple variants (primary, secondary, tertiary, surface)
- * - Icon and text label combination
- * - Configurable positioning
- * - Collapsible behavior on scroll
- * - Ripple effect on interaction
- * - Accessibility support
- *
- * @example
- * ```typescript
- * // Create a primary Extended FAB with icon and text
- * const extendedFab = createExtendedFab({
- *   text: 'Create',
- *   icon: '<svg>...</svg>',
- *   position: 'bottom-right',
- *   collapseOnScroll: true
- * });
- *
- * // Attach to DOM and add click handler
- * container.appendChild(extendedFab.element);
- * extendedFab.on('click', () => {
- *   console.log('Extended FAB clicked');
- * });
- * ```
- *
- * @category Components
- */
 export { default, default as createExtendedFab } from "./extended-fab.js";
 export type { ExtendedFabConfig, ExtendedFabComponent, ExtendedFabEvents, ExtendedFabVariant, ExtendedFabSize, ExtendedFabWidth, ExtendedFabPosition } from "./types.js";