mtrl 0.3.9 → 0.4.3

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

@@ -0,0 +1,84 @@
+/**
+ * Common canvas context interface used by components
+ */
+export interface CanvasContext {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    pixelRatio: number;
+}
+/**
+ * Creates and initializes a canvas context with proper pixel ratio handling
+ *
+ * @param canvas - The canvas element
+ * @param width - Canvas width
+ * @param height - Canvas height
+ * @returns Initialized canvas context
+ */
+export declare const createCanvasContext: (canvas: HTMLCanvasElement, width: number, height: number) => CanvasContext;
+/**
+ * Updates canvas dimensions while preserving pixel ratio
+ *
+ * @param context - The canvas context to update
+ * @param width - New width
+ * @param height - New height
+ */
+export declare const updateCanvasDimensions: (context: CanvasContext, width: number, height: number) => void;
+/**
+ * Tries to initialize a canvas with retry mechanism
+ *
+ * @param initFn - Function that performs initialization
+ * @param onSuccess - Optional callback on successful initialization
+ * @returns Whether initialization was immediately successful
+ */
+export declare const initializeCanvasWithRetry: (initFn: () => boolean, onSuccess?: () => void) => boolean;
+/**
+ * Creates a theme observer that triggers a callback on theme changes
+ *
+ * @param color - The theme color to observe (e.g., 'primary', 'secondary')
+ * @param callback - Function to call when theme changes
+ * @returns Cleanup function or null
+ */
+export declare const createCanvasThemeObserver: (color: string, callback: () => void) => (() => void) | null;
+/**
+ * Standard animation frame manager for components
+ */
+export declare class AnimationFrameManager {
+    private animationId;
+    /**
+     * Starts an animation loop
+     * @param callback - Animation callback receiving timestamp
+     */
+    start(callback: (timestamp: number) => void): void;
+    /**
+     * Stops the animation loop
+     */
+    stop(): void;
+    /**
+     * Whether animation is currently running
+     */
+    get isRunning(): boolean;
+}
+/**
+ * Manages multiple cleanup functions for components
+ */
+export declare class CleanupManager {
+    private cleanupFunctions;
+    /**
+     * Adds a cleanup function
+     */
+    add(cleanup: (() => void) | null | undefined): void;
+    /**
+     * Runs all cleanup functions and clears the list
+     */
+    cleanup(): void;
+}
+/**
+ * Creates a standard canvas element with common styles
+ *
+ * @param className - CSS class name for the canvas
+ * @param additionalStyles - Additional styles to apply
+ * @returns Canvas element
+ */
+export declare const createStyledCanvas: (className: string, additionalStyles?: Partial<CSSStyleDeclaration>) => HTMLCanvasElement;

package/dist/core/collection/collection.d.ts

