material 3.2.5 → 3.2.7

package/dist/components/side-sheet/types.d.ts

@@ -1,120 +1,38 @@
 import { SIDE_SHEET_VARIANTS, SIDE_SHEET_POSITIONS } from "./constants.js";
-/** Docked or floating over a scrim */
 export type SideSheetVariant = (typeof SIDE_SHEET_VARIANTS)[keyof typeof SIDE_SHEET_VARIANTS];
-/** Which edge it docks to, in logical terms */
 export type SideSheetPosition = (typeof SIDE_SHEET_POSITIONS)[keyof typeof SIDE_SHEET_POSITIONS];
-/** Handlers accepted at creation, one per event name */
 export interface SideSheetEventHandlers {
     open?: () => void;
     close?: () => void;
 }
-/**
- * Configuration for the side sheet.
- *
- * @category Components
- */
 export interface SideSheetConfig {
-    /**
-     * Standard sheets dock beside the page and leave it usable; modal sheets
-     * float over it behind a scrim and take focus.
-     * @default 'modal'
-     */
     variant?: SideSheetVariant;
-    /**
-     * Which edge to dock to. Logical, so `end` follows the writing direction.
-     * @default 'end'
-     */
     position?: SideSheetPosition;
-    /**
-     * Headline in the header. Also names the sheet for assistive technology,
-     * through `aria-labelledby`.
-     */
     title?: string;
-    /** Body of the sheet, as markup or an element */
     content?: string | HTMLElement;
-    /**
-     * Width in pixels. Capped by `maxWidth`.
-     * @default 256
-     */
     width?: number;
-    /**
-     * The sheet never grows past this, so it does not take over a wide window.
-     * @default 400
-     */
     maxWidth?: number;
-    /**
-     * Whether the header carries a close button.
-     * @default true
-     */
     closeButton?: boolean;
-    /**
-     * Whether a click on the scrim closes a modal sheet. Standard sheets have no
-     * scrim, so this does nothing for them.
-     * @default true
-     */
     closeOnScrimClick?: boolean;
-    /**
-     * Whether Escape closes it.
-     *
-     * For a modal sheet 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
-     */
     closeOnEscape?: boolean;
-    /** Whether the sheet starts open */
     open?: boolean;
-    /** Where to mount the sheet. Defaults to `document.body` */
     container?: HTMLElement;
-    /**
-     * `"top"` makes a modal sheet's root a `<dialog>` element, rendered in
-     * `container` like any sheet, 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. The scrim is its `::backdrop`,
-     * and Escape reaches the sheet as the dialog's `cancel` event. The sheet
-     * slides as without it.
-     *
-     * A standard sheet stays in the page, and where the browser has no
-     * `showModal()` the sheet behaves as without it.
-     */
     layer?: "top";
-    /** Handlers registered at creation, equivalent to calling `on` for each */
     on?: SideSheetEventHandlers;
-    /** Extra classes for the root element */
     class?: string;
-    /** @internal */
     prefix?: string;
-    /** @internal */
     componentName?: string;
 }
-/**
- * A side sheet instance.
- *
- * @category Components
- */
 export interface SideSheetComponent {
-    /** The root element, which holds the scrim and the container */
     element: HTMLElement;
-    /** Opens the sheet */
     open: () => SideSheetComponent;
-    /** Closes the sheet */
     close: () => SideSheetComponent;
-    /** Opens it if closed, closes it if open */
     toggle: () => SideSheetComponent;
-    /** Whether the sheet is showing */
     isOpen: () => boolean;
-    /** Replaces the body */
     setContent: (content: string | HTMLElement) => SideSheetComponent;
-    /** Replaces the headline */
     setTitle: (title: string) => SideSheetComponent;
-    /** Adds an event listener */
     on: <T extends keyof SideSheetEventHandlers>(event: T, handler: NonNullable<SideSheetEventHandlers[T]>) => SideSheetComponent;
-    /** Removes an event listener */
     off: <T extends keyof SideSheetEventHandlers>(event: T, handler: NonNullable<SideSheetEventHandlers[T]>) => SideSheetComponent;
-    /** Removes the sheet from the page and releases its listeners */
     destroy: () => void;
-    /** Prefixes a class name, for styling hooks */
     getClass: (name: string) => string;
 }

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

@@ -1,155 +1,69 @@
-/**
- * Available slider color variants
- * @category Components
- */
 export declare const SLIDER_COLORS: {
-    /** Primary color variant */
     readonly PRIMARY: "primary";
-    /** Secondary color variant */
     readonly SECONDARY: "secondary";
-    /** Tertiary color variant */
     readonly TERTIARY: "tertiary";
-    /** Error color variant */
     readonly ERROR: "error";
 };
