material 3.2.6 → 3.3.0

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

@@ -1,132 +1,59 @@
-/**
- * Where the snackbar sits along the bottom edge
- * @category Components
- */
 export declare const SNACKBAR_POSITIONS: {
-    /** Centred (default) */
     readonly CENTER: "center";
-    /** Against the leading edge */
     readonly START: "start";
-    /** Against the trailing edge */
     readonly END: "end";
 };
-/**
- * Duration presets (Compose Material 3 `SnackbarDuration`)
- * @category Components
- */
 export declare const SNACKBAR_DURATIONS: {
-    /** 4 seconds, the default without an action */
     readonly SHORT: "short";
-    /** 10 seconds */
     readonly LONG: "long";
-    /** Stays until acted on or dismissed, the default with an action */
     readonly INDEFINITE: "indefinite";
 };
-/**
- * Milliseconds behind the presets; 0 means no auto-dismiss
- * @category Components
- */
 export declare const SNACKBAR_DURATION_MS: {
     readonly short: 4000;
     readonly long: 10000;
     readonly indefinite: 0;
 };
-/**
- * Snackbar visibility states
- * @category Components
- */
 export declare const SNACKBAR_STATES: {
     readonly VISIBLE: "visible";
     readonly HIDDEN: "hidden";
 };
-/**
- * Snackbar queue behaviors
- *
- * Controls how a newly shown snackbar interacts with the one currently on
- * screen and any still waiting in the queue.
- * @category Components
- */
 export declare const SNACKBAR_QUEUE_BEHAVIORS: {
-    /** Wait in line: shown one at a time, in order (default) */
     readonly QUEUE: "queue";
-    /** Replace: dismiss the current snackbar, drop any pending ones, and show
-     *  this snackbar right away (last wins) */
     readonly REPLACE: "replace";
 };
-/**
- * Snackbar event types
- * @category Components
- */
 export declare const SNACKBAR_EVENTS: {
-    /** The snackbar is on screen */
     readonly OPEN: "open";
-    /** The snackbar is leaving; the event carries the reason */
     readonly CLOSE: "close";
-    /** The action button was clicked */
     readonly ACTION: "action";
-    /** Fired with `close`; the queue listens to it */
     readonly DISMISS: "dismiss";
 };
-/**
- * Why a snackbar closed
- * @category Components
- */
 export declare const SNACKBAR_CLOSE_REASONS: {
-    /** The duration ran out */
     readonly TIMEOUT: "timeout";
-    /** The action was clicked */
     readonly ACTION: "action";
-    /** The close icon was clicked */
     readonly CLOSE_BUTTON: "close-button";
-    /** Escape was pressed while focus was inside */
     readonly ESCAPE: "escape";
-    /** `hide()` was called */
     readonly API: "api";
-    /** The queue replaced or cleared it */
     readonly QUEUE: "queue";
 };
-/**
- * Default configuration values for snackbar
- * @category Components
- */
 export declare const SNACKBAR_DEFAULTS: {
-    /** Default display position */
     readonly POSITION: "center";
-    /** Default queue behavior */
     readonly QUEUE_BEHAVIOR: "queue";
-    /** Delay in milliseconds between a dismissed snackbar and the next one */
     readonly QUEUE_GAP: 200;
-    /** Accessible name of the close icon */
     readonly CLOSE_LABEL: "Dismiss";
-    /** The longest of the exit transitions, after which the element is
-     *  removed whether or not `transitionend` came */
     readonly ANIMATION_DURATION: 425;
-    /** An action wider than this moves below the text
-     *  (`design_snackbar_action_inline_max_width`) */
     readonly ACTION_INLINE_MAX_WIDTH: 128;
 };
