mtrl 0.5.3 → 0.5.5

package/dist/components/checkbox/api.d.ts

@@ -1,4 +1,4 @@
-import { BaseComponent, CheckboxComponent, ApiOptions } from './types';
+import { BaseComponent, CheckboxComponent, ApiOptions } from "./types";
 /**
  * Enhances checkbox component with API methods
  * @param {ApiOptions} options - API configuration

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

@@ -106,16 +106,27 @@ export interface CheckboxComponent {
      */
     input: HTMLInputElement;
     /**
-     * Gets the checkbox's current value attribute
-     * @returns Current value of the checkbox
+     * Gets the checkbox's checked state (boolean) for form compatibility
+     * @returns Whether the checkbox is checked
      */
-    getValue: () => string;
+    getValue: () => boolean;
     /**
-     * Sets the checkbox's value attribute
-     * @param value - New value to set
+     * Sets the checkbox's checked state
+     * @param value - Boolean or string ("true"/"false"/"1"/"0") value
      * @returns Checkbox component for method chaining
      */
-    setValue: (value: string) => CheckboxComponent;
+    setValue: (value: boolean | string) => CheckboxComponent;
+    /**
+     * Gets the HTML value attribute (rarely needed)
+     * @returns The input's value attribute
+     */
+    getValueAttribute: () => string;
+    /**
+     * Sets the HTML value attribute (rarely needed)
+     * @param value - New value attribute to set
+     * @returns Checkbox component for method chaining
+     */
+    setValueAttribute: (value: string) => CheckboxComponent;
     /**
      * Checks the checkbox (sets checked=true)
      * @returns Checkbox component for method chaining

package/dist/components/chips/api.d.ts

@@ -1,8 +1,11 @@
-import { ChipsComponent, ChipComponent } from './types';
+import { ChipsComponent, ChipComponent } from "./types";
 /**
  * API options interface - structured by feature area
  */
 interface ApiOptions {
+    config: {
+        multiSelect: boolean;
+    };
     chips: {
         addChip: (chipConfig: any) => ChipComponent;
         removeChip: (chipOrIndex: ChipComponent | number) => void;
@@ -22,7 +25,7 @@ interface ApiOptions {
     label: {
         setText: (text: string) => any;
         getText: () => string;
-        setPosition: (position: 'start' | 'end') => any;
+        setPosition: (position: "start" | "end") => any;
         getPosition: () => string;
     };
     keyboard: {

package/dist/components/chips/chip/api.d.ts

@@ -1,4 +1,4 @@
-import { ApiOptions, ChipComponent } from './types';
+import { ApiOptions, ChipComponent } from "./types";
 interface ComponentWithElements {
     element: HTMLElement;
     text?: {

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

@@ -28,9 +28,13 @@ export declare const getElementConfig: (config: ChipsConfig) => {
 /**
  * Creates API configuration for the Chips component
  * @param {Object} comp - Component with chips features
+ * @param {ChipsConfig} config - Chips configuration
  * @returns {Object} API configuration object
  */
-export declare const getApiConfig: (comp: any) => {
+export declare const getApiConfig: (comp: any, config?: ChipsConfig) => {
+    config: {
+        multiSelect: boolean;
+    };
     chips: {
         addChip: (chipConfig: any) => any;
         removeChip: (chipOrIndex: any) => any;

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

@@ -2,7 +2,7 @@
  * Chip variant types
  * @category Components
  */
-export type ChipVariant = 'filled' | 'outlined' | 'elevated' | 'assist' | 'filter' | 'input' | 'suggestion';
+export type ChipVariant = "filled" | "outlined" | "elevated" | "assist" | "filter" | "input" | "suggestion";
 /**
  * Available chip event types
  */
@@ -164,7 +164,7 @@ export interface ChipsConfig {
      * Position of the label (start or end)
      * @default 'start'
      */
-    labelPosition?: 'start' | 'end';
+    labelPosition?: "start" | "end";
     /**
      * Schema definition for the component structure
      * @internal
@@ -261,6 +261,17 @@ export interface ChipComponent {
      * @returns The chip component for chaining
      */
     toggleSelected: () => ChipComponent;
+    /**
+     * Gets the chip's current variant
+     * @returns Current variant or null if none set
+     */
+    getVariant: () => ChipVariant | null;
+    /**
+     * Sets the chip's variant
+     * @param variant - The variant to apply
+     * @returns The chip component for chaining
+     */
+    setVariant: (variant: ChipVariant) => ChipComponent;
     /**
      * Destroys the chip component and cleans up resources
      */
@@ -360,7 +371,7 @@ export interface ChipsComponent {
      * @param position - Label position ('start' or 'end')
      * @returns The chips instance for chaining
      */
-    setLabelPosition: (position: 'start' | 'end') => ChipsComponent;
+    setLabelPosition: (position: "start" | "end") => ChipsComponent;
     /**
      * Gets the label position
      * @returns Label position

package/dist/components/index.d.ts

@@ -51,6 +51,7 @@ export { default as createButton } from "./button";
 export { default as createCard } from "./card";
 export { default as createCarousel } from "./carousel";
 export { default as createCheckbox } from "./checkbox";
+export { createChip, createChips } from "./chips";
 export { default as createDatePicker } from "./datepicker";
 export { default as createDialog } from "./dialog";
 export { default as createFab } from "./fab";

package/dist/components/menu/features/keyboard.d.ts

@@ -15,6 +15,7 @@ export declare const createKeyboardNavigation: (component: any) => {
     setupKeyboardHandlers: (menuElement: HTMLElement, state: any, actions: any) => void;
     isTabNavigationActive: () => boolean;
     getFocusableElements: () => HTMLElement[];
+    resetTypeahead: () => void;
 };
 /**
  * Adds keyboard navigation functionality to the menu component

package/dist/components/menu/features/position.d.ts

@@ -1,4 +1,4 @@
-import { MenuConfig } from '../types';
+import { MenuConfig } from "../types";
 /**
  * Menu position helper
  * Provides functions for positioning menus and submenus

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

@@ -35,7 +35,7 @@ export declare const MENU_POSITION: {
  *
  * @category Components
  */
-export type MenuPosition = typeof MENU_POSITION[keyof typeof MENU_POSITION];
+export type MenuPosition = (typeof MENU_POSITION)[keyof typeof MENU_POSITION];
 /**
  * Configuration interface for a menu item
  *
@@ -91,7 +91,7 @@ export interface MenuDivider {
     /**
      * Type must be 'divider' to differentiate from regular menu items
      */
-    type: 'divider';
+    type: "divider";
     /**
      * Optional ID for the divider (for accessibility)
      */
@@ -140,6 +140,11 @@ export interface MenuConfig {
      * @default true
      */
     closeOnEscape?: boolean;
+    /**
+     * Whether the menu should close when the window is resized
+     * @default false
+     */
+    closeOnResize?: boolean;
     /**
      * Whether submenus should open on hover
      * @default true
@@ -244,7 +249,7 @@ export interface MenuComponent {
      * @param interactionType - The type of interaction that triggered the open ('mouse' or 'keyboard')
      * @returns The menu component for chaining
      */
-    open: (event?: Event, interactionType?: 'mouse' | 'keyboard') => MenuComponent;
+    open: (event?: Event, interactionType?: "mouse" | "keyboard") => MenuComponent;
     /**
      * Closes the menu
      * @param event - Optional event that triggered the close
@@ -332,7 +337,7 @@ export interface MenuComponent {
  * @internal
  */
 export interface MenuEvents {
-    'open': (event: MenuEvent) => void;
-    'close': (event: MenuEvent) => void;
-    'select': (event: MenuSelectEvent) => void;
+    open: (event: MenuEvent) => void;
+    close: (event: MenuEvent) => void;
+    select: (event: MenuSelectEvent) => void;
 }

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

@@ -143,10 +143,15 @@ export interface SelectComponent {
     getValue: () => string | null;
     /**
      * Sets the select's value (by option id)
-     * @param value - Option id to select
+     * @param value - Option id to select, or null/undefined to clear
      * @returns Select component for chaining
      */
-    setValue: (value: string) => SelectComponent;
+    setValue: (value: string | null | undefined) => SelectComponent;
+    /**
+     * Clears the current selection
+     * @returns Select component for chaining
+     */
+    clear: () => SelectComponent;
     /**
      * Gets the select's current displayed text
      */
@@ -215,6 +220,18 @@ export interface SelectComponent {
      * @returns Select component for chaining
      */
     disable: () => SelectComponent;
+    /**
+     * Sets the error state on the select
+     * @param error - Whether to show error state
+     * @param message - Optional error message to display
+     * @returns Select component for chaining
+     */
+    setError: (error: boolean, message?: string) => SelectComponent;
+    /**
+     * Clears the error state on the select
+     * @returns Select component for chaining
+     */
+    clearError: () => SelectComponent;
     /**
      * Destroys the select component
      */
@@ -274,7 +291,8 @@ export interface SelectEvents {
 export interface ApiOptions {
     select: {
         getValue: () => string | null;
-        setValue: (value: string) => any;
+        setValue: (value: string | null | undefined) => any;
+        clear: () => any;
         getText: () => string;
         getSelectedOption: () => SelectOption | null;
         getOptions: () => SelectOption[];

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

@@ -51,10 +51,14 @@ export interface SwitchComponent {
     element: HTMLElement;
     /** The input element */
     input: HTMLInputElement;
-    /** Gets the switch's value */
-    getValue: () => string;
-    /** Sets the switch's value */
-    setValue: (value: string) => SwitchComponent;
+    /** 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 */