-/**
- * Available slider size variants
- * @category Components
- */
 export declare const SLIDER_SIZES: {
-    /** Extra small size (default) - 16px track height */
     readonly XS: 16;
-    /** Small size - 24px track height */
     readonly S: 24;
-    /** Medium size - 40px track height */
     readonly M: 40;
-    /** Large size - 56px track height */
     readonly L: 56;
-    /** Extra large size - 96px track height */
     readonly XL: 96;
 };
-/**
- * Slider component size type
- * @category Components
- */
 export type SliderSize = keyof typeof SLIDER_SIZES | number;
-/**
- * Slider component measurements
- * @category Components
- */
 export declare const SLIDER_MEASUREMENTS: {
-    /** Handle size in pixels */
     readonly HANDLE_SIZE: 16;
-    /** Handle height for XS and S sizes in pixels (M3: 44dp) */
     readonly SMALL_HANDLE_HEIGHT: 44;
-    /** Handle height offset for M, L, XL sizes (added to track height: 52, 68, 108dp) */
     readonly HANDLE_HEIGHT_OFFSET: 12;
-    /** Minimum container height in pixels (M3 minimum touch target) */
     readonly MIN_HEIGHT: 48;
-    /** Tick size in pixels */
     readonly TICK_SIZE: 4;
-    /** Dot size in pixels */
     readonly DOT_SIZE: 4;
-    /** Handle gap pixels */
     readonly HANDLE_GAP: 6;
 };
-/**
- * Available slider events
- * @category Components
- */
 export declare const SLIDER_EVENTS: {
-    /** Fired when slider value changes and interaction completes */
     readonly CHANGE: "change";
-    /** Fired during dragging as value changes */
     readonly INPUT: "input";
-    /** Fired when slider receives focus */
     readonly FOCUS: "focus";
-    /** Fired when slider loses focus */
     readonly BLUR: "blur";
-    /** Fired when interaction starts */
     readonly START: "start";
-    /** Fired when interaction ends */
     readonly END: "end";
 };
-/**
- * Position options for slider label and icon
- * @category Components
- */
 export declare const SLIDER_POSITIONS: {
-    /** Position at the start */
     readonly START: "start";
-    /** Position at the end */
     readonly END: "end";
 };
-/**
- * Default slider configuration values
- * @category Components
- */
 export declare const SLIDER_DEFAULTS: {
-    /** Minimum value */
     readonly MIN: 0;
-    /** Maximum value */
     readonly MAX: 100;
-    /** Starting value */
     readonly VALUE: 0;
-    /** Step increment size */
     readonly STEP: 1;
-    /** Whether slider is disabled */
     readonly DISABLED: false;
-    /** Default color variant */
     readonly COLOR: "primary";
-    /** Default size variant */
     readonly SIZE: "XS";
-    /** Whether to show tick marks */
     readonly TICKS: false;
-    /** Whether to show value while dragging */
     readonly SHOW_VALUE: true;
-    /** Whether to snap to steps during dragging */
     readonly SNAP_TO_STEPS: true;
-    /** Whether slider is a range slider (two handles) */
     readonly RANGE: false;
-    /** Whether slider is a centered slider (active track from center) */
     readonly CENTERED: false;
-    /** Default icon position */
     readonly ICON_POSITION: "start";
-    /** Default label position */
     readonly LABEL_POSITION: "start";
 };
-/**
- * CSS class names used by the slider component
- * @category Components
- */
 export declare const SLIDER_CLASSES: {
-    /** Root element class */
     readonly ROOT: "slider";
-    /** Container for slider track and handles */
     readonly CONTAINER: "slider__container";
-    /** Filled track portion class */
     readonly FILL: "slider__fill";
-    /** Handle element class */
     readonly HANDLE: "slider__handle";
-    /** Second handle element class (for range slider) */
     readonly HANDLE_SECOND: "slider__handle--second";
-    /** Tick marks container class */
     readonly LABEL: "slider__label";
-    /** Value display class */
     readonly VALUE: "slider__value";
-    /** Icon container class */
     readonly ICON: "slider__icon";
-    /** Disabled state class */
     readonly DISABLED: "slider--disabled";
-    /** Focused state class */
     readonly FOCUSED: "slider--focused";
-    /** Dragging state class */
     readonly DRAGGING: "slider--dragging";
-    /** Range slider variant class */
     readonly RANGE: "slider--range";
-    /** Primary color variant class */
     readonly PRIMARY: "slider--primary";
-    /** Secondary color variant class */
     readonly SECONDARY: "slider--secondary";
-    /** Tertiary color variant class */
     readonly TERTIARY: "slider--tertiary";
-    /** Error color variant class */
     readonly ERROR: "slider--error";
 };

