material 3.2.6 → 3.3.0

package/dist/components/text-field/features/trailing-icon.d.ts

@@ -1,7 +1,4 @@
 import { BaseComponent, ElementComponent } from "../../../core/compose/component.js";
-/**
- * Extended element component with input field
- */
 interface InputElementComponent extends ElementComponent {
     input?: HTMLInputElement | HTMLTextAreaElement;
     emit?: (event: string, data?: unknown) => void;
@@ -9,82 +6,24 @@ interface InputElementComponent extends ElementComponent {
         destroy: () => void;
     };
 }
-/** What an interactive trailing icon's `trailing` event carries */
 export interface TextFieldTrailingPayload {
-    /** The field's value when the icon was activated */
     value: string;
-    /** The click (Enter and Space reach a button as one) */
     event: MouseEvent;
 }
-/**
- * Configuration for trailing icon feature
- */
 export interface TrailingIconConfig {
-    /**
-     * Trailing icon HTML content
-     */
     trailingIcon?: string;
-    /**
-     * Makes the trailing icon a button with this accessible name: clear, show
-     * password, open a menu. M3 draws an interactive trailing icon as an
-     * icon button, as Compose's trailing slot holds an `IconButton`: a 40dp state
-     * layer and a 48dp target. Activating it emits `trailing`. Without a label the
-     * icon is decorative.
-     */
     trailingIconLabel?: string;
-    /** `trailing` listener. Registered on the text field at creation, not called from here. */
     onTrailingClick?: (event: TextFieldTrailingPayload) => void;
-    /** Whether the field starts disabled; the trailing button is disabled with it */
     disabled?: boolean;
-    /**
-     * CSS class prefix
-     */
     prefix?: string;
-    /**
-     * Component name
-     */
     componentName?: string;
 }
-/**
- * Component with trailing icon capabilities
- */
-/**
- * What this feature installs.
- *
- * Declared apart from TrailingIconComponent because the enhancer returns
- * `C & TrailingIconFeature`: C already carries the base half, and naming the whole
- * interface made the return `C & Partial<TrailingIconComponent>`, which widened
- * `trailingIcon` to include undefined and put the setters' `this` at odds with
- * the property they assign.
- */
 export interface TrailingIconFeature {
-    /**
-     * Trailing icon element
-     */
     trailingIcon: HTMLElement | null;
-    /**
-     * Sets trailing icon content
-     * @param html - HTML content for the icon
-     * @param label - The button's accessible name, making the icon a button; an empty
-     *   string makes it decorative again; left out, the icon keeps what it is
-     * @returns Component instance for chaining
-     */
     setTrailingIcon: (html: string, label?: string) => TrailingIconComponent;
-    /**
-     * Removes trailing icon
-     * @returns Component instance for chaining
-     */
     removeTrailingIcon: () => TrailingIconComponent;
 }
-/**
- * Component with trailingicon capabilities
- */
 export interface TrailingIconComponent extends BaseComponent, TrailingIconFeature {
 }
-/**
- * Adds trailing icon to a text field component
- * @param config - Configuration with trailing icon settings
- * @returns Function that enhances a component with trailing icon
- */
 export declare const withTrailingIcon: <T extends TrailingIconConfig & object>(config: T) => <C extends InputElementComponent>(component: C) => C & TrailingIconFeature;
 export {};

package/dist/components/text-field/text-field.d.ts

@@ -1,36 +1,3 @@
 import { TextFieldConfig, TextFieldComponent } from "./types.js";
-/**
- * Creates a new TextField component
- *
- * Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
- * This implementation follows Material Design 3 guidelines for accessible, customizable text fields.
- *
- * @param {TextFieldConfig} config - TextField configuration options
- * @returns {TextFieldComponent} A fully configured text field component instance
- * @throws {Error} Throws an error if text field creation fails
- *
- * @example
- * // Create a basic text field
- * const textField = createTextField({
- *   label: 'Username',
- *   name: 'username'
- * });
- *
- * document.querySelector('.form').appendChild(textField.element);
- *
- * @example
- * // Create a text field with prefix and suffix
- * const currencyField = createTextField({
- *   label: 'Amount',
- *   type: 'number',
- *   prefixText: '$',
- *   suffixText: 'USD'
- * });
- *
- * // Add event listener
- * currencyField.on('input', ({ value }) => {
- *   console.log('Amount entered:', value);
- * });
- */
 declare const createTextField: (config?: TextFieldConfig) => TextFieldComponent;
 export default createTextField;

