mtrl 0.4.0 → 0.4.4

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

@@ -1,8 +1,8 @@
-export type SwitchPosition = 'center' | 'start' | 'end';
+export type SwitchPosition = "center" | "start" | "end";
 /**
  * Switch label position types
  */
-export type SwitchLabelPosition = 'start' | 'end';
+export type SwitchLabelPosition = "start" | "end";
 /**
  * Switch label positions
  */
@@ -40,6 +40,8 @@ export interface SwitchConfig {
     componentName?: string;
     /** Icon HTML content */
     icon?: string;
+    /** Index signature for additional properties */
+    [key: string]: unknown;
 }
 /**
  * Switch component interface
@@ -87,16 +89,16 @@ export interface SwitchComponent {
  */
 export interface ApiOptions {
     disabled: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle: {
         destroy: () => void;
     };
     checkable: {
-        check: () => any;
-        uncheck: () => any;
-        toggle: () => any;
+        check: () => void;
+        uncheck: () => void;
+        toggle: () => void;
         isChecked: () => boolean;
     };
 }
@@ -107,25 +109,28 @@ export interface BaseComponent {
     element: HTMLElement;
     input?: HTMLInputElement;
     getValue?: () => string;
-    setValue?: (value: string) => any;
+    setValue?: (value: string) => void;
     text?: {
-        setText: (content: string) => any;
+        setText: (content: string) => void;
         getText: () => string;
     };
-    on?: (event: string, handler: Function) => any;
-    off?: (event: string, handler: Function) => any;
+    on?: (event: string, handler: Function) => void;
+    off?: (event: string, handler: Function) => void;
     disabled?: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle?: {
         destroy: () => void;
     };
     checkable?: {
-        check: () => any;
-        uncheck: () => any;
-        toggle: () => any;
+        check: () => void;
+        uncheck: () => void;
+        toggle: () => void;
         isChecked: () => boolean;
     };
-    [key: string]: any;
+    supportingTextElement?: HTMLElement | null;
+    setSupportingText?: (text: string, isError?: boolean) => void;
+    removeSupportingText?: () => void;
+    [key: string]: unknown;
 }

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

@@ -1,5 +1,4 @@
-import { BaseComponentConfig } from '../../core/config/component';
-import { TabConfig } from './types';
+import { TabConfig } from "./types";
 /**
  * Default configuration for a Tab
  */
@@ -13,7 +12,7 @@ export declare const defaultTabsConfig: {
     showDivider: true;
     componentName: string;
 };
-export declare const createTabsConfig: (config?: {}) => BaseComponentConfig;
+export declare const createTabsConfig: (config?: {}) => import("../../core/config/component").BaseComponentConfig;
 /**
  * Creates the base configuration for a Tab
  * @param {TabConfig} config - User provided configuration

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

@@ -1,5 +1,5 @@
-import { TabConfig, TabComponent } from './types';
-import { TabIndicator } from './indicator';
+import { TabConfig, TabComponent } from "./types";
+import { TabIndicator } from "./indicator";
 interface ComponentBase {
     element: HTMLElement;
     getClass: (name: string) => string;
@@ -88,7 +88,7 @@ export interface IndicatorFeatureConfig {
     /** Component prefix */
     prefix?: string;
     /** Width strategy for the indicator */
-    widthStrategy?: 'fixed' | 'dynamic' | 'content';
+    widthStrategy?: "fixed" | "dynamic" | "content";
     /** Height of the indicator in pixels */
     height?: number;
     /** Fixed width in pixels (when using fixed strategy) */
