mtrl 0.4.0 → 0.4.4

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

@@ -3,7 +3,7 @@
  * @param {Object} params - Rendering parameters
  * @returns {HTMLElement} Calendar header element
  */
-export declare const renderHeader: ({ currentMonth, currentYear, currentView, prefix, emit }: any) => HTMLElement;
+export declare const renderHeader: ({ currentMonth, currentYear, currentView, prefix, emit, }: any) => HTMLElement;
 /**
  * Renders the days of the week (S, M, T, etc.)
  * @param {string} prefix - CSS class prefix
@@ -15,25 +15,25 @@ export declare const renderWeekdays: (prefix: string) => HTMLElement;
  * @param {Object} params - Rendering parameters
  * @returns {HTMLElement} Calendar days element
  */
-export declare const renderDays: ({ currentYear, currentMonth, selectedDate, rangeEndDate, minDate, maxDate, prefix, emit }: any) => HTMLElement;
+export declare const renderDays: ({ currentYear, currentMonth, selectedDate, rangeEndDate, minDate, maxDate, prefix, emit, }: any) => HTMLElement;
 /**
  * Renders the month selection view
  * @param {Object} params - Rendering parameters
  * @returns {HTMLElement} Month selection element
  */
-export declare const renderMonthSelection: ({ currentYear, currentMonth, prefix, emit }: any) => HTMLElement;
+export declare const renderMonthSelection: ({ currentMonth, prefix, emit, }: any) => HTMLElement;
 /**
  * Renders the year selection view
  * @param {Object} params - Rendering parameters
  * @returns {HTMLElement} Year selection element
  */
-export declare const renderYearSelection: ({ currentYear, prefix, emit }: any) => HTMLElement;
+export declare const renderYearSelection: ({ currentYear, prefix, emit, }: any) => HTMLElement;
 /**
  * Renders the footer with action buttons
  * @param {Object} params - Rendering parameters
  * @returns {HTMLElement} Footer element
  */