package/dist/components/slider/slider.d.ts

@@ -1,19 +1,3 @@
 import { SliderConfig, SliderComponent } from "./types.js";
-/**
- * Creates a new Slider component
- *
- * Slider follows a clear architectural pattern:
- * 1. Base component - Creates the foundation with event system
- * 2. Feature enhancement - Adds specific capabilities (range, icons)
- * 3. DOM creation - Creates DOM elements directly using optimized createElement
- * 4. Track rendering - Uses decorative DOM and CSS alongside accessible handles
- * 5. State management - Handles visual states and appearance
- * 6. Controller - Manages behavior, events, and UI rendering
- * 7. Lifecycle - Handles component lifecycle events
- * 8. Public API - Exposes a clean, consistent API
- *
- * @param {SliderConfig} config - Slider configuration object
- * @returns {SliderComponent} Slider component instance
- */
 declare const createSlider: (config?: SliderConfig) => SliderComponent;
 export default createSlider;

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

@@ -3,167 +3,63 @@ import type { NormalizedEvent, TouchEvents } from "../../core/utils/mobile.js";
 import { SliderSize, SLIDER_COLORS, SLIDER_EVENTS, SLIDER_SIZES } from "./constants.js";
 import { BaseComponentConfig } from "../../core/config/component.js";
 export { SLIDER_COLORS, SLIDER_EVENTS, SLIDER_SIZES };
-/**
- * Available slider color variants
- */
 export type SliderColor = "primary" | "secondary" | "tertiary" | "error";
-/**
- * Available slider event types
- */
 export type SliderEventType = "change" | "input" | "focus" | "blur" | "start" | "end";
-/**
- * Configuration options for the slider component
- * @interface SliderConfig
- */
 export interface SliderConfig extends BaseComponentConfig {
-    /** Minimum value of the slider */
     min?: number;
-    /** Maximum value of the slider */
     max?: number;
-    /** Current value of the slider */
     value?: number;
-    /** Secondary value for range slider (when using two handles) */
     secondValue?: number;
-    /** Step size for discrete slider */
     step?: number;
-    /** Whether the slider is disabled */
     disabled?: boolean;
-    /**
-     * Form field name. A slider renders no form control of its own, so it
-     * submits nothing unless this is set; with it, a hidden input inside the
-     * slider carries the current value. A range slider submits two fields,
-     * `name` and `name-end`. A disabled slider submits neither.
-     */
     name?: string;
-    /** Color variant of the slider *
-     * A stylesheet can override the drawn colours per slider with the custom
-     * properties `--<prefix>-slider-color` and `--<prefix>-slider-on-color`,
-     * where `<prefix>` is the configured component prefix (mtrl by default).
-     */
     color?: SliderColor;
-    /** Size variant of the slider */
     size?: SliderSize;
-    /** Whether to show tick marks */
     ticks?: boolean;
-    /** Custom labels for ticks, if provided */
     tickLabels?: string[] | Record<number, string>;
-    /** Format function for displayed values */
     valueFormatter?: (value: number) => string;
-    /** Whether to show the current value while dragging */
     showValue?: boolean;
-    /** Whether to snap to steps while dragging (discrete slider) */
     snapToSteps?: boolean;
-    /** Whether the slider is a range slider (two handles) */
     range?: boolean;
-    /** Whether the slider is a centered slider (with active track from center) */
     centered?: boolean;
-    /** Label text for the slider */
     label?: string;
-    /** Position of the label (start or end) - defaults to 'start' */
     labelPosition?: "start" | "end";
-    /**
-     * An icon inside the track, drawn as SVG markup (M3 Expressive "inset icon").
-     * Markup (HTML). Not sanitized by default: see Markup and sanitizing.
-     * It illustrates what the slider controls. Shown on a standard slider -- not range,
-     * not centred -- at size M, L or XL (24, 24 and 32px); XS and S are too thin for it.
-     * It sits at the start of the active track and moves to the inactive track when
-     * the active one is too short to hold it (m3.material.io slider guidelines).
-     */
     insetIcon?: string;
-    /**
-     * The inset icon while the value is at the minimum, in place of `insetIcon`.
-     * Markup (HTML). Not sanitized by default: see Markup and sanitizing.
-     * A volume slider swaps to a mute icon at zero, as the guidelines suggest.
-     */
     insetIconAtMin?: string;
-    /**
-     * The slider's orientation. A vertical slider takes its length from its CSS
-     * height and runs bottom to top unless `topToBottom` is set. The guidelines advise
-     * against vertical range sliders.
-     */
     orientation?: "horizontal" | "vertical";
-    /** A vertical slider's minimum at the top instead of the bottom (Compose VerticalSlider) */
     topToBottom?: boolean;
-    /** Icon to display with the slider. Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     icon?: string;
-    /** Position of the icon (start or end) */
     iconPosition?: "start" | "end";
-    /** Additional CSS classes */
     class?: string;
-    /** Event handlers for slider events */
     on?: {
         [key in SliderEventType]?: (event: SliderEvent) => void;
     };
-    /** CSS class prefix */
     prefix?: string;
-    /** Component schema */
     schema?: object;
 }