@@ -12,13 +12,13 @@ export declare const COLLECTION_EVENTS: {
 /**
  * Collection event type
  */
-export type CollectionEvent = typeof COLLECTION_EVENTS[keyof typeof COLLECTION_EVENTS];
+export type CollectionEvent = (typeof COLLECTION_EVENTS)[keyof typeof COLLECTION_EVENTS];
 /**
  * Observer callback type for collection events
  */
-export type CollectionObserver<T> = (payload: {
+export type CollectionObserver<T = unknown> = (payload: {
     event: CollectionEvent;
-    data: any;
+    data: T | readonly T[] | readonly string[] | boolean | Error | null;
 }) => void;
 /**
  * Query operators for filtering
@@ -41,7 +41,7 @@ export declare const OPERATORS: {
  */
 export interface CollectionItem {
     id: string;
-    [key: string]: any;
+    [key: string]: unknown;
 }
 /**
  * Collection configuration
@@ -50,11 +50,11 @@ export interface CollectionConfig<T extends CollectionItem> {
     /**
      * Transform function for items
      */
-    transform?: (item: any) => T;
+    transform?: (item: unknown) => T;
     /**
      * Validation function for items
      */
-    validate?: (item: any) => boolean;
+    validate?: (item: unknown) => boolean;
     /**
      * Initial capacity for collection
      */
@@ -69,7 +69,7 @@ export interface Collection<T extends CollectionItem> {
      * @param observer - Observer callback
      * @returns Unsubscribe function
      */
-    subscribe: (observer: CollectionObserver<T>) => () => void;
+    subscribe: (observer: CollectionObserver) => () => void;
     /**
      * Get collection items based on current query and sort
      * @returns Collection items

package/dist/core/collection/list-manager/index.d.ts

@@ -1,4 +1,4 @@
-import { ListManagerConfig, ListManager, LoadStatus } from './types';
+import { ListManagerConfig, ListManager, LoadStatus } from "./types";
 /**
  * Creates a list manager for a specific collection
  * @param {string} collection - Collection name
@@ -58,4 +58,4 @@ export declare const transforms: {
         meta: any;
     };
 };
-export * from './types';
+export * from "./types";

package/dist/core/collection/list-manager/renderer.d.ts

@@ -1,6 +1,6 @@
-import { ListManagerConfig, ListManagerElements, VisibleRange } from './types';
-import { RecyclingPool } from './utils/recycling';
-import { ItemMeasurement } from './item-measurement';
+import { ListManagerConfig, ListManagerElements, VisibleRange } from "./types";
+import { RecyclingPool } from "./utils/recycling";
+import { ItemMeasurement } from "./item-measurement";
 /**
  * Creates a renderer for list items
  * @param config List manager configuration

package/dist/core/collection/list-manager/scroll-tracker.d.ts

@@ -1,4 +1,4 @@
-import { ListManagerElements, ListManagerConfig } from './types';
+import { ListManagerElements, ListManagerConfig } from "./types";
 /**
  * Common interface for scroll tracking strategies
  */

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

@@ -40,10 +40,11 @@ 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;
+    parent?: HTMLElement | string;
 }
 /**
  * Creates a base component with configuration and prefix utilities.

package/dist/core/compose/features/checkable.d.ts

@@ -1,4 +1,4 @@
-import { BaseComponent } from '../component';
+import { BaseComponent } from "../component";
 /**
  * Configuration for checkable feature
  */
@@ -12,7 +12,7 @@ export interface CheckableConfig {
 export interface InputComponent extends BaseComponent {
     element: HTMLElement;
     input: HTMLInputElement;
-    emit?: (event: string, data: any) => InputComponent;
+    emit?: (event: string, data: unknown) => InputComponent;
     on?: (event: string, handler: Function) => InputComponent;
 }
 /**

package/dist/core/compose/features/gestures/longpress.d.ts

@@ -2,8 +2,8 @@
  * @module core/compose/features/gestures
  * @description Adds long press gesture recognition to components
  */
-import { BaseComponent, ElementComponent } from '../../component';
-import { LongPressEvent, GestureHandler } from '../../../gestures';
+import { BaseComponent, ElementComponent } from "../../component";
+import { LongPressEvent, GestureHandler } from "../../../gestures";
 /**
  * Configuration for long press gesture feature
  */

package/dist/core/compose/features/gestures/pan.d.ts

@@ -2,8 +2,8 @@
  * @module core/compose/features/gestures
  * @description Adds pan gesture recognition to components
  */
-import { BaseComponent, ElementComponent } from '../../component';
-import { PanEvent, GestureHandler } from '../../../gestures';
+import { BaseComponent, ElementComponent } from "../../component";
+import { PanEvent, GestureHandler } from "../../../gestures";
 /**
  * Configuration for pan gesture feature
  */

package/dist/core/compose/features/gestures/pinch.d.ts

@@ -2,8 +2,8 @@
  * @module core/compose/features/gestures
  * @description Adds pinch gesture recognition to components
  */
-import { BaseComponent, ElementComponent } from '../../component';
-import { PinchEvent, GestureHandler } from '../../../gestures';
+import { BaseComponent, ElementComponent } from "../../component";
+import { PinchEvent, GestureHandler } from "../../../gestures";
 /**
  * Configuration for pinch gesture feature
  */

package/dist/core/compose/features/gestures/rotate.d.ts

@@ -2,8 +2,8 @@
  * @module core/compose/features/gestures
  * @description Adds rotate gesture recognition to components
  */
-import { BaseComponent, ElementComponent } from '../../component';
-import { RotateEvent, GestureHandler } from '../../../gestures';
+import { BaseComponent, ElementComponent } from "../../component";
+import { RotateEvent, GestureHandler } from "../../../gestures";
 /**
  * Configuration for rotate gesture feature
  */

package/dist/core/compose/features/gestures/swipe.d.ts

@@ -2,8 +2,8 @@
  * @module core/compose/features/gestures
  * @description Adds swipe gesture recognition to components
  */
-import { BaseComponent, ElementComponent } from '../../component';
-import { SwipeEvent, GestureHandler } from '../../../gestures';
+import { BaseComponent, ElementComponent } from "../../component";
+import { SwipeEvent, GestureHandler } from "../../../gestures";
 /**
  * Configuration for swipe gesture feature
  */

package/dist/core/compose/features/gestures/tap.d.ts

@@ -2,8 +2,8 @@
  * @module core/compose/features/gestures
  * @description Adds tap gesture recognition to components
  */
-import { BaseComponent, ElementComponent } from '../../component';
-import { TapEvent, GestureHandler } from '../../../gestures';
+import { BaseComponent, ElementComponent } from "../../component";
+import { TapEvent, GestureHandler } from "../../../gestures";
 /**
  * Configuration for tap gesture feature
  */

package/dist/core/compose/features/gestures.d.ts

@@ -2,8 +2,8 @@
  * @module core/compose/features
  * @description Adds gesture recognition capabilities to components
  */
-import { BaseComponent, ElementComponent } from '../component';
-import { GestureManager, GestureConfig, GestureHandler } from '../../gestures';
+import { BaseComponent, ElementComponent } from "../component";
+import { GestureManager, GestureConfig, GestureHandler } from "../../gestures";
 /**
  * Configuration for gestures feature
  */

package/dist/core/compose/features/input.d.ts

@@ -1,4 +1,4 @@
-import { ElementComponent } from '../component';
+import { ElementComponent } from "../component";
 /**
  * Input configuration options
  */

package/dist/core/compose/features/ripple.d.ts

@@ -1,5 +1,5 @@
-import { BaseComponent, ElementComponent } from '../component';
-import { LifecycleComponent } from './lifecycle';
+import { BaseComponent, ElementComponent } from "../component";
+import { LifecycleComponent } from "./lifecycle";
 /**
  * Ripple configuration interface
  */

package/dist/core/compose/features/size.d.ts

@@ -1,4 +1,4 @@
-import { ElementComponent } from '../component';
+import { ElementComponent } from "../component";
 /**
  * Configuration for size feature
  */

package/dist/core/compose/features/textinput.d.ts

@@ -1,4 +1,4 @@
-import { ElementComponent } from '../component';
+import { ElementComponent } from "../component";
 /**
  * Configuration for text input feature
  */

package/dist/core/compose/features/throttle.d.ts

@@ -2,7 +2,7 @@
  * @module core/compose/features
  * @description Adds throttled event handling capabilities to components
  */
-import { BaseComponent, ElementComponent } from '../component';
+import { BaseComponent, ElementComponent } from "../component";
 /**
  * Configuration for throttled event handlers
  */

package/dist/core/compose/features/variant.d.ts

@@ -1,4 +1,4 @@
-import { ElementComponent } from '../component';
+import { ElementComponent } from "../component";
 /**
  * Configuration for variant feature
  */

package/dist/core/compose/features/withEvents.d.ts

@@ -1,4 +1,4 @@
-import { BaseComponent, ElementComponent } from '../component';
+import { BaseComponent, ElementComponent } from "../component";
 /**
  * Event manager interface
  */

package/dist/core/composition/features/label.d.ts

@@ -9,7 +9,7 @@ export interface LabelConfig {
     /**
      * Position of the label ('start', 'end', 'top', or 'bottom')
      */
-    labelPosition?: 'start' | 'end' | 'top' | 'bottom';
+    labelPosition?: "start" | "end" | "top" | "bottom";
     /**
      * CSS class prefix
      */

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

@@ -8,10 +8,12 @@ export interface BaseComponentConfig {
     class?: string | string[];
     className?: string | string[];
     rawClass?: string | string[];
+    parent?: HTMLElement | string | null;
     [key: string]: any;
 }
 /**
  * Creates a base configuration for any component
+ * Automatically merges global defaults if available
  *
  * @param {BaseComponentConfig} defaults - Default configuration for the component
  * @param {BaseComponentConfig} userConfig - User provided configuration
@@ -69,7 +71,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 +80,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/config/global.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Lightweight Global Configuration System for mtrl
+ *
+ * This system allows setting default configurations for all components
+ * without adding complexity or performance overhead.
+ */
+import { ButtonConfig } from '../../components/button/types';
+import { TextfieldConfig } from '../../components/textfield/types';
+/**
+ * Component configuration map
+ * Add new components here as they support global config
+ *
+ * For components not yet integrated, use Partial<any> as a placeholder
+ */
+export interface ComponentConfigMap {
+    button?: Partial<ButtonConfig>;
+    textfield?: Partial<TextfieldConfig>;
+    checkbox?: Partial<any>;
+    switch?: Partial<any>;
+    slider?: Partial<any>;
+    card?: Partial<any>;
+    chip?: Partial<any>;
+    dialog?: Partial<any>;
+}
+/**
+ * Sets global defaults for a specific component
+ *
+ * @param component - Component name
+ * @param config - Default configuration to apply
+ *
+ * @example
+ * ```typescript
+ * // Set all buttons to be square by default
+ * setComponentDefaults('button', {
+ *   shape: 'square',
+ *   size: 'm'
+ * });
+ * ```
+ */
+export declare function setComponentDefaults<K extends keyof ComponentConfigMap>(component: K, config: ComponentConfigMap[K]): void;
+/**
+ * Gets global defaults for a component
+ *
+ * @param component - Component name
+ * @returns Component defaults or empty object
+ */
+export declare function getComponentDefaults<K extends keyof ComponentConfigMap>(component: K): ComponentConfigMap[K];
+/**
+ * Sets global defaults for multiple components at once
+ *
+ * @param configs - Map of component names to their default configs
+ *
+ * @example
+ * ```typescript
+ * setGlobalDefaults({
+ *   button: { shape: 'square', size: 'm' },
+ *   textfield: { variant: 'outlined' }
+ * });
+ * ```
+ */
+export declare function setGlobalDefaults(configs: Partial<ComponentConfigMap>): void;
+/**
+ * Clears all global defaults
+ */
+export declare function clearGlobalDefaults(): void;

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

@@ -2,7 +2,7 @@
  * @module core/gestures
  * @description Pan gesture detection
  */
-import { PanEvent, GestureDetectionContext } from './types';
+import { PanEvent, GestureDetectionContext } from "./types";
 /**
  * Detect pan gesture
  *

package/dist/core/gestures/pinch.d.ts

@@ -2,7 +2,7 @@
  * @module core/gestures
  * @description Pinch gesture detection
  */
-import { PinchEvent, GestureDetectionContext } from './types';
+import { PinchEvent, GestureDetectionContext } from "./types";
 /**
  * Detect pinch gesture
  *

package/dist/core/gestures/rotate.d.ts

@@ -2,7 +2,7 @@
  * @module core/gestures
  * @description Rotate gesture detection
  */
-import { RotateEvent, GestureDetectionContext } from './types';
+import { RotateEvent, GestureDetectionContext } from "./types";
 /**
  * Detect rotate gesture
  *

package/dist/core/index.d.ts

@@ -21,8 +21,10 @@ export { createEventManager as createStateEventManager } from './state/events';
 export type { EventManagerState } from './state/events';
 export * from './layout';
 export * from './collection';
+export * from './canvas';
 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 { setComponentDefaults, getComponentDefaults, setGlobalDefaults, clearGlobalDefaults, type ComponentConfigMap } from './config/global';
+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';