-/**
- * CSS class names used by the snackbar component, without the prefix
- * @category Components
- */
 export declare const SNACKBAR_CLASSES: {
     readonly ROOT: "snackbar";
     readonly CENTER: "snackbar--center";
     readonly START: "snackbar--start";
     readonly END: "snackbar--end";
     readonly VISIBLE: "snackbar--visible";
-    /** An action is present */
     readonly WITH_ACTION: "snackbar--with-action";
-    /** A close icon is present */
     readonly DISMISSIBLE: "snackbar--dismissible";
-    /** The action is too wide to sit beside the text */
     readonly ACTION_BELOW: "snackbar--action-below";
     readonly TEXT: "snackbar__text";
     readonly ACTION: "snackbar__action";
     readonly CLOSE: "snackbar__close";
 };
-/**
- * The close icon (Material Symbols "close")
- * @category Components
- */
 export declare const SNACKBAR_CLOSE_ICON: string;

package/dist/components/snackbar/snackbar.d.ts

@@ -1,17 +1,4 @@
 import { SnackbarConfig, SnackbarComponent } from "./types.js";
-/**
- * Creates a new Snackbar component
- * @param {SnackbarConfig} config - Snackbar configuration
- * @returns {SnackbarComponent} Snackbar component instance
- */
 declare const createSnackbar: (config: SnackbarConfig) => SnackbarComponent;
-/**
- * Dismisses the snackbar on screen and drops the ones still waiting.
- *
- * Messages belong to the thing that raised them: a drawer that closes, an
- * account that signs out. Without this the queue outlives them, so a message
- * about a list nobody is looking at any more stays on screen, and, because the
- * queue shows one at a time, the next message waits behind it.
- */
 export declare const clearSnackbars: () => void;
 export default createSnackbar;

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

@@ -1,187 +1,64 @@
 import type { EventCallback } from "../../core/state/emitter.js";
 import type { ButtonComponent } from "../button/types.js";
 import type { IconButtonComponent } from "../icon-button/types.js";
-/**
- * Where the snackbar sits along the bottom edge
- */
 export type SnackbarPosition = 'center' | 'start' | 'end';
-/**
- * Duration presets: 4 s, 10 s, or until dismissed
- */
 export type SnackbarDurationPreset = 'short' | 'long' | 'indefinite';
-/**
- * A preset or a number of milliseconds (0 for indefinite)
- */
 export type SnackbarDuration = SnackbarDurationPreset | number;
-/**
- * Available snackbar queue behaviors
- */
 export type SnackbarQueueBehavior = 'queue' | 'replace';
-/**
- * Snackbar visibility states
- */
 export type SnackbarState = 'visible' | 'queued' | 'hidden';
-/**
- * Why a snackbar closed
- */
 export type SnackbarCloseReason = 'timeout' | 'action' | 'close-button' | 'escape' | 'api' | 'queue';
-/**
- * Available snackbar event types
- */
 export type SnackbarEventType = 'open' | 'close' | 'action' | 'dismiss';
-/**
- * Snackbar event data
- * @interface SnackbarEvent
- */
 export interface SnackbarEvent {
-    /** The snackbar component that triggered the event */
     snackbar: SnackbarComponent;
-    /** Why the snackbar closed (`close` and `dismiss` events) */
     reason?: SnackbarCloseReason;
-    /** Original DOM event if there was one */
     originalEvent: Event | null;
 }
-/**
- * What each snackbar event hands its handler.
- *
- * `on`/`off` are generic over these keys rather than taking a
- * `SnackbarEventType` and one payload type for all four, so a handler is
- * checked against the event it is registered for. The four payloads are the
- * same shape today; the map is what makes them able to differ -- `reason` is
- * only ever set on `close` and `dismiss`, and narrowing those two is now a
- * local change rather than a new signature.
- *
- * @interface SnackbarEvents
- */
 export interface SnackbarEvents {
-    /** The snackbar is on screen */
     open: (event: SnackbarEvent) => void;
-    /** The snackbar is leaving; the event carries the reason */
     close: (event: SnackbarEvent) => void;
-    /** The action button was clicked */
     action: (event: SnackbarEvent) => void;
-    /** Fired with `close`; the queue listens to it */
     dismiss: (event: SnackbarEvent) => void;
 }
