material 3.2.6 → 3.2.7

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

@@ -1,88 +1,39 @@
-/**
- * Switch label position options
- * @category Components
- */
 export declare const SWITCH_LABEL_POSITIONS: {
-    /** Label positioned before the switch (left in LTR layouts) */
     readonly START: "start";
-    /** Label positioned after the switch (right in LTR layouts) */
     readonly END: "end";
 };
-/**
- * Switch states
- * @category Components
- */
 export declare const SWITCH_STATES: {
-    /** Switch is checked/on */
     readonly CHECKED: "checked";
-    /** Switch is unchecked/off */
     readonly UNCHECKED: "unchecked";
-    /** Switch is disabled */
     readonly DISABLED: "disabled";
-    /** Switch is enabled */
     readonly ENABLED: "enabled";
 };
-/**
- * Switch events
- * @category Components
- */
 export declare const SWITCH_EVENTS: {
-    /** Emitted when the checked state changes. */
     readonly CHANGE: "change";
-    /** The switch received focus. */
     readonly FOCUS: "focus";
-    /** The switch lost focus. */
     readonly BLUR: "blur";
 };
-/**
- * Default configuration values for switch
- * @category Components
- */
 export declare const SWITCH_DEFAULTS: {
-    /** Default checked state */
     readonly CHECKED: false;
-    /** Default disabled state */
     readonly DISABLED: false;
-    /** Default required state */
     readonly REQUIRED: false;
-    /** Default label position: the label leads and the switch trails, as in M3 settings rows */
     readonly LABEL_POSITION: "start";
-    /** Default input value */
     readonly VALUE: "on";
 };
-/**
- * CSS class names used by the switch component
- * @category Components
- */
 export declare const SWITCH_CLASSES: {
-    /** Root element class */
     readonly ROOT: "switch";
-    /** Container element class */
     readonly CONTAINER: "switch__container";
-    /** Content wrapper class */
     readonly CONTENT: "switch__content";
-    /** Label element class */
     readonly LABEL: "switch__label";
-    /** Input element class */
     readonly INPUT: "switch__input";
-    /** Track element class */
     readonly TRACK: "switch__track";
-    /** Thumb element class */
     readonly THUMB: "switch__thumb";
-    /** Label at start position class */
     readonly LABEL_START: "switch--label-start";
-    /** Label at end position class */
     readonly LABEL_END: "switch--label-end";
-    /** Checked state class */
     readonly CHECKED: "switch--checked";
-    /** Disabled state class */
     readonly DISABLED: "switch--disabled";
-    /** Error state class */
     readonly ERROR: "switch--error";
-    /** Helper/supporting text class */
     readonly HELPER: "switch__helper";
-    /** Error helper text class */
     readonly HELPER_ERROR: "switch__helper--error";
-    /** Focus state class */
     readonly FOCUSED: "switch--focused";
 };

package/dist/components/switch/switch.d.ts

@@ -1,8 +1,3 @@
 import { SwitchConfig, SwitchComponent } from "./types.js";
-/**
- * Creates a new Switch component
- * @param {SwitchConfig} config - Switch configuration
- * @returns {SwitchComponent} Switch component instance
- */
 declare const createSwitch: (config?: SwitchConfig) => SwitchComponent;
 export default createSwitch;

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

@@ -1,124 +1,61 @@
 import type { TouchEvents } from "../../core/utils/mobile.js";
 import type { EventCallback } from "../../core/state/emitter.js";
 export type SwitchPosition = "center" | "start" | "end";
-/**
- * Switch label position types
- */
 export type SwitchLabelPosition = "start" | "end";
-/**
- * Configuration interface for the Switch component
- */
 export interface SwitchConfig {
-    /** Input name attribute */
     name?: string;
-    /** Initial checked state */
     checked?: boolean;
-    /** Whether input is required */
     required?: boolean;
-    /** Whether switch is disabled */
     disabled?: boolean;
-    /** Input value attribute */
     value?: string;
-    /** Label text, or a node placed inside the label (the web component passes a `<slot>`) */
     label?: string | Node;
-    /** Supporting text content */
     supportingText?: string;
-    /** Whether supporting text indicates an error */
     error?: boolean;
-    /** Additional CSS classes */
     class?: string;
-    /** ARIA label for accessibility */
     ariaLabel?: string;
-    /** Prefix for class names */
     prefix?: string;
-    /** Component name */
     componentName?: string;
-    /** Icon HTML in the selected handle; 'none' for no icon. Markup (HTML). Not sanitized by default: see Markup and sanitizing. */
     icon?: string;
-    /**
-     * Icon HTML in the unselected handle, which then grows to 24dp (M3's icons on
-     * both states).
-     */
     unselectedIcon?: string;
-    /**
-     * Which side of the switch the label sits on
-     * @default 'start'
-     */
     labelPosition?: SwitchLabelPosition;
-    /** Index signature for additional properties */
     [key: string]: unknown;
 }
