mtrl 0.4.5 → 0.5.1

package/README.md

@@ -6,7 +6,7 @@ mtrl is a lightweight, composable TypeScript/JavaScript component library inspir
 
 ## Understanding mtrl
 
-mtrl (pronounced "material") takes its inspiration from Material Design while providing a flexible, framework-agnostic implementation. The library's name is reflected in its component prefix `mtrl-`, which you'll see used consistently throughout the codebase.
+mtrl (pronounced "material") takes its inspiration from Material Design while providing a flexible, framework-agnostic implementation.
 
 ### Design Philosophy
 
@@ -23,15 +23,15 @@ mtrl is built on several core principles:
 mtrl provides a comprehensive set of components, each following Material Design principles:
 
 ```typescript
-import { createButton, createTextField } from 'mtrl'
+import { createButton, createTextField } from "mtrl";
 
 // Create a material button with ripple effect
 const button = createButton({
-  text: 'Submit',
-  variant: 'filled',
+  text: "Submit",
+  variant: "filled",
   ripple: true,
-  class: 'custom-button'
-})
+  class: "custom-button",
+});
 
 // className will be: mtrl-button mtrl-button--filled custom-button
 ```
@@ -68,12 +68,12 @@ Let's look at how mtrl components are constructed:
 ```typescript
 // Example of a button component creation
 const button = createButton({
-  prefix: 'mtrl',           // The library's prefix
-  componentName: 'button',  // Component identifier
-  variant: 'filled',        // Visual variant
-  text: 'Click me',         // Button text
-  ripple: true             // Enable ripple effect
-})
+  prefix: "mtrl", // The library's prefix
+  componentName: "button", // Component identifier
+  variant: "filled", // Visual variant
+  text: "Click me", // Button text
+  ripple: true, // Enable ripple effect
+});
 ```
 
 ### The Composition System
@@ -84,19 +84,20 @@ mtrl uses a pipe-based composition system with full type safety for building com
 // Internal component creation
 const createButton = (config: ButtonConfig): ButtonComponent => {
   return pipe(
-    createBase,                // Base component structure
-    withEvents(),             // Event handling capability
-    withElement({             // DOM element creation
-      tag: 'button',
-      componentName: 'button',
-      prefix: 'mtrl'
+    createBase, // Base component structure
+    withEvents(), // Event handling capability
+    withElement({
+      // DOM element creation
+      tag: "button",
+      componentName: "button",
+      prefix: "mtrl",
     }),
-    withVariant(config),      // Visual variant support
-    withText(config),         // Text content management
-    withIcon(config),         // Icon support
-    withRipple(config)        // Ripple animation
-  )(config)
-}
+    withVariant(config), // Visual variant support
+    withText(config), // Text content management
+    withIcon(config), // Icon support
+    withRipple(config) // Ripple animation
+  )(config);
+};
 ```
 
 ### TypeScript Integration
@@ -105,14 +106,13 @@ mtrl provides comprehensive TypeScript definitions:
 
 ```typescript
 // Component interfaces for better developer experience