-/**
- * Configuration options for the snackbar component
- * @interface SnackbarConfig
- */
 export interface SnackbarConfig {
-    /** Text message to display; up to two lines */
     message: string;
-    /** Label of the single text-button action, if any */
     action?: string;
-    /** Adds a close icon button */
     dismissible?: boolean;
-    /** Accessible name of the close icon (default "Dismiss") */
     closeLabel?: string;
-    /**
-     * How long the snackbar stays: `'short'` (4 s), `'long'` (10 s),
-     * `'indefinite'`, or milliseconds (0 for indefinite). Defaults to
-     * `'short'` without an action and `'indefinite'` with one: an actionable
-     * snackbar should not go away on its own.
-     */
     duration?: SnackbarDuration;
-    /** Position of the snackbar along the bottom edge */
     position?: SnackbarPosition;
-    /**
-     * How this snackbar interacts with the queue when shown.
-     * - `'queue'` (default): wait in line and show one at a time, in order.
-     * - `'replace'`: immediately dismiss the current snackbar, drop any pending
-     *   ones, and show this snackbar right away. Useful for rapid, repeated
-     *   actions where only the latest message matters.
-     */
     queueBehavior?: SnackbarQueueBehavior;
-    /**
-     * `"top"` shows the snackbar in the browser's top layer as a
-     * `popover="manual"` element: above every z-index, modal dialogs included,
-     * at its usual place in viewport coordinates. It opens where its owner put
-     * it (an element's shadow root, with that root's styles), or on the body.
-     * While a modal `<dialog>` is open, the rest of the page is inert, so the
-     * snackbar opens inside that dialog and goes back when it closes.
-     *
-     * Where the browser has no popover support, the snackbar behaves as
-     * without it. Unset, the snackbar is appended to `document.body`.
-     */
     layer?: 'top';
-    /** Action button callback function */
     onAction?: (event: SnackbarEvent) => void;
-    /** Callback function when the snackbar opens */
     onOpen?: (event: SnackbarEvent) => void;
-    /** Callback function when the snackbar closes */
     onClose?: (event: SnackbarEvent) => void;
-    /** Additional CSS classes */
     class?: string;
-    /** Component prefix for CSS classes */
     prefix?: string;
-    /** Component name for CSS classes */
     componentName?: string;
-    /** Event handlers for snackbar events */
     on?: {
         [key in SnackbarEventType]?: (event: SnackbarEvent) => void;
     };
 }
-/**
- * Snackbar component public API interface
- * @interface SnackbarComponent
- */
 export interface SnackbarComponent {
-    /** The root element of the snackbar */
     element: HTMLElement;
-    /**
-     * Current state of the snackbar: `queued` between `show()` and its turn on
-     * screen, behind another snackbar; `visible` while it is shown.
-     */
     state: SnackbarState;
-    /** The action button element (if present) */
     actionButton?: HTMLElement;
-    /** The close icon button element (if present) */
     closeButton?: HTMLElement;
-    /** Timer for auto-dismissal */
     timer?: SnackbarTimer;
-    /**
-     * Displays the snackbar, through the queue. With nothing on screen, when it
-     * returns the state is `visible` and `open` has been emitted; behind another
-     * snackbar the state is `queued`, and `visible` and `open` come together at
-     * its turn. On a visible or queued snackbar it does nothing.
-     */
     show: () => SnackbarComponent;
-    /**
-     * Hides the snackbar. When it returns the state is `hidden` and `close` has
-     * been emitted; the element leaves the page after its transition. A queued
-     * snackbar gives up its turn and emits nothing, as it was never open. On a
-     * hidden snackbar it does nothing.
-     */
     hide: () => SnackbarComponent;
-    /** Whether the snackbar is on screen: true only while `state` is `visible` */
     isOpen: () => boolean;
-    /** Sets the message text */
     setMessage: (message: string) => SnackbarComponent;
-    /** Gets the message text */
     getMessage: () => string;
-    /** Sets the action button text */
     setAction: (text: string) => SnackbarComponent;
-    /** Gets the action button text */
     getAction: () => string;
-    /** Sets the display duration: a preset or milliseconds (0 for indefinite) */
     setDuration: (duration: SnackbarDuration) => SnackbarComponent;
-    /** Gets the display duration in milliseconds (0 for indefinite) */
     getDuration: () => number;
-    /** Sets the snackbar position */
     setPosition: (position: SnackbarPosition) => SnackbarComponent;
-    /** Gets the snackbar position */
     getPosition: () => SnackbarPosition;
-    /** Adds event listener */
     on: <K extends keyof SnackbarEvents>(event: K, handler: SnackbarEvents[K]) => SnackbarComponent;
-    /** Removes event listener */
     off: <K extends keyof SnackbarEvents>(event: K, handler: SnackbarEvents[K]) => SnackbarComponent;
-    /** Destroys the snackbar component and cleans up resources */
     destroy: () => void;
 }