-/**
- * Slider event data
- * @interface SliderEvent
- */
 export interface SliderEvent {
-    /** The slider component that triggered the event */
     slider: SliderComponent;
-    /** Current slider value */
     value: number;
-    /** Secondary value (for range sliders) */
     secondValue: number | null;
-    /** Original DOM event if available */
     originalEvent: Event | null;
-    /** Function to prevent default behavior */
     preventDefault: () => void;
-    /** Whether default behavior was prevented */
     defaultPrevented: boolean;
 }
-/**
- * Slider component public API interface
- * @interface SliderComponent
- */
-/**
- * Which handle an interaction is acting on. Null when none is.
- *
- * @category Components
- * @internal
- */
 export type SliderActiveHandle = "first" | "second" | null;
-/**
- * The controller's state, shared with the handlers it builds.
- *
- * Written down once because controller.ts owns it and handlers.ts reads every
- * field of it; two descriptions of the same object is how they drift.
- *
- * @category Components
- * @internal
- */
 export interface SliderState {
-    /** The component the controller was handed, with its DOM features */
     component: SliderStateComponent;
     value: number;
     secondValue: number | null;
-    /** The value before the last change, kept for centred sliders */
     previousValue?: number;
     min: number;
     max: number;
     step: number;
     dragging: boolean;
-    /** Whether a handle is held down */
     pressed: boolean;
     activeHandle: SliderActiveHandle;
     activeBubble: HTMLElement | null;
     valueHideTimer: ReturnType<typeof setTimeout> | null;
 }
