material 3.2.5 → 3.2.7

package/dist/components/divider/config.d.ts

@@ -1,143 +1,13 @@
-/**
- * Configuration options for divider components
- *
- * Controls the appearance, orientation, and behavior of Material Design 3 dividers.
- *
- * @category Components
- */
 export interface DividerConfig {
-    /**
-     * CSS class prefix (defaults to 'mtrl')
-     *
-     * Used for generating BEM-style class names for the component
-     */
     prefix?: string;
-    /**
-     * CSS class to add to the divider
-     *
-     * Additional classes for custom styling needs.
-     * Can be a single class string or an array of class strings.
-     *
-     * @example 'my-custom-divider' or ['my-custom-divider', 'special-spacing']
-     */
     class?: string | string[];
-    /**
-     * Orientation of the divider
-     *
-     * - 'horizontal': Creates a horizontal line (default)
-     * - 'vertical': Creates a vertical line
-     *
-     * @default 'horizontal'
-     *
-     * @example
-     * ```typescript
-     * // Create a vertical divider
-     * createDivider({ orientation: 'vertical' })
-     * ```
-     */
     orientation?: 'horizontal' | 'vertical';
-    /**
-     * Variant of the divider
-     *
-     * Controls how the divider is inset within its container:
-     * - 'full-width': Spans the entire width/height (default)
-     * - 'inset': Adds space at the start (left for horizontal, top for vertical)
-     * - 'middle-inset': Adds space at both start and end
-     *
-     * Most commonly used in lists to align dividers with text content.
-     *
-     * @default 'full-width'
-     *
-     * @example
-     * ```typescript
-     * // Create a list divider with left inset
-     * createDivider({ variant: 'inset' })
-     * ```
-     */
     variant?: 'full-width' | 'inset' | 'middle-inset';
-    /**
-     * Custom inset value (left margin for horizontal, top margin for vertical)
-     *
-     * Overrides the default inset spacing at the start of the divider.
-     * Only applies when variant is 'inset' or 'middle-inset'.
-     *
-     * @default 16 for 'inset' and 'middle-inset' variants
-     *
-     * @example
-     * ```typescript
-     * // Create a divider with 24px left inset
-     * createDivider({ variant: 'inset', insetStart: 24 })
-     * ```
-     */
     insetStart?: number;
-    /**
-     * Custom inset end value (right margin for horizontal, bottom margin for vertical)
-     *
-     * Overrides the default inset spacing at the end of the divider.
-     * Only applies when variant is 'middle-inset'.
-     *
-     * @default 0 for 'inset', 16 for 'middle-inset'
-     *
-     * @example
-     * ```typescript
-     * // Create a divider with custom insets on both sides
-     * createDivider({ variant: 'middle-inset', insetStart: 16, insetEnd: 24 })
-     * ```
-     */
     insetEnd?: number;
-    /**
-     * Color of the divider
-     *
-     * Sets a custom color for the divider. Accepts any valid CSS color value.
-     * By default, dividers use the 'outline-variant' color from the Material theme.
-     *
-     * @example
-     * ```typescript
-     * // Create a blue divider
-     * createDivider({ color: '#2196F3' })
-     *
-     * // Create a divider with a semi-transparent color
-     * createDivider({ color: 'rgba(0, 0, 0, 0.12)' })
-     * ```
-     */
     color?: string;
-    /**
-     * Thickness of the divider in pixels
-     *
-     * Controls the thickness (height for horizontal, width for vertical) of the divider.
-     * Material Design 3 typically uses 1px thickness for dividers.
-     *
-     * @default 1
-     *
-     * @example
-     * ```typescript
-     * // Create a bold divider
-     * createDivider({ thickness: 2 })
-     * ```
-     */
     thickness?: number;
-    /**
-     * Used internally for component composition
-     *
-     * @internal
-     */
     componentName?: string;
 }
-/**
- * Default configuration for dividers
- *
- * @internal
- */
 export declare const defaultConfig: Partial<DividerConfig>;
