material 3.2.6 → 3.3.0

package/README.md

@@ -97,7 +97,7 @@ What a bundler keeps, minified and gzipped (kB is 1,000 bytes), measured from th
 | Everything the root exports (`export * from 'material'`), without code splitting | 127.8 kB |
 | `material/styles/base` | 2.9 kB |
 | `material/styles/base` and `material/styles/button` | 5.2 kB |
-| `material/styles`, the full stylesheet | 63.7 kB |
+| `material/styles`, the full stylesheet | 63.6 kB |
 <!-- /sizes -->
 
 `material` publishes ESM only, so bundlers drop what you do not import. Each component's page on [md3.io/components](https://md3.io/components/) gives its size.

package/dist/components/badge/badge.d.ts

@@ -1,62 +1,3 @@
 import { BadgeConfig, BadgeComponent } from "./types.js";
-/**
- * Creates a new Badge component following Material Design 3 guidelines.
- *
- * The Badge component displays a small circle or numerical indicator to
- * draw attention to items requiring user attention, like notifications
- * or counts. Badges can be attached to any element.
- *
- * @param {BadgeConfig} config - Badge configuration object
- * @returns {BadgeComponent} Badge component instance with methods for
- *  managing the badge appearance, content, and visibility
- *
- * @throws {Error} Throws an error if badge creation fails
- *
- * @category Components
- *
- * @example
- * // Create a small dot badge (notification indicator)
- * const notificationBadge = createBadge({
- *   variant: 'small',
- *   color: 'error',
- *   target: document.querySelector('.icon-button')
- * });
- *
- * @example
- * // Create a large badge with a count (numbered indicator)
- * const countBadge = createBadge({
- *   variant: 'large',
- *   label: 5,
- *   color: 'primary',
- *   target: document.querySelector('.notification-icon')
- * });
- *
- * @example
- * // Create a badge with a maximum value
- * const messagesBadge = createBadge({
- *   variant: 'large',
- *   label: 1250,
- *   max: 999,  // Will display "999+"
- *   color: 'info',
- *   position: 'bottom-right'
- * });
- *
- * @example
- * // Control badge visibility programmatically
- * const toggleBadge = createBadge({
- *   variant: 'small',
- *   color: 'success',
- *   target: document.querySelector('.toggle-button')
- * });
- *
- * // Toggle badge visibility
- * function toggleNotification() {
- *   if (toggleBadge.isVisible()) {
- *     toggleBadge.hide();
- *   } else {
- *     toggleBadge.show();
- *   }
- * }
- */
 declare const createBadge: (config?: BadgeConfig) => BadgeComponent;
 export default createBadge;

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

@@ -1,16 +1,7 @@
-/**
- * Badge variants
- * - SMALL: Simple dot badge (6dp diameter)
- * - LARGE: Numbered badge (16dp height)
- */
 export declare const BADGE_VARIANTS: {
     readonly SMALL: "small";
     readonly LARGE: "large";
 };
