mtrl 0.3.9 → 0.4.0

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

@@ -3,6 +3,16 @@
  * @category Components
  */
 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 = 'line' | 'wavy';
 /**
  * Progress component event types
  * @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 'line'
+     */
+    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 ('line' 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

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

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

@@ -24,7 +24,7 @@ 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;
@@ -50,7 +50,7 @@ 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;

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

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

@@ -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;

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

@@ -10,7 +10,7 @@ export declare function createSliderSchema(component: any, config: SliderConfig)
     element: {
         options: {
             className: any[];
-            attrs: {
+            attributes: {
                 tabindex: string;
                 role: string;
                 'aria-disabled': string;
@@ -72,7 +72,7 @@ export declare function createSliderSchema(component: any, config: SliderConfig)
                     handle: {
                         options: {
                             className: any;
-                            attrs: {
+                            attributes: {
                                 role: string;
                                 'aria-valuemin': string;
                                 'aria-valuemax': string;
@@ -91,7 +91,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/snackbar/config.d.ts

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

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

@@ -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;

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

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

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

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

package/dist/core/canvas/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Canvas utilities module
+ * Provides common utilities for working with HTML Canvas elements
+ */
+export { observeCanvasResize } from './resize';

package/dist/core/canvas/resize.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Canvas resize utilities
+ * Provides utilities for observing and handling canvas resize events
+ */
+/**
+ * Observes resize events on an element and triggers a callback
+ * Watches the specified element and debounces resize events
+ *
+ * @param element - The element to observe for size changes
+ * @param canvas - The canvas element (for context)
+ * @param onResize - Callback to execute when the element resizes
+ * @returns Cleanup function to stop observing
+ */
+export declare const observeCanvasResize: (element: HTMLElement, canvas: HTMLCanvasElement, onResize: () => void) => (() => void);

package/dist/core/compose/component.d.ts

@@ -40,7 +40,7 @@ export interface ElementComponent extends BaseComponent {
 export interface WithElementOptions {
     tag?: string;
     componentName?: string;
-    attrs?: Record<string, any>;
+    attributes?: Record<string, any>;
     className?: string | string[];
     forwardEvents?: Record<string, boolean | ((component: any, event: Event) => boolean)>;
     interactive?: boolean;

package/dist/core/config/component.d.ts

@@ -69,7 +69,7 @@ export declare const processClassNames: (classNames: string | string[] | null) =
  */
 export declare const createElementConfig: (config: BaseComponentConfig, options: {
     tag: string;
-    attrs?: Record<string, any>;
+    attributes?: Record<string, any>;
     className?: string | string[] | null;
     html?: string;
     text?: string;
@@ -78,7 +78,7 @@ export declare const createElementConfig: (config: BaseComponentConfig, options:
 }) => {
     tag: string;
     componentName: string;
-    attrs: Record<string, any>;
+    attributes: Record<string, any>;
     className: string[];
     rawClass: string | string[];
     html: string;

package/dist/core/dom/attributes.d.ts

@@ -1,22 +1,20 @@
 /**
  * @module core/dom
- * @description DOM manipulation utilities
+ * @description DOM attribute helpers
  */
 /**
- * Sets multiple attributes on an element
- * @memberof module:core/dom
- * @function setAttributes
- * @param {HTMLElement} element - Target element
- * @param {Record<string, any>} attrs - Attributes to set
- * @returns {HTMLElement} Modified element
+ * Sets attributes on an HTML element
+ *
+ * @param {HTMLElement} element - Element to set attributes on
+ * @param {Record<string, any>} attributes - Attributes to set
+ * @returns {HTMLElement} The element for chaining
  */
-export declare const setAttributes: (element: HTMLElement, attrs?: Record<string, any>) => HTMLElement;
+export declare const setAttributes: (element: HTMLElement, attributes?: Record<string, any>) => HTMLElement;
 /**
- * Removes multiple attributes from an element
- * @memberof module:core/dom
- * @function removeAttributes
- * @param {HTMLElement} element - Target element
- * @param {string[]} attrs - Attributes to remove
- * @returns {HTMLElement} Modified element
+ * Removes attributes from an HTML element
+ *
+ * @param {HTMLElement} element - Element to remove attributes from
+ * @param {string[]} attributes - Attributes to remove
+ * @returns {HTMLElement} The element for chaining
  */
-export declare const removeAttributes: (element: HTMLElement, attrs?: string[]) => HTMLElement;
+export declare const removeAttributes: (element: HTMLElement, attributes?: string[]) => HTMLElement;

package/dist/core/dom/classes.d.ts

@@ -2,6 +2,16 @@
  * @module core/dom
  * @description DOM manipulation utilities optimized for performance
  */
+/**
+ * Normalizes class names input by handling various formats:
+ * - String with space-separated classes
+ * - Array of strings
+ * - Mixed array of strings and space-separated classes
+ *
+ * @param classes - Classes to normalize
+ * @returns Array of unique, non-empty class names
+ */
+export declare const normalizeClasses: (...classes: (string | string[])[]) => string[];
 /**
  * Adds multiple classes to an element
  * Automatically adds prefix to classes that don't already have it

package/dist/core/dom/create.d.ts

@@ -10,6 +10,10 @@ export type EventHandler = (event: Event) => void;
  * Event condition type - either a boolean or a function that returns a boolean
  */
 export type EventCondition = boolean | ((context: any, event: Event) => boolean);
+/**
+ * Element type that can be either HTMLElement or SVGElement
+ */
+export type DOMElement = HTMLElement | SVGElement;
 /**
  * Options for element creation
  */
@@ -60,7 +64,7 @@ export interface CreateElementOptions {
     /**
      * HTML attributes
      */
-    attrs?: Record<string, any>;
+    attributes?: Record<string, any>;
     /**
      * Events to forward when component has emit method
      */
@@ -78,6 +82,19 @@ export interface CreateElementOptions {
      */
     [key: string]: any;
 }
+/**
+ * Options for SVG element creation, extends regular element options
+ */
+export interface CreateSVGElementOptions extends Omit<CreateElementOptions, 'container' | 'onCreate'> {
+    /**
+     * Container to append element to
+     */
+    container?: DOMElement | null;
+    /**
+     * Callback after element creation
+     */
+    onCreate?: (element: SVGElement, context?: any) => void;
+}
 /**
  * Event handler storage to facilitate cleanup
  */
@@ -85,23 +102,30 @@ export interface EventHandlerStorage {
     [eventName: string]: EventHandler;
 }
 /**
- * Creates a DOM element with the specified options
+ * Creates an HTML element with the specified options
  *
  * @param {CreateElementOptions} options - Element creation options
- * @returns {HTMLElement} Created element
+ * @returns {HTMLElement} Created HTML element
  */
 export declare const createElement: (options?: CreateElementOptions) => HTMLElement;
+/**
+ * Creates an SVG element with the specified options
+ *
+ * @param {CreateSVGElementOptions} options - SVG element creation options
+ * @returns {SVGElement} Created SVG element
+ */
+export declare const createSVGElement: (options?: CreateSVGElementOptions) => SVGElement;
 /**
  * Removes event handlers from an element
  * @param element - Element to cleanup
  */
-export declare const removeEventHandlers: (element: HTMLElement) => void;
+export declare const removeEventHandlers: (element: HTMLElement | SVGElement) => void;
 /**
  * Higher-order function to add attributes to an element
- * @param {Record<string, any>} attrs - Attributes to add
+ * @param {Record<string, any>} attributes - Attributes to add
  * @returns {(element: HTMLElement) => HTMLElement} Element transformer
  */
-export declare const withAttributes: (attrs: Record<string, any>) => (element: HTMLElement) => HTMLElement;
+export declare const withAttributes: (attributes: Record<string, any>) => (element: HTMLElement) => HTMLElement;
 /**
  * Higher-order function to add classes to an element
  * @param {...(string | string[])} classes - Classes to add
@@ -121,4 +145,10 @@ declare global {
          */
         __eventHandlers?: EventHandlerStorage;
     }
+    interface SVGElement {
+        /**
+         * Storage for event handlers to enable cleanup
+         */
+        __eventHandlers?: EventHandlerStorage;
+    }
 }

package/dist/core/dom/index.d.ts

@@ -1,6 +1,6 @@
-export { createElement, withAttributes, withClasses, withContent } from './create';
+export { createElement, createSVGElement } from './create';
 export type { CreateElementOptions } from './create';
 export { setAttributes, removeAttributes } from './attributes';
-export { addClass, removeClass, toggleClass, hasClass } from './classes';
+export { addClass, removeClass, toggleClass, hasClass, normalizeClasses } from './classes';
 export { createEventManager } from './events';
 export type { EventManager } from './events';

package/dist/core/index.d.ts

@@ -22,7 +22,7 @@ export type { EventManagerState } from './state/events';
 export * from './layout';
 export * from './collection';
 export { PREFIX, COMPONENTS, STATES, classNames, getComponentClass, getModifierClass, getElementClass } from './config';
-export { normalizeClasses, when, classNames as joinClasses, isObject, byString, hasTouchSupport, normalizeEvent, throttle, debounce, once, getInheritedBackground } from './utils';
+export { when, classNames as joinClasses, isObject, byString, hasTouchSupport, normalizeEvent, throttle, debounce, once, getInheritedBackground } from './utils';
 export { createGestureManager } from './gestures';
 export type { GestureManager, GestureConfig, GestureEvent, TapEvent, SwipeEvent, LongPressEvent, PinchEvent, RotateEvent, PanEvent, AnyGestureEvent, GestureHandler } from './gestures';
 export type { ThemeConfig, ComponentConfig, ThemedComponentConfig, VariantComponentConfig, StateComponentConfig } from './config';

package/dist/core/layout/object.d.ts

@@ -11,4 +11,4 @@ import { Schema, LayoutResult, LayoutOptions } from './types';
  * @param options - Layout creation options
  * @returns Layout result object
  */
-export declare function processObjectSchema(schema: Schema, parentElement?: HTMLElement | DocumentFragment | null, options?: LayoutOptions): LayoutResult;
+export declare function processObjectSchema(schema: Schema, parentElement?: HTMLElement | SVGElement | DocumentFragment | null, options?: LayoutOptions): LayoutResult;

package/dist/core/utils/index.d.ts

@@ -2,12 +2,7 @@ export { isObject, byString } from './object';
 export { normalizeEvent, hasTouchSupport, TOUCH_CONFIG, PASSIVE_EVENTS } from './mobile';
 export { getInheritedBackground } from './background';
 export { throttle, debounce, once } from './performance';
-/**
- * Normalizes class names by handling various input formats
- * @param {...(string|string[])} classes - Classes to normalize
- * @returns {string[]} Array of unique, non-empty class names
- */
-export declare const normalizeClasses: (...classes: (string | string[])[]) => string[];
+export { getThemeColor } from './theme';
 /**
  * Creates a transformer that only runs if a condition is met
  * @param {Function} predicate - Condition to check

package/dist/core/utils/theme.d.ts

@@ -0,0 +1,38 @@
+type ThemeChangeCallback = () => void;
+/**
+ * Register a callback to be notified of theme changes
+ * @param callback Function to call when theme changes
+ * @returns Function to unregister the callback
+ */
+export declare const onThemeChange: (callback: ThemeChangeCallback) => (() => void);
+/**
+ * Gets a theme color from CSS variables, with optional alpha/opacity support.
+ * The prefix is automatically added to the variable name.
+ * Colors are retrieved from the active theme (defined on body element) if available,
+ * falling back to the default theme (defined on :root) if not found.
+ *
+ * @param {string} varName - The CSS variable name without prefix (e.g. 'sys-color-primary' or 'sys-color-primary-rgb')
+ * @param {object} [options] - Options for color retrieval
+ * @param {number} [options.alpha] - Alpha value (0-1) for rgba output (only works with --*-rgb variables)
+ * @param {string} [options.fallback] - Fallback color if variable is not found
+ * @param {ThemeChangeCallback} [options.onThemeChange] - Optional callback for theme changes
+ * @returns {string} The color value (hex, rgb, or rgba)
+ *
+ * @example
+ * // Basic usage
+ * getThemeColor('sys-color-primary') // '#006493' (from active theme)
+ *
+ * // With theme change notification
+ * getThemeColor('sys-color-primary', {
+ *   onThemeChange: () => {
+ *     // Re-render or update component
+ *     component.update();
+ *   }
+ * });
+ */
+export declare function getThemeColor(varName: string, options?: {
+    alpha?: number;
+    fallback?: string;
+    onThemeChange?: ThemeChangeCallback;
+}): string;
+export {};