mtrl 0.3.9 → 0.4.3

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

@@ -0,0 +1,61 @@
+import { ProgressConfig, ProgressThickness } from "../types";
+/**
+ * Canvas dimensions and drawing context
+ */
+export interface CanvasContext {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    pixelRatio: number;
+}
+/**
+ * Component with canvas capabilities
+ */
+interface CanvasComponent {
+    element: HTMLElement;
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    getClass: (name: string) => string;
+    draw: () => void;
+    resize: () => void;
+    [key: string]: unknown;
+}
+/**
+ * Base component interface for withCanvas
+ */
+interface BaseComponent {
+    element: HTMLElement;
+    getClass: (name: string) => string;
+    lifecycle?: {
+        init?: () => void;
+        destroy?: () => void;
+    };
+    state?: {
+        value?: number;
+        max?: number;
+        buffer?: number;
+        indeterminate?: boolean;
+        [key: string]: unknown;
+    };
+    animationId?: number | null;
+    wavyAnimationId?: number | null;
+    valueAnimationId?: number | null;
+    animationTime?: number;
+    setIndeterminate?: (indeterminate: boolean) => void;
+    [key: string]: unknown;
+}
+/**
+ * Gets the stroke width for a given thickness preset or custom value
+ */
+export declare const getStrokeWidth: (thickness?: ProgressThickness) => number;
+/**
+ * Calculates wave amplitude based on stroke width
+ * Uses thickness 4 as the baseline (where amplitude is perfect)
+ */
+export declare const getWaveAmplitude: (strokeWidth: number, baseAmplitude: number, maxAmplitude?: number) => number;
+/**
+ * Adds canvas functionality to replace complex DOM structure
+ */
+export declare const withCanvas: (config: ProgressConfig) => (component: BaseComponent) => CanvasComponent;
+export {};

package/dist/components/progress/features/circular.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Circular progress drawing functionality
+ */
+import { ProgressConfig, ProgressShape } from "../types";
+import { CanvasContext } from "./canvas";
+/**
+ * Draws circular progress on canvas
+ */
+export declare const drawCircularProgress: (context: CanvasContext, config: ProgressConfig, value: number, max: number, isIndeterminate: boolean, animationTime?: number, currentShape?: ProgressShape) => void;

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

@@ -0,0 +1,8 @@
+/**
+ * Progress component features
+ * Exports all features used by the progress component
+ */
+export { withCanvas } from './canvas';
+export { withState } from './state';
+export { drawCircularProgress } from './circular';
+export { drawLinearProgress } from './linear';

package/dist/components/progress/features/linear.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Linear progress drawing functionality
+ */
+import { ProgressConfig, ProgressShape } from "../types";
+import { CanvasContext } from "./canvas";
+/**
+ * Draws linear progress on canvas with shape support
+ */
+export declare const drawLinearProgress: (context: CanvasContext, config: ProgressConfig, value: number, max: number, buffer: number, isIndeterminate: boolean, animationTime?: number, showStopIndicator?: boolean, currentShape?: ProgressShape) => void;

package/dist/components/progress/features/resize-observer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Creates a ResizeObserver to handle canvas dimension changes
+ * This ensures the canvas always matches its container size
+ */
+export declare const createCanvasResizeObserver: (element: HTMLElement, canvas: HTMLCanvasElement, onResize: () => void) => (() => void);

package/dist/components/progress/features/state.d.ts

@@ -0,0 +1,46 @@
+import { ProgressConfig, ProgressShape } from "../types";
+/**
+ * Progress component state
+ */
+interface ProgressState {
+    value: number;
+    max: number;
+    buffer: number;
+    indeterminate: boolean;
+    thickness: number | string;
+    shape: ProgressShape;
+    labelFormatter: (value: number, max: number) => string;
+    label?: HTMLElement;
+    showLabel?: boolean;
+}
+/**
+ * Component with lifecycle methods and canvas drawing
+ */
+interface ComponentWithLifecycle {
+    element: HTMLElement;
+    canvas?: HTMLCanvasElement;
+    draw?: () => void;
+    lifecycle?: {
+        init?: () => void;
+        destroy?: () => void;
+    };
+    getClass?: (name: string) => string;
+    setIndeterminate?: (indeterminate: boolean) => unknown;
+    setValue?: (value: number) => unknown;
+    setBuffer?: (buffer: number) => unknown;
+    setShape?: (shape: ProgressShape) => unknown;
+    showLabel?: () => unknown;
+    setThickness?: (thickness: number | string) => unknown;
+    state?: ProgressState;
+    [key: string]: any;
+}
+/**
+ * Adds state management for canvas-based progress component
+ *
+ * @param config Progress configuration
+ * @returns Component enhancer with state management
+ */
+export declare const withState: (config: ProgressConfig) => (component: ComponentWithLifecycle) => ComponentWithLifecycle & {
+    state: ProgressState;
+};
+export {};

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