-/**
- * Badge colors
- * ERROR is the default
- */
 export declare const BADGE_COLORS: {
     readonly ERROR: "error";
     readonly PRIMARY: "primary";
@@ -20,16 +11,10 @@ export declare const BADGE_COLORS: {
     readonly WARNING: "warning";
     readonly INFO: "info";
 };
-/**
- * Badge positions relative to its container
- */
 export declare const BADGE_POSITIONS: {
     readonly TOP_RIGHT: "top-right";
     readonly TOP_LEFT: "top-left";
     readonly BOTTOM_RIGHT: "bottom-right";
     readonly BOTTOM_LEFT: "bottom-left";
 };
-/**
- * Maximum character count for badge labels
- */
 export declare const BADGE_MAX_CHARACTERS = 4;

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

@@ -1,8 +1,2 @@
-/**
- * Badge component module
- * @module components/badge
- * @description A small element that communicates status, shows a count,
- * or highlights an element requiring attention.
- */
 export { default, default as createBadge } from "./badge.js";
 export type { BadgeConfig, BadgeComponent, BadgeVariant, BadgeColor, BadgePosition, } from "./types.js";

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

@@ -1,294 +1,50 @@
 import { ElementComponent } from "../../core/compose/component.js";
-/**
- * Badge variant types - determines the badge size and appearance
- * @category Components
- * @remarks
- * - small: A 6dp circular dot badge without text (for notification indicators)
- * - large: A 16dp height badge that can contain text (for counts or short labels)
- */
 export type BadgeVariant = 'small' | 'large';
-/**
- * Badge color types - determines the badge's background color
- * @category Components
- * @remarks
- * Based on Material Design 3 color system:
- * - error: Red color for error states (default)
- * - primary: Primary theme color
- * - secondary: Secondary theme color
- * - tertiary: Tertiary theme color
- * - success: Green color for success states
- * - warning: Orange/yellow color for warning states
- * - info: Blue color for information states
- */
 export type BadgeColor = 'error' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'info';
-/**
- * Badge position types - determines where the badge appears relative to its target
- * @category Components
- * @remarks
- * - top-right: Position in the top-right corner (default)
- * - top-left: Position in the top-left corner
- * - bottom-right: Position in the bottom-right corner
- * - bottom-left: Position in the bottom-left corner
- */
 export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-/**
- * Configuration interface for the Badge component
- * @category Components
- * @description
- * Defines the appearance and behavior of a badge component.
- * All properties are optional with sensible defaults.
- */
 export interface BadgeConfig {
-    /**
-     * Badge variant (small dot or large numbered)
-     * Small badge (6dp) or Large badge (16dp height)
-     * @default 'large'
-     * @example 'small' | 'large'
-     */
     variant?: BadgeVariant | string;
-    /**
-     * Badge color (follows Material Design 3 color system)
-     * @default 'error'
-     * @example 'error' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'info'
-     */
     color?: BadgeColor | string;
-    /**
-     * Badge position relative to its container element
-     * @default 'top-right'
-     * @example 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
-     */
     position?: BadgePosition | string;
-    /**
-     * Text label inside the badge (for large badges)
-     * Up to 4 characters, numbers exceeding max will show "{max}+"
-     * @example "3" | "99+" | "New"
-     */
     label?: string | number;
-    /**
-     * Maximum value to display (shows "{max}+" if label exceeds max)
-     * Usually 999+ for large numbers
-     * @example 99 | 999
-     */
     max?: number;
-    /**
-     * Whether the badge should be initially visible
-     * @default true
-     */
     visible?: boolean;
-    /**
-     * Target element to which badge will be attached
-     * When provided, the badge will be positioned relative to this element
-     */
     target?: HTMLElement;
-    /**
-     * Additional CSS classes to apply to the badge element
-     * @example "custom-badge highlighted-badge"
-     */
     class?: string;
-    /**
-     * CSS class prefix for all badge classes
-     * @default "mtrl"
-     */
     prefix?: string;
-    /**
-     * Component name used in CSS class generation
-     * @default "badge"
-     * @internal
-     */
     componentName?: string;
 }
-/**
- * The visibility control withVisibility installs on a badge.
- *
- * Named because three places need the same shape: the feature that builds it,
- * getApiConfig that forwards it, and withAPI that wraps it.
- *
- * @category Components
- * @internal
- */
 export interface BadgeVisibility {
-    /** Shows the badge */
     show: () => void;
-    /** Hides the badge */
     hide: () => void;
-    /** Toggles badge visibility, or forces it when given a flag */
     toggle: (visible?: boolean) => void;
-    /** Whether the badge is currently visible */
     isVisible: () => boolean;
 }
-/**
- * What a badge feature enhancer needs from the component it is handed.
- *
- * The badge pipe is createBase, withEvents, withElement, then these features --
- * so the element half is installed before any of them runs, which is why
- * `element` and `getClass` are required rather than optional.
- *
- * `config` is the badge's own config: createBase keeps the type it was created
- * with, so a feature reading `config.variant` gets BadgeVariant and not
- * `unknown`. `wrapper` is written by withAttachment, not read by it.
- *
- * @category Components
- * @internal
- */
 export interface BadgeFeatureHost extends ElementComponent {
     config: BadgeConfig & Record<string, unknown>;
     wrapper?: HTMLElement;
 }
-/**
- * Badge component interface
- * Provides methods for controlling a Material Design 3 badge
- *
- * @category Components
- */
 export interface BadgeComponent {
-    /**
-     * The badge's root DOM element
-     */
     element: HTMLElement;
-    /**
-     * Badge wrapper element (if badge is attached to target)
-     * This is the parent element that contains both the target and the badge
-     */
     wrapper?: HTMLElement;
-    /**
-     * Sets the badge's text label
-     * @param label - Text or number to display in the badge
-     * @returns Badge component for method chaining
-     * @example
-     * badge.setLabel(5); // Shows "5"
-     * badge.setLabel("New"); // Shows "New"
-     * badge.setLabel(1250); // With max=999, shows "999+"
-     */
     setLabel: (label: string | number) => BadgeComponent;
-    /**
-     * Gets the badge's current text label
-     * @returns Current text content of the badge
-     */
     getLabel: () => string;
-    /**
-     * Sets the badge's content (alias for setLabel)
-     * @param content - Text or number to display in the badge
-     * @returns Badge component for method chaining
-     */
     setContent: (content: string | number) => BadgeComponent;
-    /**
-     * Gets the badge's current content (alias for getLabel)
-     * @returns Current text content of the badge
-     */
     getContent: () => string;
-    /**
-     * Shows the badge (makes it visible)
-     * @returns Badge component for method chaining
-     */
     show: () => BadgeComponent;
-    /**
-     * Hides the badge (makes it invisible)
-     * @returns Badge component for method chaining
-     */
     hide: () => BadgeComponent;
-    /**
-     * Toggles badge visibility
-     * @param visible - Optional explicit visibility state
-     * @returns Badge component for method chaining
-     * @example
-     * badge.toggle(); // Toggles current state
-     * badge.toggle(true); // Forces visible
-     */
     toggle: (visible?: boolean) => BadgeComponent;
-    /**
-     * Checks if the badge is currently visible
-     * @returns True if badge is visible, false otherwise
-     */
     isVisible: () => boolean;
-    /**
-     * Sets maximum value (after which badge shows max+)
-     * @param max - Maximum number to display before showing "+"
-     * @returns Badge component for method chaining
-     * @example
-     * badge.setMax(99); // Shows "99+" for values > 99
-     */
     setMax: (max: number) => BadgeComponent;
-    /**
-     * Sets badge color
-     * @param color - Badge color from Material Design 3 palette
-     * @returns Badge component for method chaining
-     * @example
-     * badge.setColor('primary');
-     * badge.setColor(BADGE_COLORS.SUCCESS);
-     */
     setColor: (color: BadgeColor | string) => BadgeComponent;
-    /**
-     * Sets badge variant (size style)
-     * @param variant - Badge variant ('small' or 'large')
-     * @returns Badge component for method chaining
-     * @example
-     * badge.setVariant('small'); // Dot indicator
-     * badge.setVariant(BADGE_VARIANTS.LARGE); // Numbered indicator
-     */
     setVariant: (variant: BadgeVariant | string) => BadgeComponent;
-    /**
-     * Sets badge position relative to target
-     * @param position - Badge position
-     * @returns Badge component for method chaining
-     * @example
-     * badge.setPosition('bottom-left');
-     */
     setPosition: (position: BadgePosition | string) => BadgeComponent;
-    /**
-     * Attaches badge to a target element
-     * @param target - Element to attach badge to
-     * @returns Badge component for method chaining
-     * @example
-     * badge.attachTo(document.querySelector('#notification-bell'));
-     */
     attachTo: (target: HTMLElement) => BadgeComponent;
-    /**
-     * Makes badge standalone (removes from wrapper)
-     * @returns Badge component for method chaining
-     */
     detach: () => BadgeComponent;
-    /**
-     * Destroys the badge component and cleans up resources
-     * Removes the badge from the DOM and clears event listeners
-     */
     destroy: () => void;
-    /**
-     * Gets a class name with the component's prefix
-     * @param name - Base class name
-     * @returns Prefixed class name
-     * @internal
-     */
     getClass: (name: string) => string;
-    /**
-     * Adds CSS classes to the badge element
-     * @param classes - One or more class names to add
-     * @returns Badge component for method chaining
-     * @example
-     * badge.addClass('highlighted', 'animated');
-     */
     addClass: (...classes: string[]) => BadgeComponent;
-    /**
-     * Removes CSS classes from the badge element
-     * @param classes - One or more class names to remove
-     * @returns Badge component for method chaining
-     * @example
-     * badge.removeClass('highlighted', 'animated');
-     */
     removeClass: (...classes: string[]) => BadgeComponent;
-    /**
-     * Adds an event listener to the badge
-     * @param event - Event name ('click', 'mouseover', etc.)
-     * @param handler - Event handler function
-     * @returns Badge component for method chaining
-     * @example
-     * badge.on('click', () => console.log('Badge clicked'));
-     */
     on: (event: string, handler: Function) => BadgeComponent;
-    /**
-     * Removes an event listener from the badge
-     * @param event - Event name
-     * @param handler - Event handler function
-     * @returns Badge component for method chaining
-     */
     off: (event: string, handler: Function) => BadgeComponent;
 }

package/dist/components/bottom-app-bar/bottom-app-bar.d.ts

@@ -1,12 +1,2 @@
-/**
- * @module components/bottom-app-bar
- * @description Bottom app bar implementation
- */
 import { BottomAppBarComponent, BottomAppBarConfig } from "./types.js";
-/**
- * Creates a bottom app bar component
- *
- * @param {BottomAppBarConfig} config - Configuration options
- * @returns {BottomAppBarComponent} Bottom app bar component instance
- */
 export declare const createBottomAppBar: (config?: BottomAppBarConfig) => BottomAppBarComponent;

package/dist/components/bottom-app-bar/constants.d.ts

@@ -1,17 +1,8 @@
-/**
- * FAB position constants for Bottom App Bar
- */
 export declare const FAB_POSITIONS: {
     readonly CENTER: "center";
     readonly END: "end";
 };
-/**
- * Default transition duration for show/hide animations
- */
 export declare const DEFAULT_TRANSITION_DURATION = 300;
-/**
- * CSS class names used in the bottom app bar component
- */
 export declare const BOTTOM_APP_BAR_CLASSES: {
     readonly ROOT: "bottom-app-bar";
     readonly ACTIONS: "bottom-app-bar__actions";

package/dist/components/bottom-app-bar/index.d.ts

@@ -1,7 +1,3 @@
-/**
- * @module components/bottom-app-bar
- * @description Bottom app bar component for mobile interfaces
- */
 import { createBottomAppBar } from "./bottom-app-bar.js";
 export default createBottomAppBar;
 export { createBottomAppBar };

package/dist/components/bottom-app-bar/types.d.ts

@@ -1,97 +1,21 @@
-/**
- * @module components/bottom-app-bar
- * @description Type definitions for Bottom App Bar component
- */
 import { ElementComponent } from "../../core/compose/index.js";
-/**
- * FAB position type for Bottom App Bar
- * @category Components
- */
 export type FabPosition = 'center' | 'end';
-/**
- * Configuration options for Bottom App Bar component
- * @category Components
- */
 export interface BottomAppBarConfig {
-    /**
-     * Element to use for the container
-     * @default 'div'
-     */
     tag?: string;
-    /**
-     * Whether to show FAB in the bottom bar
-     * @default false
-     */
     hasFab?: boolean;
-    /**
-     * FAB position in bottom bar
-     * @default 'end'
-     */
     fabPosition?: FabPosition;
-    /**
-     * Additional CSS classes to apply
-     */
     class?: string;
-    /**
-     * Whether to enable auto-hide on scroll
-     * @default false
-     */
     autoHide?: boolean;
-    /**
-     * Transition duration for show/hide in ms
-     * @default 300
-     */
     transitionDuration?: number;
-    /**
-     * Called with the new visibility when it changes. There is no matching
-     * event, so this stays a callback rather than a listener.
-     */
     onVisibilityChange?: (visible: boolean) => void;
-    /**
-     * Component prefix for class names
-     * @default 'mtrl'
-     */
     prefix?: string;
-    /**
-     * Component name for class generation
-     */
     componentName?: string;
 }
-/**
- * Bottom App Bar component interface
- * @category Components
- */
 export interface BottomAppBarComponent extends ElementComponent {
-    /**
-     * Adds an action button to the bottom bar
-     * @param {HTMLElement} button - Button element to add
-     * @returns {BottomAppBarComponent} BottomAppBarComponent instance for chaining
-     */
     addAction(button: HTMLElement): this;
-    /**
-     * Adds a floating action button to the bottom bar
-     * @param {HTMLElement} fab - FAB element to add
-     * @returns {BottomAppBarComponent} BottomAppBarComponent instance for chaining
-     */
     addFab(fab: HTMLElement): this;
-    /**
-     * Shows the bottom bar
-     * @returns {BottomAppBarComponent} BottomAppBarComponent instance for chaining
-     */
     show(): this;
-    /**
-     * Hides the bottom bar
-     * @returns {BottomAppBarComponent} BottomAppBarComponent instance for chaining
-     */
     hide(): this;
-    /**
-     * Checks if the bottom bar is visible
-     * @returns {boolean} Whether the bottom bar is visible
-     */
     isVisible: () => boolean;
-    /**
-     * Get the actions container element
-     * @returns {HTMLElement} Actions container element
-     */
     getActionsContainer: () => HTMLElement;
 }

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

@@ -1,24 +1,3 @@
 import { BottomSheetConfig, BottomSheetComponent } from "./types.js";
-/**
- * Creates a bottom sheet: a surface anchored to the bottom edge holding
- * content secondary to the page.
- *
- * A modal sheet covers the page with a scrim and takes focus, for a task that
- * must finish first. A standard sheet leaves the page usable alongside it.
- *
- * @param {BottomSheetConfig} config - Bottom sheet configuration
- * @returns {BottomSheetComponent} Bottom sheet instance
- *
- * @example
- * ```ts
- * const sheet = createBottomSheet({
- *   title: 'Share',
- *   content: '<p>Choose where to send it.</p>',
- *   on: { close: () => console.info('closed') }
- * });
- *
- * sheet.open();
- * ```
- */
 declare const createBottomSheet: (config?: BottomSheetConfig) => BottomSheetComponent;
 export default createBottomSheet;

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

@@ -1,47 +1,21 @@
-/**
- * Bottom sheet variants.
- *
- * A standard sheet sits alongside the page and leaves it usable. A modal sheet
- * puts a scrim over the page and takes focus, so it is the one to reach for
- * when the sheet's task must finish before anything else continues.
- */
 export declare const BOTTOM_SHEET_VARIANTS: {
     readonly STANDARD: "standard";
     readonly MODAL: "modal";
 };
-/**
- * How far the sheet is open.
- *
- * `partial` shows the peek height, enough to say what the sheet holds without
- * covering the page. `expanded` shows as much as the content needs.
- */
 export declare const BOTTOM_SHEET_STATES: {
     readonly HIDDEN: "hidden";
     readonly PARTIAL: "partial";
     readonly EXPANDED: "expanded";
 };
-/**
- * Defaults, from Compose BottomSheetDefaults and SheetBottomTokens.
- */
 export declare const BOTTOM_SHEET_DEFAULTS: {
     readonly VARIANT: "modal";
-    /** BottomSheetDefaults.SheetMaxWidth; wider viewports centre the sheet */
     readonly MAX_WIDTH: 640;
-    /** A drag handle is part of the anatomy, so it is on unless asked otherwise */
     readonly DRAG_HANDLE: true;
     readonly CLOSE_ON_SCRIM_CLICK: true;
     readonly CLOSE_ON_ESCAPE: true;
-    /**
-     * BottomSheetDefaults.PositionalThreshold: how far the sheet must be dragged
-     * before it settles at the next anchor rather than springing back.
-     */
     readonly POSITIONAL_THRESHOLD: 56;
-    /** BottomSheetDefaults.VelocityThreshold, in dp per second */
     readonly VELOCITY_THRESHOLD: 125;
 };
-/**
- * Class names, without the prefix. `getClass` adds it.
- */
 export declare const BOTTOM_SHEET_CLASSES: {
     readonly ROOT: "bottom-sheet";
     readonly SCRIM: "bottom-sheet__scrim";
@@ -51,9 +25,6 @@ export declare const BOTTOM_SHEET_CLASSES: {
     readonly TITLE: "bottom-sheet__title";
     readonly CONTENT: "bottom-sheet__content";
 };
-/**
- * Events the sheet emits.
- */
 export declare const BOTTOM_SHEET_EVENTS: {
     readonly OPEN: "open";
     readonly CLOSE: "close";