material 3.2.6 → 3.2.7

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

@@ -1,45 +1,35 @@
 import type { ForwardedEventPayload } from "../../core/dom/index.js";
 import type { NormalizedEvent } from "../../core/utils/mobile.js";
-/** Value returned by the API, including complete ranges and empty selections. */
-export type DatePickerValue = Date | [Date, Date] | null;
-/**
- * The value as the selection mode shapes it: a range is a pair, a
- * single date a date; an unknown mode, either.
- */
-export type DatePickerValueOf<M> = M extends "range" ? [Date, Date] | null : M extends "single" ? Date | null : DatePickerValue;
-/** What setValue and `value` take: a date, a range as a pair, or as { start, end }. */
-export type DatePickerInput = Date | string | [Date | string, Date | string] | {
+export type DatePickerValue = Date | [
+    Date,
+    Date
+] | null;
+export type DatePickerValueOf<M> = M extends "range" ? [
+    Date,
+    Date
+] | null : M extends "single" ? Date | null : DatePickerValue;
+export type DatePickerInput = Date | string | [
+    Date | string,
+    Date | string
+] | {
     start: Date | string;
     end: Date | string;
 };
-/**
- * One shape whatever committed the value: a range's `value` is the
- * pair, and `rangeEndDate` its end, kept for compatibility (null otherwise).
- * The docked calendar sent the start as the value and the end apart.
- */
 export interface DatePickerChangePayload<V = DatePickerValue> {
     value: V;
     rangeEndDate: Date | null;
     formattedValue: string;
-    /**
-     * The value as ISO 8601 text, the `value` of the `<m-datepicker>` element's
-     * `change`: a date (`2026-09-10`), a `start/end` interval, or ""
-     */
     iso: string;
 }
-/** Visibility events carry the committed value, including complete ranges. */
 export interface DatePickerVisibilityPayload<V = DatePickerValue> {
     value: V;
 }
-/** Normalized touch-end event emitted by the interactive root. */
 export type DatePickerTapPayload = NormalizedEvent;
-/** Horizontal swipe emitted by the interactive root. */
 export interface DatePickerSwipePayload {
     direction: "left" | "right";
     deltaX: number;
     deltaY: number;
 }
-/** Events emitted by the picker API, calendar selections and interactive root. */
 export interface DatePickerEvents<V = DatePickerValue> {
     change: (payload: DatePickerChangePayload<V>) => void;
     open: (payload: DatePickerVisibilityPayload<V>) => void;
@@ -49,155 +39,38 @@ export interface DatePickerEvents<V = DatePickerValue> {
     tap: (payload: DatePickerTapPayload) => void;
     swipe: (payload: DatePickerSwipePayload) => void;
 }
-/**
- * DatePicker variant types
- * @category Components
- */
 export type DatePickerVariant = 'docked' | 'modal' | 'modal-input' | 'fullscreen';
-/**
- * DatePicker view types
- * @category Components
- */
 export type DatePickerView = 'day' | 'month' | 'year';
-/**
- * DatePicker selection mode types
- * @category Components
- */
 export type DatePickerSelectionMode = 'single' | 'range';
-/**
- * Day names for the calendar
- * @internal
- */
 export declare const DAY_NAMES: string[];
-/**
- * Month names for the calendar
- * @internal
- */
 export declare const MONTH_NAMES: string[];
-/**
- * Month names abbreviated
- * @internal
- */
 export declare const MONTH_NAMES_SHORT: string[];
-/**
- * CSS class name for today's date
- * @internal
- */
 export declare const TODAY_CLASS = "datepicker__day--today";
-/**
- * CSS class name for selected date
- * @internal
- */
 export declare const SELECTED_CLASS = "datepicker__day--selected";
-/**
- * CSS class name for dates outside the current month
- * @internal
- */
 export declare const OUTSIDE_MONTH_CLASS = "datepicker__day--outside";
-/**
- * CSS class for the first date in a range
- * @internal
- */
 export declare const RANGE_START_CLASS = "datepicker__cell--range-start";
-/**
- * CSS class for the last date in a range
- * @internal
- */
 export declare const RANGE_END_CLASS = "datepicker__cell--range-end";
-/**
- * CSS class for dates between start and end in a range
- * @internal
- */
 export declare const RANGE_MIDDLE_CLASS = "datepicker__cell--range";
-/**
- * Configuration interface for the DatePicker component
- * @category Components
- */
 export interface DatePickerConfig {
-    /** Name of the committed form input. */
     name?: string;
-    /**
-     * DatePicker variant that determines display style
-     * @default 'docked'
-     */
     variant?: DatePickerVariant | string;
-    /**
-     * Whether the datepicker is initially disabled
-     * @default false
-     */
     disabled?: boolean;
-    /**
-     * Initial view to display (day, month, year)
-     * @default 'day'
-     */
     initialView?: DatePickerView | string;
-    /**
-     * Selection mode for the datepicker (single or range)
-     * @default 'single'
-     */
     selectionMode?: DatePickerSelectionMode | string;
-    /**
-     * Initial selected date(s)
-     * Accepts a Date object, Date string, or two dates for range selection
-     */
     value?: DatePickerInput;
-    /** The value shows and cannot change: no typing, no calendar. */
     readOnly?: boolean;
-    /** A date is required: on the input for forms, and checkValidity(). */
     required?: boolean;
-    /** The supporting text under the field. Default: the date format. */
     supportingText?: string;
-    /**
-     * Minimum selectable date
-     */
     minDate?: Date | string;
-    /**
-     * Maximum selectable date
-     */
     maxDate?: Date | string;
-    /**
-     * Format for displaying dates
-     * @default 'MM/DD/YYYY'
-     */
     dateFormat?: string;
-    /**
-     * Label text for the datepicker
-     * @example 'Select Date'
-     */
     label?: string;
-    /**
-     * Placeholder text for the input field
-     * @example 'MM/DD/YYYY'
-     */
     placeholder?: string;
-    /**
-     * Additional CSS classes to add to the datepicker
-     * @example 'form-field event-date'
-     */
     class?: string;
-    /**
-     * Component prefix for class names
-     * @default 'mtrl'
-     */
     prefix?: string;
-    /**
-     * Component name used in class generation
-     */
     componentName?: string;
-    /**
-     * Whether to enable animation effects
-     * @default true
-     */
     animate?: boolean;
-    /**
-     * Whether pointer or Space selection also closes the picker. Enter on a
-     * focused day accepts a single date and closes independently of this option.
-     * @default false
-     */
     closeOnSelect?: boolean;
-    /**
-     * Array of dates to highlight or disable
-     */
     specialDates?: Array<{
         date: Date | string;
         highlight?: boolean;
@@ -205,179 +78,62 @@ export interface DatePickerConfig {
         tooltip?: string;
     }>;
 }
-/**
- * Date object with additional properties for rendering
- * @internal
- */
 export interface CalendarDate {
-    /** JavaScript Date object */
     date: Date;
-    /** Day of the month (1-31) */
     day: number;
-    /** Whether the date is in the current month being displayed */
     isCurrentMonth: boolean;
-    /** Whether the date is today */
     isToday: boolean;
-    /** Whether the date is selected */
     isSelected: boolean;
-    /** Whether the date is disabled */
     isDisabled: boolean;
-    /** Whether the date is the first date in a range */
     isRangeStart?: boolean;
-    /** Whether the date is the last date in a range */
     isRangeEnd?: boolean;
-    /** Whether the date is between start and end in a range */
     isRangeMiddle?: boolean;
 }
-/**
- * Calendar API interface for managing calendar navigation
- * @category Components
- */
 export interface CalendarAPI {
-    /** Updates the calendar view to display a specific month/year */
     goToDate: (date: Date) => void;
-    /** Moves to the next month */
     nextMonth: () => void;
-    /** Moves to the previous month */
     prevMonth: () => void;
-    /** Moves to the next year */
     nextYear: () => void;
-    /** Moves to the previous year */
     prevYear: () => void;
-    /** Switches to day selection view */
     showDayView: () => void;
-    /** Switches to month selection view */
     showMonthView: () => void;
-    /** Switches to year selection view */
     showYearView: () => void;
-    /** Gets the current calendar view */
     getCurrentView: () => string;
 }
-/**
- * DatePicker component interface
- * @category Components
- */
 export interface DatePickerComponent<V = DatePickerValue> {
-    /** The datepicker's main DOM element */
     element: HTMLElement;
-    /** The input field DOM element */
     input: HTMLInputElement;
-    /** API for managing calendar and selected dates */
     calendar: CalendarAPI;
-    /** API for managing disabled state */
     disabled: {
-        /** Enables the datepicker */
         enable: () => void;
-        /** Disables the datepicker */
         disable: () => void;
-        /** Checks if the datepicker is disabled */
         isDisabled: () => boolean;
     };
-    /** API for managing component lifecycle */
     lifecycle: {
-        /** Destroys the component and cleans up resources */
         destroy: () => void;
     };
-    /**
-     * Gets a class name with the component's prefix
-     * @param name - Base class name
-     * @returns Prefixed class name
-     */
     getClass: (name: string) => string;
-    /**
-     * Opens the datepicker dropdown/modal. When it returns, `isOpen()` is true
-     * and `open` has been emitted; the surface may be painted after `open()`
-     * returns. On an open, disabled or read-only picker it does nothing. The
-     * click that called it does not count as a click outside.
-     * @returns The datepicker component for chaining
-     */
     open: () => DatePickerComponent<V>;
-    /**
-     * Closes the datepicker dropdown/modal. When it returns, `isOpen()` is false
-     * and `close` has been emitted. On a closed picker it does nothing.
-     * @returns The datepicker component for chaining
-     */
     close: () => DatePickerComponent<V>;
-    /** Whether the dropdown or modal is open */
     isOpen: () => boolean;
-    /**
-     * Gets the selected date(s)
-     * @returns Date object, array of two Date objects for range, or null if none selected
-     */
     getValue: () => V;
-    /**
-     * Sets the selected date(s). Silent: only the user's choice emits `change`
-     * @param value - Date, string, or array of dates for range selection
-     * @returns The datepicker component for chaining
-     */
     setValue: (value: DatePickerInput) => DatePickerComponent<V>;
-    /** Read-only: the value shows and cannot change */
     setReadOnly: (readOnly: boolean) => DatePickerComponent<V>;
-    /** Whether the picker is read-only */
     isReadOnly: () => boolean;
-    /** Whether a date is required */
     setRequired: (required: boolean) => DatePickerComponent<V>;
-    /**
-     * False when a date is required and missing. A dialog variant's input is
-     * read-only, which forms do not validate.
-     */
     checkValidity: () => boolean;
-    /** As checkValidity(), and shows the error on the field when false */
     reportValidity: () => boolean;
-    /** The supporting text; empty or null shows the date format */
     setSupportingText: (text: string | null) => DatePickerComponent<V>;
-    /**
-     * Gets the formatted date string based on the selected date(s)
-     * @returns Formatted date string or empty string if none selected
-     */
     getFormattedValue: () => string;
-    /**
-     * Clears the selected date(s). Silent
-     * @returns The datepicker component for chaining
-     */
     clear: () => DatePickerComponent<V>;
-    /**
-     * Enables the datepicker
-     * @returns The datepicker component for chaining
-     */
     enable: () => DatePickerComponent<V>;
-    /**
-     * Disables the datepicker
-     * @returns The datepicker component for chaining
-     */
     disable: () => DatePickerComponent<V>;
-    /**
-     * Sets the minimum selectable date
-     * @param date - Date object or string
-     * @returns The datepicker component for chaining
-     */
     setMinDate: (date: Date | string) => DatePickerComponent<V>;
-    /**
-     * Sets the maximum selectable date
-     * @param date - Date object or string
-     * @returns The datepicker component for chaining
-     */
     setMaxDate: (date: Date | string) => DatePickerComponent<V>;
-    /**
-     * Destroys the datepicker component and cleans up resources
-     */
     destroy: () => void;
-    /**
-     * Adds an event listener to the datepicker
-     * @param event - Event name ('change', 'open', 'close', etc.)
-     * @param handler - Event handler function
-     * @returns The datepicker component for chaining
-     */
     on: <K extends keyof DatePickerEvents<V>>(event: K, handler: DatePickerEvents<V>[K]) => DatePickerComponent<V>;
-    /**
-     * Removes an event listener from the datepicker
-     * @param event - Event name
-     * @param handler - Event handler function
-     * @returns The datepicker component for chaining
-     */
     off: <K extends keyof DatePickerEvents<V>>(event: K, handler: DatePickerEvents<V>[K]) => DatePickerComponent<V>;
 }
-/** Internal calendar view model. Dates are local civil dates, without a time. */
 export interface DatePickerState {
     selectedDate: Date | null;
     rangeEndDate: Date | null;
@@ -396,7 +152,6 @@ export interface DatePickerState {
     label: string;
     specialDates: NonNullable<DatePickerConfig["specialDates"]>;
     isAllowed(date: Date): boolean;
-    /** Full screen: the first month of the rendered list, and how many follow. */
     listStart?: Date;
     listLength?: number;
 }

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

@@ -1,116 +1,51 @@
-/**
- * Dialog sizes
- */
 export declare const DIALOG_SIZES: {
-    /** 320px width, for simple messages or choices */
     readonly SMALL: "small";
-    /** 560px width, for standard forms or content (default) */
     readonly MEDIUM: "medium";
-    /** 800px width, for complex forms or rich content */
     readonly LARGE: "large";
-    /** Spans the full width of the viewport with margins */
     readonly FULLWIDTH: "fullwidth";
-    /** Takes up the entire viewport (similar to a new page) */
     readonly FULLSCREEN: "fullscreen";
 };
-/**
- * Dialog animation types
- */
 export declare const DIALOG_ANIMATIONS: {
-    /** Scale up/down animation from center (default) */
     readonly SCALE: "scale";
-    /** Slide in from bottom, slide out to bottom */
     readonly SLIDE_UP: "slide-up";
-    /** Slide in from top, slide out to top */
     readonly SLIDE_DOWN: "slide-down";
-    /** Simple fade in/out animation */
     readonly FADE: "fade";
 };
-/**
- * Footer alignment options
- */
 export declare const DIALOG_FOOTER_ALIGNMENTS: {
-    /** Align buttons to the right (default, follows Material Design guidelines) */
     readonly RIGHT: "right";
-    /** Align buttons to the left */
     readonly LEFT: "left";
-    /** Center buttons in footer */
     readonly CENTER: "center";
-    /** Space buttons evenly, with first button at left, last at right */
     readonly SPACE_BETWEEN: "space-between";
 };
-/**
- * Dialog events
- */
 export declare const DIALOG_EVENTS: {
-    /** Fired when the dialog begins opening */
     readonly OPEN: "open";
-    /** Fired when the dialog begins closing */
     readonly CLOSE: "close";
-    /** Fired before the dialog starts opening (can be prevented) */
     readonly BEFORE_OPEN: "beforeopen";
-    /** Fired before the dialog starts closing (can be prevented) */
     readonly BEFORE_CLOSE: "beforeclose";
-    /** Fired after the dialog has fully opened (animation complete) */
     readonly AFTER_OPEN: "afteropen";
-    /** Fired after the dialog has fully closed (animation complete) */
     readonly AFTER_CLOSE: "afterclose";
 };
-/**
- * Dialog CSS classes
- */
 export declare const DIALOG_CLASSES: {
-    /** Root dialog element */
     readonly ROOT: "dialog";
-    /** Overlay background */
     readonly OVERLAY: "dialog__overlay";
-    /** Dialog container */
     readonly CONTAINER: "dialog__container";
-    /** Dialog header */
     readonly HEADER: "dialog__header";
-    /** Dialog title */
     readonly TITLE: "dialog__title";
-    /** Dialog subtitle */
     readonly SUBTITLE: "dialog__subtitle";
-    /** Close button */
     readonly CLOSE_BUTTON: "dialog__close-button";
-    /** Dialog content */
     readonly CONTENT: "dialog__content";
-    /** Dialog footer */
     readonly FOOTER: "dialog__footer";
-    /** Dialog divider */
     readonly DIVIDER: "dialog__divider";
-    /** Added when dialog is open */
     readonly OPEN: "dialog--open";
-    /** Added when dialog is animating */
     readonly ANIMATING: "dialog--animating";
 };
-/**
- * Default animation duration in milliseconds
- */
 export declare const DEFAULT_ANIMATION_DURATION = 300;
-/**
- * Default z-index for dialogs
- */
 export declare const DEFAULT_Z_INDEX = 1000;
-/**
- * Button variants for dialog buttons following Material Design 3
- */
 export declare const DIALOG_BUTTON_VARIANTS: {
-    /** Text button (low emphasis) */
     readonly TEXT: "text";
-    /** Filled button (high emphasis) */
     readonly FILLED: "filled";
-    /** Outlined button (medium emphasis) */
     readonly OUTLINED: "outlined";
-    /** Tonal button (medium emphasis) */
     readonly TONAL: "tonal";
 };
-/**
- * Default button text for confirmation dialogs
- */
 export declare const DEFAULT_CONFIRM_BUTTON_TEXT = "Yes";
-/**
- * Default button text for cancellation in dialogs
- */
 export declare const DEFAULT_CANCEL_BUTTON_TEXT = "No";

package/dist/components/dialog/dialog.d.ts

@@ -1,89 +1,3 @@
-/**
- * Dialog Component Implementation
- *
- * This module implements a Material Design 3 dialog component that can be
- * used for alerts, confirmations, form submissions, and complex interactions.
- *
- * The implementation supports various features including:
- * - Multiple size variants (small, medium, large, fullwidth, fullscreen)
- * - Multiple animation styles
- * - Custom buttons with configurable actions
- * - Dividers for visual separation
- * - Confirmation dialog patterns
- * - Event handling for dialog lifecycle
- *
- * @module components/dialog
- * @category Components
- */
 import { DialogConfig, DialogComponent } from "./types.js";
-/**
- * Creates a new Dialog component with the specified configuration.
- *
- * Dialogs are modal windows that appear in front of app content to
- * provide critical information or ask for decisions. They inform
- * users about specific tasks and may contain critical information,
- * require decisions, or involve multiple tasks.
- *
- * @param {DialogConfig} config - Configuration options for the dialog
- * @returns {DialogComponent} A fully configured dialog component instance
- * @throws {Error} Throws an error if dialog creation fails
- *
- * @category Components
- *
- * @example
- * // Create a basic dialog with title and content
- * const infoDialog = createDialog({
- *   title: 'Information',
- *   content: 'Your changes have been saved.',
- *   size: 'small',
- *   buttons: [
- *     { text: 'OK', variant: 'text', closeDialog: true }
- *   ]
- * });
- *
- * document.body.appendChild(infoDialog.element);
- * infoDialog.open();
- *
- * @example
- * // Create a form dialog with multiple buttons
- * const formDialog = createDialog({
- *   title: 'Edit Profile',
- *   content: '<form id="profile-form">...</form>',
- *   size: 'medium',
- *   closeOnEscape: true,
- *   closeOnOverlayClick: false,
- *   buttons: [
- *     {
- *       text: 'Save',
- *       variant: 'filled',
- *       onClick: (event, dialog) => {
- *         const form = document.getElementById('profile-form');
- *         if(form.checkValidity()) {
- *           saveProfile(form);
- *           dialog.close();
- *         }
- *       }
- *     },
- *     { text: 'Cancel', variant: 'text', closeDialog: true }
- *   ]
- * });
- *
- * @example
- * // Create a confirmation dialog using the Promise-based API
- * async function confirmAction() {
- *   const dialog = createDialog();
- *   const confirmed = await dialog.confirm({
- *     title: 'Confirm Action',
- *     message: 'Are you sure you want to proceed?',
- *     confirmText: 'Yes, proceed',
- *     cancelText: 'No, cancel'
- *   });
- *
- *   if (confirmed) {
- *     // User clicked the confirm button
- *     performAction();
- *   }
- * }
- */
 declare const createDialog: (config?: DialogConfig) => DialogComponent;
 export default createDialog;

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

@@ -1,14 +1,2 @@
-/**
- * Dialog Component Module
- *
- * A Material Design 3 dialog implementation with support for multiple sizes,
- * animations, content types, and interactive features like confirmation.
- *
- * Dialogs inform users about critical information, require decisions,
- * or involve multiple tasks.
- *
- * @module components/dialog
- * @category Components
- */
 export { default, default as createDialog } from "./dialog.js";
 export type { DialogConfig, DialogComponent, DialogButton, DialogEvent, DialogConfirmOptions, DialogSize, DialogAnimation, DialogFooterAlignment, DialogEventType, } from "./types.js";