@@ -1,3 +1,3 @@
 export { default } from './progress';
-export { ProgressConfig, ProgressComponent } from './types';
-export { PROGRESS_VARIANTS, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES } from './constants';
+export { ProgressConfig, ProgressComponent, ProgressShape } from './types';
+export { PROGRESS_VARIANTS, PROGRESS_SHAPES, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, PROGRESS_MEASUREMENTS, PROGRESS_THICKNESS } from './constants';

package/dist/components/progress/progress.d.ts

@@ -1,6 +1,6 @@
-import { ProgressConfig, ProgressComponent } from './types';
+import { ProgressConfig, ProgressComponent } from "./types";
 /**
- * Creates a new Progress component
+ * Creates a new Progress component using canvas rendering
  * @param {ProgressConfig} config - Progress configuration object
  * @returns {ProgressComponent} Progress component instance
  *

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

@@ -2,12 +2,22 @@
  * Progress variant types
  * @category Components
  */
-export type ProgressVariant = 'linear' | 'circular';
+export type ProgressVariant = "linear" | "circular";
+/**
+ * Progress thickness options
+ * @category Components
+ */
+export type ProgressThickness = "thin" | "thick" | number;
+/**
+ * Progress shape options (linear only)
+ * @category Components
+ */
+export type ProgressShape = "flat" | "wavy";
 /**
  * Progress component event types
  * @category Components
  */
-export type ProgressEvent = 'change' | 'complete';
+export type ProgressEvent = "change" | "complete";
 /**
  * Configuration interface for the Progress component
  * @category Components
@@ -17,7 +27,7 @@ export interface ProgressConfig {
      * Progress variant that determines visual style
      * @default 'linear'
      */
-    variant?: ProgressVariant | string;
+    variant?: ProgressVariant;
     /**
      * Initial progress value (0-100)
      * @default 0
@@ -40,9 +50,20 @@ export interface ProgressConfig {
     buffer?: number;
     /**
      * Additional CSS classes to add to the progress component
-     * @example 'page-loader main-progress'
      */
     class?: string;
+    /**
+     * Thickness of the progress track and indicator
+     * Can be a named preset ('thin', 'default', 'thick') or a specific number in pixels
+     * @default 'default'
+     */
+    thickness?: ProgressThickness;
+    /**
+     * Shape of the linear indeterminate progress animation
+     * Only affects linear variant in indeterminate state
+     * @default 'flat'
+     */
+    shape?: ProgressShape;
     /**
      * Whether to show text label with percentage
      * @default false
@@ -55,7 +76,6 @@ export interface ProgressConfig {
     indeterminate?: boolean;
     /**
      * Custom label formatter function
-     * @example (value, max) => `${Math.round((value/max) * 100)}%`
      */
     labelFormatter?: (value: number, max: number) => string;
     /**
@@ -68,6 +88,17 @@ export interface ProgressConfig {
      * @default 'progress'
      */
     componentName?: string;
+    /**
+     * DOM structure schema
+     * @internal
+     */
+    schema?: any;
+    /**
+     * Size of the circular progress indicator in dp (only for circular variant)
+     * Clamped between 24 and 240
+     * @default 50
+     */
+    size?: number;
 }
 /**
  * Progress component interface
@@ -76,14 +107,12 @@ export interface ProgressConfig {
 export interface ProgressComponent {
     /** The component's root DOM element */
     element: HTMLElement;
-    /** The track element (background) */
-    trackElement: HTMLElement;
-    /** The indicator element (filled part) */
-    indicatorElement: HTMLElement;
-    /** The buffer element for linear variant (pre-loaded state) */
-    bufferElement?: HTMLElement;
-    /** The label element if showLabel is enabled */
-    labelElement?: HTMLElement;
+    /** The track element (unfilled part) - always an SVG element */
+    track: SVGElement;
+    /** The indicator element (filled part) - always an SVG element */
+    indicator: SVGElement;
+    /** The buffer element for linear variant (pre-loaded state) - always an SVG element */
+    buffer?: SVGElement;
     /**
      * Gets a class name with the component's prefix
      * @param name - Base class name
@@ -91,16 +120,22 @@ export interface ProgressComponent {
      */
     getClass: (name: string) => string;
     /**
-     * Sets the current progress value
-     * @param value - Progress value (between 0 and max)
-     * @returns The progress component for chaining
+     * Sets the progress value
+     * @param value - Progress value between 0 and max
+     * @param animate - Whether to animate the value change (default: true)
+     * @returns The component instance for chaining
      */
-    setValue: (value: number) => ProgressComponent;
+    setValue: (value: number, animate?: boolean) => ProgressComponent;
     /**
      * Gets the current progress value
      * @returns Current progress value
      */
     getValue: () => number;