-/**
- * Creates a base configuration object for divider
- *
- * Merges user-provided configuration with default values and ensures
- * all required properties have values.
- *
- * @param config - User provided configuration
- * @returns Complete configuration with defaults applied
- *
- * @internal
- */
 export declare const createBaseConfig: (config?: DividerConfig) => DividerConfig;

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

@@ -1,45 +1,18 @@
-/**
- * Divider orientation options
- */
 export declare const DIVIDER_ORIENTATIONS: {
-    /** Horizontal divider (default) */
     readonly HORIZONTAL: "horizontal";
-    /** Vertical divider */
     readonly VERTICAL: "vertical";
 };
-/**
- * Divider variant options
- */
 export declare const DIVIDER_VARIANTS: {
-    /** Spans the entire width/height of the container (default) */
     readonly FULL_WIDTH: "full-width";
-    /** Adds space at the start (left for horizontal, top for vertical) */
     readonly INSET: "inset";
-    /** Adds space at both start and end */
     readonly MIDDLE_INSET: "middle-inset";
 };
-/**
- * Default divider thickness in pixels
- * Following Material Design 3 guidelines
- */
 export declare const DEFAULT_DIVIDER_THICKNESS = 1;
-/**
- * Default inset value in pixels
- * Applied when variant is 'inset' or 'middle-inset'
- */
 export declare const DEFAULT_INSET_VALUE = 16;
-/**
- * CSS classes used by the divider component
- */
 export declare const DIVIDER_CLASSES: {
-    /** Root divider element */
     readonly ROOT: "divider";
-    /** Applied to horizontal dividers */
     readonly HORIZONTAL: "divider--horizontal";
-    /** Applied to vertical dividers */
     readonly VERTICAL: "divider--vertical";
-    /** Applied to inset dividers */
     readonly INSET: "divider--inset";
-    /** Applied to middle-inset dividers */
     readonly MIDDLE_INSET: "divider--middle-inset";
 };

package/dist/components/divider/divider.d.ts

@@ -1,39 +1,3 @@
 import { DividerConfig } from "./config.js";
 import { DividerComponent } from "./types.js";
-/**
- * Creates a new Divider component with the specified configuration.
- *
- * Dividers are thin lines that separate content into distinct sections following
- * Material Design 3 guidelines. They can be horizontal or vertical, and offer
- * various customization options for inset, thickness, and color.
- *
- * @param config - Divider configuration options
- * @returns Divider component instance with methods for managing appearance and behavior
- *
- * @throws {Error} If divider creation fails due to invalid configuration
- *
- * @category Components
- *
- * @example
- * ```typescript
- * // Create a basic horizontal divider
- * const divider = createDivider();
- * container.appendChild(divider.element);
- *
- * // Create a vertical divider with custom styling
- * const separator = createDivider({
- *   orientation: 'vertical',
- *   thickness: 2,
- *   color: '#2196F3',
- *   variant: 'middle-inset',
- *   insetStart: 8,
- *   insetEnd: 8
- * });
- *
- * // Later, change the divider's appearance
- * divider.setColor('var(--mtrl-sys-color-outline)');
- * divider.setThickness(1);
- * divider.setVariant('inset');
- * ```
- */
 export declare const createDivider: (config?: DividerConfig) => DividerComponent;

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

@@ -1,32 +1,3 @@
-/**
- * @module Divider
- *
- * The Divider component provides horizontal or vertical lines that separate content into distinct sections.
- * Dividers follow Material Design 3 guidelines for separating content in lists, layouts, and other UI containers.
- *
- * Features:
- * - Horizontal and vertical orientations
- * - Multiple inset variants (full-width, inset, middle-inset)
- * - Customizable thickness and color
- * - Responsive to parent container
- *
- * @example
- * ```typescript
- * // Create a standard horizontal divider
- * const divider = createDivider();
- * document.body.appendChild(divider.element);
- *
- * // Create a vertical divider with custom styles
- * const verticalDivider = createDivider({
- *   orientation: 'vertical',
- *   thickness: 2,
- *   color: '#2196F3',
- *   variant: 'middle-inset'
- * });
- * ```
- *
- * @category Components
- */
 import { createDivider } from "./divider.js";
 export { createDivider, createDivider as default };
 export type { DividerConfig } from "./config.js";

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