-export interface ButtonComponent extends 
-  BaseComponent, 
-  ElementComponent,
-  TextComponent,
-  IconComponent,
-  DisabledComponent,
-  LifecycleComponent {
-  
+export interface ButtonComponent
+  extends BaseComponent,
+    ElementComponent,
+    TextComponent,
+    IconComponent,
+    DisabledComponent,
+    LifecycleComponent {
   // Button-specific properties and methods
   getValue: () => string;
   setValue: (value: string) => ButtonComponent;
@@ -133,9 +133,10 @@ mtrl follows a consistent class naming convention:
 
 ```css
 .mtrl-component                /* Base component class */
+/* Base component class */
 .mtrl-component--variant      /* Variant modifier */
 .mtrl-component--state        /* State modifier (disabled, focused) */
-.mtrl-component-element       /* Child element */
+.mtrl-component-element; /* Child element */
 ```
 
 ## State Management
@@ -146,14 +147,14 @@ mtrl provides several approaches to state management:
 
 ```typescript
 const textField = createTextField({
-  label: 'Username'
-})
+  label: "Username",
+});
 
-textField.on('input', ({ value }) => {
-  console.log('Current value:', value)
-})
+textField.on("input", ({ value }) => {
+  console.log("Current value:", value);
+});
 
-textField.setValue('New value')
+textField.setValue("New value");
 ```
 
 ### Collection Management
@@ -164,13 +165,13 @@ For managing lists and datasets:
 const collection = new Collection<User>({
   transform: (item) => ({
     ...item,
-    displayName: `${item.firstName} ${item.lastName}`
-  })
-})
+    displayName: `${item.firstName} ${item.lastName}`,
+  }),
+});
 
 collection.subscribe(({ event, data }) => {
-  console.log(`Collection ${event}:`, data)
-})
+  console.log(`Collection ${event}:`, data);
+});
 ```
 
 ## Data Integration
@@ -180,19 +181,19 @@ mtrl provides adapters for different data sources:
 ```typescript
 // MongoDB adapter
 const mongoAdapter = createMongoAdapter({
-  uri: 'mongodb://localhost:27017',
-  dbName: 'mtrl-app',
-  collection: 'users'
-})
+  uri: "mongodb://localhost:27017",
+  dbName: "mtrl-app",
+  collection: "users",
+});
 
 // Route adapter for REST APIs
 const routeAdapter = createRouteAdapter({
-  base: '/api',
+  base: "/api",
   endpoints: {
-    list: '/users',
-    create: '/users'
-  }
-})
+    list: "/users",
+    create: "/users",
+  },
+});
 ```
 
 ## Customization
@@ -216,9 +217,9 @@ const createCustomCard = (config: CustomCardConfig): CustomCardComponent => {
     createBase,
     withEvents(),
     withElement({
-      tag: 'div',
-      componentName: 'card',
-      prefix: 'mtrl'
+      tag: "div",
+      componentName: "card",
+      prefix: "mtrl",
     }),
     // Add custom features
     (component) => ({
@@ -226,10 +227,10 @@ const createCustomCard = (config: CustomCardConfig): CustomCardComponent => {
       setContent(content: string) {
         component.element.innerHTML = content;
         return this;
-      }
+      },
     })
   )(config);
-}
+};
 ```
 
 ### Styling
@@ -241,7 +242,7 @@ mtrl components can be styled through CSS custom properties:
   --mtrl-primary: #6200ee;
   --mtrl-surface: #ffffff;
   --mtrl-on-surface: #000000;
-  --mtrl-elevation-1: 0 2px 4px rgba(0,0,0,0.2);
+  --mtrl-elevation-1: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 ```
 
@@ -321,4 +322,4 @@ For detailed API documentation, examples, and guides, visit our [documentation s
 
 ---
 
-This library is designed to provide a solid foundation for building modern web interfaces with TypeScript while maintaining flexibility for custom implementations. For questions, issues, or contributions, please visit our GitHub repository.
+This library is designed to provide a solid foundation for building modern web interfaces with TypeScript while maintaining flexibility for custom implementations. For questions, issues, or contributions, please visit our GitHub repository.

package/dist/README.md

@@ -6,7 +6,7 @@ mtrl is a lightweight, composable TypeScript/JavaScript component library inspir
 
 ## Understanding mtrl
 
-mtrl (pronounced "material") takes its inspiration from Material Design while providing a flexible, framework-agnostic implementation. The library's name is reflected in its component prefix `mtrl-`, which you'll see used consistently throughout the codebase.
+mtrl (pronounced "material") takes its inspiration from Material Design while providing a flexible, framework-agnostic implementation.
 
 ### Design Philosophy
 
@@ -23,15 +23,15 @@ mtrl is built on several core principles:
 mtrl provides a comprehensive set of components, each following Material Design principles:
 
 ```typescript
-import { createButton, createTextField } from 'mtrl'
+import { createButton, createTextField } from "mtrl";
 
 // Create a material button with ripple effect
 const button = createButton({
-  text: 'Submit',
-  variant: 'filled',
+  text: "Submit",
+  variant: "filled",
   ripple: true,
-  class: 'custom-button'
-})
+  class: "custom-button",
+});
 
 // className will be: mtrl-button mtrl-button--filled custom-button
 ```
@@ -68,12 +68,12 @@ Let's look at how mtrl components are constructed:
 ```typescript
 // Example of a button component creation
 const button = createButton({
-  prefix: 'mtrl',           // The library's prefix
-  componentName: 'button',  // Component identifier
-  variant: 'filled',        // Visual variant
-  text: 'Click me',         // Button text
-  ripple: true             // Enable ripple effect
-})
+  prefix: "mtrl", // The library's prefix
+  componentName: "button", // Component identifier
+  variant: "filled", // Visual variant
+  text: "Click me", // Button text
+  ripple: true, // Enable ripple effect
+});
 ```
 
 ### The Composition System
@@ -84,19 +84,20 @@ mtrl uses a pipe-based composition system with full type safety for building com
 // Internal component creation
 const createButton = (config: ButtonConfig): ButtonComponent => {
   return pipe(
-    createBase,                // Base component structure
-    withEvents(),             // Event handling capability
-    withElement({             // DOM element creation
-      tag: 'button',
-      componentName: 'button',
-      prefix: 'mtrl'
+    createBase, // Base component structure
+    withEvents(), // Event handling capability
+    withElement({
+      // DOM element creation
+      tag: "button",
+      componentName: "button",
+      prefix: "mtrl",
     }),
-    withVariant(config),      // Visual variant support
-    withText(config),         // Text content management
-    withIcon(config),         // Icon support
-    withRipple(config)        // Ripple animation
-  )(config)
-}
+    withVariant(config), // Visual variant support
+    withText(config), // Text content management
+    withIcon(config), // Icon support
+    withRipple(config) // Ripple animation
+  )(config);
+};
 ```
 
 ### TypeScript Integration