+    /**
+     * Gets the maximum progress value
+     * @returns Maximum progress value
+     */
+    getMax: () => number;
     /**
      * Sets the buffer value (for linear variant with buffer indicators)
      * @param value - Buffer value (between 0 and max)
@@ -127,6 +162,21 @@ export interface ProgressComponent {
      * @returns Whether the component is disabled
      */
     isDisabled: () => boolean;
+    /**
+     * Hides the progress component
+     * @returns The progress component for chaining
+     */
+    hide: () => ProgressComponent;
+    /**
+     * Shows the progress component
+     * @returns The progress component for chaining
+     */
+    show: () => ProgressComponent;
+    /**
+     * Checks if the progress component is visible
+     * @returns Whether the component is visible
+     */
+    isVisible: () => boolean;
     /**
      * Shows the label element
      * @returns The progress component for chaining
@@ -143,6 +193,29 @@ export interface ProgressComponent {
      * @returns The progress component for chaining
      */
     setLabelFormatter: (formatter: (value: number, max: number) => string) => ProgressComponent;
+    /**
+     * Sets the thickness of the progress track and indicator
+     * @param thickness - Thickness value ('thin', 'default', 'thick' or number in pixels)
+     * @returns The progress component for chaining
+     */
+    setThickness: (thickness: ProgressThickness) => ProgressComponent;
+    /**
+     * Gets the current thickness value in pixels
+     * @returns Current thickness in pixels
+     */
+    getThickness: () => number;
+    /**
+     * Sets the shape of the linear indeterminate progress animation
+     * Only affects linear variant in indeterminate state
+     * @param shape - Shape value ('flat' or 'wavy')
+     * @returns The progress component for chaining
+     */
+    setShape: (shape: ProgressShape) => ProgressComponent;
+    /**
+     * Gets the current shape value
+     * @returns Current shape
+     */
+    getShape: () => ProgressShape;
     /**
      * Sets the indeterminate state
      * @param indeterminate - Whether progress is indeterminate
@@ -154,6 +227,18 @@ export interface ProgressComponent {
      * @returns Whether the component is indeterminate
      */
     isIndeterminate: () => boolean;
+    /**
+     * Sets the size of the circular progress indicator
+     * Only applies to circular variant
+     * @param size - Size in pixels (clamped between 24 and 240)
+     * @returns The progress component for chaining
+     */
+    setSize: (size: number) => ProgressComponent;
+    /**
+     * Gets the current size of the circular progress indicator
+     * @returns Current size in pixels, or undefined for linear variant
+     */
+    getSize: () => number | undefined;
     /**
      * Adds an event listener to the progress
      * @param event - Event name ('change', 'complete')

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

@@ -1,4 +1,4 @@
-import { RadiosComponent } from './types';
+import { RadiosComponent, RadioItem, RadioOptionConfig } from "./types";
 interface ApiOptions {
     disabled: {
         enable: () => void;
@@ -10,21 +10,21 @@ interface ApiOptions {
 }
 interface ComponentWithRadio {
     element: HTMLElement;
-    radios: any[];
+    radios: RadioItem[];
     getValue: () => string;
-    setValue: (value: string) => any;
-    getSelected: () => any;
-    addOption: (option: any) => any;
-    removeOption: (value: string) => any;
-    enable: () => any;
-    disable: () => any;
-    enableOption: (value: string) => any;
-    disableOption: (value: string) => any;
+    setValue: (value: string) => void;
+    getSelected: () => RadioOptionConfig | null;
+    addOption: (option: RadioOptionConfig) => void;
+    removeOption: (value: string) => void;
+    enable: () => void;
+    disable: () => void;
+    enableOption: (value: string) => void;
+    disableOption: (value: string) => void;
     getClass: (name: string) => string;
     events: {
         on: (event: string, handler: Function) => void;
         off: (event: string, handler: Function) => void;
-        emit?: (event: string, data: any) => void;
+        emit?: (event: string, data: unknown) => void;
     };
 }
 /**

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

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

package/dist/components/radios/radios.d.ts

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

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/config.d.ts

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

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
@@ -24,11 +24,11 @@ export declare const createBaseConfig: (config?: SegmentedButtonConfig) => Segme
 export declare const getContainerConfig: (config: SegmentedButtonConfig) => {
     tag: string;
     componentName: string;
-    attrs: {
+    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;
@@ -50,16 +50,16 @@ export declare const getDensityStyles: (density: string) => Record<string, strin
  */
 export declare const getSegmentConfig: (segment: any, prefix: any, groupDisabled?: boolean) => {
     tag: string;
-    attrs: {
+    attributes: {
         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
  */
@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: SheetConfig) => SheetConfig;
 export declare const getElementConfig: (config: SheetConfig) => {
     tag: string;
     componentName: string;
-    attrs: Record<string, any>;
+    attributes: Record<string, any>;
     className: string[];
     rawClass: string | string[];
     html: string;

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