@@ -1,142 +1,16 @@
 import { BaseComponent, ElementComponent } from "../../core/compose/index.js";
-/**
- * The three slices of a divider, one per enhancer in features.ts.
- *
- * Each is its own interface rather than a Pick of DividerComponent: an indexed
- * access binds `this` to the type being indexed, so a setter reached through a
- * Pick reports the whole DividerComponent instead of the component it was
- * called on -- which is the defect these setters used to paper over with
- * `return this as unknown as DividerComponent`.
- */
 export interface DividerOrientation {
-    /**
-     * Gets current orientation of the divider
-     *
-     * @returns Current orientation ('horizontal' or 'vertical')
-     *
-     * @example
-     * ```typescript
-     * const divider = createDivider();
-     * const orientation = divider.getOrientation(); // Returns 'horizontal' by default
-     * ```
-     */
     getOrientation(): 'horizontal' | 'vertical';
-    /**
-     * Sets orientation of the divider
-     *
-     * Changes the divider's orientation between horizontal (default) and vertical.
-     * This affects the divider's positioning, dimension constraints, and how insets are applied.
-     *
-     * @param orientation - New orientation ('horizontal' or 'vertical')
-     * @returns DividerComponent instance for chaining
-     *
-     * @example
-     * ```typescript
-     * // Change a divider from horizontal to vertical
-     * divider.setOrientation('vertical');
-     * ```
-     */
     setOrientation(orientation: 'horizontal' | 'vertical'): this;
 }
-/** The inset slice. See DividerOrientation for why these are split. */
 export interface DividerInset {
-    /**
-     * Gets current variant of the divider
-     *
-     * @returns Current variant ('full-width', 'inset', or 'middle-inset')
-     *
-     * @example
-     * ```typescript
-     * const variant = divider.getVariant(); // Returns 'full-width' by default
-     * ```
-     */
     getVariant(): 'full-width' | 'inset' | 'middle-inset';
-    /**
-     * Sets variant of the divider
-     *
-     * Changes how the divider is inset within its container:
-     * - 'full-width': Spans the entire width/height of the container (default)
-     * - 'inset': Adds space at the start (left for horizontal, top for vertical)
-     * - 'middle-inset': Adds space at both start and end
-     *
-     * @param variant - New variant
-     * @returns DividerComponent instance for chaining
-     *
-     * @example
-     * ```typescript
-     * // Create a list divider with left inset
-     * divider.setVariant('inset');
-     *
-     * // Create a divider with space on both sides
-     * divider.setVariant('middle-inset');
-     * ```
-     */
     setVariant(variant: 'full-width' | 'inset' | 'middle-inset'): this;
-    /**
-     * Sets custom inset values for the divider
-     *
-     * Allows fine-grained control over inset spacing, overriding the default values
-     * applied by the variant. Only applies if variant is 'inset' or 'middle-inset'.
-     *
-     * @param insetStart - Start inset value in pixels (left for horizontal, top for vertical)
-     * @param insetEnd - End inset value in pixels (right for horizontal, bottom for vertical)
-     * @returns DividerComponent instance for chaining
-     *
-     * @example
-     * ```typescript
-     * // Create a divider with custom insets
-     * const divider = createDivider({ variant: 'inset' });
-     * divider.setInset(24, 8); // 24px from start, 8px from end
-     * ```
-     */
     setInset(insetStart?: number, insetEnd?: number): this;
 }
-/** The style slice. See DividerOrientation for why these are split. */
 export interface DividerStyle {
-    /**
-     * Sets thickness of the divider
-     *
-     * Changes the divider's thickness (height for horizontal, width for vertical).
-     * The default thickness is 1px, following Material Design 3 guidelines.
-     *
-     * @param thickness - Thickness in pixels
-     * @returns DividerComponent instance for chaining
-     *
-     * @example
-     * ```typescript
-     * // Create a bold divider
-     * divider.setThickness(2);
-     * ```
-     */
     setThickness(thickness: number): this;
-    /**
-     * Sets custom color for the divider
-     *
-     * By default, dividers use the 'outline-variant' color from the theme.
-     * This method allows setting a custom color via any valid CSS color value.
-     *
-     * @param color - CSS color value (hex, rgb, rgba, hsl, etc.)
-     * @returns DividerComponent instance for chaining
-     *
-     * @example
-     * ```typescript
-     * // Create a blue divider
-     * divider.setColor('#2196F3');
-     *
-     * // Create a semi-transparent divider
-     * divider.setColor('rgba(0, 0, 0, 0.12)');
-     * ```
-     */
     setColor(color: string): this;
 }