-/** A checked-state change from native input activation. Public setters are silent. */
 export interface SwitchChangePayload {
-    /** The new checked state. */
     checked: boolean;
-    /** The checked model value, matching getValue() at dispatch. */
     value: boolean;
-    /** The input's HTML value attribute, used for native form submission. */
     valueAttribute: string;
-    /** The original native change event, when supplied by the emitter. */
     nativeEvent?: Event;
 }
-/** Emitter events: change, and the input's focus and blur. */
 export interface SwitchEvents extends TouchEvents {
     change: (payload: SwitchChangePayload) => void;
     focus: (event: FocusEvent) => void;
     blur: (event: FocusEvent) => void;
 }
-/**
- * Switch component interface
- */
 export interface SwitchComponent {
-    /** The root element of the switch */
     element: HTMLElement;
-    /** The input element */
     input: HTMLInputElement;
-    /** Gets the switch's checked state (boolean) for form compatibility */
     getValue: () => boolean;
-    /** Sets the switch's checked state */
     setValue: (value: boolean | string) => SwitchComponent;
-    /** Gets the HTML value attribute (rarely needed) */
     getValueAttribute: () => string;
-    /** Sets the HTML value attribute (rarely needed) */
     setValueAttribute: (value: string) => SwitchComponent;
-    /** Checks/activates the switch */
     check: () => SwitchComponent;
-    /** Unchecks/deactivates the switch */
     uncheck: () => SwitchComponent;
-    /** Toggles the switch's checked state */
     toggle: () => SwitchComponent;
-    /** Returns whether the switch is checked */
     isChecked: () => boolean;
-    /** Sets the switch's label text */
     setLabel: (text: string) => SwitchComponent;
-    /** Gets the switch's label text */
     getLabel: () => string;
-    /** Supporting text element */
     supportingTextElement: HTMLElement | null;
-    /** Sets supporting text content */
     setSupportingText: (text: string, isError?: boolean) => SwitchComponent;
-    /** Removes supporting text */
     removeSupportingText: () => SwitchComponent;
-    /** Puts the switch in or out of the error state: its class and aria-invalid */
     setError: (error: boolean) => SwitchComponent;
-    /** Whether the switch is in the error state */
     isError: () => boolean;
-    /** Subscribes to checked-state changes; native input events use input.addEventListener. */
     on: <K extends keyof SwitchEvents>(event: K, handler: SwitchEvents[K]) => SwitchComponent;
-    /** Removes event listener */
     off: <K extends keyof SwitchEvents>(event: K, handler: SwitchEvents[K]) => SwitchComponent;
-    /** Enables the switch */
     enable: () => SwitchComponent;
-    /** Disables the switch */
     disable: () => SwitchComponent;
-    /** Whether the switch is disabled */
     isDisabled: () => boolean;
-    /** Destroys the switch component and cleans up resources */
     destroy: () => void;
 }