package/dist/components/text-field/types.d.ts

@@ -1,39 +1,18 @@
 import type { EventCallback } from "../../core/state/emitter.js";
 import type { TextFieldTrailingPayload } from "./features/trailing-icon.js";
 export type { TextFieldTrailingPayload };
-/**
- * Available TextField variants
- */
 export type TextFieldVariant = "filled" | "outlined";
-/**
- * TextField variant constants
- */
 export declare const TEXT_FIELD_VARIANTS: {
     readonly FILLED: "filled";
     readonly OUTLINED: "outlined";
 };
-/**
- * Available TextField states
- */
 export type TextFieldStates = "active" | "inactive" | "disabled";
-/**
- * Available TextField density levels
- */
 export type TextFieldDensity = "default" | "compact";
-/**
- * TextField density constants
- */
 export declare const TEXT_FIELD_DENSITY: {
     readonly DEFAULT: "default";
     readonly COMPACT: "compact";
 };
-/**
- * Available TextField types
- */
 export type TextFieldTypes = "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "multiline";
-/**
- * TextField type constants
- */
 export declare const TEXT_FIELD_TYPES: {
     readonly TEXT: "text";
     readonly PASSWORD: "password";
@@ -44,183 +23,90 @@ export declare const TEXT_FIELD_TYPES: {
     readonly SEARCH: "search";
     readonly MULTILINE: "multiline";
 };
-/**
- * Configuration interface for the TextField component
- */
 export interface TextFieldConfig {
-    /** Input type (text, password, email, etc.) */
     type?: TextFieldTypes | string;
-    /** Visual variant (filled, outlined) */
     variant?: TextFieldVariant | string;
-    /** Density level (default, compact) */
     density?: TextFieldDensity | string;
-    /** Input name attribute */
     name?: string;
-    /** Label text */
     label?: string;
-    /** Initial value */
     value?: string;
-    /** Placeholder text */
     placeholder?: string;
-    /** Whether input is required; the label gets an asterisk */
     required?: boolean;
-    /**
-     * No asterisk on a required field: M3 lets a form whose fields are mostly
-     * required mark its optional ones instead
-     */
     noAsterisk?: boolean;
-    /** Whether text field is disabled */
     disabled?: boolean;
-    /** Whether text field is readonly */
     readonly?: boolean;
-    /** Maximum input length */
     maxLength?: number;
-    /** Input pattern for validation */
     pattern?: string;
-    /** Autocomplete attribute */
     autocomplete?: string;
-    /** Leading icon HTML content. Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     leadingIcon?: string;
-    /** Trailing icon HTML content. Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     trailingIcon?: string;
-    /**
-     * Makes the trailing icon a button with this accessible name (clear, show
-     * password, …), emitting `trailing` when activated. Without it the icon is
-     * decorative. M3 draws an interactive trailing icon as an icon button, as
-     * Compose's trailing slot holds an `IconButton`.
-     */
     trailingIconLabel?: string;
-    /** `trailing` listener registered at creation. */
     onTrailingClick?: TextFieldEvents["trailing"];
-    /** Supporting text content */
     supportingText?: string;
-    /** Whether supporting text indicates an error */
     error?: boolean;
-    /** Prefix text to display before the input */
     prefixText?: string;
-    /** Suffix text to display after the input */
     suffixText?: string;
-    /** Additional CSS classes */
     class?: string;
-    /** Prefix for class names */
     prefix?: string;
-    /** Component name */
     componentName?: string;
 }
-/** Payload emitted by native input/change and autofill detection. */
 export interface TextFieldValuePayload {
     value: string;
     isEmpty: boolean;
     isAutofilled: boolean;
 }
-/** Focus and blur report whether the input is empty, without a native event. */
 export interface TextFieldFocusPayload {
     isEmpty: boolean;
 }
-/** Events emitted by the text input feature. setValue() is silent. */
 export interface TextFieldEvents {
-    /** The trailing icon button was activated (`trailingIconLabel`) */
     trailing: (payload: TextFieldTrailingPayload) => void;
     input: (payload: TextFieldValuePayload) => void;
     change: (payload: TextFieldValuePayload) => void;
     focus: (payload: TextFieldFocusPayload) => void;
     blur: (payload: TextFieldFocusPayload) => void;
 }
-/**
- * TextField component interface
- */
 export interface TextFieldComponent {
-    /** The root element of the text field */
     element: HTMLElement;
-    /**
-     * The container: label, input, outline, icons and affixes, above the
-     * supporting text row. Anchor popovers to it.
-     */
     field: HTMLElement;
-    /** The input element */
     input: HTMLInputElement | HTMLTextAreaElement;
-    /** Gets the text field's value */
     getValue: () => string;
-    /** Sets the text field's value */
     setValue: (value: string) => TextFieldComponent;
-    /** Sets an attribute on the input element */
     setAttribute: (name: string, value: string) => TextFieldComponent;
-    /** Gets an attribute from the input element */
     getAttribute: (name: string) => string | null;
-    /** Removes an attribute from the input element */
     removeAttribute: (name: string) => TextFieldComponent;
-    /** Sets the text field's variant (filled or outlined) */
     setVariant: (variant: TextFieldVariant) => TextFieldComponent;
-    /** Gets the text field's current variant */
     getVariant: () => TextFieldVariant;
-    /** Sets the text field's label text */
     setLabel: (text: string) => TextFieldComponent;
-    /** Gets the text field's label text */
     getLabel: () => string;
-    /** Leading icon element (if present) */
     leadingIcon: HTMLElement | null;
-    /** Sets the leading icon HTML content */
     setLeadingIcon: (html: string) => TextFieldComponent;
-    /** Removes the leading icon */
     removeLeadingIcon: () => TextFieldComponent;
-    /** Trailing icon element (if present) */
     trailingIcon: HTMLElement | null;
-    /** Sets the trailing icon HTML content */
-    /**
-     * Sets the trailing icon. `label` makes it a button with that accessible name,
-     * an empty one makes it decorative; left out, the icon keeps what it is.
-     */
     setTrailingIcon: (html: string, label?: string) => TextFieldComponent;
-    /** Removes the trailing icon */
     removeTrailingIcon: () => TextFieldComponent;
-    /** Makes the field required or optional, the label's asterisk with it */
     setRequired: (required: boolean) => TextFieldComponent;
-    /** Whether the field is required */
     isRequired: () => boolean;
-    /** Supporting text element (if present) */
     supportingTextElement: HTMLElement | null;
-    /** Sets the supporting text content */
     setSupportingText: (text: string, isError?: boolean) => TextFieldComponent;
-    /** Removes the supporting text */
     removeSupportingText: () => TextFieldComponent;
-    /** Prefix text element (if present) */
     prefixTextElement: HTMLElement | null;
-    /** Sets the prefix text content */
     setPrefixText: (text: string) => TextFieldComponent;
-    /** Removes the prefix text */
     removePrefixText: () => TextFieldComponent;
-    /** Suffix text element (if present) */
     suffixTextElement: HTMLElement | null;
-    /** Sets the suffix text content */
     setSuffixText: (text: string) => TextFieldComponent;
-    /** Removes the suffix text */
     removeSuffixText: () => TextFieldComponent;
-    /** Manually update element positions (useful after DOM changes) */
     updatePositions: () => TextFieldComponent;
-    /** Sets the error state of the text field */
     setError: (error: boolean, message?: string) => TextFieldComponent;
-    /** Gets the current error state */
     isError: () => boolean;
-    /** Sets the density of the text field */
     setDensity: (density: TextFieldDensity | string) => TextFieldComponent;
-    /** Gets the current density setting */
     getDensity: () => string;
-    /** Subscribes to input state events; keyboard events use input.addEventListener. */
     on: <K extends keyof TextFieldEvents>(event: K, handler: TextFieldEvents[K]) => TextFieldComponent;
-    /** Removes event listener */
     off: <K extends keyof TextFieldEvents>(event: K, handler: TextFieldEvents[K]) => TextFieldComponent;
-    /** Enables the text field */
     enable: () => TextFieldComponent;
-    /** Disables the text field */
     disable: () => TextFieldComponent;
-    /** Whether the text field is disabled */
     isDisabled: () => boolean;
-    /** Destroys the text field component and cleans up resources */
     destroy: () => void;
 }
-/**
- * API options interface
- */
 export interface ApiOptions {
     disabled: {
         enable: () => void;
@@ -231,12 +117,8 @@ export interface ApiOptions {
         destroy: () => void;
     };
 }
-/**
- * Base component interface
- */
 export interface BaseComponent {
     element: HTMLElement;
-    /** The prefixed class name, from createBase */
     getClass: (name: string) => string;
     input?: HTMLInputElement | HTMLTextAreaElement;
     config?: {
@@ -282,11 +164,6 @@ export interface BaseComponent {
     setError?: (error: boolean, message?: string) => void;
     isError?: () => boolean;
 }
-/**
- * Registers TextFieldConfig with the global defaults map, so
- * `setComponentDefaults("text-field", ...)` is typed without core
- * importing anything from this component.
- */
 declare module "../../core/config/global" {
     interface ComponentConfigMap {
         "text-field"?: Partial<TextFieldConfig>;

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

@@ -1,158 +1,70 @@
-/**
- * Time picker display types
- * @category Components
- */
 export declare const TIMEPICKER_TYPES: {
-    /** Clock dial-based time picker */
     readonly DIAL: "dial";
-    /** Text input-based time picker */
     readonly INPUT: "input";
 };
-/**
- * Time picker orientations
- * @category Components
- */
 export declare const TIMEPICKER_ORIENTATIONS: {
-    /** Vertical layout (default on mobile) */
     readonly VERTICAL: "vertical";
-    /** Horizontal layout */
     readonly HORIZONTAL: "horizontal";
 };
-/**
- * Time formats
- * @category Components
- */
 export declare const TIMEPICKER_FORMATS: {
-    /** 12-hour format with AM/PM */
     readonly AMPM: "12h";
-    /** 24-hour format */
     readonly MILITARY: "24h";
 };
-/**
- * Time periods for 12-hour format
- * @category Components
- */
 export declare const TIMEPICKER_PERIODS: {
-    /** Morning */
     readonly AM: "AM";
-    /** Afternoon/Evening */
     readonly PM: "PM";
 };
-/**
- * Time picker event types
- * @category Components
- */
 export declare const TIMEPICKER_EVENTS: {
-    /** Fired when the committed time changes: on OK, or setValue */
     readonly CHANGE: "change";
-    /** Fired as the dial, fields or AM/PM change the draft, while open */
     readonly INPUT: "input";
-    /** Fired when time picker opens */
     readonly OPEN: "open";
-    /** Fired when time picker closes */
     readonly CLOSE: "close";
-    /** Fired when time is confirmed */
     readonly CONFIRM: "confirm";
-    /** Fired when time picker is canceled */
     readonly CANCEL: "cancel";
 };
-/**
- * Time constants used for generating clock numbers and validation
- * @category Components
- */
 export declare const TIMEPICKER_VALUES: {
-    /** Hours for 12-hour format (1-12) */
     readonly HOURS_12: number[];
-    /** Hours for 24-hour format (0-23) */
     readonly HOURS_24: number[];
-    /** Minutes (0-59) */
     readonly MINUTES: number[];
-    /** Seconds (0-59) */
     readonly SECONDS: number[];
 };
-/**
- * Element class selectors for time picker components
- * @category Components
- */
 export declare const TIMEPICKER_SELECTORS: {
-    /** Main container selector */
     readonly CONTAINER: ".mtrl-time-picker";
-    /** Dialog container selector */
     readonly DIALOG: ".mtrl-time-picker__dialog";
-    /** Title element selector */
     readonly TITLE: ".mtrl-time-picker__title";
-    /** Content container selector */
     readonly CONTENT: ".mtrl-time-picker__content";
-    /** Clock dial container selector */
     readonly DIAL: ".mtrl-time-picker__dial";
-    /** Clock dial face selector */
     readonly DIAL_FACE: ".mtrl-time-picker__dial-face";
-    /** Clock centre dot selector */
     readonly DIAL_CENTER: ".mtrl-time-picker__dial-centre";
-    /** Clock numbers container selector */
     readonly DIAL_NUMBERS: ".mtrl-time-picker__dial-numbers";
-    /** Individual number element selector */
     readonly DIAL_NUMBER: ".mtrl-time-picker__dial-number";
-    /** Input container selector */
     readonly INPUT_CONTAINER: ".mtrl-time-picker__input-container";
-    /** Hours input selector */
     readonly HOURS_INPUT: ".mtrl-time-picker__hours";
-    /** Minutes input selector */
     readonly MINUTES_INPUT: ".mtrl-time-picker__minutes";
-    /** Seconds input selector */
     readonly SECONDS_INPUT: ".mtrl-time-picker__seconds";
-    /** Time separator selector */
     readonly SEPARATOR: ".mtrl-time-picker__separator";
-    /** AM/PM selector container */
     readonly PERIOD_CONTAINER: ".mtrl-time-picker__period";
-    /** AM button selector */
     readonly PERIOD_AM: ".mtrl-time-picker__period-am";
-    /** PM button selector */
     readonly PERIOD_PM: ".mtrl-time-picker__period-pm";
-    /** Actions container selector */
     readonly ACTIONS: ".mtrl-time-picker__actions";
-    /** Toggle type button selector */
     readonly TOGGLE_TYPE_BUTTON: ".mtrl-time-picker__toggle-type";
-    /** Cancel button selector */
     readonly CANCEL_BUTTON: ".mtrl-time-picker__cancel";
-    /** Confirm button selector */
     readonly CONFIRM_BUTTON: ".mtrl-time-picker__confirm";
 };
-/**
- * Default icons for the time picker
- * @category Components
- */
 export declare const TIMEPICKER_ICONS: {
-    /** Default clock icon */
     readonly CLOCK: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n    <polyline points=\"12 6 12 12 16 14\"></polyline>\n  </svg>";
-    /** Default keyboard icon */
     readonly KEYBOARD: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\" ry=\"2\"></rect>\n    <line x1=\"6\" y1=\"8\" x2=\"6\" y2=\"8\"></line>\n    <line x1=\"10\" y1=\"8\" x2=\"10\" y2=\"8\"></line>\n    <line x1=\"14\" y1=\"8\" x2=\"14\" y2=\"8\"></line>\n    <line x1=\"18\" y1=\"8\" x2=\"18\" y2=\"8\"></line>\n    <line x1=\"6\" y1=\"12\" x2=\"6\" y2=\"12\"></line>\n    <line x1=\"10\" y1=\"12\" x2=\"10\" y2=\"12\"></line>\n    <line x1=\"14\" y1=\"12\" x2=\"14\" y2=\"12\"></line>\n    <line x1=\"18\" y1=\"12\" x2=\"18\" y2=\"12\"></line>\n    <line x1=\"6\" y1=\"16\" x2=\"18\" y2=\"16\"></line>\n  </svg>";
 };
-/**
- * Default configuration values for the time picker
- * @category Components
- */
 export declare const TIMEPICKER_DEFAULTS: {
-    /** Default picker type */
     readonly TYPE: "dial";
-    /** Default time format */
     readonly FORMAT: "12h";
-    /** Default orientation */
     readonly ORIENTATION: "vertical";
-    /** Whether to show seconds selector */
     readonly SHOW_SECONDS: false;
-    /** Step interval for minute selection */
     readonly MINUTE_STEP: 1;
-    /** Step interval for second selection */
     readonly SECOND_STEP: 1;
-    /** Default cancel button text */
     readonly CANCEL_TEXT: "Cancel";
-    /** Default confirm button text */
     readonly CONFIRM_TEXT: "OK";
-    /** Whether picker is initially open: the default of the `open` option */
     readonly OPEN: false;
-    /** Default clock icon */
     readonly CLOCK_ICON: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n    <polyline points=\"12 6 12 12 16 14\"></polyline>\n  </svg>";
-    /** Default keyboard icon */
     readonly KEYBOARD_ICON: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\" ry=\"2\"></rect>\n    <line x1=\"6\" y1=\"8\" x2=\"6\" y2=\"8\"></line>\n    <line x1=\"10\" y1=\"8\" x2=\"10\" y2=\"8\"></line>\n    <line x1=\"14\" y1=\"8\" x2=\"14\" y2=\"8\"></line>\n    <line x1=\"18\" y1=\"8\" x2=\"18\" y2=\"8\"></line>\n    <line x1=\"6\" y1=\"12\" x2=\"6\" y2=\"12\"></line>\n    <line x1=\"10\" y1=\"12\" x2=\"10\" y2=\"12\"></line>\n    <line x1=\"14\" y1=\"12\" x2=\"14\" y2=\"12\"></line>\n    <line x1=\"18\" y1=\"12\" x2=\"18\" y2=\"12\"></line>\n    <line x1=\"6\" y1=\"16\" x2=\"18\" y2=\"16\"></line>\n  </svg>";
 };