mtrl 0.3.9 → 0.4.3

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

@@ -17,12 +17,53 @@ export declare const SLIDER_COLORS: {
  * @category Components
  */
 export declare const SLIDER_SIZES: {
-    /** Small size slider */
-    readonly SMALL: "small";
-    /** Medium size slider */
-    readonly MEDIUM: "medium";
-    /** Large size slider */
-    readonly LARGE: "large";
+    /** Extra small size (default) - 16px track height */
+    readonly XS: 16;
+    /** Small size - 24px track height */
+    readonly S: 24;
+    /** Medium size - 40px track height */
+    readonly M: 40;
+    /** Large size - 56px track height */
+    readonly L: 56;
+    /** Extra large size - 96px track height */
+    readonly XL: 80;
+};
+/**
+ * Slider component size type
+ * @category Components
+ */
+export type SliderSize = keyof typeof SLIDER_SIZES | number;
+/**
+ * Slider component measurements
+ * @category Components
+ */
+export declare const SLIDER_MEASUREMENTS: {
+    /** Handle size in pixels */
+    readonly HANDLE_SIZE: 16;
+    /** Handle height for XS and S sizes in pixels */
+    readonly SMALL_HANDLE_HEIGHT: 48;
+    /** Handle height offset for M, L, XL sizes (added to track height) */
+    readonly HANDLE_HEIGHT_OFFSET: 16;
+    /** Minimum container height in pixels */
+    readonly MIN_HEIGHT: 40;
+    /** Track border radius in pixels */
+    readonly TRACK_RADIUS: 3;
+    /** External track radius for XS and S sizes in pixels */
+    readonly SMALL_TRACK_EXTERNAL_RADIUS: 10;
+    /** External track radius ratio for M, L, XL sizes (multiplied by track height) */
+    readonly LARGE_TRACK_RADIUS_RATIO: 0.35;
+    /** Tick size in pixels */
+    readonly TICK_SIZE: 4;
+    /** Dot size in pixels */
+    readonly DOT_SIZE: 4;
+    /** Handle gap pixels */
+    readonly HANDLE_GAP: 8;
+    /** Handle gap reduction when pressed in pixels */
+    readonly HANDLE_GAP_PRESSED_REDUCTION: 2;
+    /** Center gap pixels for centered sliders */
+    readonly CENTER_GAP: 4;
+    /** Edge padding in pixels */
+    readonly EDGE_PADDING: 7;
 };
 /**
  * Available slider events
@@ -70,7 +111,7 @@ export declare const SLIDER_DEFAULTS: {
     /** Default color variant */
     readonly COLOR: "primary";
     /** Default size variant */
-    readonly SIZE: "medium";
+    readonly SIZE: "XS";
     /** Whether to show tick marks */
     readonly TICKS: false;
     /** Whether to show value while dragging */
@@ -79,6 +120,8 @@ export declare const SLIDER_DEFAULTS: {
     readonly SNAP_TO_STEPS: true;
     /** Whether slider is a range slider (two handles) */
     readonly RANGE: false;
+    /** Whether slider is a centered slider (active track from center) */
+    readonly CENTERED: false;
     /** Default icon position */
     readonly ICON_POSITION: "start";
     /** Default label position */
@@ -93,8 +136,6 @@ export declare const SLIDER_CLASSES: {
     readonly ROOT: "slider";
     /** Container for slider track and handles */
     readonly CONTAINER: "slider__container";
-    /** Track element class */
-    readonly TRACK: "slider__track";
     /** Filled track portion class */
     readonly FILL: "slider__fill";
     /** Handle element class */
@@ -102,12 +143,6 @@ export declare const SLIDER_CLASSES: {
     /** Second handle element class (for range slider) */
     readonly HANDLE_SECOND: "slider__handle--second";
     /** Tick marks container class */
-    readonly TICKS: "slider__ticks";
-    /** Individual tick mark class */
-    readonly TICK: "slider__tick";
-    /** Active/selected tick mark class */
-    readonly TICK_ACTIVE: "slider__tick--active";
-    /** Label element class */
     readonly LABEL: "slider__label";
     /** Value display class */
     readonly VALUE: "slider__value";
@@ -121,12 +156,6 @@ export declare const SLIDER_CLASSES: {
     readonly DRAGGING: "slider--dragging";
     /** Range slider variant class */
     readonly RANGE: "slider--range";
-    /** Small size variant class */
-    readonly SMALL: "slider--small";
-    /** Medium size variant class */
-    readonly MEDIUM: "slider--medium";
-    /** Large size variant class */
-    readonly LARGE: "slider--large";
     /** Primary color variant class */
     readonly PRIMARY: "slider--primary";
     /** Secondary color variant class */

package/dist/components/slider/features/canvas.d.ts

@@ -0,0 +1,47 @@
+import { SliderConfig } from '../types';
+import { SliderSize } from '../constants';
+/**
+ * Animation state for smooth transitions
+ */
+interface AnimationState {
+    animatedValue: number;
+    animatedSecondValue: number | null;
+    targetValue: number;
+    targetSecondValue: number | null;
+    startValue: number;
+    startSecondValue: number | null;
+    startTime: number;
+    duration: number;
+    animationFrame: number | null;
+}
+/**
+ * Component with canvas capabilities
+ */
+interface CanvasSliderComponent {
+    element: HTMLElement;
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    getClass: (name: string) => string;
+    drawCanvas: (state?: any) => void;
+    resize: () => void;
+    animationState?: AnimationState;
+    [key: string]: any;
+}
+/**
+ * Gets the track height value from the size config
+ */
+export declare const getTrackHeight: (size?: SliderSize) => number;
+/**
+ * Gets the handle height based on the slider size
+ */
+export declare const getHandleHeight: (size?: SliderSize) => number;
+/**
+ * Gets the external track radius based on the slider size
+ */
+export declare const getExternalTrackRadius: (size?: SliderSize) => number;
+/**
+ * Adds canvas functionality for slider visuals
+ * Keeps handle and value bubble as DOM elements for accessibility
+ */
+export declare const withCanvas: (config: SliderConfig) => (component: any) => CanvasSliderComponent;
+export {};

package/dist/components/slider/features/controller.d.ts

@@ -1,4 +1,4 @@
-import { SliderConfig } from '../types';
+import { SliderConfig } from "../types";
 /**
  * Add controller functionality to slider component
  * Manages state, events, user interactions, and UI rendering

package/dist/components/slider/features/handlers.d.ts

@@ -1,4 +1,4 @@
-import { SliderConfig } from '../types';
+import { SliderConfig } from "../types";
 /**
  * Create consolidated event handlers for slider component (mouse, touch, keyboard)
  *

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

@@ -1,3 +1,4 @@
 export { withRange } from './range';
 export { withStates } from './states';
 export { withController } from './controller';
+export { withCanvas } from './canvas';

package/dist/components/slider/features/states.d.ts

@@ -1,4 +1,4 @@
-import { SliderConfig } from '../types';
+import { SliderConfig } from "../types";
 /**
  * Add state management features to slider component
  * Combines appearance and disabled functionality into a single feature

package/dist/components/slider/schema.d.ts

@@ -1,6 +1,7 @@
 import { SliderConfig } from './types';
 /**
  * Creates the base slider structure definition
+ * When using canvas mode, only handle and value bubble are DOM elements
  *
  * @param component Component for class name generation
  * @param config Slider configuration
@@ -10,7 +11,7 @@ export declare function createSliderSchema(component: any, config: SliderConfig)
     element: {
         options: {
             className: any[];
-            attrs: {
+            attributes: {
                 tabindex: string;
                 role: string;
                 'aria-disabled': string;
@@ -20,59 +21,15 @@ export declare function createSliderSchema(component: any, config: SliderConfig)
             container: {
                 options: {
                     className: any;
+                    style: {
+                        position: string;
+                    };
                 };
                 children: {
-                    track: {
-                        options: {
-                            className: any;
-                        };
-                        children: {
-                            activeTrack: {
-                                options: {
-                                    className: any;
-                                    style: {
-                                        width: string;
-                                    };
-                                };
-                            };
-                            startTrack: {
-                                options: {
-                                    className: any;
-                                    style: {
-                                        display: string;
-                                        width: string;
-                                    };
-                                };
-                            };
-                            remainingTrack: {
-                                options: {
-                                    className: any;
-                                    style: {
-                                        width: string;
-                                    };
-                                };
-                            };
-                        };
-                    };
-                    ticksContainer: {
-                        options: {
-                            className: any;
-                        };
-                    };
-                    startDot: {
-                        options: {
-                            className: any[];
-                        };
-                    };
-                    endDot: {
-                        options: {
-                            className: any[];
-                        };
-                    };
                     handle: {
                         options: {
                             className: any;
-                            attrs: {
+                            attributes: {
                                 role: string;
                                 'aria-valuemin': string;
                                 'aria-valuemax': string;
@@ -91,7 +48,7 @@ export declare function createSliderSchema(component: any, config: SliderConfig)
                     valueBubble: {
                         options: {
                             className: any;
-                            attrs: {
+                            attributes: {
                                 'aria-hidden': string;
                                 'data-handle-index': string;
                             };

package/dist/components/slider/slider.d.ts

@@ -6,10 +6,11 @@ import { SliderConfig, SliderComponent } from './types';
  * 1. Structure definition - Describes the DOM structure declaratively
  * 2. Feature enhancement - Adds specific capabilities (range, icons, labels)
  * 3. DOM creation - Turns the structure into actual DOM elements
- * 4. State management - Handles visual states and appearance
- * 5. Controller - Manages behavior, events, and UI rendering
- * 6. Lifecycle - Handles component lifecycle events
- * 7. Public API - Exposes a clean, consistent API
+ * 4. Canvas rendering - Uses canvas for visual elements, keeping handles as DOM
+ * 5. State management - Handles visual states and appearance
+ * 6. Controller - Manages behavior, events, and UI rendering
+ * 7. Lifecycle - Handles component lifecycle events
+ * 8. Public API - Exposes a clean, consistent API
  *
  * @param {SliderConfig} config - Slider configuration object
  * @returns {SliderComponent} Slider component instance

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

@@ -1,48 +1,19 @@
+import { SliderSize, SLIDER_COLORS, SLIDER_EVENTS, SLIDER_SIZES } from "./constants";
+import { BaseComponentConfig } from "../../core/config/component";
+export { SLIDER_COLORS, SLIDER_EVENTS, SLIDER_SIZES };
 /**
  * Available slider color variants
  */
-export declare const SLIDER_COLORS: {
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
-    readonly TERTIARY: "tertiary";
-    readonly ERROR: "error";
-};
-/**
- * Available slider size variants
- */
-export declare const SLIDER_SIZES: {
-    readonly SMALL: "small";
-    readonly MEDIUM: "medium";
-    readonly LARGE: "large";
-};
-/**
- * Available slider events
- */
-export declare const SLIDER_EVENTS: {
-    readonly CHANGE: "change";
-    readonly INPUT: "input";
-    readonly FOCUS: "focus";
-    readonly BLUR: "blur";
-    readonly START: "start";
-    readonly END: "end";
-};
-/**
- * Available slider color variants
- */
-export type SliderColor = 'primary' | 'secondary' | 'tertiary' | 'error';
-/**
- * Available slider size variants
- */
-export type SliderSize = 'small' | 'medium' | 'large';
+export type SliderColor = "primary" | "secondary" | "tertiary" | "error";
 /**
  * Available slider event types
  */
-export type SliderEventType = 'change' | 'input' | 'focus' | 'blur' | 'start' | 'end';
+export type SliderEventType = "change" | "input" | "focus" | "blur" | "start" | "end";
 /**
  * Configuration options for the slider component
  * @interface SliderConfig
  */
-export interface SliderConfig {
+export interface SliderConfig extends BaseComponentConfig {
     /** Minimum value of the slider */
     min?: number;
     /** Maximum value of the slider */
@@ -71,14 +42,16 @@ export interface SliderConfig {
     snapToSteps?: boolean;
     /** Whether the slider is a range slider (two handles) */
     range?: boolean;
+    /** Whether the slider is a centered slider (with active track from center) */
+    centered?: boolean;
     /** Label text for the slider */
     label?: string;
     /** Position of the label (start or end) - defaults to 'start' */
-    labelPosition?: 'start' | 'end';
+    labelPosition?: "start" | "end";
     /** Icon to display with the slider */
     icon?: string;
     /** Position of the icon (start or end) */
-    iconPosition?: 'start' | 'end';
+    iconPosition?: "start" | "end";
     /** Additional CSS classes */
     class?: string;
     /** Event handlers for slider events */

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

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

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

@@ -1,8 +1,8 @@
-import { SnackbarConfig, BaseComponent, ApiOptions } from './types';
+import { SnackbarConfig, BaseComponent, ApiOptions } from "./types";
 /**
  * Default configuration for the Snackbar component
  */
-export declare const defaultConfig: SnackbarConfig;
+export declare const defaultConfig: Partial<SnackbarConfig>;
 /**
  * Creates the base configuration for Snackbar component
  * @param {SnackbarConfig} config - User provided configuration
@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config: SnackbarConfig) => SnackbarConfi
 export declare const getElementConfig: (config: SnackbarConfig) => {
     tag: string;
     componentName: string;
-    attrs: Record<string, any>;
+    attributes: Record<string, any>;
     className: string[];
     rawClass: string | string[];
     html: string;

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

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

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

@@ -1,4 +1,4 @@
-import { SwitchConfig, BaseComponent, ApiOptions } from './types';
+import { SwitchConfig, BaseComponent, ApiOptions } from "./types";
 /**
  * Default configuration for the Switch component
  */
@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: SwitchConfig) => SwitchConfig;
 export declare const getElementConfig: (config: SwitchConfig) => {
     tag: string;
     componentName: string;
-    attrs: Record<string, any>;
+    attributes: Record<string, any>;
     className: string[];
     rawClass: string | string[];
     html: string;

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

@@ -1,6 +1,6 @@
-import { BaseComponent, ElementComponent } from '../../core/compose/component';
-import { TrackComponent } from '../../core/compose/features';
-import { SwitchConfig } from './types';
+import { BaseComponent, ElementComponent } from "../../core/compose/component";
+import { TrackComponent } from "../../core/compose/features";
+import { SwitchConfig } from "./types";
 /**
  * Configuration for supporting text feature
  */
@@ -21,7 +21,7 @@ export interface SupportingTextConfig {
      * Component name
      */
     componentName?: string;
-    [key: string]: any;
+    [key: string]: unknown;
 }
 /**
  * Component with supporting text capabilities

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

@@ -1,4 +1,4 @@
-import { SwitchConfig, SwitchComponent } from './types';
+import { SwitchConfig, SwitchComponent } from "./types";
 /**
  * Creates a new Switch component
  * @param {SwitchConfig} config - Switch configuration

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
  */
@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: TextfieldConfig) => TextfieldCo
 export declare const getElementConfig: (config: TextfieldConfig) => {
     tag: string;
     componentName: string;
-    attrs: Record<string, any>;
+    attributes: Record<string, any>;
     className: string[];
     rawClass: string | string[];
     html: string;