@@ -105,14 +106,13 @@ mtrl provides comprehensive TypeScript definitions:
 
 ```typescript
 // Component interfaces for better developer experience
-export interface ButtonComponent extends 
-  BaseComponent, 
-  ElementComponent,
-  TextComponent,
-  IconComponent,
-  DisabledComponent,
-  LifecycleComponent {
-  
+export interface ButtonComponent
+  extends BaseComponent,
+    ElementComponent,
+    TextComponent,
+    IconComponent,
+    DisabledComponent,
+    LifecycleComponent {
   // Button-specific properties and methods
   getValue: () => string;
   setValue: (value: string) => ButtonComponent;
@@ -133,9 +133,10 @@ mtrl follows a consistent class naming convention:
 
 ```css
 .mtrl-component                /* Base component class */
+/* Base component class */
 .mtrl-component--variant      /* Variant modifier */
 .mtrl-component--state        /* State modifier (disabled, focused) */
-.mtrl-component-element       /* Child element */
+.mtrl-component-element; /* Child element */
 ```
 
 ## State Management
@@ -146,14 +147,14 @@ mtrl provides several approaches to state management:
 
 ```typescript
 const textField = createTextField({
-  label: 'Username'
-})
+  label: "Username",
+});
 
-textField.on('input', ({ value }) => {
-  console.log('Current value:', value)
-})
+textField.on("input", ({ value }) => {
+  console.log("Current value:", value);
+});
 
-textField.setValue('New value')
+textField.setValue("New value");
 ```
 
 ### Collection Management
@@ -164,13 +165,13 @@ For managing lists and datasets:
 const collection = new Collection<User>({
   transform: (item) => ({
     ...item,
-    displayName: `${item.firstName} ${item.lastName}`
-  })
-})
+    displayName: `${item.firstName} ${item.lastName}`,
+  }),
+});
 
 collection.subscribe(({ event, data }) => {
-  console.log(`Collection ${event}:`, data)
-})
+  console.log(`Collection ${event}:`, data);
+});
 ```
 
 ## Data Integration
@@ -180,19 +181,19 @@ mtrl provides adapters for different data sources:
 ```typescript
 // MongoDB adapter
 const mongoAdapter = createMongoAdapter({
-  uri: 'mongodb://localhost:27017',
-  dbName: 'mtrl-app',
-  collection: 'users'
-})
+  uri: "mongodb://localhost:27017",
+  dbName: "mtrl-app",
+  collection: "users",
+});
 
 // Route adapter for REST APIs
 const routeAdapter = createRouteAdapter({
-  base: '/api',
+  base: "/api",
   endpoints: {
-    list: '/users',
-    create: '/users'
-  }
-})
+    list: "/users",
+    create: "/users",
+  },
+});
 ```
 
 ## Customization
@@ -216,9 +217,9 @@ const createCustomCard = (config: CustomCardConfig): CustomCardComponent => {
     createBase,
     withEvents(),
     withElement({
-      tag: 'div',
-      componentName: 'card',
-      prefix: 'mtrl'
+      tag: "div",
+      componentName: "card",
+      prefix: "mtrl",
     }),
     // Add custom features
     (component) => ({
@@ -226,10 +227,10 @@ const createCustomCard = (config: CustomCardConfig): CustomCardComponent => {
       setContent(content: string) {
         component.element.innerHTML = content;
         return this;
-      }
+      },
     })
   )(config);
-}
+};
 ```
 
 ### Styling
@@ -241,7 +242,7 @@ mtrl components can be styled through CSS custom properties:
   --mtrl-primary: #6200ee;
   --mtrl-surface: #ffffff;
   --mtrl-on-surface: #000000;
-  --mtrl-elevation-1: 0 2px 4px rgba(0,0,0,0.2);
+  --mtrl-elevation-1: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 ```
 
