mtrl 0.4.0 → 0.4.4

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

@@ -1,21 +1,25 @@
-import { SearchComponent } from './types';
+import { SearchComponent } from "./types";
 /**
  * API options interface - structured by feature area
  */
 interface ApiOptions {
     search: {
-        setValue: (value: string, triggerEvent?: boolean) => any;
+        setValue: (value: string, triggerEvent?: boolean) => void;
         getValue: () => string;
-        setPlaceholder: (text: string) => any;
+        setPlaceholder: (text: string) => void;
         getPlaceholder: () => string;
-        focus: () => any;
-        blur: () => any;
-        expand: () => any;
-        collapse: () => any;
-        clear: () => any;
-        submit: () => any;
-        setSuggestions: (suggestions: any[]) => any;
-        showSuggestions: (show: boolean) => any;
+        focus: () => void;
+        blur: () => void;
+        expand: () => void;
+        collapse: () => void;
+        clear: () => void;
+        submit: () => void;
+        setSuggestions: (suggestions: string[] | Array<{
+            text: string;
+            value?: string;
+            icon?: string;
+        }>) => void;
+        showSuggestions: (show: boolean) => void;
     };
     disabled: {
         enable: () => void;

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

@@ -1,4 +1,4 @@
-import { SearchConfig } from '../types';
+import { SearchConfig } from "../types";
 /**
  * Add main search functionality to component
  * @param config Search configuration

package/dist/components/segmented-button/config.d.ts

@@ -1,4 +1,4 @@
-import { SegmentedButtonConfig, SelectionMode } from './types';
+import { SegmentedButtonConfig, SelectionMode } from "./types";
 /**
  * Default configuration values for segmented buttons
  * @internal
@@ -26,9 +26,9 @@ export declare const getContainerConfig: (config: SegmentedButtonConfig) => {
     componentName: string;
     attributes: {
         role: string;
-        'aria-label': string;
-        'data-mode': SelectionMode;
-        'data-density': string;
+        "aria-label": string;
+        "data-mode": SelectionMode;
+        "data-density": string;
     };
     className: string[];
     interactive: boolean;
@@ -54,12 +54,12 @@ export declare const getSegmentConfig: (segment: any, prefix: any, groupDisabled
         type: string;
         role: string;
         disabled: boolean;
-        'aria-pressed': string;
+        "aria-pressed": string;
         value: any;
     };
     className: any[];
     forwardEvents: {
-        click: (component: any) => boolean;
+        click: () => boolean;
     };
     interactive: boolean;
 };

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { SelectConfig, BaseComponent } from './types';
+import { SelectConfig, BaseComponent } from "./types";
 /**
  * Creates a textfield for the select component
  * @param config - Select configuration

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

@@ -1,7 +1,7 @@
 /**
  * Available Select variants
  */
-export type SelectVariant = 'filled' | 'outlined';
+export type SelectVariant = "filled" | "outlined";
 /**
  * Select variant constants
  */
@@ -59,6 +59,10 @@ export interface SelectConfig {
      * Visual variant (filled, outlined)
      */
     variant?: SelectVariant | string;
+    /**
+     * Density level (default, compact)
+     */
+    density?: "default" | "compact" | string;
     /**
      * Label text
      */
@@ -166,7 +170,7 @@ export interface SelectComponent {
      * @param interactionType - The type of interaction ('mouse' or 'keyboard')
      * @returns Select component for chaining
      */
-    open: (interactionType?: 'mouse' | 'keyboard') => SelectComponent;
+    open: (interactionType?: "mouse" | "keyboard") => SelectComponent;
     /**
      * Closes the select menu
      * @returns Select component for chaining
@@ -176,6 +180,17 @@ export interface SelectComponent {
      * Checks if the menu is open
      */
     isOpen: () => boolean;
+    /**
+     * Sets the density of the select
+     * @param density - The density level to set
+     * @returns Select component for chaining
+     */
+    setDensity: (density: "default" | "compact" | string) => SelectComponent;
+    /**
+     * Gets the current density setting
+     * @returns The current density
+     */
+    getDensity: () => string;
     /**
      * Adds an event listener
      * @param event - Event name
@@ -248,9 +263,9 @@ export interface SelectChangeEvent extends SelectEvent {
  * @internal
  */
 export interface SelectEvents {
-    'change': (event: SelectChangeEvent) => void;
-    'open': (event: SelectEvent) => void;
-    'close': (event: SelectEvent) => void;
+    change: (event: SelectChangeEvent) => void;
+    open: (event: SelectEvent) => void;
+    close: (event: SelectEvent) => void;
 }
 /**
  * API options interface

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

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

package/dist/components/sheet/sheet.d.ts

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

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

@@ -1,4 +1,5 @@
-import { SliderComponent } from './types';
+import { SliderComponent } from "./types";
+import { SliderSize } from "./constants";
 /**
  * API options interface - structured by feature area
  */
@@ -24,7 +25,7 @@ interface ApiOptions {
     appearance: {
         setColor: (color: string) => void;
         getColor: () => string;
-        setSize: (size: string) => void;
+        setSize: (size: SliderSize) => void;
         getSize: () => string;
         showTicks: (show: boolean) => void;
         showCurrentValue: (show: boolean) => void;

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

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

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
@@ -20,55 +21,11 @@ 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;

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

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
  */

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