-export declare const renderFooter: ({ variant, prefix, emit }: any) => HTMLElement;
+export declare const renderFooter: ({ prefix, emit }: any) => HTMLElement;
 /**
  * Renders a complete calendar view
  * @param {Object} state - Current datepicker state

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

@@ -1,4 +1,4 @@
-import { DialogConfig } from './types';
+import { DialogConfig } from "./types";
 /**
  * Creates the dialog DOM structure with proper divider handling
  * @param config Dialog configuration

package/dist/components/divider/divider.d.ts

@@ -1,5 +1,5 @@
-import { DividerConfig } from './config';
-import { DividerComponent } from './types';
+import { DividerConfig } from "./config";
+import { DividerComponent } from "./types";
 /**
  * Creates a new Divider component with the specified configuration.
  *

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

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

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

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

package/dist/components/index.d.ts

@@ -27,7 +27,8 @@ export * from './fab';
 export * from './extended-fab';
 export * from './menu';
 export * from './navigation';
-export * from './progress';
+export { PROGRESS_VARIANTS, PROGRESS_SHAPES, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, PROGRESS_MEASUREMENTS, PROGRESS_THICKNESS } from './progress/constants';
+export type { ProgressConfig, ProgressComponent, ProgressShape } from './progress/types';
 export * from './radios';
 export * from './search';
 export * from './segmented-button';

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

@@ -1,4 +1,4 @@
-import { MenuComponent, MenuContent, MenuPosition } from './types';
+import { MenuComponent, MenuContent, MenuPosition, MenuEvents } from "./types";
 /**
  * API configuration options for menu component
  * @category Components
@@ -6,19 +6,19 @@ import { MenuComponent, MenuContent, MenuPosition } from './types';
  */
 interface ApiOptions {
     menu: {
-        open: (event?: Event, interactionType?: 'mouse' | 'keyboard') => any;
-        close: (event?: Event, restoreFocus?: boolean, skipAnimation?: boolean) => any;
-        toggle: (event?: Event, interactionType?: 'mouse' | 'keyboard') => any;
+        open: (event?: Event, interactionType?: "mouse" | "keyboard") => void;
+        close: (event?: Event, restoreFocus?: boolean, skipAnimation?: boolean) => void;
+        toggle: (event?: Event, interactionType?: "mouse" | "keyboard") => void;
         isOpen: () => boolean;
-        setItems: (items: MenuContent[]) => any;
+        setItems: (items: MenuContent[]) => void;
         getItems: () => MenuContent[];
-        setPosition: (position: MenuPosition) => any;
+        setPosition: (position: MenuPosition) => void;
         getPosition: () => MenuPosition;
-        setSelected: (itemId: string) => any;
+        setSelected: (itemId: string) => void;
         getSelected: () => string | null;
     };
     opener: {
-        setOpener: (opener: HTMLElement | string) => any;
+        setOpener: (opener: HTMLElement | string) => void;
         getOpener: () => HTMLElement;
     };
     submenu?: {
@@ -26,8 +26,8 @@ interface ApiOptions {
         closeAllSubmenus: () => void;
     };
     events?: {
-        on: <T extends string>(event: T, handler: (event: any) => void) => any;
-        off: <T extends string>(event: T, handler: (event: any) => void) => any;
+        on: <T extends keyof MenuEvents>(event: T, handler: MenuEvents[T]) => void;
+        off: <T extends keyof MenuEvents>(event: T, handler: MenuEvents[T]) => void;
     };
     lifecycle: {
         destroy: () => void;
@@ -40,9 +40,9 @@ interface ApiOptions {
  */
 interface ComponentWithElements {
     element: HTMLElement;
-    on?: <T extends string>(event: T, handler: (event: any) => void) => any;
-    off?: <T extends string>(event: T, handler: (event: any) => void) => any;
-    emit?: (event: string, data: any) => void;
+    on?: <T extends keyof MenuEvents>(event: T, handler: MenuEvents[T]) => void;
+    off?: <T extends keyof MenuEvents>(event: T, handler: MenuEvents[T]) => void;
+    emit?: (event: string, data: unknown) => void;
 }
 /**
  * Enhances a menu component with API methods.
@@ -54,5 +54,5 @@ interface ComponentWithElements {
  * @category Components
  * @internal This is an internal utility for the Menu component
  */
-declare const withAPI: ({ menu, opener, events, lifecycle, submenu }: ApiOptions) => (component: ComponentWithElements) => MenuComponent;
+declare const withAPI: ({ menu, opener, events, lifecycle }: ApiOptions) => (component: ComponentWithElements) => MenuComponent;
 export { withAPI };

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

@@ -1,4 +1,4 @@
-import { MenuConfig } from './types';
+import { MenuConfig } from "./types";
 /**
  * Default configuration for the Menu component
  * These values will be used when not explicitly specified by the user.

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

@@ -1,4 +1,4 @@
-import { MenuConfig } from '../types';
+import { MenuConfig } from "../types";
 /**
  * Adds controller functionality to the menu component
  * Manages state, rendering, positioning, and event handling

package/dist/components/menu/features/keyboard.d.ts

@@ -1,4 +1,4 @@
-import { MenuItem } from '../types';
+import { MenuItem } from "../types";
 /**
  * Keyboard navigation handler for menus
  * Manages focus management and keyboard interactions for accessibility
@@ -22,5 +22,5 @@ export declare const createKeyboardNavigation: (component: any) => {
  * @param config - Menu configuration
  * @returns Component enhancer with keyboard navigation functionality
  */
-declare const withKeyboard: (config: any) => (component: any) => any;
+declare const withKeyboard: () => (component: any) => any;
 export default withKeyboard;

package/dist/components/menu/features/submenu.d.ts

@@ -1,4 +1,4 @@
-import { MenuConfig } from '../types';
+import { MenuConfig } from "../types";
 /**
  * Adds submenu functionality to the menu component
  * Manages creation, positioning, and interaction with nested submenus

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

@@ -1,4 +1,4 @@
-import { MenuConfig, MenuComponent } from './types';
+import { MenuConfig, MenuComponent } from "./types";
 /**
  * Creates a new Menu component with the specified configuration.
  *

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

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

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

@@ -1,4 +1,4 @@
-import { BaseComponent } from '../types';
+import { BaseComponent } from "../types";
 /**
  * Configuration interface for controller feature
  */

package/dist/components/navigation/features/items.d.ts

@@ -1,4 +1,5 @@
-import { NavItemConfig, NavItemData, BaseComponent } from '../types';
+import { NavItemConfig, BaseComponent } from "../types";
+import type { NavItemData } from "../types";
 /**
  * Interface for a component with items management capabilities
  * @internal

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

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

package/dist/components/navigation/system/core.d.ts

@@ -1,4 +1,4 @@
-import { NavigationSystemState } from './types';
+import { NavigationSystemState } from "./types";
 /**
  * Update drawer content for a specific section WITHOUT changing visibility
  *

package/dist/components/navigation/system/events.d.ts

@@ -1,4 +1,4 @@
-import { NavigationSystemState } from './types';
+import { NavigationSystemState } from "./types";
 /**
  * Registers rail navigation event handlers
  *

package/dist/components/navigation/system/index.d.ts

@@ -1,4 +1,4 @@
-import { NavigationSystemConfig, NavigationSystem } from './types';
+import { NavigationSystemConfig, NavigationSystem } from "./types";
 /**
  * Creates a complete navigation system with synchronized rail and drawer components
  *
@@ -7,4 +7,4 @@ import { NavigationSystemConfig, NavigationSystem } from './types';
  */
 export declare const createNavigationSystem: (options?: NavigationSystemConfig) => NavigationSystem;
 export default createNavigationSystem;
-export * from './types';
+export * from "./types";

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

@@ -1,4 +1,35 @@
-import { ProgressComponent, ProgressThickness, ProgressShape } from './types';
+import { ProgressComponent, ProgressThickness, ProgressShape } from "./types";
+/**
+ * Canvas component interface for API
+ */
+interface CanvasComponent {
+    element: HTMLElement;
+    canvas: HTMLCanvasElement;
+    getClass: (name: string) => string;
+    label?: HTMLElement;
+    state?: {
+        label?: HTMLElement;
+        showLabel?: boolean;
+        value?: number;
+        max?: number;
+        buffer?: number;
+        indeterminate?: boolean;
+        thickness?: number | string;
+        shape?: ProgressShape;
+        labelFormatter?: (value: number, max: number) => string;
+    };
+    draw?: () => void;
+    setThickness?: (thickness: ProgressThickness) => void;
+    setShape?: (shape: ProgressShape) => void;
+    setValue?: (value: number, animate: boolean) => void;
+    setSize?: (size: number) => void;
+    getSize?: () => number | undefined;
+    hide?: () => void;
+    show?: () => void;
+    isVisible?: () => boolean;
+    startIndeterminateAnimation?: () => void;
+    stopIndeterminateAnimation?: () => void;
+}
 /**
  * API configuration options for canvas-based progress component
  */
@@ -42,5 +73,5 @@ interface ApiOptions {
 /**
  * Enhances a canvas-based progress component with a streamlined API
  */
-export declare const withAPI: (options: ApiOptions) => (comp: any) => ProgressComponent;
+export declare const withAPI: (options: ApiOptions) => (comp: CanvasComponent) => ProgressComponent;
 export {};

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

@@ -1,4 +1,4 @@
-import { ProgressConfig, ProgressThickness, ProgressShape } from './types';
+import { ProgressConfig, ProgressThickness, ProgressShape } from "./types";
 /**
  * Default configuration for the Progress component
  */
@@ -32,7 +32,7 @@ export declare const getElementConfig: (config: ProgressConfig) => {
 /**
  * Creates API configuration for the Progress component
  */
-export declare const getApiConfig: (comp: any, state: any) => {
+export declare const getApiConfig: (comp: any) => {
     value: {
         getValue: () => any;
         setValue: (value: number) => void;

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

@@ -11,8 +11,8 @@ export declare const PROGRESS_VARIANTS: {
  * Progress component shapes (linear only)
  */
 export declare const PROGRESS_SHAPES: {
-    /** Standard straight line progress */
-    readonly LINE: "line";
+    /** Standard flat progress */
+    readonly FLAT: "flat";
     /** Wavy animated progress */
     readonly WAVY: "wavy";
 };
@@ -38,7 +38,7 @@ export declare const PROGRESS_DEFAULTS: {
     /** Buffer value for linear progress with buffer */
     readonly BUFFER: 0;
     /** Default shape for linear indeterminate progress */
-    readonly SHAPE: "line";
+    readonly SHAPE: "flat";
     /** Whether to show percentage label */
     readonly SHOW_LABEL: false;
     /** Whether progress is indeterminate */
@@ -106,34 +106,38 @@ export declare const PROGRESS_WAVE: {
     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;
+        /** Speed of wave animation in waves per second (Hz) */
+        readonly SPEED: 0.88;
+        /** Number of complete waves per 100 pixels */
+        readonly FREQUENCY: 2;
+        /** Number of complete waves per 100 pixels for indeterminate */
+        readonly INDETERMINATE_FREQUENCY: 4;
         /** Amplitude for indeterminate animation */
         readonly INDETERMINATE_AMPLITUDE: 2;
         /** Wave shape power (lower = rounder peaks, higher = sharper) */
         readonly POWER: 0.8;
+        /** Percentage at which wave amplitude reaches full strength from start */
+        readonly START_TRANSITION_END: 0;
+        /** Percentage at which wave amplitude begins to decrease near end */
+        readonly END_TRANSITION_START: 0.92;
     };
     /** 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;
+        /** Amplitude as percentage of radius (7 = 7%) */
+        readonly AMPLITUDE: 6;
+        /** Amplitude as percentage of radius for indeterminate (4 = 4%) */
+        readonly INDETERMINATE_AMPLITUDE: 4;
+        /** Speed of wave rotation in rotations per second (Hz), negative value means clockwise */
+        readonly SPEED: 1.1;
         /** Number of complete waves around the circle */
-        readonly FREQUENCY: 12;
+        readonly FREQUENCY: 10;
         /** 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;
+        readonly INDETERMINATE_FREQUENCY: 16;
         /** Wave shape power (lower = rounder peaks, higher = sharper) */
         readonly POWER: 0.8;
+        /** Percentage at which wave amplitude reaches full strength from start */
+        readonly START_TRANSITION_END: 0;
+        /** Percentage at which wave amplitude begins to decrease near end */
+        readonly END_TRANSITION_START: 0.92;
     };
 };

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

@@ -1,4 +1,4 @@
-import { ProgressConfig } from '../types';
+import { ProgressConfig, ProgressThickness } from "../types";
 /**
  * Canvas dimensions and drawing context
  */
@@ -19,14 +19,43 @@ interface CanvasComponent {
     getClass: (name: string) => string;
     draw: () => void;
     resize: () => void;
-    [key: string]: any;
+    [key: string]: unknown;
 }
 /**
- * Gets the stroke width value from the thickness config
+ * Base component interface for withCanvas
  */
-export declare const getStrokeWidth: (thickness?: string | number) => number;
+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: any) => CanvasComponent;
+export declare const withCanvas: (config: ProgressConfig) => (component: BaseComponent) => CanvasComponent;
 export {};

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

@@ -1,8 +1,8 @@
 /**
  * Circular progress drawing functionality
  */
-import { ProgressConfig, ProgressShape } from '../types';
-import { CanvasContext } from './canvas';
+import { ProgressConfig, ProgressShape } from "../types";
+import { CanvasContext } from "./canvas";
 /**
  * Draws circular progress on canvas
  */

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

@@ -1,8 +1,8 @@
 /**
  * Linear progress drawing functionality
  */
-import { ProgressConfig, ProgressShape } from '../types';
-import { CanvasContext } from './canvas';
+import { ProgressConfig, ProgressShape } from "../types";
+import { CanvasContext } from "./canvas";
 /**
  * Draws linear progress on canvas with shape support
  */

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

@@ -1,4 +1,4 @@
-import { ProgressConfig, ProgressShape } from '../types';
+import { ProgressConfig, ProgressShape } from "../types";
 /**
  * Progress component state
  */
@@ -11,6 +11,7 @@ interface ProgressState {
     shape: ProgressShape;
     labelFormatter: (value: number, max: number) => string;
     label?: HTMLElement;
+    showLabel?: boolean;
 }
 /**
  * Component with lifecycle methods and canvas drawing
@@ -24,6 +25,13 @@ interface ComponentWithLifecycle {
         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;
 }
 /**

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

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

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

@@ -2,22 +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;
+export type ProgressThickness = "thin" | "thick" | number;
 /**
  * Progress shape options (linear only)
  * @category Components
  */
-export type ProgressShape = 'line' | 'wavy';
+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
@@ -61,7 +61,7 @@ export interface ProgressConfig {
     /**
      * Shape of the linear indeterminate progress animation
      * Only affects linear variant in indeterminate state
-     * @default 'line'
+     * @default 'flat'
      */
     shape?: ProgressShape;
     /**
@@ -207,7 +207,7 @@ export interface ProgressComponent {
     /**
      * Sets the shape of the linear indeterminate progress animation
      * Only affects linear variant in indeterminate state
-     * @param shape - Shape value ('line' or 'wavy')
+     * @param shape - Shape value ('flat' or 'wavy')
      * @returns The progress component for chaining
      */
     setShape: (shape: ProgressShape) => ProgressComponent;
@@ -227,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
  */

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