@@ -321,4 +322,4 @@ For detailed API documentation, examples, and guides, visit our [documentation s
 
 ---
 
-This library is designed to provide a solid foundation for building modern web interfaces with TypeScript while maintaining flexibility for custom implementations. For questions, issues, or contributions, please visit our GitHub repository.
+This library is designed to provide a solid foundation for building modern web interfaces with TypeScript while maintaining flexibility for custom implementations. For questions, issues, or contributions, please visit our GitHub repository.

package/dist/components/chips/chips.d.ts

@@ -3,9 +3,9 @@ import { ChipsConfig, ChipsComponent } from "./types";
  * Creates a chips container for grouping related chips
  *
  * Chips follows a clear architectural pattern:
- * 1. Structure definition - Describes the DOM structure declaratively
+ * 1. Base component - Creates the foundation with event system
  * 2. Feature enhancement - Adds specific capabilities (container, items, etc.)
- * 3. DOM creation - Turns the structure into actual DOM elements
+ * 3. DOM creation - Creates DOM elements directly using optimized createElement
  * 4. Controller - Manages behavior, events, and UI rendering
  * 5. Lifecycle - Handles component lifecycle events
  * 6. Public API - Exposes a clean, consistent API

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

@@ -1,4 +1,4 @@
-import { ChipsConfig } from './types';
+import { ChipsConfig } from "./types";
 /**
  * Default configuration for the Chips component
  */

package/dist/components/chips/features/controller.d.ts

@@ -1,4 +1,4 @@
-import { ChipsConfig } from '../types';
+import { ChipsConfig } from "../types";
 /**
  * Add controller functionality to chips component
  * Manages state, events, user interactions, and UI rendering

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

@@ -0,0 +1,15 @@
+import { ChipsConfig } from "../types";
+import { ElementComponent } from "../../../core/compose/component";
+/**
+ * Creates the inner chips DOM structure using optimized createElement
+ * This works alongside withElement to create chips-specific inner elements
+ *
+ * @param config Chips configuration
+ * @returns Component enhancement function
+ */
+export declare const withDom: (config: ChipsConfig) => <T extends ElementComponent>(component: T) => T & {
+    chipContainer: HTMLElement;
+    label?: HTMLElement;
+    getChipContainer: () => HTMLElement;
+    getLabel: () => HTMLElement | null;
+};

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

@@ -1,4 +1,5 @@
-export { withContainer } from './container';
-export { withChipItems } from './chip-items';
-export { withController } from './controller';
-export { withChipsLabel } from './label';
+export { withContainer } from "./container";
+export { withChipItems } from "./chip-items";
+export { withController } from "./controller";
+export { withChipsLabel } from "./label";
+export { withDom } from "./dom";

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

@@ -1,4 +1,4 @@
-import { ChipsConfig } from './types';
+import { ChipsConfig } from "./types";
 /**
  * Creates the base chips structure definition
  *
@@ -12,7 +12,7 @@ export declare function createChipsSchema(component: any, config: ChipsConfig):
             className: any[];
             attributes: {
                 role: string;
-                'aria-multiselectable': string;
+                "aria-multiselectable": string;
             };
         };
         children: {

package/dist/components/index.d.ts

@@ -8,70 +8,70 @@
  *
  * @packageDocumentation
  */
-export { LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES } from './list/constants';
+export { LIST_DEFAULTS, LIST_TYPES, LIST_SELECTION_MODES, LIST_EVENTS, LIST_SCROLL_POSITIONS, LIST_CLASSES, } from "./list/constants";
 export type { ListConfig, ListComponent, SelectEvent as ListSelectEvent, // Rename to avoid collision
-LoadEvent, LoadResult } from './list/types';
-export { SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES } from './select/constants';
+LoadEvent, } from "./list/types";
+export { SELECT_VARIANTS, SELECT_PLACEMENT, SELECT_INTERACTION, SELECT_EVENTS, SELECT_ICONS, SELECT_DEFAULTS, SELECT_CLASSES, } from "./select/constants";
 export type { SelectConfig, SelectComponent, SelectOption, SelectEvent, // Keep the original name since select is more commonly used
-SelectChangeEvent } from './select/types';
-export * from './badge';
-export * from './bottom-app-bar';
-export * from './button';
-export * from './card';
-export * from './carousel';
-export * from './checkbox';
-export * from './chips';
-export * from './datepicker';
-export * from './dialog';
-export * from './fab';
-export * from './extended-fab';
-export * from './menu';
-export * from './navigation';
-export { PROGRESS_VARIANTS, PROGRESS_SHAPES, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, PROGRESS_MEASUREMENTS, PROGRESS_THICKNESS } from './progress/constants';
-export type { ProgressConfig, ProgressComponent, ProgressShape } from './progress/types';
-export * from './radios';
-export * from './search';
-export * from './segmented-button';
-export * from './sheet';
-export * from './slider';
-export * from './snackbar';
-export * from './switch';
-export * from './tabs';
-export * from './textfield';
-export * from './timepicker';
-export * from './top-app-bar';
-export * from './tooltip';
-export { createDivider } from './divider';
-export type { DividerConfig } from './divider/config';
-export type { DividerComponent } from './divider/types';
-export { createCardContent, createCardHeader, createCardActions, createCardMedia } from './card/content';
-export { default as createBadge } from './badge';
-export { default as createBottomAppBar } from './bottom-app-bar';
-export { default as createButton } from './button';
-export { default as createCard } from './card';
-export { default as createCarousel } from './carousel';
-export { default as createCheckbox } from './checkbox';
-export { default as createDatePicker } from './datepicker';
-export { default as createDialog } from './dialog';
-export { default as createFab } from './fab';
-export { default as createExtendedFab } from './extended-fab';
-export { default as createList } from './list';
-export { default as createMenu } from './menu';
-export { default as createNavigation } from './navigation';
-export { default as createNavigationSystem } from './navigation/system';
-export { default as createProgress } from './progress';
-export { default as createRadios } from './radios';
-export { default as createSearch } from './search';
-export { default as createSelect } from './select';
-export { default as createSegmentedButton } from './segmented-button';
-export { createSegment } from './segmented-button/segment';
-export { default as createSheet } from './sheet';
-export { default as createSlider } from './slider';
-export { default as createSnackbar } from './snackbar';
-export { default as createSwitch } from './switch';
-export { default as createTabs } from './tabs';
-export { createTab } from './tabs/tab';
-export { default as createTextfield } from './textfield';
-export { default as createTimePicker } from './timepicker';
-export { default as createTopAppBar } from './top-app-bar';
-export { default as createTooltip } from './tooltip';
+SelectChangeEvent, } from "./select/types";
+export * from "./badge";
+export * from "./bottom-app-bar";
+export * from "./button";
+export * from "./card";
+export * from "./carousel";
+export * from "./checkbox";
+export * from "./chips";
+export * from "./datepicker";
+export * from "./dialog";
+export * from "./fab";
+export * from "./extended-fab";
+export * from "./menu";
+export * from "./navigation";
+export { PROGRESS_VARIANTS, PROGRESS_SHAPES, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, PROGRESS_MEASUREMENTS, PROGRESS_THICKNESS, } from "./progress/constants";
+export type { ProgressConfig, ProgressComponent, ProgressShape, } from "./progress/types";
+export * from "./radios";
+export * from "./search";
+export * from "./segmented-button";
+export * from "./sheet";
+export * from "./slider";
+export * from "./snackbar";
+export * from "./switch";
+export * from "./tabs";
+export * from "./textfield";
+export * from "./timepicker";
+export * from "./top-app-bar";
+export * from "./tooltip";
+export { createDivider } from "./divider";
+export type { DividerConfig } from "./divider/config";
+export type { DividerComponent } from "./divider/types";
+export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./card/content";
+export { default as createBadge } from "./badge";
+export { default as createBottomAppBar } from "./bottom-app-bar";
+export { default as createButton } from "./button";
+export { default as createCard } from "./card";
+export { default as createCarousel } from "./carousel";
+export { default as createCheckbox } from "./checkbox";
+export { default as createDatePicker } from "./datepicker";
+export { default as createDialog } from "./dialog";
+export { default as createFab } from "./fab";
+export { default as createExtendedFab } from "./extended-fab";
+export { default as createList } from "./list";
+export { default as createMenu } from "./menu";
+export { default as createNavigation } from "./navigation";
+export { default as createNavigationSystem } from "./navigation/system";
+export { default as createProgress } from "./progress";
+export { default as createRadios } from "./radios";
+export { default as createSearch } from "./search";
+export { default as createSelect } from "./select";
+export { default as createSegmentedButton } from "./segmented-button";
+export { createSegment } from "./segmented-button/segment";
+export { default as createSheet } from "./sheet";
+export { default as createSlider } from "./slider";
+export { default as createSnackbar } from "./snackbar";
+export { default as createSwitch } from "./switch";
+export { default as createTabs } from "./tabs";
+export { createTab } from "./tabs/tab";
+export { default as createTextfield } from "./textfield";
+export { default as createTimePicker } from "./timepicker";
+export { default as createTopAppBar } from "./top-app-bar";
+export { default as createTooltip } from "./tooltip";