mtrl 0.4.4 → 0.5.0

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

@@ -1,19 +1,26 @@
 /**
- * API configuration options for VirtualList component
+ * API configuration options for List component
  */
 interface ApiOptions {
     list: {
-        refresh: () => Promise<void>;
-        loadMore: () => Promise<{
-            hasNext: boolean;
-            items: any[];
-        }>;
-        scrollToItem: (itemId: string, position?: 'start' | 'center' | 'end') => void;
-        getVisibleItems: () => any[];
+        refresh: () => void;
+        getItems: () => any[];
         getAllItems: () => any[];
+        getVisibleItems: () => any[];
+        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[];
+        getSelectedItemIds: () => string[];
+        isItemSelected: (itemId: string | number) => boolean;
+        selectItem: (itemId: string | number) => any;
+        deselectItem: (itemId: string | number) => any;
+        clearSelection: () => any;
+        setSelection: (itemIds: (string | number)[]) => any;
+    };
     events: {
         on: (event: string, handler: Function) => any;
         off: (event: string, handler: Function) => any;
@@ -21,13 +28,9 @@ interface ApiOptions {
     lifecycle: {
         destroy: () => void;
     };
-    getSelectedItems?: () => any[];
-    getSelectedItemIds?: () => string[];
-    isItemSelected?: (itemId: string) => boolean;
-    selectItem?: (itemId: string) => any;
-    deselectItem?: (itemId: string) => any;
-    clearSelection?: () => any;
-    setSelection?: (itemIds: string[]) => any;
+    config: {
+        animate?: boolean;
+    };
 }
 /**
  * Component with required elements and methods for API enhancement
@@ -38,52 +41,92 @@ interface ComponentWithElements {
     off?: (event: string, handler: Function) => any;
 }
 /**
- * Enhances a VirtualList component with API methods
+ * 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, events, lifecycle }: ApiOptions) => (component: ComponentWithElements) => {
+export declare const withAPI: ({ list, selection, events, lifecycle, config }: ApiOptions) => (component: ComponentWithElements) => {
     element: HTMLElement;
     /**
-     * Refreshes the list with the latest data
-     * @returns {Promise<void>} Promise that resolves when refresh is complete
+     * Refreshes the list display
+     * @returns {Promise<Object>} Promise that resolves with component
      */
     refresh: () => Promise<ComponentWithElements>;
     /**
-     * Loads more items
-     * @returns {Promise<Object>} Promise with load result
+     * Gets all items in the list
+     * @returns {Array} All items
      */
-    loadMore: () => Promise<{
-        hasNext: boolean;
-        items: any[];
-    }>;
+    getAllItems: () => any[];
+    /**
+     * Gets all visible items (same as getAllItems for rendered lists)
+     * @returns {Array} Visible items
+     */
+    getVisibleItems: () => any[];
     /**
      * Scrolls to a specific item by ID
-     * @param {string} itemId - Item ID to scroll to
+     * @param {string|number} itemId - Item ID to scroll to
      * @param {string} position - Position ('start', 'center', 'end')
+     * @param {boolean} animate - Whether to animate the scroll
      * @returns {Object} Component instance for chaining
      */
-    scrollToItem: (itemId: string, position?: "start" | "center" | "end") => ComponentWithElements;
+    scrollToItem: (itemId: string | number, position?: "start" | "center" | "end", animate?: boolean) => ComponentWithElements;
     /**
-     * Gets all currently visible items
-     * @returns {Array} Visible items
-     */
-    getVisibleItems: () => any[];
-    /**
-     * Gets all loaded items
-     * @returns {Array} All loaded items
+     * Scrolls to a specific index
+     * @param {number} index - Index to scroll to
+     * @param {string} position - Position ('start', 'center', 'end')
+     * @param {boolean} animate - Whether to animate the scroll
+     * @returns {Promise<Object>} Promise that resolves when scroll is complete
      */
-    getAllItems: () => any[];
+    scrollToIndex: (index: number, position?: "start" | "center" | "end", animate?: boolean) => Promise<ComponentWithElements>;
     /**
-     * Checks if the list is currently loading
-     * @returns {boolean} True if loading
+     * Checks if the list is currently loading (always false for rendered lists)
+     * @returns {boolean} Always false
      */
     isLoading: () => boolean;
     /**
-     * Checks if the list has more items to load
-     * @returns {boolean} True if has more items
+     * Checks if the list has more items to load (always false for rendered lists)
+     * @returns {boolean} Always false
      */
     hasNextPage: () => boolean;
+    /**
+     * Gets the currently selected items
+     * @returns {Array} Selected items
+     */
+    getSelectedItems: () => any[];
+    /**
+     * Gets the IDs of currently selected items
+     * @returns {Array} Selected item IDs
+     */
+    getSelectedItemIds: () => string[];
+    /**
+     * Checks if an item is selected
+     * @param {string|number} itemId - Item ID to check
+     * @returns {boolean} True if item is selected
+     */
+    isItemSelected: (itemId: string | number) => boolean;
+    /**
+     * Selects an item
+     * @param {string|number} itemId - Item ID to select
+     * @returns {Object} Component instance for chaining
+     */
+    selectItem: (itemId: string | number) => ComponentWithElements;
+    /**
+     * Deselects an item
+     * @param {string|number} itemId - Item ID to deselect
+     * @returns {Object} Component instance for chaining
+     */
+    deselectItem: (itemId: string | number) => ComponentWithElements;
+    /**
+     * Clears all selections
+     * @returns {Object} Component instance for chaining
+     */
+    clearSelection: () => ComponentWithElements;
+    /**
+     * Sets the selection to the specified item IDs
+     * @param {Array} itemIds - Item IDs to select
+     * @returns {Object} Component instance for chaining
+     */
+    setSelection: (itemIds: (string | number)[]) => ComponentWithElements;
     /**
      * Adds an event listener to the list
      * @param {string} event - Event name

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

@@ -1,18 +1,8 @@
-import { ListConfig } from './types';
+import { ListConfig } from "./types";
 /**
  * Default configuration for the List component
  */
-export declare const defaultConfig: {
-    collection: "items";
-    transform: (item: any) => any;
-    baseUrl: "http://localhost:4000/api";
-    items: any[];
-    pageSize: 20;
-    renderBufferSize: 5;
-    renderItem: any;
-    trackSelection: boolean;
-    multiSelect: boolean;
-};
+export declare const defaultConfig: Partial<ListConfig>;
 /**
  * Creates the base configuration for List component
  * @param {ListConfig} config - User provided configuration
@@ -37,18 +27,29 @@ export declare const getElementConfig: (config: any) => {
 };
 /**
  * Creates API configuration for the List component
- * @param {Object} component - Component with list manager
+ * @param {Object} component - Component with list features
+ * @param {Object} config - Base configuration
  * @returns {Object} API configuration object
  */
-export declare const getApiConfig: (component: any) => {
+export declare const getApiConfig: (component: any, config: any) => {
     list: {
         refresh: any;
-        loadMore: any;
-        scrollToItem: any;
-        getVisibleItems: any;
+        getItems: any;
         getAllItems: any;
-        isLoading: any;
-        hasNextPage: any;
+        getVisibleItems: any;
+        scrollToItem: any;
+        scrollToIndex: any;
+        isLoading: () => boolean;
+        hasNextPage: () => boolean;
+    };
+    selection: {
+        getSelectedItems: any;
+        getSelectedItemIds: any;
+        isItemSelected: any;
+        selectItem: any;
+        deselectItem: any;
+        clearSelection: any;
+        setSelection: any;
     };
     events: {
         on: any;
@@ -57,5 +58,8 @@ export declare const getApiConfig: (component: any) => {
     lifecycle: {
         destroy: any;
     };
+    config: {
+        animate: any;
+    };
 };
 export default defaultConfig;

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

@@ -1,2 +1,2 @@
-export { default as withListManager } from './listmanager';
+export { default as withRenderer } from './renderer';
 export { default as withSelection } from './selection';

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

@@ -0,0 +1,9 @@
+/**
+ * Adds item rendering capabilities to a component
+ * Renders static data directly without virtual scrolling or complex management
+ *
+ * @param config - Configuration options
+ * @returns Function that enhances a component with item rendering capabilities
+ */
+export declare const withRenderer: (config: any) => (component: any) => any;
+export default withRenderer;

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

@@ -1,6 +1,6 @@
 /**
  * Adds selection management capabilities to a list component
- * Optimized implementation for better performance
+ * Simplified implementation for rendered lists
  *
  * @param config - Configuration options
  * @returns Function that enhances a component with selection management

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

@@ -1,8 +1,9 @@
 /**
  * Creates a new List component
  *
- * The List component provides a high-performance way to render large datasets
- * with built-in virtualization, pagination, and efficient DOM management.
+ * The List component provides a simple way to render static arrays of data
+ * with built-in selection capabilities. For virtual scrolling and complex
+ * data management, use the VirtualList component from mtrl-addons.
  *
  * @param {Object} config - Configuration options for the list
  * @returns {Object} List component instance

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

@@ -3,56 +3,18 @@
  * @interface ListConfig
  */
 export interface ListConfig {
-    /**
-     * Collection name to fetch data from
-     * @default 'items'
-     */
-    collection?: string;
-    /**
-     * Transform function for API items
-     * @param {any} item - Raw item from API
-     * @returns {any} Transformed item
-     */
-    transform?: (item: any) => any;
-    /**
-     * Base URL for API requests
-     * @default 'http://localhost:4000/api'
-     */
-    baseUrl?: string;
     /**
      * Static array of items to display
-     * @default []
-     */
-    items?: any[];
-    /**
-     * Default height for items in pixels
-     * This is used for calculation before actual measurement
-     * @default 48
+     * @required
      */
-    itemHeight?: number;
-    /**
-     * Number of items to fetch per page
-     * @default 20
-     */
-    pageSize?: number;
-    /**
-     * Number of extra items to render above/below viewport
-     * Higher values reduce blank spaces during fast scrolling but impact performance
-     * @default 5
-     */
-    renderBufferSize?: number;
+    items: any[];
     /**
      * Function to render an item
      * @param {any} item - Item to render
      * @param {number} index - Item index in the list
      * @returns {HTMLElement} Rendered DOM element
      */
-    renderItem: (item: any, index: number) => HTMLElement;
-    /**
-     * Callback when items are loaded
-     * @param {Object} data - Load result data
-     */
-    afterLoad?: (data: LoadResult) => void;
+    renderItem?: (item: any, index: number) => HTMLElement;
     /**
      * Whether to track item selection
      * When true, clicked items will receive a selected class
@@ -67,7 +29,7 @@ export interface ListConfig {
     /**
      * Initial selection state (array of item IDs)
      */
-    initialSelection?: string[];
+    initialSelection?: (string | number)[];
     /**
      * ARIA label for accessibility
      */
@@ -76,32 +38,22 @@ export interface ListConfig {
      * Additional CSS classes
      */
     class?: string;
-}
-/**
- * Result of a load operation
- * @interface LoadResult
- */
-export interface LoadResult {
-    /**
-     * Whether the list is currently loading
-     */
-    loading: boolean;
     /**
-     * Whether there are more items to load
-     */
-    hasNext: boolean;
-    /**
-     * Whether there are previous items (if paginating)
+     * Default animation behavior for scroll operations
+     * When true, scroll operations will be animated by default
+     * @default false
      */
-    hasPrev: boolean;
+    animate?: boolean;
     /**
-     * Newly loaded items
+     * Component prefix for CSS class names
+     * @default 'mtrl'
      */
-    items: any[];
+    prefix?: string;
     /**
-     * All loaded items
+     * Component name used in CSS class generation
+     * @default 'list'
      */
-    allItems: any[];
+    componentName?: string;
 }
 /**
  * Selection event data
@@ -137,41 +89,35 @@ export interface SelectEvent {
  * Load event data
  * @interface LoadEvent
  */
-export interface LoadEvent extends LoadResult {
+export interface LoadEvent {
     /**
-     * Component instance
+     * Loaded items
      */
-    component: VirtualListComponent;
+    items: any[];
     /**
-     * Prevent default behavior
+     * Whether the list is currently loading
      */
-    preventDefault: () => void;
+    loading: boolean;
     /**
-     * Whether default was prevented
+     * Whether there are more items to load
      */
-    defaultPrevented: boolean;
-}
-/**
- * Virtual List component interface - enhanced list with virtual scrolling
- * @interface VirtualListComponent
- */
-export interface VirtualListComponent extends ListComponent {
+    hasNext: boolean;
     /**
-     * Updates the virtual scroll parameters
-     * @returns {VirtualListComponent} Component instance for chaining
+     * Whether there are previous items
+     */
+    hasPrev: boolean;
+    /**
+     * Component instance
      */
-    updateScrollParams?: () => VirtualListComponent;
+    component: ListComponent;
     /**
-     * Gets the scroll position
-     * @returns {number} Current scroll position
+     * Prevent default behavior
      */
-    getScrollTop?: () => number;
+    preventDefault?: () => void;
     /**
-     * Sets the scroll position
-     * @param {number} scrollTop - Scroll position to set
-     * @returns {VirtualListComponent} Component instance for chaining
+     * Whether default was prevented
      */
-    setScrollTop?: (scrollTop: number) => VirtualListComponent;
+    defaultPrevented?: boolean;
 }
 /**
  * List component interface
@@ -183,43 +129,44 @@ export interface ListComponent {
      */
     element: HTMLElement;
     /**
-     * Refreshes the list with the latest data
-     * @returns {Promise<VirtualListComponent>} Promise that resolves with component
-     */
-    refresh: () => Promise<VirtualListComponent>;
-    /**
-     * Loads more items
-     * @returns {Promise<{hasNext: boolean, items: any[]}>} Promise with load result
+     * Refreshes the list display
+     * @returns {Promise<ListComponent>} Promise that resolves with component
      */
-    loadMore: () => Promise<{
-        hasNext: boolean;
-        items: any[];
-    }>;
+    refresh: () => Promise<ListComponent>;
     /**
-     * Scrolls to a specific item by ID
-     * @param {string} itemId - Item ID to scroll to
-     * @param {string} position - Position ('start', 'center', 'end')
-     * @returns {VirtualListComponent} Component instance for chaining
+     * Gets all items in the list
+     * @returns {any[]} All items
      */
-    scrollToItem: (itemId: string, position?: 'start' | 'center' | 'end') => VirtualListComponent;
+    getAllItems: () => any[];
     /**
-     * Gets all currently visible items
+     * Gets all visible items (same as getAllItems for rendered lists)
      * @returns {any[]} Visible items
      */
     getVisibleItems: () => any[];
     /**
-     * Gets all loaded items
-     * @returns {any[]} All loaded items
+     * Scrolls to a specific item by ID
+     * @param {string | number} itemId - Item ID to scroll to
+     * @param {string} position - Position ('start', 'center', 'end')
+     * @param {boolean} animate - Whether to animate the scroll
+     * @returns {ListComponent} Component instance for chaining
      */
-    getAllItems: () => any[];
+    scrollToItem: (itemId: string | number, position?: "start" | "center" | "end", animate?: boolean) => ListComponent;
+    /**
+     * 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
+     */
+    scrollToIndex: (index: number, position?: "start" | "center" | "end", animate?: boolean) => Promise<ListComponent>;
     /**
-     * Checks if the list is currently loading
-     * @returns {boolean} True if loading
+     * Checks if the list is currently loading (always false for rendered lists)
+     * @returns {boolean} Always false
      */
     isLoading: () => boolean;
     /**
-     * Checks if the list has more items to load
-     * @returns {boolean} True if has more items
+     * Checks if the list has more items to load (always false for rendered lists)
+     * @returns {boolean} Always false
      */
     hasNextPage: () => boolean;
     /**
@@ -234,22 +181,22 @@ export interface ListComponent {
     getSelectedItemIds: () => string[];
     /**
      * Checks if an item is selected
-     * @param {string} itemId - Item ID to check
+     * @param {string | number} itemId - Item ID to check
      * @returns {boolean} True if item is selected
      */
-    isItemSelected: (itemId: string) => boolean;
+    isItemSelected: (itemId: string | number) => boolean;
     /**
      * Selects an item
-     * @param {string} itemId - Item ID to select
+     * @param {string | number} itemId - Item ID to select
      * @returns {ListComponent} Component instance for chaining
      */
-    selectItem: (itemId: string) => ListComponent;
+    selectItem: (itemId: string | number) => ListComponent;
     /**
      * Deselects an item
-     * @param {string} itemId - Item ID to deselect
+     * @param {string | number} itemId - Item ID to deselect
      * @returns {ListComponent} Component instance for chaining
      */
-    deselectItem: (itemId: string) => ListComponent;
+    deselectItem: (itemId: string | number) => ListComponent;
     /**
      * Clears all selections
      * @returns {ListComponent} Component instance for chaining
@@ -257,10 +204,10 @@ export interface ListComponent {
     clearSelection: () => ListComponent;
     /**
      * Sets the selection to the specified item IDs
-     * @param {string[]} itemIds - Item IDs to select
+     * @param {(string | number)[]} itemIds - Item IDs to select
      * @returns {ListComponent} Component instance for chaining
      */
-    setSelection: (itemIds: string[]) => ListComponent;
+    setSelection: (itemIds: (string | number)[]) => ListComponent;
     /**
      * Adds an event listener to the list
      * @param {string} event - Event name
@@ -285,10 +232,10 @@ export interface ListComponent {
  * @interface ListEvents
  */
 export interface ListEvents {
-    'select': (event: SelectEvent) => void;
-    'load': (event: LoadEvent) => void;
-    'scroll': (event: {
+    select: (event: SelectEvent) => void;
+    load: (event: LoadEvent) => void;
+    scroll: (event: {
         originalEvent: Event;
-        component: VirtualListComponent;
+        component: ListComponent;
     }) => void;
 }

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

@@ -105,9 +105,9 @@ export declare const PROGRESS_WAVE: {
     /** Linear progress wave parameters */
     readonly LINEAR: {
         /** Base amplitude of the wave in pixels */
-        readonly AMPLITUDE: 3;
+        readonly AMPLITUDE: 4;
         /** Speed of wave animation in waves per second (Hz) */
-        readonly SPEED: 0.88;
+        readonly SPEED: 1;
         /** Number of complete waves per 100 pixels */
         readonly FREQUENCY: 2;
         /** Number of complete waves per 100 pixels for indeterminate */
@@ -128,7 +128,7 @@ export declare const PROGRESS_WAVE: {
         /** Amplitude as percentage of radius for indeterminate (4 = 4%) */
         readonly INDETERMINATE_AMPLITUDE: 4;
         /** Speed of wave rotation in rotations per second (Hz), negative value means clockwise */
-        readonly SPEED: 1.1;
+        readonly SPEED: 1;
         /** Number of complete waves around the circle */
         readonly FREQUENCY: 10;
         /** Number of complete waves for indeterminate animation */

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

@@ -1,5 +1,5 @@
-import { SliderConfig } from '../types';
-import { SliderSize } from '../constants';
+import { SliderConfig } from "../types";
+import { SliderSize } from "../constants";
 /**
  * Animation state for smooth transitions
  */

package/dist/components/slider/features/dom.d.ts

@@ -0,0 +1,21 @@
+import { SliderConfig } from "../types";
+import { ElementComponent } from "../../../core/compose/component";
+/**
+ * Creates the inner slider DOM structure using optimized createElement
+ * This works alongside withElement to create slider-specific inner elements
+ *
+ * @param config Slider configuration
+ * @returns Component enhancement function
+ */
+export declare const withDom: (config: SliderConfig) => <T extends ElementComponent>(component: T) => T & {
+    container: HTMLElement;
+    handle: HTMLElement;
+    valueBubble: HTMLElement;
+    secondHandle?: HTMLElement;
+    secondValueBubble?: HTMLElement;
+    getContainer: () => HTMLElement;
+    getHandle: () => HTMLElement;
+    getValueBubble: () => HTMLElement;
+    getSecondHandle?: () => HTMLElement | null;
+    getSecondValueBubble?: () => HTMLElement | null;
+};

package/dist/components/slider/features/index.d.ts

@@ -1,4 +1,5 @@
-export { withRange } from './range';
-export { withStates } from './states';
-export { withController } from './controller';
-export { withCanvas } from './canvas';
+export { withRange } from "./range";
+export { withStates } from "./states";
+export { withController } from "./controller";
+export { withCanvas } from "./canvas";
+export { withDom } from "./dom";

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

@@ -1,11 +1,11 @@
-import { SliderConfig, SliderComponent } from './types';
+import { SliderConfig, SliderComponent } from "./types";
 /**
  * Creates a new Slider component
  *
  * Slider follows a clear architectural pattern:
- * 1. Structure definition - Describes the DOM structure declaratively
- * 2. Feature enhancement - Adds specific capabilities (range, icons, labels)
- * 3. DOM creation - Turns the structure into actual DOM elements
+ * 1. Base component - Creates the foundation with event system
+ * 2. Feature enhancement - Adds specific capabilities (range, icons)
+ * 3. DOM creation - Creates DOM elements directly using optimized createElement
  * 4. Canvas rendering - Uses canvas for visual elements, keeping handles as DOM
  * 5. State management - Handles visual states and appearance
  * 6. Controller - Manages behavior, events, and UI rendering

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

@@ -8,6 +8,8 @@ type ComponentWithDensity = BaseComponent & {
         set: (density: string) => void;
     };
     updateElementPositions?: () => void;
+    setError?: (error: boolean, message?: string) => any;
+    isError?: () => boolean;
 };
 /**
  * Enhances textfield component with API methods