mtrl 0.8.0 → 0.9.1

package/dist/components/fab/api.js

@@ -46,6 +46,18 @@ export const withAPI = ({ disabled, lifecycle, className }) => (component) => ({
         component.element.classList.remove(`${className}--lowered`);
         return this;
     },
+    on(event, handler) {
+        component.on(event, handler);
+        return this;
+    },
+    off(event, handler) {
+        component.off(event, handler);
+        return this;
+    },
+    addClass(...classes) {
+        component.addClass(...classes);
+        return this;
+    },
     destroy() {
         lifecycle.destroy();
     }

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

@@ -1,4 +1,4 @@
-import { FabConfig } from "./types.js";
+import { FabConfig, FabComponent } from "./types.js";
 /**
  * Default configuration for the FAB component
  *
@@ -38,7 +38,7 @@ export declare const createBaseConfig: (config?: FabConfig) => FabConfig;
 export declare const getElementConfig: (config: FabConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -54,7 +54,7 @@ export declare const getElementConfig: (config: FabConfig) => {
     ariaHidden: boolean;
     html: string;
     text: string;
-    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents: Record<string, import("../../core/dom/create.js").EventCondition>;
     interactive: boolean;
 };
 /**
@@ -69,14 +69,14 @@ export declare const getElementConfig: (config: FabConfig) => {
  * @category Components
  * @internal
  */
-export declare const getApiConfig: (comp: any) => {
+export declare const getApiConfig: (comp: Pick<FabComponent, "disabled" | "lifecycle" | "getClass">) => {
     disabled: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
     };
     lifecycle: {
-        destroy: () => any;
+        destroy: () => void;
     };
-    className: any;
+    className: string;
 };
 export default defaultConfig;

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

@@ -1,3 +1,4 @@
+import type { IconManager } from "../../core/compose/features/icon.js";
 /**
  * FAB variants following Material Design 3 guidelines
  *
@@ -338,7 +339,7 @@ export interface FabComponent {
      */
     icon: {
         /** Sets the icon HTML content */
-        setIcon: (html: string) => any;
+        setIcon: (html: string) => IconManager;
         /** Gets the current icon HTML content */
         getIcon: () => string;
         /** Gets the icon DOM element */

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

@@ -38,7 +38,7 @@ export declare const createBaseConfig: (config?: IconButtonConfig) => IconButton
 export declare const getElementConfig: (config: IconButtonConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -54,7 +54,7 @@ export declare const getElementConfig: (config: IconButtonConfig) => {
     ariaHidden: boolean;
     html: string;
     text: string;
-    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents: Record<string, import("../../core/dom/create.js").EventCondition>;
     interactive: boolean;
 };
 /**

package/dist/components/icon-button/features/toggle.d.ts

@@ -33,10 +33,6 @@ export interface ToggleConfig {
      * Component name for class generation
      */
     componentName?: string;
-    /**
-     * Additional configuration options
-     */
-    [key: string]: unknown;
 }
 /**
  * Toggle state manager interface
@@ -132,5 +128,5 @@ interface ComponentWithIcon extends ElementComponent {
  * )(config);
  * ```
  */
-export declare const withToggle: <T extends ToggleConfig>(config: T) => <C extends ComponentWithIcon>(component: C) => C & ToggleComponent;
+export declare const withToggle: <T extends ToggleConfig & object>(config: T) => <C extends ComponentWithIcon>(component: C) => C & ToggleComponent;
 export {};

package/dist/components/icon-button/types.d.ts

@@ -81,6 +81,12 @@ export interface IconButtonConfig extends BaseComponentConfig {
      * @default false
      */
     selected?: boolean;
+    /**
+     * Whether a click flips the selected state of a toggle button. Set to
+     * false when a container (button group) owns the selection.
+     * @default true
+     */
+    toggleOnClick?: boolean;
     /**
      * Additional CSS classes to add to the IconButton
      */

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

@@ -1,29 +1,29 @@
 /**
  * API configuration options for List component
  */
-interface ApiOptions {
+interface ApiOptions<T = unknown> {
     list: {
         refresh: () => void;
-        getItems: () => any[];
-        getAllItems: () => any[];
-        getVisibleItems: () => any[];
+        getItems: () => T[];
+        getAllItems: () => T[];
+        getVisibleItems: () => T[];
         scrollToItem: (itemId: string | number, position?: "start" | "center" | "end", animate?: boolean) => void;
         scrollToIndex: (index: number, position?: "start" | "center" | "end", animate?: boolean) => void;
         isLoading: () => boolean;
         hasNextPage: () => boolean;
     };
     selection: {
-        getSelectedItems: () => any[];
+        getSelectedItems: () => T[];
         getSelectedItemIds: () => string[];
         isItemSelected: (itemId: string | number) => boolean;
-        selectItem: (itemId: string | number) => any;
-        deselectItem: (itemId: string | number) => any;
-        clearSelection: () => any;
-        setSelection: (itemIds: (string | number)[]) => any;
+        selectItem: (itemId: string | number) => unknown;
+        deselectItem: (itemId: string | number) => unknown;
+        clearSelection: () => unknown;
+        setSelection: (itemIds: (string | number)[]) => unknown;
     };
     events: {
-        on: (event: string, handler: Function) => any;
-        off: (event: string, handler: Function) => any;
+        on: (event: string, handler: Function) => unknown;
+        off: (event: string, handler: Function) => unknown;
     };
     lifecycle: {
         destroy: () => void;
@@ -35,17 +35,17 @@ interface ApiOptions {
 /**
  * Component with required elements and methods for API enhancement
  */
-interface ComponentWithElements {
+export interface ComponentWithElements {
     element: HTMLElement;
-    on?: (event: string, handler: Function) => any;
-    off?: (event: string, handler: Function) => any;
+    on?: (event: string, handler: Function) => unknown;
+    off?: (event: string, handler: Function) => unknown;
 }
 /**
  * Enhances a List component with API methods
  * @param {ApiOptions} options - API configuration options
  * @returns {Function} Higher-order function that adds API methods to component
  */
-export declare const withAPI: ({ list, selection, events, lifecycle, config }: ApiOptions) => (component: ComponentWithElements) => {
+export declare const withAPI: <T = unknown>({ list, selection, events, lifecycle, config }: ApiOptions<T>) => (component: ComponentWithElements) => {
     element: HTMLElement;
     /**
      * Refreshes the list display
@@ -56,12 +56,12 @@ export declare const withAPI: ({ list, selection, events, lifecycle, config }: A
      * Gets all items in the list
      * @returns {Array} All items
      */
-    getAllItems: () => any[];
+    getAllItems: () => T[];
     /**
      * Gets all visible items (same as getAllItems for rendered lists)
      * @returns {Array} Visible items
      */
-    getVisibleItems: () => any[];
+    getVisibleItems: () => T[];
     /**
      * Scrolls to a specific item by ID
      * @param {string|number} itemId - Item ID to scroll to
@@ -92,7 +92,7 @@ export declare const withAPI: ({ list, selection, events, lifecycle, config }: A
      * Gets the currently selected items
      * @returns {Array} Selected items
      */
-    getSelectedItems: () => any[];
+    getSelectedItems: () => T[];
     /**
      * Gets the IDs of currently selected items
      * @returns {Array} Selected item IDs

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

@@ -8,7 +8,10 @@ export declare const defaultConfig: Partial<ListConfig>;
  * @param {ListConfig} config - User provided configuration
  * @returns {Object} Complete configuration with defaults applied
  */
-export declare const createBaseConfig: (config?: Partial<ListConfig>) => import("../../core/config/component.js").BaseComponentConfig;
+export declare const createBaseConfig: (config?: Partial<ListConfig>) => Partial<ListConfig<unknown>> & {
+    componentName: string;
+    prefix: string;
+};
 /**
  * Generates element configuration for the List component
  * @param {Object} config - List configuration
@@ -17,7 +20,7 @@ export declare const createBaseConfig: (config?: Partial<ListConfig>) => import(
 export declare const getElementConfig: (config: any) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -33,7 +36,7 @@ export declare const getElementConfig: (config: any) => {
     ariaHidden: boolean;
     html: string;
     text: string;
-    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents: Record<string, import("../../core/dom/create.js").EventCondition>;
     interactive: boolean;
 };
 /**

package/dist/components/list/config.js

@@ -16,13 +16,12 @@ export const createBaseConfig = (config = {}) => {
         config.renderItem = (item) => {
             const element = document.createElement("div");
             element.className = "mtrl-list-item";
-            element.textContent =
-                item.text ||
-                    item.title ||
-                    item.headline ||
-                    item.name ||
-                    item.id ||
-                    String(item);
+            element.textContent = String(item.text ||
+                item.title ||
+                item.headline ||
+                item.name ||
+                item.id ||
+                String(item));
             return element;
         };
     }

package/dist/components/list/features/renderer.js

@@ -10,7 +10,7 @@ export const withRenderer = (config) => component => {
     listContainer.className = 'mtrl-list-content';
     listContainer.setAttribute('role', 'list');
     component.element.appendChild(listContainer);
-    function renderDefaultItem(item, index) {
+    function renderDefaultItem(item) {
         const element = document.createElement('div');
         element.className = LIST_CLASSES.ITEM;
         element.setAttribute('role', 'listitem');
@@ -35,7 +35,7 @@ export const withRenderer = (config) => component => {
                 return;
             const element = userRenderItem
                 ? userRenderItem(item, index)
-                : renderDefaultItem(item, index);
+                : renderDefaultItem(item);
             if (!element)
                 return;
             if (!element.classList.contains(LIST_CLASSES.ITEM)) {

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

@@ -8,5 +8,24 @@
  * @param {Object} config - Configuration options for the list
  * @returns {Object} List component instance
  */
-declare const createList: (config?: {}) => any;
+declare const createList: (config?: {}) => {
+    element: HTMLElement;
+    refresh: () => Promise<import("./api.js").ComponentWithElements>;
+    getAllItems: () => unknown[];
+    getVisibleItems: () => unknown[];
+    scrollToItem: (itemId: string | number, position?: "start" | "center" | "end", animate?: boolean) => import("./api.js").ComponentWithElements;
+    scrollToIndex: (index: number, position?: "start" | "center" | "end", animate?: boolean) => Promise<import("./api.js").ComponentWithElements>;
+    isLoading: () => boolean;
+    hasNextPage: () => boolean;
+    getSelectedItems: () => unknown[];
+    getSelectedItemIds: () => string[];
+    isItemSelected: (itemId: string | number) => boolean;
+    selectItem: (itemId: string | number) => import("./api.js").ComponentWithElements;
+    deselectItem: (itemId: string | number) => import("./api.js").ComponentWithElements;
+    clearSelection: () => import("./api.js").ComponentWithElements;
+    setSelection: (itemIds: (string | number)[]) => import("./api.js").ComponentWithElements;
+    on: (event: any, handler: any) => import("./api.js").ComponentWithElements;
+    off: (event: any, handler: any) => import("./api.js").ComponentWithElements;
+    destroy: () => void;
+};
 export default createList;

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

@@ -2,19 +2,19 @@
  * Configuration for the List component
  * @interface ListConfig
  */
-export interface ListConfig {
+export interface ListConfig<T = unknown> {
     /**
      * Static array of items to display
      * @required
      */
-    items: any[];
+    items: T[];
     /**
      * Function to render an item
-     * @param {any} item - Item to render
+     * @param {T} item - Item to render
      * @param {number} index - Item index in the list
      * @returns {HTMLElement} Rendered DOM element
      */
-    renderItem?: (item: any, index: number) => HTMLElement;
+    renderItem?: (item: T, index: number) => HTMLElement;
     /**
      * Whether to track item selection
      * When true, clicked items will receive a selected class
@@ -59,11 +59,11 @@ export interface ListConfig {
  * Selection event data
  * @interface SelectEvent
  */
-export interface SelectEvent {
+export interface SelectEvent<T = unknown> {
     /**
      * Selected item data
      */
-    item: any;
+    item: T;
     /**
      * DOM element for the selected item
      */
@@ -75,7 +75,7 @@ export interface SelectEvent {
     /**
      * Component instance
      */
-    component: ListComponent;
+    component: ListComponent<T>;
     /**
      * Prevent default behavior
      */
@@ -89,11 +89,11 @@ export interface SelectEvent {
  * Load event data
  * @interface LoadEvent
  */
-export interface LoadEvent {
+export interface LoadEvent<T = unknown> {
     /**
      * Loaded items
      */
-    items: any[];
+    items: T[];
     /**
      * Whether the list is currently loading
      */
@@ -109,7 +109,7 @@ export interface LoadEvent {
     /**
      * Component instance
      */
-    component: ListComponent;
+    component: ListComponent<T>;
     /**
      * Prevent default behavior
      */
@@ -123,26 +123,26 @@ export interface LoadEvent {
  * List component interface
  * @interface ListComponent
  */
-export interface ListComponent {
+export interface ListComponent<T = unknown> {
     /**
      * Component's root DOM element
      */
     element: HTMLElement;
     /**
      * Refreshes the list display
-     * @returns {Promise<ListComponent>} Promise that resolves with component
+     * @returns {Promise<ListComponent<T>>} Promise that resolves with component
      */
-    refresh: () => Promise<ListComponent>;
+    refresh: () => Promise<ListComponent<T>>;
     /**
      * Gets all items in the list
-     * @returns {any[]} All items
+     * @returns {T[]} All items
      */
-    getAllItems: () => any[];
+    getAllItems: () => T[];
     /**
      * Gets all visible items (same as getAllItems for rendered lists)
-     * @returns {any[]} Visible items
+     * @returns {T[]} Visible items
      */
-    getVisibleItems: () => any[];
+    getVisibleItems: () => T[];
     /**
      * Scrolls to a specific item by ID
      * @param {string | number} itemId - Item ID to scroll to
@@ -150,15 +150,15 @@ export interface ListComponent {
      * @param {boolean} animate - Whether to animate the scroll
      * @returns {ListComponent} Component instance for chaining
      */
-    scrollToItem: (itemId: string | number, position?: "start" | "center" | "end", animate?: boolean) => ListComponent;
+    scrollToItem: (itemId: string | number, position?: "start" | "center" | "end", animate?: boolean) => ListComponent<T>;
     /**
      * Scroll to a specific index in the list
      * @param {number} index - Index to scroll to (0-based)
      * @param {string} position - Position ('start', 'center', 'end')
      * @param {boolean} animate - Whether to animate the scroll
-     * @returns {Promise<ListComponent>} Promise that resolves when scroll is complete
+     * @returns {Promise<ListComponent<T>>} Promise that resolves when scroll is complete
      */
-    scrollToIndex: (index: number, position?: "start" | "center" | "end", animate?: boolean) => Promise<ListComponent>;
+    scrollToIndex: (index: number, position?: "start" | "center" | "end", animate?: boolean) => Promise<ListComponent<T>>;
     /**
      * Checks if the list is currently loading (always false for rendered lists)
      * @returns {boolean} Always false
@@ -171,9 +171,9 @@ export interface ListComponent {
     hasNextPage: () => boolean;
     /**
      * Gets the currently selected items
-     * @returns {any[]} Selected items
+     * @returns {T[]} Selected items
      */
-    getSelectedItems: () => any[];
+    getSelectedItems: () => T[];
     /**
      * Gets the IDs of currently selected items
      * @returns {string[]} Selected item IDs
@@ -190,38 +190,38 @@ export interface ListComponent {
      * @param {string | number} itemId - Item ID to select
      * @returns {ListComponent} Component instance for chaining
      */
-    selectItem: (itemId: string | number) => ListComponent;
+    selectItem: (itemId: string | number) => ListComponent<T>;
     /**
      * Deselects an item
      * @param {string | number} itemId - Item ID to deselect
      * @returns {ListComponent} Component instance for chaining
      */
-    deselectItem: (itemId: string | number) => ListComponent;
+    deselectItem: (itemId: string | number) => ListComponent<T>;
     /**
      * Clears all selections
      * @returns {ListComponent} Component instance for chaining
      */
-    clearSelection: () => ListComponent;
+    clearSelection: () => ListComponent<T>;
     /**
      * Sets the selection to the specified item IDs
      * @param {(string | number)[]} itemIds - Item IDs to select
      * @returns {ListComponent} Component instance for chaining
      */
-    setSelection: (itemIds: (string | number)[]) => ListComponent;
+    setSelection: (itemIds: (string | number)[]) => ListComponent<T>;
     /**
      * Adds an event listener to the list
      * @param {string} event - Event name
      * @param {Function} handler - Event handler
      * @returns {ListComponent} Component instance for chaining
      */
-    on: <T extends keyof ListEvents>(event: T, handler: ListEvents[T]) => ListComponent;
+    on: <K extends keyof ListEvents<T>>(event: K, handler: ListEvents<T>[K]) => ListComponent<T>;
     /**
      * Removes an event listener from the list
      * @param {string} event - Event name
      * @param {Function} handler - Event handler
      * @returns {ListComponent} Component instance for chaining
      */
-    off: <T extends keyof ListEvents>(event: T, handler: ListEvents[T]) => ListComponent;
+    off: <K extends keyof ListEvents<T>>(event: K, handler: ListEvents<T>[K]) => ListComponent<T>;
     /**
      * Destroys the component and cleans up resources
      */
@@ -231,11 +231,11 @@ export interface ListComponent {
  * Event handlers for List
  * @interface ListEvents
  */
-export interface ListEvents {
-    select: (event: SelectEvent) => void;
-    load: (event: LoadEvent) => void;
+export interface ListEvents<T = unknown> {
+    select: (event: SelectEvent<T>) => void;
+    load: (event: LoadEvent<T>) => void;
     scroll: (event: {
         originalEvent: Event;
-        component: ListComponent;
+        component: ListComponent<T>;
     }) => void;
 }

package/dist/components/loading-indicator/config.d.ts

@@ -22,7 +22,7 @@ export declare const clampValue: (value: number | null | undefined) => number |
 export declare const getElementConfig: (config: LoadingIndicatorConfig) => {
     tag: string;
     componentName: string;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -38,7 +38,7 @@ export declare const getElementConfig: (config: LoadingIndicatorConfig) => {
     ariaHidden: boolean;
     html: string;
     text: string;
-    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents: Record<string, import("../../core/dom/create.js").EventCondition>;
     interactive: boolean;
 };
 export default defaultConfig;

package/dist/components/loading-indicator/types.d.ts

@@ -1,3 +1,4 @@
+import type { Renderer } from "./features/renderer.js";
 /**
  * Configuration options for the loading indicator
  * @interface LoadingIndicatorConfig
@@ -61,5 +62,6 @@ export interface BaseComponent {
     lifecycle?: {
         destroy?: () => void;
     };
-    [key: string]: any;
+    canvas?: HTMLCanvasElement;
+    renderer?: Renderer;
 }

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

@@ -1,4 +1,5 @@
-import { MenuComponent, MenuContent, MenuPosition, MenuEvents } from "./types.js";
+import { MenuComponent, MenuContent, MenuPosition } from "./types.js";
+import type { EventCallback } from "../../core/state/emitter.js";
 /**
  * API configuration options for menu component
  * @category Components
@@ -26,8 +27,8 @@ interface ApiOptions {
         closeAllSubmenus: () => void;
     };
     events?: {
-        on: <T extends keyof MenuEvents>(event: T, handler: MenuEvents[T]) => void;
-        off: <T extends keyof MenuEvents>(event: T, handler: MenuEvents[T]) => void;
+        on: (event: string, handler: EventCallback) => void;
+        off: (event: string, handler: EventCallback) => void;
     };
     lifecycle: {
         destroy: () => void;
@@ -40,8 +41,8 @@ interface ApiOptions {
  */
 interface ComponentWithElements {
     element: HTMLElement;
-    on?: <T extends keyof MenuEvents>(event: T, handler: MenuEvents[T]) => void;
-    off?: <T extends keyof MenuEvents>(event: T, handler: MenuEvents[T]) => void;
+    on?: (event: string, handler: EventCallback) => unknown;
+    off?: (event: string, handler: EventCallback) => unknown;
     emit?: (event: string, data: unknown) => void;
 }
 /**

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;
-    attributes: Record<string, any>;
+    attributes: Record<string, unknown>;
     className: string[];
     rawClass: string | string[];
     id: string;
@@ -45,7 +45,7 @@ export declare const getElementConfig: (config: MenuConfig) => {
     ariaHidden: boolean;
     html: string;
     text: string;
-    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    forwardEvents: Record<string, import("../../core/dom/create.js").EventCondition>;
     interactive: boolean;
 };
 /**

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

@@ -1,4 +1,20 @@
-import { MenuItem } from "../types.js";
+import { MenuItem, MenuContent } from "../types.js";
+/**
+ * Menu state the keyboard handlers read
+ */
+interface KeyboardMenuState {
+    items: MenuContent[];
+}
+/**
+ * Menu actions the keyboard handlers call
+ */
+interface KeyboardActions {
+    closeMenu: (event: Event, restoreFocus?: boolean) => void;
+    closeSubmenu: (level: number) => void;
+    findItemById: (id: string) => MenuItem | null;
+    handleSubmenuClick: (item: MenuItem, index: number, itemElement: HTMLElement) => void;
+    handleNestedSubmenuClick: (item: MenuItem, index: number, itemElement: HTMLElement) => void;
+}
 /**
  * Keyboard navigation handler for menus
  * Manages focus management and keyboard interactions for accessibility
@@ -7,14 +23,8 @@ export declare const createKeyboardNavigation: (component: any) => {
     destroy: () => void;
     removeKeyboardHandlers: (element: HTMLElement) => void;
     handleInitialFocus: (menuElement: HTMLElement, interactionType: "keyboard" | "mouse") => void;
-    handleMenuKeydown: (e: KeyboardEvent, state: any, actions: {
-        closeMenu: (event: Event, restoreFocus?: boolean) => void;
-        closeSubmenu: (level: number) => void;
-        findItemById: (id: string) => MenuItem | null;
-        handleSubmenuClick: (item: MenuItem, index: number, itemElement: HTMLElement) => void;
-        handleNestedSubmenuClick: (item: MenuItem, index: number, itemElement: HTMLElement) => void;
-    }) => void;
-    setupKeyboardHandlers: (menuElement: HTMLElement, state: any, actions: any) => void;
+    handleMenuKeydown: (e: KeyboardEvent, state: KeyboardMenuState, actions: KeyboardActions) => void;
+    setupKeyboardHandlers: (menuElement: HTMLElement, state: KeyboardMenuState, actions: KeyboardActions) => void;
     isTabNavigationActive: () => boolean;
     getFocusableElements: () => HTMLElement[];
     resetTypeahead: () => void;