mtrl 0.3.9 → 0.4.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -10,7 +10,7 @@ export declare function createChipsSchema(component: any, config: ChipsConfig):
     element: {
         options: {
             className: any[];
-            attrs: {
+            attributes: {
                 tabindex: string;
                 role: string;
                 'aria-multiselectable': string;

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

@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: DatePickerConfig) => DatePicker
 export declare const getContainerConfig: (config: DatePickerConfig) => {
     tag: string;
     componentName: string;
-    attrs: Record<string, any>;
+    attributes: Record<string, any>;
     className: string[];
     rawClass: string | string[];
     html: string;
@@ -33,7 +33,7 @@ export declare const getContainerConfig: (config: DatePickerConfig) => {
 export declare const getInputConfig: (config: DatePickerConfig) => {
     tag: string;
     componentName: string;
-    attrs: Record<string, any>;
+    attributes: Record<string, any>;
     className: string[];
     rawClass: string | string[];
     html: string;
@@ -49,7 +49,7 @@ export declare const getInputConfig: (config: DatePickerConfig) => {
 export declare const getCalendarConfig: (config: DatePickerConfig) => {
     tag: string;
     componentName: string;
-    attrs: Record<string, any>;
+    attributes: Record<string, any>;
     className: string[];
     rawClass: string | string[];
     html: string;

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

@@ -17,7 +17,7 @@ export declare const createBaseConfig: (config?: DialogConfig) => DialogConfig;
 export declare const getElementConfig: (config: DialogConfig) => {
     tag: string;
     componentName: string;
-    attrs: Record<string, any>;
+    attributes: Record<string, any>;
     className: string[];
     rawClass: string | string[];
     html: string;
@@ -32,7 +32,7 @@ export declare const getElementConfig: (config: DialogConfig) => {
  */
 export declare const getOverlayConfig: (config: DialogConfig) => {
     tag: string;
-    attrs: {
+    attributes: {
         'aria-modal': boolean;
         role: string;
         tabindex: number;

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

@@ -223,7 +223,7 @@ export interface DialogButton {
      * Additional button attributes to pass to the button element
      * @example { 'data-id': 'save-button', 'form': 'profile-form' }
      */
-    attrs?: Record<string, any>;
+    attributes?: Record<string, any>;
 }
 /**
  * Dialog event object

package/dist/components/extended-fab/config.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,7 @@
-import { ProgressComponent } from './types';
+import { ProgressComponent, ProgressThickness, ProgressShape } from './types';
+/**
+ * API configuration options for canvas-based progress component
+ */
 interface ApiOptions {
     value: {
         getValue: () => number;
@@ -15,10 +18,18 @@ interface ApiOptions {
         isDisabled: () => boolean;
     };
     label: {
-        show: () => void;
-        hide: () => void;
-        format: (formatter: (value: number, max: number) => string) => void;
-        setContent: (content: string) => void;
+        show?: () => void;
+        hide?: () => void;
+        format?: (formatter: (value: number, max: number) => string) => void;
+        formatter?: (value: number, max: number) => string;
+    };
+    thickness?: {
+        getThickness: () => number;
+        setThickness: (thickness: ProgressThickness) => void;
+    };
+    shape?: {
+        getShape: () => ProgressShape;
+        setShape: (shape: ProgressShape) => void;
     };
     state: {
         setIndeterminate: (indeterminate: boolean) => void;
@@ -28,19 +39,8 @@ interface ApiOptions {
         destroy: () => void;
     };
 }
-interface ComponentWithElements {
-    element: HTMLElement;
-    trackElement: HTMLElement;
-    indicatorElement: HTMLElement;
-    labelElement?: HTMLElement;
-    getClass: (name: string) => string;
-    emit: (event: string, data?: any) => void;
-}
 /**
- * Enhances a progress component with API methods
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- * @internal This is an internal utility for the Progress component
+ * Enhances a canvas-based progress component with a streamlined API
  */
-export declare const withAPI: (options: ApiOptions) => (component: ComponentWithElements) => ProgressComponent;
+export declare const withAPI: (options: ApiOptions) => (comp: any) => ProgressComponent;
 export {};

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

@@ -1,23 +1,27 @@
-import { ProgressConfig } from './types';
+import { ProgressConfig, ProgressThickness, ProgressShape } from './types';
 /**
  * Default configuration for the Progress component
  */
 export declare const defaultConfig: ProgressConfig;
 /**
- * Creates the base configuration for Progress component
- * @param {ProgressConfig} config - User provided configuration
- * @returns {ProgressConfig} Complete configuration with defaults applied
+ * Creates the base configuration for the Progress component
+ * with all defaults applied (no complex schema needed for canvas)
+ *
+ * @param config User-provided configuration
+ * @returns Complete configuration with defaults
  */
 export declare const createBaseConfig: (config?: ProgressConfig) => ProgressConfig;
 /**
- * Generates element configuration for the Progress component
+ * Generates element configuration for the Progress container
+ * Canvas will be added by withCanvas feature
+ *
  * @param {ProgressConfig} config - Progress configuration
  * @returns {Object} Element configuration object for withElement
  */
 export declare const getElementConfig: (config: ProgressConfig) => {
     tag: string;
     componentName: string;
-    attrs: Record<string, any>;
+    attributes: Record<string, any>;
     className: string[];
     rawClass: string | string[];
     html: string;
@@ -27,9 +31,6 @@ export declare const getElementConfig: (config: ProgressConfig) => {
 };
 /**
  * Creates API configuration for the Progress component
- * @param {Object} comp - Component with state management features
- * @param {Object} state - State object containing component state
- * @returns {Object} API configuration object
  */
 export declare const getApiConfig: (comp: any, state: any) => {
     value: {
@@ -50,7 +51,15 @@ export declare const getApiConfig: (comp: any, state: any) => {
         show: () => void;
         hide: () => void;
         format: (formatter: any) => void;
-        setContent: (content: any) => void;
+        formatter: any;
+    };
+    thickness: {
+        getThickness: () => number;
+        setThickness: (thickness: ProgressThickness) => void;
+    };
+    shape: {
+        getShape: () => any;
+        setShape: (shape: ProgressShape) => void;
     };
     state: {
         setIndeterminate: (indeterminate: boolean) => void;

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

@@ -7,6 +7,15 @@ export declare const PROGRESS_VARIANTS: {
     /** Circular spinner progress indicator */
     readonly CIRCULAR: "circular";
 };
+/**
+ * Progress component shapes (linear only)
+ */
+export declare const PROGRESS_SHAPES: {
+    /** Standard straight line progress */
+    readonly LINE: "line";
+    /** Wavy animated progress */
+    readonly WAVY: "wavy";
+};
 /**
  * Progress component events
  */
@@ -28,6 +37,8 @@ export declare const PROGRESS_DEFAULTS: {
     readonly MAX: 100;
     /** Buffer value for linear progress with buffer */
     readonly BUFFER: 0;
+    /** Default shape for linear indeterminate progress */
+    readonly SHAPE: "line";
     /** Whether to show percentage label */
     readonly SHOW_LABEL: false;
     /** Whether progress is indeterminate */
@@ -43,7 +54,7 @@ export declare const PROGRESS_CLASSES: {
     readonly LINEAR: "progress--linear";
     /** Circular variant class */
     readonly CIRCULAR: "progress--circular";
-    /** Track element (background) class */
+    /** Track element (unfilled part) class */
     readonly TRACK: "progress__track";
     /** Indicator element (filled part) class */
     readonly INDICATOR: "progress__indicator";
@@ -55,4 +66,74 @@ export declare const PROGRESS_CLASSES: {
     readonly INDETERMINATE: "progress--indeterminate";
     /** Disabled state class */
     readonly DISABLED: "progress--disabled";
+    /** Test state class */
+    readonly TEST: "progress--test";
+    readonly TRANSITION: "progress--transition";
+};
+/**
+ * Progress component measurements
+ */
+export declare const PROGRESS_MEASUREMENTS: {
+    readonly LINEAR: {
+        readonly MIN_HEIGHT: 4;
+        readonly GAP: 4;
+        readonly STOP_INDICATOR: 4;
+        readonly HEIGHT: 4;
+    };
+    readonly CIRCULAR: {
+        readonly SIZE: 48;
+        readonly GAP: 8;
+    };
+    readonly COMMON: {
+        readonly STROKE_WIDTH: 4;
+    };
+};
+/**
+ * Thickness presets for progress component
+ * These are the standard thickness options following Material Design 3
+ */
+export declare const PROGRESS_THICKNESS: {
+    /** Thin stroke width (4px) - default */
+    readonly THIN: 4;
+    /** Thick stroke width (8px) */
+    readonly THICK: 8;
+};
+/**
+ * Wave animation parameters for progress components
+ */
+export declare const PROGRESS_WAVE: {
+    /** Linear progress wave parameters */
+    readonly LINEAR: {
+        /** Base amplitude of the wave in pixels */
+        readonly AMPLITUDE: 3;
+        /** Speed of the wave animation */
+        readonly SPEED: 0.008;
+        /** Frequency of the wave (affects wavelength) */
+        readonly FREQUENCY: 0.15;
+        /** Frequency for indeterminate animation */
+        readonly INDETERMINATE_FREQUENCY: 0.35;
+        /** Amplitude for indeterminate animation */
+        readonly INDETERMINATE_AMPLITUDE: 2;
+        /** Wave shape power (lower = rounder peaks, higher = sharper) */
+        readonly POWER: 0.8;
+    };
+    /** Circular progress wave parameters */
+    readonly CIRCULAR: {
+        /** Amplitude as percentage of stroke width */
+        readonly AMPLITUDE_RATIO: 1;
+        /** Maximum amplitude in pixels */
+        readonly AMPLITUDE_MAX: 5;
+        /** Speed of the wave rotation */
+        readonly SPEED: 0.008;
+        /** Number of complete waves around the circle */
+        readonly FREQUENCY: 12;
+        /** Number of complete waves for indeterminate animation */
+        readonly INDETERMINATE_FREQUENCY: 32;
+        /** Amplitude ratio for indeterminate animation */
+        readonly INDETERMINATE_AMPLITUDE_RATIO: 0.7;
+        /** Maximum amplitude for indeterminate animation */
+        readonly INDETERMINATE_AMPLITUDE_MAX: 3;
+        /** Wave shape power (lower = rounder peaks, higher = sharper) */
+        readonly POWER: 0.8;
+    };
 };

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

@@ -0,0 +1,32 @@
+import { ProgressConfig } 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]: any;
+}
+/**
+ * Gets the stroke width value from the thickness config
+ */
+export declare const getStrokeWidth: (thickness?: string | number) => number;
+/**
+ * Adds canvas functionality to replace complex DOM structure
+ */
+export declare const withCanvas: (config: ProgressConfig) => (component: any) => 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,38 @@
+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;
+}
+/**
+ * Component with lifecycle methods and canvas drawing
+ */
+interface ComponentWithLifecycle {
+    element: HTMLElement;
+    canvas?: HTMLCanvasElement;
+    draw?: () => void;
+    lifecycle?: {
+        init?: () => void;
+        destroy?: () => void;
+    };
+    getClass?: (name: string) => string;
+    [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/features.d.ts

@@ -0,0 +1,40 @@
+import { ProgressConfig, ProgressShape } from './types';
+/**
+ * Progress component state
+ */
+interface ProgressState {
+    value: number;
+    max: number;
+    buffer: number;
+    indeterminate: boolean;
+    shape: ProgressShape;
+    labelFormatter: (value: number, max: number) => string;
+    label?: HTMLElement;
+}
+/**
+ * Component with lifecycle methods
+ */
+interface ComponentWithLifecycle {
+    element: HTMLElement;
+    lifecycle?: {
+        init?: () => void;
+        destroy?: () => void;
+    };
+    setIndeterminate?: (state: boolean) => unknown;
+    setValue?: (value: number) => unknown;
+    setBuffer?: (value: number) => unknown;
+    setShape?: (shape: ProgressShape) => unknown;
+    showLabel?: () => unknown;
+    getClass?: (name: string) => string;
+    [key: string]: any;
+}
+/**
+ * Adds state management and initialization to the 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';
 /**
- * Creates a new Progress component
+ * Creates a new Progress component using canvas rendering
  * @param {ProgressConfig} config - Progress configuration object
  * @returns {ProgressComponent} Progress component instance
  *