-/**
- * API options interface
- */
 export interface ApiOptions {
     disabled: {
         enable: () => void;
@@ -135,9 +72,6 @@ export interface ApiOptions {
         isChecked: () => boolean;
     };
 }
-/**
- * Base component interface
- */
 export interface BaseComponent {
     element: HTMLElement;
     input?: HTMLInputElement;
@@ -169,21 +103,7 @@ export interface BaseComponent {
     setError?: (error: boolean) => void;
     isError?: () => boolean;
 }
-/**
- * Component as it reaches the API step of the pipeline.
- *
- * `BaseComponent` marks the feature controllers optional because a component
- * part-way through the pipeline has not got them yet. By the time
- * `getApiConfig` runs, withCheckable, withDisabled and withLifecycle have all
- * been applied, so they are there.
- * @internal
- */
 export type ApiComponent = BaseComponent & Required<Pick<BaseComponent, "checkable" | "disabled" | "lifecycle">>;
-/**
- * Registers SwitchConfig with the global defaults map, so
- * `setComponentDefaults("switch", ...)` is typed without core
- * importing anything from this component.
- */
 declare module "../../core/config/global" {
     interface ComponentConfigMap {
         switch?: Partial<SwitchConfig>;

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

@@ -1,134 +1,58 @@
-/**
- * Tab component variants
- * @category Components
- */
 export declare const TAB_VARIANTS: {
-    /** Primary tabs */
     readonly PRIMARY: "primary";
-    /** Secondary tabs */
     readonly SECONDARY: "secondary";
 };
-/**
- * Tab states
- * @category Components
- */
 export declare const TAB_STATES: {
-    /** Tab is currently active */
     readonly ACTIVE: "active";
-    /** Tab is not currently active */
     readonly INACTIVE: "inactive";
-    /** Tab is disabled */
     readonly DISABLED: "disabled";
 };
-/**
- * Tab indicator width strategies
- * @category Components
- */
 export declare const TAB_INDICATOR_WIDTH_STRATEGIES: {
-    /** Fixed width defined by fixedWidth */
     readonly FIXED: "fixed";
-    /** Half the tab width */
     readonly DYNAMIC: "dynamic";
-    /** Match the text content width */
     readonly CONTENT: "content";
-    /** Adapts based on variant (primary: text width, secondary: full tab width) */
     readonly AUTO: "auto";
 };
-/**
- * Tab events
- * @category Components
- */
 export declare const TAB_EVENTS: {
-    /** Fired when a tab is clicked */
     readonly CLICK: "click";
-    /** Fired when a tab receives focus */
     readonly FOCUS: "focus";
-    /** Fired when a tab loses focus */
     readonly BLUR: "blur";
 };
-/**
- * Tabs component events
- * @category Components
- */
 export declare const TABS_EVENTS: {
-    /** Fired when the active tab changes */
     readonly CHANGE: "change";
 };
-/**
- * Default values for tabs component
- * @category Components
- */
 export declare const TABS_DEFAULTS: {
-    /** Default tab variant */
     readonly VARIANT: "primary";
-    /** Whether tabs are horizontally scrollable */
     readonly SCROLLABLE: true;
-    /** Whether to show a divider below the tabs */
     readonly SHOW_DIVIDER: true;
-    /** Default indicator width strategy */
     readonly INDICATOR_WIDTH_STRATEGY: "auto";
-    /** Default fixed width for fixed indicator in pixels */
     readonly INDICATOR_FIXED_WIDTH: 40;
-    /** Whether to enable ripple effect on tabs */
     readonly RIPPLE: true;
 };
-/**
- * Tab layout types
- * @category Components
- */
 export declare const TAB_LAYOUT: {
-    /** Icon-only tab layout */
     readonly ICON_ONLY: "icon-only";
-    /** Text-only tab layout */
     readonly TEXT_ONLY: "text-only";
-    /** Icon and text layout */
     readonly ICON_AND_TEXT: "icon-and-text";
 };
-/**
- * CSS class names used by the tabs component
- * @category Components
- */
 export declare const TABS_CLASSES: {
-    /** Root element class */
     readonly ROOT: "tabs";
-    /** Root element with primary variant */
     readonly PRIMARY: "tabs--primary";
-    /** Root element with secondary variant */
     readonly SECONDARY: "tabs--secondary";
-    /** Root element with scrollable tabs */
     readonly SCROLLABLE: "tabs--scrollable";
-    /** Scroll container element */
     readonly SCROLL: "tabs__scroll";
-    /** Divider element */
     readonly DIVIDER: "tabs__divider";
-    /** Indicator element */
     readonly INDICATOR: "tabs__indicator";
 };
-/**
- * CSS class names used by the tab component
- * @category Components
- */
 export declare const TAB_CLASSES: {
-    /** Root element class */
     readonly ROOT: "tab";
-    /** Active state class */
     readonly ACTIVE: "tab--active";
-    /** Inactive state class */
     readonly INACTIVE: "tab--inactive";
-    /** Disabled state class */
     readonly DISABLED: "tab--disabled";
-    /** Text content container */
     readonly TEXT: "button__text";
-    /** Icon container */
     readonly ICON: "button__icon";
-    /** Ripple effect container */
     readonly RIPPLE: "ripple";
-    /** Root element with primary variant */
     readonly PRIMARY: "tab--primary";
-    /** Root element with secondary variant */
     readonly SECONDARY: "tab--secondary";
-    /** Container for text and icon */
     readonly CONTAINER: "tab__container";
-    /** Badge container */
     readonly BADGE: "badge";
 };

package/dist/components/tabs/indicator.d.ts

@@ -1,49 +1,22 @@
 import { TabComponent } from "./types.js";
-/**
- * Configuration for tab indicator
- */
 export interface TabIndicatorConfig {
-    /** Height of the indicator in pixels */
     height?: number;
-    /** Width strategy - fixed size or dynamic based on tab width */
     widthStrategy?: 'fixed' | 'dynamic' | 'content' | 'auto';
-    /** Fixed width in pixels when using fixed strategy */
     fixedWidth?: number;
-    /** Animation duration in milliseconds */
     animationDuration?: number;
-    /** Animation timing function */
     animationTiming?: string;
-    /** Whether to show the indicator */
     visible?: boolean;
-    /** CSS class prefix */
     prefix?: string;
-    /** Custom color for the indicator */
     color?: string;
-    /** Tabs variant (primary or secondary) */
     variant?: string;
 }
-/**
- * Tab indicator API
- */
 export interface TabIndicator {
-    /** The indicator DOM element */
     element: HTMLElement;
-    /** Move the indicator to a specific tab */
     moveToTab: (tab: TabComponent, immediate?: boolean) => void;
-    /** Show the indicator */
     show: () => void;
-    /** Hide the indicator */
     hide: () => void;
-    /** Set indicator color */
     setColor: (color: string) => void;
-    /** Update indicator position (e.g. after resize) */
     update: () => void;
-    /** Destroy the indicator and clean up */
     destroy: () => void;
 }
-/**
- * Creates a tab indicator component
- * @param config - Indicator configuration
- * @returns Tab indicator instance
- */
 export declare const createTabIndicator: (config?: TabIndicatorConfig) => TabIndicator;

package/dist/components/tabs/responsive.d.ts

@@ -1,48 +1,18 @@
 import { TabsComponent } from "./types.js";
-/**
- * Breakpoints for responsive behavior
- */
 export declare const RESPONSIVE_BREAKPOINTS: {
-    /** Small screens (mobile) */
     SMALL: number;
-    /** Medium screens (tablet) */
     MEDIUM: number;
-    /** Large screens (desktop) */
     LARGE: number;
 };
-/**
- * Configuration for responsive behavior
- */
 export interface ResponsiveConfig {
-    /** Whether to enable responsive behavior */
     responsive?: boolean;
-    /** Options for small screens */
     smallScreen?: {
-        /**
-         * Layout below the small breakpoint: `icon-only` hides the labels of tabs
-         * that have an icon (the label still names the tab), `text-only` hides the
-         * icons of tabs that have a label, `icon-and-text` keeps every tab as built.
-         * @default 'icon-only'
-         */
         layout?: 'icon-only' | 'text-only' | 'icon-and-text';
     };
-    /**
-     * Breakpoints. Only `small` switches the layout; `medium` and `large` are
-     * accepted and unused.
-     */
     breakpoints?: {
         small?: number;
         medium?: number;
         large?: number;
     };
 }
-/**
- * Enhances tabs with responsive behavior.
- *
- * Every update reads the group's tabs and each tab's content as they are then,
- * so tabs added later and labels or icons changed later follow the layout; it
- * held a snapshot taken at setup and restored layouts from it.
- * @param tabs - The tabs component to enhance
- * @param config - Responsive configuration
- */
 export declare const setupResponsiveBehavior: (tabs: TabsComponent, config?: ResponsiveConfig) => void;

package/dist/components/tabs/tab.d.ts

@@ -1,15 +1,2 @@
 import { TabConfig, TabComponent } from "./types.js";
-/**
- * Creates a new Tab component following MD3 guidelines
- * @param {TabConfig} config - Tab configuration object
- * @returns {TabComponent} Tab component instance
- */
-/**
- * Point a tab at its panel, but only when that panel exists.
- *
- * The component creates no panels; a page supplies them. Writing
- * `aria-controls` regardless left every tab referencing an id that resolves to
- * nothing, which assistive technology reports as a broken relationship. When
- * the panel appears later, `updateTabPanels` links it then.
- */
 export declare const createTab: (config?: TabConfig) => TabComponent;

package/dist/components/tabs/tabs.d.ts

@@ -1,27 +1,3 @@
 import { TabsConfig, TabsComponent } from "./types.js";
-/**
- * Creates a new Tabs component following MD3 guidelines
- * @param {TabsConfig} config - Tabs configuration object
- * @returns {TabsComponent} Tabs component instance
- * @example
- * ```typescript
- * // Create basic tabs with three items
- * const tabs = createTabs({
- *   tabs: [
- *     { text: 'Home', value: 'home', state: 'active' },
- *     { text: 'Products', value: 'products' },
- *     { text: 'About', value: 'about' }
- *   ]
- * });
- *
- * // Add tabs to DOM
- * document.body.appendChild(tabs.element);
- *
- * // Listen for tab changes
- * tabs.on('change', (e) => {
- *   console.log(`Active tab: ${e.value}`);
- * });
- * ```
- */
 declare const createTabs: (config?: TabsConfig) => TabsComponent;
 export default createTabs;