@@ -102,10 +102,10 @@ export interface IndicatorFeatureConfig {
     /** Legacy height property */
     indicatorHeight?: number;
     /** Legacy width strategy property */
-    indicatorWidthStrategy?: 'fixed' | 'dynamic' | 'content';
+    indicatorWidthStrategy?: "fixed" | "dynamic" | "content";
     /** Indicator configuration object */
     indicator?: {
-        widthStrategy?: 'fixed' | 'dynamic' | 'content';
+        widthStrategy?: "fixed" | "dynamic" | "content";
         height?: number;
         fixedWidth?: number;
         animationDuration?: number;

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

@@ -1,11 +1,11 @@
-import createTabs from './tabs';
-import { addScrollIndicators } from './scroll-indicators';
-import { setupResponsiveBehavior } from './responsive';
-import { createTabsState } from './state';
-import { createTabIndicator } from './indicator';
-import { updateTabPanels, setupKeyboardNavigation } from './utils';
-export { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES } from './constants';
-export { TabsConfig, TabsComponent, TabComponent, TabConfig, TabChangeEventData, IndicatorConfig } from './types';
-export { addScrollIndicators, setupResponsiveBehavior, createTabsState, createTabIndicator, updateTabPanels, setupKeyboardNavigation };
-export { withTabsManagement, withScrollable, withDivider, withIndicator, TabsManagementConfig, TabsManagementComponent, ScrollableConfig, ScrollableComponent, DividerConfig, IndicatorFeatureConfig, IndicatorComponent } from './features';
+import createTabs from "./tabs";
+import { addScrollIndicators } from "./scroll-indicators";
+import { setupResponsiveBehavior } from "./responsive";
+import { createTabsState } from "./state";
+import { createTabIndicator } from "./indicator";
+import { updateTabPanels, setupKeyboardNavigation } from "./utils";
+export { TAB_VARIANTS, TAB_STATES, TAB_INDICATOR_WIDTH_STRATEGIES, TAB_EVENTS, TABS_EVENTS, TABS_DEFAULTS, TABS_CLASSES, TAB_CLASSES, } from "./constants";
+export { TabsConfig, TabsComponent, TabComponent, TabConfig, TabChangeEventData, IndicatorConfig, } from "./types";
+export { addScrollIndicators, setupResponsiveBehavior, createTabsState, createTabIndicator, updateTabPanels, setupKeyboardNavigation, };
+export { withTabsManagement, withScrollable, withDivider, withIndicator, TabsManagementConfig, TabsManagementComponent, ScrollableConfig, ScrollableComponent, DividerConfig, IndicatorFeatureConfig, IndicatorComponent, } from "./features";
 export default createTabs;

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

@@ -1,4 +1,4 @@
-import { TabConfig, TabComponent } from './types';
+import { TabConfig, TabComponent } from "./types";
 /**
  * Creates a new Tab component following MD3 guidelines
  * @param {TabConfig} config - Tab configuration object

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

@@ -1,4 +1,4 @@
-import { TabComponent } from './types';
+import { TabComponent } from "./types";
 /**
  * Gets the active tab from a component
  * @param component - Component with tabs

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

@@ -1,8 +1,18 @@
-import { BaseComponent, TextfieldComponent, ApiOptions } from './types';
-import { PlacementComponent } from './features/placement';
+import { BaseComponent, TextfieldComponent, ApiOptions } from "./types";
+/**
+ * Component interface with density feature
+ */
+type ComponentWithDensity = BaseComponent & {
+    density?: {
+        current: string;
+        set: (density: string) => void;
+    };
+    updateElementPositions?: () => void;
+};
 /**
  * Enhances textfield component with API methods
  * @param {ApiOptions} options - API configuration
  * @returns {Function} Higher-order function that adds API methods to component
  */
-export declare const withAPI: ({ disabled, lifecycle }: ApiOptions) => (component: BaseComponent & Partial<PlacementComponent>) => TextfieldComponent;
+export declare const withAPI: ({ disabled, lifecycle }: ApiOptions) => (component: ComponentWithDensity) => TextfieldComponent;
+export {};

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

@@ -1,4 +1,4 @@
-import { TextfieldConfig, BaseComponent, ApiOptions } from './types';
+import { TextfieldConfig, BaseComponent, ApiOptions } from "./types";
 /**
  * Default configuration for the Textfield component
  */

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

@@ -8,18 +8,6 @@ export declare const TEXTFIELD_VARIANTS: {
     /** Outlined variant with border and animated label */
     readonly OUTLINED: "outlined";
 };
-/**
- * Textfield size constants
- * @category Components
- */
-export declare const TEXTFIELD_SIZES: {
-    /** Small textfield */
-    readonly SMALL: "small";
-    /** Medium textfield (default) */
-    readonly MEDIUM: "medium";
-    /** Large textfield */
-    readonly LARGE: "large";
-};
 /**
  * Textfield state constants
  * @category Components
@@ -74,6 +62,16 @@ export declare const TEXTFIELD_EVENTS: {
     /** Fired when a key is released */
     readonly KEYUP: "keyup";
 };
+/**
+ * Textfield density constants
+ * @category Components
+ */
+export declare const TEXTFIELD_DENSITY: {
+    /** Default density (56px height) */
+    readonly DEFAULT: "default";
+    /** Compact density (40px height) */
+    readonly COMPACT: "compact";
+};
 /**
  * Default textfield configuration values
  * @category Components
@@ -83,8 +81,8 @@ export declare const TEXTFIELD_DEFAULTS: {
     readonly TYPE: "text";
     /** Default visual variant */
     readonly VARIANT: "filled";
-    /** Default textfield size */
-    readonly SIZE: "medium";
+    /** Default density level */
+    readonly DENSITY: "default";
     /** Default disabled state */
     readonly DISABLED: false;
     /** Default required state */
@@ -113,12 +111,6 @@ export declare const TEXTFIELD_CLASSES: {
     readonly FILLED: "textfield--filled";
     /** Outlined variant class */
     readonly OUTLINED: "textfield--outlined";
-    /** Small size class */
-    readonly SMALL: "textfield--small";
-    /** Medium size class */
-    readonly MEDIUM: "textfield--medium";
-    /** Large size class */
-    readonly LARGE: "textfield--large";
     /** Focused state class */
     readonly FOCUSED: "textfield--focused";
     /** Disabled state class */

package/dist/components/textfield/features/density.d.ts

@@ -0,0 +1,28 @@
+import { TextfieldConfig, TextfieldDensity } from "../types";
+/**
+ * Configuration for density feature
+ */
+interface DensityConfig extends TextfieldConfig {
+    density?: TextfieldDensity | string;
+    prefix?: string;
+    componentName?: string;
+}
+/**
+ * Component with density feature
+ */
+interface DensityComponent {
+    element: HTMLElement;
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    density?: {
+        current: string;
+        set: (density: string) => void;
+    };
+    updateElementPositions?: () => void;
+}
+/**
+ * Adds density support to textfield component
+ * @param {DensityConfig} config - Configuration with density option
+ * @returns {Function} Higher-order function that adds density capabilities
+ */
+export declare const withDensity: (config: DensityConfig) => (component: DensityComponent) => DensityComponent;
+export {};

package/dist/components/textfield/features/index.d.ts

@@ -1,12 +1,13 @@
-export { withLeadingIcon } from './leading-icon';
-export { withTrailingIcon } from './trailing-icon';
-export { withPrefixText } from './prefix-text';
-export { withSuffixText } from './suffix-text';
-export { withSupportingText } from './supporting-text';
-export { withPlacement } from './placement';
-export type { LeadingIconComponent, LeadingIconConfig } from './leading-icon';
-export type { TrailingIconComponent, TrailingIconConfig } from './trailing-icon';
-export type { PrefixTextComponent, PrefixTextConfig } from './prefix-text';
-export type { SuffixTextComponent, SuffixTextConfig } from './suffix-text';
-export type { SupportingTextComponent, SupportingTextConfig } from './supporting-text';
-export type { PlacementComponent } from './placement';
+export { withLeadingIcon } from "./leading-icon";
+export { withTrailingIcon } from "./trailing-icon";
+export { withPrefixText } from "./prefix-text";
+export { withSuffixText } from "./suffix-text";
+export { withSupportingText } from "./supporting-text";
+export { withPlacement } from "./placement";
+export { withDensity } from "./density";
+export type { LeadingIconComponent, LeadingIconConfig } from "./leading-icon";
+export type { TrailingIconComponent, TrailingIconConfig, } from "./trailing-icon";
+export type { PrefixTextComponent, PrefixTextConfig } from "./prefix-text";
+export type { SuffixTextComponent, SuffixTextConfig } from "./suffix-text";
+export type { SupportingTextComponent, SupportingTextConfig, } from "./supporting-text";
+export type { PlacementComponent } from "./placement";

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

@@ -1,3 +1,3 @@
-export { default } from './textfield';
-export { TEXTFIELD_VARIANTS, TEXTFIELD_SIZES, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES } from './constants';
-export { TextfieldConfig, TextfieldComponent } from './types';
+export { default } from "./textfield";
+export { TEXTFIELD_VARIANTS, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES, TEXTFIELD_DENSITY, } from "./constants";
+export { TextfieldConfig, TextfieldComponent, TextfieldDensity } from "./types";

package/dist/components/textfield/textfield.d.ts

@@ -1,4 +1,4 @@
-import { TextfieldConfig, TextfieldComponent } from './types';
+import { TextfieldConfig, TextfieldComponent } from "./types";
 /**
  * Creates a new Textfield component
  *

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

@@ -1,7 +1,7 @@
 /**
  * Available Textfield variants
  */
-export type TextfieldVariant = 'filled' | 'outlined';
+export type TextfieldVariant = "filled" | "outlined";
 /**
  * Textfield variant constants
  */
@@ -10,25 +10,24 @@ export declare const TEXTFIELD_VARIANTS: {
     readonly OUTLINED: "outlined";
 };
 /**
- * Available Textfield sizes
+ * Available Textfield states
  */
-export type TextfieldSize = 'small' | 'medium' | 'large';
+export type TextfieldStates = "active" | "inactive" | "disabled";
 /**
- * Textfield size constants
+ * Available Textfield density levels
  */
-export declare const TEXTFIELD_SIZES: {
-    readonly SMALL: "small";
-    readonly MEDIUM: "medium";
-    readonly LARGE: "large";
-};
+export type TextfieldDensity = "default" | "compact";
 /**
- * Available Textfield states
+ * Textfield density constants
  */
-export type TextfieldStates = 'active' | 'inactive' | 'disabled';
+export declare const TEXTFIELD_DENSITY: {
+    readonly DEFAULT: "default";
+    readonly COMPACT: "compact";
+};
 /**
  * Available Textfield types
  */
-export type TextfieldTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'multiline';
+export type TextfieldTypes = "text" | "password" | "email" | "number" | "tel" | "url" | "search" | "multiline";
 /**
  * Textfield type constants
  */
@@ -50,12 +49,16 @@ export interface TextfieldConfig {
     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 */
     required?: boolean;
     /** Whether textfield is disabled */
@@ -145,6 +148,10 @@ export interface TextfieldComponent {
     removeSuffixText: () => TextfieldComponent;
     /** Manually update element positions (useful after DOM changes) */
     updatePositions: () => TextfieldComponent;
+    /** Sets the density of the textfield */
+    setDensity: (density: TextfieldDensity | string) => TextfieldComponent;
+    /** Gets the current density setting */
+    getDensity: () => string;
     /** Adds event listener */
     on: (event: string, handler: Function) => TextfieldComponent;
     /** Removes event listener */
@@ -161,8 +168,8 @@ export interface TextfieldComponent {
  */
 export interface ApiOptions {
     disabled: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle: {
         destroy: () => void;
@@ -177,41 +184,41 @@ export interface BaseComponent {
     config?: {
         prefix?: string;
         componentName?: string;
-        [key: string]: any;
+        [key: string]: string | number | boolean | undefined;
     };
     getValue?: () => string;
-    setValue?: (value: string) => any;
-    setAttribute?: (name: string, value: string) => any;
+    setValue?: (value: string) => void;
+    setAttribute?: (name: string, value: string) => void;
     getAttribute?: (name: string) => string | null;
-    removeAttribute?: (name: string) => any;
+    removeAttribute?: (name: string) => void;
     label?: {
-        setText: (content: string) => any;
+        setText: (content: string) => void;
         getText: () => string;
     };
     leadingIcon?: HTMLElement | null;
-    setLeadingIcon?: (html: string) => any;
-    removeLeadingIcon?: () => any;
+    setLeadingIcon?: (html: string) => void;
+    removeLeadingIcon?: () => void;
     trailingIcon?: HTMLElement | null;
-    setTrailingIcon?: (html: string) => any;
-    removeTrailingIcon?: () => any;
+    setTrailingIcon?: (html: string) => void;
+    removeTrailingIcon?: () => void;
     supportingTextElement?: HTMLElement | null;
-    setSupportingText?: (text: string, isError?: boolean) => any;
-    removeSupportingText?: () => any;
+    setSupportingText?: (text: string, isError?: boolean) => void;
+    removeSupportingText?: () => void;
     prefixTextElement?: HTMLElement | null;
-    setPrefixText?: (text: string) => any;
-    removePrefixText?: () => any;
+    setPrefixText?: (text: string) => void;
+    removePrefixText?: () => void;
     suffixTextElement?: HTMLElement | null;
-    setSuffixText?: (text: string) => any;
-    removeSuffixText?: () => any;
-    updateElementPositions?: () => any;
-    on?: (event: string, handler: Function) => any;
-    off?: (event: string, handler: Function) => any;
+    setSuffixText?: (text: string) => void;
+    removeSuffixText?: () => void;
+    updateElementPositions?: () => void;
+    on?: (event: string, handler: Function) => void;
+    off?: (event: string, handler: Function) => void;
     disabled?: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle?: {
         destroy: () => void;
     };
-    [key: string]: any;
+    [key: string]: unknown;
 }

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

@@ -1,4 +1,4 @@
-import { TimeValue, TIME_FORMAT, TIME_PICKER_TYPE } from './types';
+import { TimeValue, TIME_FORMAT, TIME_PICKER_TYPE } from "./types";
 /**
  * Interface for Clock Dial rendering options
  */
@@ -7,7 +7,7 @@ export interface ClockDialOptions {
     format: TIME_FORMAT;
     showSeconds: boolean;
     prefix: string;
-    activeSelector: 'hour' | 'minute' | 'second';
+    activeSelector: "hour" | "minute" | "second";
 }
 /**
  * Renders a clock dial on canvas with improved visual design

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

@@ -1,4 +1,4 @@
-import { TimePickerConfig } from './types';
+import { TimePickerConfig } from "./types";
 /**
  * Default configuration for the TimePicker component
  */

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

@@ -1,4 +1,4 @@
-import { TimePickerConfig, TimeValue } from './types';
+import { TimePickerConfig, TimeValue } from "./types";
 /**
  * Renders the time picker dialog
  * @param {HTMLElement} container - Dialog container element

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

@@ -1,4 +1,4 @@
-import { TimePickerConfig, TimePickerComponent } from './types';
+import { TimePickerConfig, TimePickerComponent } from "./types";
 /**
  * Creates a new TimePicker component
  * @param {TimePickerConfig} config - TimePicker configuration object

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

@@ -1,4 +1,4 @@
-import { TimeValue, TIME_PERIOD, TIME_FORMAT } from './types';
+import { TimeValue, TIME_PERIOD, TIME_FORMAT } from "./types";
 /**
  * Pads a number with leading zeros to ensure two-digit format
  * @param {number} num - Number to pad
@@ -11,7 +11,7 @@ export declare const padZero: (num: number) => string;
  * @param {TIME_FORMAT} format - Time format (12h or 24h)
  * @returns {TimeValue} Parsed time value
  */
-export declare const parseTime: (timeString: string, format: TIME_FORMAT) => TimeValue;
+export declare const parseTime: (timeString: string, _format: TIME_FORMAT) => TimeValue;
 /**
  * Formats a TimeValue object as a time string
  * @param {TimeValue} timeValue - Time value to format

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

@@ -1,4 +1,4 @@
-import { TooltipComponent } from './types';
+import { TooltipComponent } from "./types";
 interface ApiOptions {
     lifecycle: {
         destroy: () => void;

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

@@ -1,4 +1,4 @@
-import { TooltipConfig } from './types';
+import { TooltipConfig } from "./types";
 /**
  * Default configuration for the Tooltip component
  */

package/dist/components/top-app-bar/top-app-bar.d.ts

@@ -2,8 +2,8 @@
  * @module components/top-app-bar
  * @description Top app bar implementation
  */
-import { ElementComponent } from '../../core/compose';
-import { TopAppBarConfig, TopAppBarType } from './types';
+import { ElementComponent } from "../../core/compose";
+import { TopAppBarConfig, TopAppBarType } from "./types";
 /**
  * Top app bar component interface
  */