-/**
- * Divider component interface
- *
- * Represents a Material Design 3 divider that separates content into distinct
- * sections. Provides methods for configuring the appearance, orientation, and
- * inset behavior.
- *
- * @category Components
- */
 export interface DividerComponent extends BaseComponent, ElementComponent, DividerOrientation, DividerInset, DividerStyle {
 }

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

@@ -1,99 +1,46 @@
-/**
- * Drawer variants matching MD3 navigation drawer specification
- */
 export declare const DRAWER_VARIANTS: {
-    /** Standard drawer — inline, can be permanently visible or toggled */
     readonly STANDARD: "standard";
-    /** Modal drawer — overlays content with scrim, for compact/medium screens */
     readonly MODAL: "modal";
 };
-/**
- * Drawer positions (anchor edge)
- */
 export declare const DRAWER_POSITIONS: {
-    /** Start edge (left in LTR, right in RTL) — default per MD3 */
     readonly START: "start";
-    /** End edge (right in LTR, left in RTL) */
     readonly END: "end";
 };
-/**
- * Drawer item types for the items configuration array
- */
 export declare const DRAWER_ITEM_TYPES: {
-    /** Navigation destination item */
     readonly ITEM: "item";
-    /** Visual separator between groups */
     readonly DIVIDER: "divider";
-    /** Section label / subhead for grouping */
     readonly SECTION: "section";
 };
-/**
- * Drawer events
- */
 export declare const DRAWER_EVENTS: {
-    /** Fired when the drawer opens */
     readonly OPEN: "open";
-    /** Fired when the drawer closes */
     readonly CLOSE: "close";
-    /** Fired when a navigation item is selected */
     readonly SELECT: "select";
 };
-/**
- * CSS classes used by the drawer component
- */
 export declare const DRAWER_CLASSES: {
-    /** Root container */
     readonly ROOT: "drawer";
-    /** Scrim overlay (modal variant only) */
     readonly SCRIM: "drawer__scrim";
-    /** Inner sheet / panel */
     readonly SHEET: "drawer__sheet";
-    /** Headline text */
     readonly HEADLINE: "drawer__headline";
-    /** Scrollable items container */
     readonly ITEMS: "drawer__items";
-    /** Single navigation item */
     readonly ITEM: "drawer__item";
-    /** Item icon */
     readonly ITEM_ICON: "drawer__item-icon";
-    /** Item label text */
     readonly ITEM_LABEL: "drawer__item-label";
-    /** Item badge */
     readonly ITEM_BADGE: "drawer__item-badge";
-    /** Active indicator shape */
     readonly ACTIVE_INDICATOR: "drawer__active-indicator";
-    /** Dense/compact variant */
     readonly DENSE: "drawer--dense";
-    /** Divider separator */
     readonly DIVIDER: "drawer__divider";
-    /** Section label */
     readonly SECTION_LABEL: "drawer__section-label";
 };
-/**
- * Default animation configuration
- */
 export declare const DRAWER_ANIMATION: {
-    /** Animation duration in milliseconds */
     readonly DURATION: 300;
-    /** Easing for opening */
     readonly EASING_OPEN: "cubic-bezier(0.0, 0.0, 0.2, 1.0)";
-    /** Easing for closing */
     readonly EASING_CLOSE: "cubic-bezier(0.3, 0.0, 1.0, 1.0)";
 };
-/**
- * Drawer default values
- */
 export declare const DRAWER_DEFAULTS: {
-    /** Default variant */
     readonly VARIANT: "standard";
-    /** Default position */
     readonly POSITION: "start";
-    /** Whether drawer is open by default */
     readonly OPEN: false;
-    /** Whether modal can be dismissed via scrim */
     readonly DISMISSIBLE: true;
-    /** Default drawer width in pixels */
     readonly WIDTH: 360;
-    /** Whether items ripple on press */
     readonly RIPPLE: true;
 };

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