-/**
- * The component as it passes through the enhancers
- */
 export interface BaseComponent {
     element: HTMLElement;
     emit?: (event: string, data?: unknown) => void;
@@ -205,56 +82,32 @@ export interface BaseComponent {
     closeButton?: HTMLElement;
     timer?: SnackbarTimer;
 }
-/**
- * Timer interface for snackbar auto-dismissal
- */
 export interface SnackbarTimer {
-    /** Starts the countdown from the full duration */
     start: () => void;
-    /** Cancels the countdown */
     stop: () => void;
-    /** Sets the auto-dismiss duration in milliseconds (0 for none) */
     setDuration: (duration: number) => void;
-    /** Gets the current auto-dismiss duration in milliseconds */
     getDuration: () => number;
 }
-/**
- * Interface for snackbars managed by the queue
- */
 export interface QueuedSnackbar {
     _show: () => void;
-    /** Visually dismisses the snackbar without advancing the queue */
     _hide?: () => void;
-    /** The snackbar's own element, so the queue can tell whether it is still on screen */
     element?: HTMLElement;
     on: (event: string, handler: () => void) => void;
     off: (event: string, handler: () => void) => void;
 }
-/**
- * Options controlling how a snackbar is added to the queue
- */
 export interface SnackbarQueueAddOptions {
-    /** Behavior to apply when adding this snackbar (defaults to `'queue'`) */
     behavior?: SnackbarQueueBehavior;
 }
-/**
- * Interface for the snackbar queue manager
- */
 export interface SnackbarQueue {
     add: (snackbar: QueuedSnackbar, options?: SnackbarQueueAddOptions) => void;
     clear: () => void;
-    /** Takes a snackbar out of the queue: a waiting one, or the one on screen when it is destroyed */
     remove: (snackbar: QueuedSnackbar) => void;
     getLength: () => number;
 }
-/**
- * API options for enhancing a snackbar with API methods
- */
 export interface ApiOptions {
     lifecycle: {
         destroy: () => void;
     };
     queue: SnackbarQueue;
-    /** The resolved configuration */
     config: SnackbarConfig;
 }

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

@@ -1,17 +1,9 @@
-/**
- * Visual styles, the same set the button offers
- * @category Components
- */
 export declare const SPLIT_BUTTON_VARIANTS: {
     readonly FILLED: "filled";
     readonly TONAL: "tonal";
     readonly OUTLINED: "outlined";
     readonly ELEVATED: "elevated";
 };
-/**
- * Sizes, matching the button and icon button scale
- * @category Components
- */
 export declare const SPLIT_BUTTON_SIZES: {
     readonly XS: "xs";
     readonly S: "s";
@@ -19,38 +11,19 @@ export declare const SPLIT_BUTTON_SIZES: {
     readonly L: "l";
     readonly XL: "xl";
 };
-/**
- * Events the component emits
- * @category Components
- */
 export declare const SPLIT_BUTTON_EVENTS: {
-    /** The leading button was activated */
     readonly CLICK: "click";
-    /** The trailing button opened whatever it opens */
     readonly EXPAND: "expand";
-    /** The trailing button closed it */
     readonly COLLAPSE: "collapse";
-    /** Either of the two, carrying the new state */
     readonly CHANGE: "change";
-    /** A menu item was chosen, when the component owns a menu */
     readonly SELECT: "select";
 };
-/**
- * Defaults
- * @category Components
- */
 export declare const SPLIT_BUTTON_DEFAULTS: {
     readonly VARIANT: "filled";
     readonly SIZE: "s";
-    /** Accessible name of the trailing button when none is given */
     readonly TRAILING_LABEL: "More options";
-    /** How far the menu sits from the button (M3 split button guidelines) */
     readonly MENU_OFFSET: 4;
 };
-/**
- * CSS class names, without the prefix
- * @category Components
- */
 export declare const SPLIT_BUTTON_CLASSES: {
     readonly ROOT: "split-button";
     readonly LEADING: "split-button__leading";
@@ -58,10 +31,4 @@ export declare const SPLIT_BUTTON_CLASSES: {
     readonly CHEVRON: "split-button__chevron";
     readonly EXPANDED: "split-button--expanded";
 };
-/**
- * The trailing button's icon. It always points down and turns 180 degrees
- * when the button is activated, so it should not be swapped out
- * (M3 split button guidelines, "Anatomy").
- * @category Components
- */
 export declare const SPLIT_BUTTON_CHEVRON: string;

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

@@ -1,24 +1,3 @@
 import { SplitButtonConfig, SplitButtonComponent } from "./types.js";
-/**
- * Creates a split button: one action beside a button that opens more choices.
- *
- * @param {SplitButtonConfig} config - Split button configuration
- * @returns {SplitButtonComponent} Split button component instance
- *
- * @example
- * ```ts
- * const button = createSplitButton({
- *   text: 'Watch later',
- *   icon: watchIcon,
- *   trailingLabel: 'More watch options',
- *   items: [
- *     { id: 'queue', text: 'Add to queue' },
- *     { id: 'playlist', text: 'Save to playlist' }
- *   ],
- *   onClick: () => watchLater(),
- *   onSelect: ({ item }) => choose(item.id)
- * });
- * ```
- */
 declare const createSplitButton: (config?: SplitButtonConfig) => SplitButtonComponent;
 export default createSplitButton;

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

@@ -1,143 +1,62 @@
 import type { MenuContent } from "../menu/types.js";
 import type { MenuOwner } from "../menu/inner.js";
 import type { ButtonComponent } from "../button/types.js";
-/** Visual style, the same set the button offers */
 export type SplitButtonVariant = "filled" | "tonal" | "outlined" | "elevated";
-/** Size, matching the button and icon button scale */
 export type SplitButtonSize = "xs" | "s" | "m" | "l" | "xl";
-/** Events the component emits */
 export type SplitButtonEventType = "click" | "expand" | "collapse" | "change" | "select";
-/** What an event handler receives */
 export interface SplitButtonEvent {
-    /** The component that emitted it */
     splitButton: SplitButtonComponent;
-    /** Whether the trailing button is showing its menu */
     expanded: boolean;
-    /** The DOM event behind it, when there was one */
     originalEvent: Event | null;
-    /** The chosen item, on a `select` event */
     item?: MenuContent;
-    /** The chosen item's `id`, on a `select` event: the `value` of the `<m-split-button>` element's `select` */
     value?: string | null;
 }
-/**
- * Configuration for the split button
- * @interface SplitButtonConfig
- */
 export interface SplitButtonConfig {
-    /** Label of the leading button */
     text?: string;
-    /**
-     * `"top"` renders the menu next to the trailing button, in its tree (a
-     * shadow root included), and shows it in the browser's top layer. See the
-     * menu's `layer`.
-     */
     layer?: "top";
-    /** Icon of the leading button. Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     icon?: string;
-    /** Visual style, shared by both buttons */
     variant?: SplitButtonVariant;
-    /** Size of both buttons */
     size?: SplitButtonSize;
-    /** Whether both buttons are disabled */
     disabled?: boolean;
-    /**
-     * Accessible name of the trailing button. It should say that more choices
-     * are available and how they relate to the leading action, such as
-     * "More watch options" beside a "Watch later" button (M3 split button
-     * accessibility).
-     * @default 'More options'
-     */
     trailingLabel?: string;
-    /** Accessible name of the leading button, when its label is not enough */
     ariaLabel?: string;
-    /** Accessible name of the whole group */
     groupLabel?: string;
-    /** What the leading button does */
     onClick?: (event: SplitButtonEvent) => void;
-    /**
-     * Menu items for the trailing button to open. Without them the component
-     * only reports that the trailing button was activated, and the caller
-     * shows whatever it likes.
-     */
     items?: MenuContent[];
-    /** Called with the chosen item when the component owns the menu */
     onSelect?: (event: SplitButtonEvent) => void;
-    /** Additional CSS classes */
     class?: string;
-    /** Component prefix for CSS class names */
     prefix?: string;
-    /** Component name for CSS class names */
     componentName?: string;
-    /** Event handlers */
     on?: {
         [key in SplitButtonEventType]?: (event: SplitButtonEvent) => void;
     };
 }
-/**
- * The split button's public API
- * @interface SplitButtonComponent
- */
 export interface SplitButtonComponent {
-    /** The element holding both buttons */
     element: HTMLElement;
-    /** The leading button's element */
     leadingElement: HTMLButtonElement;
-    /** The trailing button's element */
     trailingElement: HTMLButtonElement;
-    /** Sets the leading button's label */
     setText: (text: string) => SplitButtonComponent;
-    /** The leading button's label */
     getText: () => string;
-    /** Sets the leading button's icon */
     setIcon: (icon: string) => SplitButtonComponent;
-    /**
-     * Replaces the menu's items. A split button created without `items` has no
-     * menu: the first non-empty list creates it, and opens it if the split
-     * button is expanded. An empty list empties the menu and keeps it.
-     */
     setItems: (items: MenuContent[]) => SplitButtonComponent;
-    /** The menu's items; empty while the split button has no menu */
     getItems: () => MenuContent[];
-    /**
-     * Opens whatever the trailing button opens. When it returns, `isExpanded()`
-     * is true and `expand` and `change` have been emitted; the surface may be
-     * painted after `expand()` returns.
-     */
     expand: () => SplitButtonComponent;
-    /**
-     * Closes it. When it returns, `isExpanded()` is false and `collapse` and
-     * `change` have been emitted. The same holds when the user dismisses the
-     * menu (Escape, a click outside, an item chosen): both are emitted in that
-     * event, with the menu's `close`. `collapse()` then `expand()` at once
-     * ends expanded.
-     */
     collapse: () => SplitButtonComponent;
-    /** Whether it is open */
     isExpanded: () => boolean;
-    /** Disables both buttons */
     disable: () => SplitButtonComponent;
-    /** Enables both buttons */
     enable: () => SplitButtonComponent;
-    /** Whether both buttons are disabled */
     isDisabled: () => boolean;
-    /** Adds an event listener */
     on: (event: SplitButtonEventType, handler: (event: SplitButtonEvent) => void) => SplitButtonComponent;
-    /** Removes an event listener */
     off: (event: SplitButtonEventType, handler: (event: SplitButtonEvent) => void) => SplitButtonComponent;
-    /** Takes the component off the page and releases what it holds */
     destroy: () => void;
 }
-/** What withButtons adds */
 export interface ButtonsFeature {
     leading: ButtonComponent;
     trailing: ButtonComponent;
     leadingElement: HTMLElement;
     trailingElement: HTMLElement;
 }
-/** What withMenu adds: the menu, when the component was given items */
 export type MenuFeature = MenuOwner;
-/** The component as it passes through the enhancers */
 export interface BaseComponent extends ButtonsFeature, MenuFeature {
     element: HTMLElement;
     emit?: (event: string, data?: unknown) => void;