material 3.2.5 → 3.2.7

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

@@ -1,6 +1,3 @@
-/**
- * Common canvas context interface used by components
- */
 export interface CanvasContext {
     canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
@@ -8,78 +5,19 @@ export interface CanvasContext {
     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
- * @param signal - Optional signal to cancel pending initialization attempts
- * @returns Whether initialization was immediately successful
- */
 export declare const initializeCanvasWithRetry: (initFn: () => boolean, onSuccess?: () => void, signal?: AbortSignal) => boolean;
-/**
- * Creates a theme observer that triggers a callback on theme changes
- *
- * @param _color - Colour name retained for compatibility; notifications cover all colours
- * @param callback - Function to call when theme changes
- * @returns Function that unsubscribes from theme changes
- */
 export declare const createCanvasThemeObserver: (_color: string, callback: () => void) => (() => void);
-/**
- * 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/compose/base.d.ts

@@ -1,31 +1,9 @@
-/**
- * Configuration for component creation
- */
 export interface ComponentConfig {
     [key: string]: unknown;
 }
-/**
- * Basic component interface
- */
 export interface Component {
-    /**
-     * Component element
-     */
     element: HTMLElement | null;
-    /**
-     * Component configuration
-     */
     config: ComponentConfig;
-    /**
-     * Setup method
-     * @returns Component for chaining
-     */
     setup: () => Component;
 }
-/**
- * Creates a basic component with minimal structure
- *
- * @param config - Component configuration
- * @returns Basic component structure
- */
 export declare const createComponent: (config?: object) => Component;

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

@@ -1,11 +1,9 @@
-/** A resource scope shared by every stage of a component's composition. */
 export interface CleanupScope {
     readonly destroyed: boolean;
     add(cleanup: () => void): void;
     destroy(): void;
 }
 export declare const createCleanup: () => CleanupScope;
-/** Also support custom component bases that already provide a lifecycle. */
 export declare const getCleanup: (component: {
     resources?: CleanupScope;
     lifecycle?: {

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

@@ -1,12 +1,5 @@
-/**
- * @module core/compose/component
- * @description Core utilities for component composition and creation with built-in mobile support
- */
 import { type CleanupScope } from "./cleanup.js";
 import { EventCondition } from "../dom/create.js";
-/**
- * Touch state interface to track touch interactions
- */
 export interface TouchState {
     startTime: number;
     startPosition: {
@@ -16,17 +9,11 @@ export interface TouchState {
     isTouching: boolean;
     activeTarget: EventTarget | null;
 }
-/**
- * Config keys the base component and withElement read
- */
 export interface BaseConfig {
     componentName?: string;
     prefix?: string;
     parent?: HTMLElement | string | null;
 }
-/**
- * Base component interface with prefix utilities
- */
 export interface BaseComponent {
     resources?: CleanupScope;
     config: BaseConfig & Record<string, unknown>;
@@ -37,17 +24,11 @@ export interface BaseComponent {
     touchState: TouchState;
     updateTouchState: (event: Event, status: "start" | "end") => void;
 }
-/**
- * Element component extends base with element
- */
 export interface ElementComponent extends BaseComponent {
     element: HTMLElement;
     addClass(...classes: string[]): this;
     destroy: () => void;
 }
-/**
- * Options for withElement enhancer
- */
 export interface WithElementOptions {
     tag?: string;
     componentName?: string;
@@ -68,19 +49,7 @@ export interface WithElementOptions {
     interactive?: boolean;
     parent?: HTMLElement | string;
 }
-/**
- * Creates a base component with configuration and prefix utilities.
- * This forms the foundation for all components in the system.
- *
- * @param {Object} config - Component configuration
- * @returns {BaseComponent} Base component with prefix utilities
- */
 export declare const createBase: <T extends BaseConfig & object = BaseConfig & object>(config?: T) => BaseComponent & {
     config: T;
 };
-/**
- * Higher-order function that adds a DOM element to a component
- * @param {WithElementOptions} options - Element creation options
- * @returns {Function} Component enhancer
- */
 export declare const withElement: (options?: WithElementOptions) => <T extends BaseComponent>(component: T) => T & ElementComponent;

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

@@ -1,16 +1,7 @@
 import { BaseComponent, ElementComponent } from "../component.js";
 import type { BadgeComponent as Badge } from "../../../components/badge/types.js";
-/**
- * Configuration for badge feature
- */
 export interface BadgeConfig {
-    /**
-     * Badge content to display
-     */
     badge?: string | number;
-    /**
-     * Custom badge configuration
-     */
     badgeConfig?: {
         variant?: string;
         color?: string;
@@ -18,25 +9,9 @@ export interface BadgeConfig {
         position?: string;
         max?: number;
     };
-    /**
-     * CSS class prefix
-     */
     prefix?: string;
 }
-/**
- * Component with badge capabilities
- */
 export interface BadgeComponent extends BaseComponent {
-    /**
-     * Badge component instance
-     */
     badge?: Badge;
 }
-/**
- * Adds badge functionality to a component
- * Creates and configures a badge component attached to the main component
- *
- * @param {BadgeConfig} config - Badge configuration
- * @returns {Function} Component enhancer with badge functionality
- */
 export declare const withBadge: <T extends BadgeConfig & object>(config: T) => <C extends ElementComponent>(component: C) => C & BadgeComponent;

package/dist/core/compose/features/badge.js

@@ -1,5 +1,19 @@
 import createBadge from "../../../components/badge/index.js";
 import { PREFIX } from "../../config.js";
+const addIdRef = (element, attribute, id) => {
+    const ids = (element.getAttribute(attribute) ?? "").split(/\s+/).filter(Boolean);
+    if (!ids.includes(id))
+        ids.push(id);
+    element.setAttribute(attribute, ids.join(" "));
+};
+const removeIdRef = (element, attribute, id) => {
+    const ids = (element.getAttribute(attribute) ?? "").split(/\s+/).filter((value) => value && value !== id);
+    if (ids.length)
+        element.setAttribute(attribute, ids.join(" "));
+    else
+        element.removeAttribute(attribute);
+};
+let nextBadgeId = 0;
 export const withBadge = (config) => (component) => {
     if (config.badge === undefined) {
         return component;
@@ -13,6 +27,37 @@ export const withBadge = (config) => (component) => {
         prefix: config.prefix || PREFIX
     };
     const badge = createBadge(badgeConfig);
+    const badgeId = `${badgeConfig.prefix}-badge-${++nextBadgeId}`;
+    badge.element.id = badgeId;
+    const target = component.element;
+    const syncDescription = () => {
+        const badgeClass = badge.getClass("badge");
+        const shows = badge.element.classList.contains(`${badgeClass}--positioned`)
+            && !badge.element.classList.contains(`${badgeClass}--invisible`)
+            && badge.getLabel() !== "";
+        if (shows)
+            addIdRef(target, "aria-describedby", badgeId);
+        else
+            removeIdRef(target, "aria-describedby", badgeId);
+    };
+    syncDescription();
+    const Observer = badge.element.ownerDocument.defaultView?.MutationObserver;
+    const observer = Observer
+        ? new Observer(syncDescription)
+        : null;
+    observer?.observe(badge.element, {
+        attributes: true,
+        attributeFilter: ["class"],
+        childList: true,
+        characterData: true,
+        subtree: true,
+    });
+    const destroy = badge.destroy;
+    badge.destroy = () => {
+        observer?.disconnect();
+        removeIdRef(target, "aria-describedby", badgeId);
+        destroy();
+    };
     return {
         ...component,
         badge

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

@@ -1,56 +1,20 @@
 import { BaseComponent } from "../component.js";
-/**
- * Configuration for checkable feature
- */
 export interface CheckableConfig {
     checked?: boolean;
 }
-/**
- * Component with input element
- */
 export interface InputComponent extends BaseComponent {
     element: HTMLElement;
     input: HTMLInputElement;
     emit?: (event: string, data: unknown) => unknown;
-    /** This feature only subscribes to change and does not read its payload. */
     on?: (event: "change", handler: () => void) => unknown;
 }
-/**
- * Checkable state manager interface
- */
 export interface CheckableManager {
-    /**
-     * Sets the checked state to true. Silent: only the user's change emits `change`.
-     * @returns CheckableManager instance for chaining
-     */
     check: () => CheckableManager;
-    /**
-     * Sets the checked state to false. Silent.
-     * @returns CheckableManager instance for chaining
-     */
     uncheck: () => CheckableManager;
-    /**
-     * Toggles the current checked state. Silent.
-     * @returns CheckableManager instance for chaining
-     */
     toggle: () => CheckableManager;
-    /**
-     * Gets the current checked state
-     * @returns Whether component is checked
-     */
     isChecked: () => boolean;
 }
-/**
- * Component with checkable capabilities
- */
 export interface CheckableComponent extends BaseComponent {
     checkable: CheckableManager;
 }
-/**
- * Adds checked state management to a component with an input
- * Manages visual state and event emission for checked changes
- *
- * @param config - Checkable configuration
- * @returns Function that enhances a component with checkable functionality
- */
 export declare const withCheckable: <T extends CheckableConfig & object>(config?: T) => <C extends InputComponent>(component: C) => C & CheckableComponent;

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

@@ -1,24 +1,11 @@
-/**
- * @module core/compose/features
- * @description Adds debounced event handling capabilities to components
- */
 import { BaseComponent, ElementComponent } from "../component.js";
-/**
- * Interface for components with lifecycle
- */
 export interface ComponentWithLifecycle extends ElementComponent {
     lifecycle: {
         destroy: () => void;
         [key: string]: unknown;
     };
 }
-/**
- * Configuration for debounced event handlers
- */
 export interface DebounceConfig {
-    /**
-     * Event handlers with debounce settings
-     */
     debouncedEvents?: Record<string, {
         handler: (event: Event) => void;
         wait: number;
@@ -28,56 +15,12 @@ export interface DebounceConfig {
         };
     }>;
 }
-/**
- * Component with debounced event capabilities
- */
 export interface DebounceComponent extends BaseComponent {
-    /**
-     * Adds a debounced event listener
-     * @param event - Event name
-     * @param handler - Event handler
-     * @param wait - Debounce delay in milliseconds
-     * @param options - Debounce options
-     * @returns DebounceComponent for chaining
-     */
     addDebouncedEvent: (event: string, handler: (event: Event) => void, wait: number, options?: {
         leading?: boolean;
         maxWait?: number;
     }) => DebounceComponent;
-    /**
-     * Removes a debounced event listener
-     * @param event - Event name
-     * @returns DebounceComponent for chaining
-     */
     removeDebouncedEvent: (event: string) => DebounceComponent;
 }
-/**
- * Adds debounced event handling capabilities to a component
- *
- * @param config - Configuration object containing debounced event settings
- * @returns Function that enhances a component with debounced event handling
- *
- * @example
- * ```ts
- * // Add debounced events to a component
- * const component = pipe(
- *   createBase,
- *   withElement(...),
- *   withDebounce({
- *     debouncedEvents: {
- *       'input': {
- *         handler: handleInput,
- *         wait: 300
- *       },
- *       'resize': {
- *         handler: handleResize,
- *         wait: 200,
- *         options: { maxWait: 1000 }
- *       }
- *     }
- *   })
- * )(config);
- * ```
- */
 export declare const withDebounce: <T extends DebounceConfig & object>(config?: T) => <C extends ElementComponent>(component: C) => C & DebounceComponent;
 export default withDebounce;

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

@@ -1,46 +1,15 @@
 import { BaseComponent, ElementComponent } from "../component.js";
-/**
- * Configuration for disabled feature
- */
 export interface DisabledConfig {
     disabled?: boolean;
     componentName?: string;
 }
-/**
- * Disabled state manager interface
- */
 export interface DisabledManager {
-    /**
-     * Enables the component
-     * @returns DisabledManager instance for chaining
-     */
     enable(): DisabledManager;
-    /**
-     * Disables the component
-     * @returns DisabledManager instance for chaining
-     */
     disable(): DisabledManager;
-    /**
-     * Toggles the disabled state
-     * @returns DisabledManager instance for chaining
-     */
     toggle(): DisabledManager;
-    /**
-     * Checks if the component is disabled
-     * @returns true if disabled
-     */
     isDisabled(): boolean;
 }
-/**
- * Component with disabled state capabilities
- */
 export interface DisabledComponent extends BaseComponent {
     disabled: DisabledManager;
 }
-/**
- * Adds disabled state management to a component
- *
- * @param config - Configuration object
- * @returns Function that enhances a component with disabled state management
- */
 export declare const withDisabled: <T extends DisabledConfig & object>(config: T) => <C extends ElementComponent>(component: C) => C & DisabledComponent;

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

@@ -1,50 +1,12 @@
-/**
- * @module core/compose/features
- */
 import { EventCallback } from "../../state/emitter.js";
 import { BaseComponent } from "../component.js";
-/**
- * A component's events, by name: each one's handler. Without a map a
- * component takes any event name, and its handlers get `unknown` payloads.
- */
 export type EventMap<E> = {
     [K in keyof E]: EventCallback;
 };
-/** The map of a component that does not name its events. */
 export type AnyEvents = Record<string, EventCallback>;
-/**
- * Component with event capabilities
- */
 export interface EventComponent<E extends EventMap<E> = AnyEvents> extends BaseComponent {
-    /**
-     * Subscribe to an event
-     * @param event - Event name
-     * @param handler - Event handler
-     * @returns Component instance for chaining
-     */
     on<K extends keyof E & string>(event: K, handler: E[K]): this;
-    /**
-     * Unsubscribe from an event
-     * @param event - Event name
-     * @param handler - Event handler
-     * @returns Component instance for chaining
-     */
     off<K extends keyof E & string>(event: K, handler: E[K]): this;
-    /**
-     * Emit an event
-     * @param event - Event name
-     * @param data - Event data
-     * @returns Component instance for chaining
-     */
     emit(event: string, data?: unknown): this;
 }
-/**
- * Adds event handling capabilities to a component
- * Returns event system ready to use immediately
- *
- * `withEvents<Events>()` names the component's events: `on` and
- * `off` then check each name and its handler's payload.
- *
- * @returns Function that enhances a component with event capabilities
- */
 export declare const withEvents: <E extends EventMap<E> = AnyEvents>() => <T extends BaseComponent>(component: T) => T & EventComponent<E>;

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

@@ -1,67 +1,18 @@
 import { BaseComponent, ElementComponent } from "../component.js";
-/**
- * Icon manager interface
- */
 export interface IconManager {
-    /**
-     * Sets icon HTML content
-     * @param html - Icon HTML content
-     * @returns IconManager instance for chaining
-     */
     setIcon: (html: string) => IconManager;
-    /**
-     * Gets current icon HTML content
-     * @returns Current icon HTML
-     */
     getIcon: () => string;
-    /**
-     * Gets icon element
-     * @returns Icon element or null if not created
-     */
     getElement: () => HTMLElement | null;
 }
-/**
- * Configuration for icon feature
- */
 export interface IconConfig {
-    /**
-     * Initial icon HTML content
-     */
     icon?: string;
-    /**
-     * Icon position ('start' or 'end')
-     */
     iconPosition?: "start" | "end";
-    /**
-     * Icon size variant
-     */
     iconSize?: string;
-    /**
-     * CSS class prefix
-     */
     prefix?: string;
-    /**
-     * Component name for class generation
-     */
     componentName?: string;
-    /**
-     * Text content (for determining button styling)
-     */
     text?: string | Node;
 }
-/**
- * Component with icon capabilities
- */
 export interface IconComponent extends BaseComponent {
-    /**
-     * Icon manager
-     */
     icon: IconManager;
 }
-/**
- * Adds icon management to a component
- *
- * @param config - Configuration object containing icon information
- * @returns Function that enhances a component with icon capabilities
- */
 export declare const withIcon: <T extends IconConfig & object>(config: T) => <C extends ElementComponent>(component: C) => C & IconComponent;