@@ -1,59 +1,3 @@
 import { DrawerConfig, DrawerComponent } from "./types.js";
-/**
- * Creates a new Drawer component with the specified configuration.
- *
- * The Drawer component implements Material Design 3 navigation drawer with
- * support for standard (inline) and modal (overlay) variants. It provides
- * navigation destinations with icons, labels, badges, dividers, and section
- * labels following the MD3 specification.
- *
- * The Drawer component is created using a functional composition pattern,
- * applying various features through the pipe function.
- *
- * @param {DrawerConfig} config - Configuration options for the drawer
- *  This can include variant, items, headline, position, open state,
- *  and other drawer properties. See {@link DrawerConfig} for available options.
- *
- * @returns {DrawerComponent} A fully configured drawer component instance with
- *  all requested features applied. The returned component has methods for
- *  state management, item selection, and lifecycle management.
- *
- * @throws {Error} Throws an error if drawer creation fails for any reason
- *
- * @example
- * ```ts
- * // Create a standard navigation drawer
- * const drawer = createDrawer({
- *   variant: 'standard',
- *   headline: 'Mail',
- *   open: true,
- *   items: [
- *     { id: 'inbox', label: 'Inbox', icon: '<svg>...</svg>', badge: '24', active: true },
- *     { id: 'outbox', label: 'Outbox', icon: '<svg>...</svg>' },
- *     { type: 'divider' },
- *     { type: 'section', label: 'Labels' },
- *     { id: 'family', label: 'Family', icon: '<svg>...</svg>' },
- *   ],
- *   onSelect: (event) => console.log('Selected:', event.id),
- * });
- *
- * document.body.appendChild(drawer.element);
- *
- * // Create a modal drawer
- * const modalDrawer = createDrawer({
- *   variant: 'modal',
- *   headline: 'Navigation',
- *   items: [
- *     { id: 'home', label: 'Home', icon: '<svg>...</svg>', active: true },
- *     { id: 'settings', label: 'Settings', icon: '<svg>...</svg>' },
- *   ],
- * });
- *
- * document.body.appendChild(modalDrawer.element);
- * modalDrawer.open();
- * ```
- *
- * @category Components
- */
 declare const createDrawer: (config?: DrawerConfig) => DrawerComponent;
 export default createDrawer;

package/dist/components/drawer/features/items.js

@@ -2,6 +2,7 @@ import { DRAWER_EVENTS } from "../constants.js";
 import { createRipple, } from "../../../core/compose/features/ripple.js";
 import { setHTML } from "../../../core/dom/html.js";
 import { activeElementOf } from "../../../core/dom/focus.js";
+const hasBadge = (badge) => !!badge && badge !== "0";
 const createItemElement = (item, getClass) => {
     const el = document.createElement("button");
     el.className = getClass("drawer__item");
@@ -30,7 +31,7 @@ const createItemElement = (item, getClass) => {
         labelEl.textContent = item.label;
         el.appendChild(labelEl);
     }
-    if (item.badge) {
+    if (hasBadge(item.badge)) {
         const badgeEl = document.createElement("span");
         badgeEl.className = getClass("drawer__item-badge");
         badgeEl.textContent = item.badge;
@@ -143,7 +144,7 @@ export const withItems = (config) => (component) => {
         if (!itemEl)
             return;
         let badgeEl = itemEl.querySelector(`.${component.getClass("drawer__item-badge")}`);
-        if (badge) {
+        if (hasBadge(badge)) {
             if (!badgeEl) {
                 badgeEl = document.createElement("span");
                 badgeEl.className = component.getClass("drawer__item-badge");

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

@@ -1,6 +1,2 @@
-/**
- * Drawer component module
- * @module components/drawer
- */
 export { default, default as createDrawer } from "./drawer.js";
 export type { DrawerConfig, DrawerComponent, DrawerVariant, DrawerPosition, DrawerItemConfig, DrawerSelectEvent, DrawerEvents, } from "./types.js";