-/**
- * The DOM the controller and handlers reach for through `state.component`.
- *
- * Every element is optional: withDom installs them, and a range slider has the
- * second pair while a single one does not. `components` is the older place the
- * same elements were kept, which both files still fall back to.
- *
- * @category Components
- * @internal
- */
 export interface SliderStateComponent {
     element: HTMLElement;
     container?: HTMLElement | null;
@@ -171,57 +67,24 @@ export interface SliderStateComponent {
     valueBubble?: HTMLElement | null;
     secondHandle?: HTMLElement | null;
     secondValueBubble?: HTMLElement | null;
-    /**
-     * The older bag the same elements were kept in. **Internal, and not part of
-     * the public contract** (3.0.0): nothing in the library fills it, the
-     * controller and the handlers only fall back to it, and it may go in any
-     * release. `SliderComponent` has no `components`.
-     * @internal
-     */
     components?: Record<string, HTMLElement | null | undefined>;
     getClass: (name: string) => string;
     emit: (event: string, data: unknown) => unknown;
-    /** withStates installs this whole, so the member is not optional inside it */
     disabled?: {
         isDisabled: () => boolean;
     };
-    /**
-     * The hidden inputs withDom builds when the slider has a name.
-     *
-     * Null, not undefined: withDom sets it to null for an unnamed slider, and a
-     * host that said undefined is not satisfied by one that says null.
-     */
     formFields?: (HTMLInputElement | null)[] | null;
-    /** withTracks installs this; the controller reads it for the discrete inset */
     getSize?: () => SliderSize;
-    /** withTracks installs this; the controller calls it with the state after every change */
     renderTracks?: (state?: unknown) => void;
     lifecycle?: {
         destroy?: () => void;
         mount?: () => void;
     };
-    /** The controller's own API, once withController has installed it */
     slider?: {
         setValue?: (value: number, triggerEvent?: boolean) => unknown;
     };
 }
-/**
- * What drives a drag: the same handlers are registered for mouse and for
- * touch, so each one takes either.
- *
- * @category Components
- * @internal
- */
 export type SliderPointerEvent = MouseEvent | TouchEvent;
-/**
- * The slider's elements, gathered from wherever they are kept.
- *
- * The index signature is for the legacy `components` bag, which is spread over
- * the named five so anything else it holds comes through too.
- *
- * @category Components
- * @internal
- */
 export interface SliderElements {
     container?: HTMLElement | null;
     handle?: HTMLElement | null;
@@ -230,32 +93,18 @@ export interface SliderElements {
     secondValueBubble?: HTMLElement | null;
     [key: string]: HTMLElement | null | undefined;
 }
-/**
- * The drawing and measuring helpers the controller hands to its handlers.
- *
- * @category Components
- * @internal
- */
 export interface SliderUiRenderer {
     getPercentage: (value: number) => number;
     getValueFromPosition: (position: number) => number;
     roundToStep: (value: number) => number;
     clamp: (value: number, min?: number, max?: number) => number;
     showValueBubble: (bubbleElement: HTMLElement | null, show: boolean) => void;
-    /** Alias of render, kept for callers that used the older name */
     updateUi: () => void;
     render: () => void;
 }
-/**
- * How the handlers report what happened.
- *
- * @category Components
- * @internal
- */
 export interface SliderEventHelpers {
     triggerEvent: (eventName: string, originalEvent?: Event | null) => void;
 }
-/** Public model, native forwarding and gesture notifications. */
 export interface SliderEvents extends TouchEvents {
     change: (payload: SliderEvent) => void;
     input: (payload: SliderEvent) => void;
@@ -276,68 +125,35 @@ export interface SliderEvents extends TouchEvents {
     })) => void;
 }
 export interface SliderComponent {
-    /** The root element of the slider */
     element: HTMLElement;
-    /** Sets slider value. Silent unless `triggerEvent` is true. */
     setValue: (value: number, triggerEvent?: boolean) => SliderComponent;
-    /** Gets slider value */
     getValue: () => number;
-    /** Sets secondary slider value (for range slider). Silent unless `triggerEvent` is true. */
     setSecondValue: (value: number, triggerEvent?: boolean) => SliderComponent;
-    /** Gets secondary slider value */
     getSecondValue: () => number | null;
-    /** Sets slider minimum value */
     setMin: (min: number) => SliderComponent;
-    /** Gets slider minimum value */
     getMin: () => number;
-    /** Sets slider maximum value */
     setMax: (max: number) => SliderComponent;
-    /** Gets slider maximum value */
     getMax: () => number;
-    /** Sets slider step size */
     setStep: (step: number) => SliderComponent;
-    /** Gets slider step size */
     getStep: () => number;
-    /** Enables the slider */
     enable: () => SliderComponent;
-    /** Disables the slider */
     disable: () => SliderComponent;
-    /** Checks if slider is disabled */
     isDisabled: () => boolean;
-    /** Sets slider color */
     setColor: (color: SliderColor) => SliderComponent;
-    /** Gets slider color */
     getColor: () => string;
-    /** Sets slider size */
     setSize: (size: SliderSize) => SliderComponent;
-    /** Gets the size as it was set: a size name, or a track height in pixels */
     getSize: () => SliderSize;
-    /** Shows or hides tick marks */
     showTicks: (show: boolean) => SliderComponent;
-    /** Shows or hides current value while dragging */
     showCurrentValue: (show: boolean) => SliderComponent;
-    /** Sets label text */
     setLabel: (text: string) => SliderComponent;
-    /** Gets label text */
     getLabel: () => string;
-    /** Sets the inset icon, and optionally the one shown at the minimum; '' removes it */
     setInsetIcon: (icon: string, atMin?: string) => SliderComponent;
-    /** Sets icon HTML */
     setIcon: (iconHtml: string) => SliderComponent;
-    /** Gets icon HTML */
     getIcon: () => string;
-    /** Adds event listener */
     on: <K extends keyof SliderEvents>(event: K, handler: SliderEvents[K]) => SliderComponent;
-    /** Removes event listener */
     off: <K extends keyof SliderEvents>(event: K, handler: SliderEvents[K]) => SliderComponent;
-    /** Destroys the slider component and cleans up resources */
     destroy: () => void;
 }
-/**
- * Registers SliderConfig with the global defaults map, so
- * `setComponentDefaults("slider", ...)` is typed without core
- * importing anything from this component.
- */
 declare module "../../core/config/global" {
     interface ComponentConfigMap {
         slider?: Partial<SliderConfig>;