mtrl 0.2.7 → 0.2.8

package/src/components/dialog/types.ts

@@ -1,5 +1,28 @@
 // src/components/dialog/types.ts
-import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS } from './constants';
+
+/**
+ * Dialog size types
+ * @category Components
+ */
+export type DialogSize = 'small' | 'medium' | 'large' | 'fullwidth' | 'fullscreen';
+
+/**
+ * Dialog animation types
+ * @category Components
+ */
+export type DialogAnimation = 'scale' | 'slide-up' | 'slide-down' | 'fade';
+
+/**
+ * Dialog footer alignment types
+ * @category Components
+ */
+export type DialogFooterAlignment = 'right' | 'left' | 'center' | 'space-between';
+
+/**
+ * Dialog event types
+ * @category Components
+ */
+export type DialogEventType = 'open' | 'close' | 'beforeopen' | 'beforeclose' | 'afteropen' | 'afterclose';
 
 /**
  * Configuration interface for the Dialog component
@@ -21,13 +44,13 @@ export interface DialogConfig {
   class?: string;
   
   /** Dialog size variant */
-  size?: keyof typeof DIALOG_SIZES | DIALOG_SIZES;
+  size?: DialogSize | string;
   
   /** Dialog animation variant */
-  animation?: keyof typeof DIALOG_ANIMATIONS | DIALOG_ANIMATIONS;
+  animation?: DialogAnimation | string;
   
   /** Footer buttons alignment */
-  footerAlignment?: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS;
+  footerAlignment?: DialogFooterAlignment | string;
   
   /** Whether dialog is initially open */
   open?: boolean;
@@ -64,7 +87,7 @@ export interface DialogConfig {
   
   /** Event handlers for dialog events */
   on?: {
-    [key in keyof typeof DIALOG_EVENTS]?: (event: DialogEvent) => void;
+    [key in DialogEventType]?: (event: DialogEvent) => void;
   };
 }
 
@@ -164,16 +187,16 @@ export interface DialogComponent {
   getButtons: () => DialogButton[];
   
   /** Sets footer alignment */
-  setFooterAlignment: (alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) => DialogComponent;
+  setFooterAlignment: (alignment: DialogFooterAlignment | string) => DialogComponent;
   
   /** Sets dialog size */
-  setSize: (size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) => DialogComponent;
+  setSize: (size: DialogSize | string) => DialogComponent;
   
   /** Adds event listener */
-  on: (event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) => DialogComponent;
+  on: (event: DialogEventType | string, handler: (event: DialogEvent) => void) => DialogComponent;
   
   /** Removes event listener */
-  off: (event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) => DialogComponent;
+  off: (event: DialogEventType | string, handler: (event: DialogEvent) => void) => DialogComponent;
   
   /** Gets dialog header element */
   getHeaderElement: () => HTMLElement | null;
@@ -220,5 +243,5 @@ export interface DialogConfirmOptions {
   cancelVariant?: string;
   
   /** Dialog size */
-  size?: keyof typeof DIALOG_SIZES | DIALOG_SIZES;
+  size?: DialogSize | string;
 }

package/src/components/divider/index.ts

@@ -1,5 +1,9 @@
 // src/components/divider/index.ts
 
-export { createDivider } from './divider';
+// Use a more explicit export to avoid bundler confusion
+import { createDivider } from './divider';
+export { createDivider };
+
+// Export types
 export type { DividerConfig } from './config';
 export type { DividerComponent } from './types';

package/src/components/extended-fab/config.ts

@@ -5,13 +5,12 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { ExtendedFabConfig } from './types';
-import { FAB_VARIANTS, EXTENDED_FAB_WIDTH } from './constants';
 
 /**
  * Default configuration for the Extended FAB component
  */
 export const defaultConfig: ExtendedFabConfig = {
-  variant: FAB_VARIANTS.PRIMARY,
+  variant: 'primary',
   type: 'button',
   ripple: true,
   iconPosition: 'start',
@@ -41,6 +40,11 @@ export const getElementConfig = (config: ExtendedFabConfig) => {
   // Build class list
   let classNames = [`${config.prefix}-extended-fab`];
   
+  // Add variant class
+  if (config.variant) {
+    classNames.push(`${config.prefix}-extended-fab--${config.variant}`);
+  }
+  
   // Add width class
   if (config.width) {
     classNames.push(`${config.prefix}-extended-fab--${config.width}`);

package/src/components/extended-fab/index.ts

@@ -1,4 +1,9 @@
 // src/components/extended-fab/index.ts
 export { default, default as createExtendedFab } from './extended-fab';
-export { FAB_VARIANTS, FAB_POSITIONS, EXTENDED_FAB_WIDTH } from './constants';
-export { ExtendedFabConfig, ExtendedFabComponent } from './types';
+export {
+  ExtendedFabConfig,
+  ExtendedFabComponent,
+  ExtendedFabVariant,
+  ExtendedFabWidth,
+  ExtendedFabPosition
+} from './types';

package/src/components/extended-fab/types.ts

@@ -1,5 +1,22 @@
 // src/components/extended-fab/types.ts
-import { FAB_VARIANTS } from '../fab/constants';
+
+/**
+ * Extended FAB variants
+ * @category Components
+ */
+export type ExtendedFabVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
+
+/**
+ * Extended FAB width behavior
+ * @category Components
+ */
+export type ExtendedFabWidth = 'fixed' | 'fluid';
+
+/**
+ * Extended FAB position
+ * @category Components
+ */
+export type ExtendedFabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 /**
  * Configuration interface for the Extended FAB component
@@ -10,7 +27,7 @@ export interface ExtendedFabConfig {
    * Extended FAB variant that determines visual styling
    * @default 'primary'
    */
-  variant?: keyof typeof FAB_VARIANTS | string;
+  variant?: ExtendedFabVariant | string;
   
   /** 
    * Whether the Extended FAB is initially disabled
@@ -57,7 +74,7 @@ export interface ExtendedFabConfig {
    * Position of the Extended FAB on the screen
    * @example 'bottom-right'
    */
-  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | string;
+  position?: ExtendedFabPosition | string;
   
   /** 
    * Button type attribute
@@ -109,7 +126,7 @@ export interface ExtendedFabConfig {
    * Width behavior of the Extended FAB
    * @default 'fixed'
    */
-  width?: 'fixed' | 'fluid';
+  width?: ExtendedFabWidth | string;
   
   /**
    * Whether the Extended FAB should collapse to a standard FAB on scroll

package/src/components/fab/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { FabConfig } from './types';
-import { FAB_VARIANTS, FAB_SIZES } from './constants';
 
 /**
  * Default configuration for the FAB component
  */
 export const defaultConfig: FabConfig = {
-  variant: FAB_VARIANTS.PRIMARY,
-  size: FAB_SIZES.DEFAULT,
+  variant: 'primary',
+  size: 'default',
   type: 'button',
   ripple: true
 };
@@ -38,7 +37,7 @@ export const getElementConfig = (config: FabConfig) => {
   };
   
   // Add size class
-  const fabSizeClass = `${config.prefix}-fab--${config.size || FAB_SIZES.DEFAULT}`;
+  const fabSizeClass = `${config.prefix}-fab--${config.size || 'default'}`;
   let classNames = [fabSizeClass];
   
   // Add animation class if specified

package/src/components/fab/fab.ts

@@ -29,7 +29,7 @@ import { createBaseConfig, getElementConfig, getApiConfig } from './config';
  * 
  * // Create a small FAB with a custom position
  * const smallFab = createFab({
- *   size: FAB_SIZES.SMALL,
+ *   size: 'small',
  *   icon: '<svg>...</svg>',
  *   variant: 'secondary',
  *   position: 'bottom-right'

package/src/components/fab/index.ts

@@ -1,4 +1,9 @@
 // src/components/fab/index.ts
 export { default, default as createFab } from './fab';
-export { FAB_VARIANTS, FAB_SIZES, FAB_POSITIONS } from './constants';
-export { FabConfig, FabComponent } from './types';
+export {
+  FabConfig,
+  FabComponent,
+  FabVariant,
+  FabSize,
+  FabPosition
+} from './types';

package/src/components/fab/types.ts

@@ -1,5 +1,22 @@
 // src/components/fab/types.ts
-import { FAB_VARIANTS, FAB_SIZES } from './constants';
+
+/**
+ * FAB variants for styling
+ * @category Components
+ */
+export type FabVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
+
+/**
+ * FAB size variants
+ * @category Components
+ */
+export type FabSize = 'small' | 'default' | 'large';
+
+/**
+ * FAB position options
+ * @category Components
+ */
+export type FabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 /**
  * Configuration interface for the FAB component
@@ -10,13 +27,13 @@ export interface FabConfig {
    * FAB variant that determines visual styling
    * @default 'primary'
    */
-  variant?: keyof typeof FAB_VARIANTS | string;
+  variant?: FabVariant | string;
   
   /** 
    * FAB size variant
    * @default 'default'
    */
-  size?: keyof typeof FAB_SIZES | string;
+  size?: FabSize | string;
   
   /** 
    * Whether the FAB is initially disabled
@@ -51,7 +68,7 @@ export interface FabConfig {
    * Position of the FAB on the screen
    * @example 'bottom-right'
    */
-  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | string;
+  position?: FabPosition | string;
   
   /** 
    * Button type attribute

package/src/components/list/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { ListConfig, BaseComponent } from './types';
-import { LIST_TYPES, LIST_LAYOUTS } from './constants';
 
 /**
  * Default configuration for the List component
  */
 export const defaultConfig: ListConfig = {
-  type: LIST_TYPES.DEFAULT,
-  layout: LIST_LAYOUTS.HORIZONTAL,
+  type: 'default',
+  layout: 'horizontal',
   items: []
 };
 
@@ -32,9 +31,9 @@ export const createBaseConfig = (config: ListConfig = {}): ListConfig =>
 export const getElementConfig = (config: ListConfig) => 
   createElementConfig(config, {
     tag: 'div',
-    role: config.type === LIST_TYPES.DEFAULT ? 'list' : 'listbox',
+    role: config.type === 'default' ? 'list' : 'listbox',
     attrs: {
-      'aria-multiselectable': config.type === LIST_TYPES.MULTI_SELECT ? 'true' : undefined
+      'aria-multiselectable': config.type === 'multi' ? 'true' : undefined
     },
     componentName: 'list',
     className: config.class

package/src/components/list/features.ts

@@ -6,7 +6,6 @@ import {
   BaseComponent,
   SelectionChangeEvent
 } from './types';
-import { LIST_TYPES, LIST_LAYOUTS } from './constants';
 import { createDivider, createSectionTitle } from './utils';
 import createListItem from './list-item';
 
@@ -23,7 +22,7 @@ export const withListContent = (config: ListConfig) =>
     const selectedItems = new Set<string>();
 
     // Set list type
-    element.setAttribute('data-type', config.type || LIST_TYPES.DEFAULT);
+    element.setAttribute('data-type', config.type || 'default');
 
     // Handle keyboard navigation
     const handleKeyDown = (event: KeyboardEvent): void => {
@@ -71,7 +70,7 @@ export const withListContent = (config: ListConfig) =>
       if (!itemData || itemData.disabled) return;
 
       switch (config.type) {
-        case LIST_TYPES.SINGLE_SELECT:
+        case 'single':
           // Deselect previously selected item
           selectedItems.forEach(selectedId => {
             const selected = items.get(selectedId);
@@ -88,7 +87,7 @@ export const withListContent = (config: ListConfig) =>
           selectedItems.add(id);
           break;
 
-        case LIST_TYPES.MULTI_SELECT:
+        case 'multi':
           const isSelected = selectedItems.has(id);
           if (isSelected) {
             itemElement.classList.remove(`${prefix}-list-item--selected`);
@@ -119,8 +118,8 @@ export const withListContent = (config: ListConfig) =>
 
         const item = createListItem({
           ...itemConfig,
-          layout: config.layout || LIST_LAYOUTS.HORIZONTAL,
-          role: config.type === LIST_TYPES.RADIO ? 'radio' : 'option'
+          layout: config.layout || 'horizontal',
+          role: config.type === 'radio' ? 'radio' : 'option'
         });
 
         item.element.dataset.id = itemConfig.id;
@@ -200,7 +199,7 @@ export const withListContent = (config: ListConfig) =>
 
         const item = createListItem({
           ...itemConfig,
-          layout: config.layout || LIST_LAYOUTS.HORIZONTAL
+          layout: config.layout || 'horizontal'
         });
 
         item.element.dataset.id = itemConfig.id;

package/src/components/list/index.ts

@@ -1,14 +1,12 @@
 // src/components/list/index.ts
-export { default } from './list'
-export { default as createListItem } from './list-item'
-export {
-  LIST_TYPES,
-  LIST_LAYOUTS,
-  LIST_ITEM_LAYOUTS
-} from './constants'
+export { default } from './list';
+export { default as createListItem } from './list-item';
 export {
   ListConfig,
   ListComponent,
   ListItemConfig,
-  ListSectionConfig
-} from './types'
+  ListSectionConfig,
+  ListType,
+  ListLayout,
+  ListItemLayout
+} from './types';

package/src/components/list/list-item.ts

@@ -4,8 +4,7 @@ import { pipe } from '../../core/compose';
 import { createBase, withElement } from '../../core/compose/component';
 import { withEvents, withDisabled } from '../../core/compose/features';
 import { ListItemConfig } from './types';
-import { LIST_ITEM_LAYOUTS, LIST_CLASSES } from './constants';
-import { createElement } from './utils';
+import { createElement, getListClass } from './utils';
 
 /**
  * Creates list item content based on configuration
@@ -16,14 +15,14 @@ import { createElement } from './utils';
 const withItemContent = (config: ListItemConfig) => (component: any): any => {
   const { element } = component;
   const prefix = config.prefix || PREFIX;
-  const isVertical = config.layout === LIST_ITEM_LAYOUTS.VERTICAL;
+  const isVertical = config.layout === 'vertical';
 
   // Create content container
-  const content = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_CONTENT}`);
+  const content = createElement('div', `${prefix}-${getListClass('ITEM_CONTENT')}`);
 
   // Add leading content (icon/avatar)
   if (config.leading) {
-    const leading = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_LEADING}`);
+    const leading = createElement('div', `${prefix}-${getListClass('ITEM_LEADING')}`);
     if (typeof config.leading === 'string') {
       leading.innerHTML = config.leading;
     } else {
@@ -33,23 +32,23 @@ const withItemContent = (config: ListItemConfig) => (component: any): any => {
   }
 
   // Text wrapper for proper alignment
-  const textWrapper = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_TEXT}`);
+  const textWrapper = createElement('div', `${prefix}-${getListClass('ITEM_TEXT')}`);
 
   // Add overline text (vertical only)
   if (isVertical && config.overline) {
-    const overline = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_OVERLINE}`, config.overline);
+    const overline = createElement('div', `${prefix}-${getListClass('ITEM_OVERLINE')}`, config.overline);
     textWrapper.appendChild(overline);
   }
 
   // Add headline (primary text)
   if (config.headline) {
-    const headline = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_HEADLINE}`, config.headline);
+    const headline = createElement('div', `${prefix}-${getListClass('ITEM_HEADLINE')}`, config.headline);
     textWrapper.appendChild(headline);
   }
 
   // Add supporting text (secondary text)
   if (config.supportingText) {
-    const supporting = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_SUPPORTING}`, config.supportingText);
+    const supporting = createElement('div', `${prefix}-${getListClass('ITEM_SUPPORTING')}`, config.supportingText);
     textWrapper.appendChild(supporting);
   }
 
@@ -57,7 +56,7 @@ const withItemContent = (config: ListItemConfig) => (component: any): any => {
 
   // Add meta information (vertical only)
   if (isVertical && config.meta) {
-    const meta = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_META}`);
+    const meta = createElement('div', `${prefix}-${getListClass('ITEM_META')}`);
     if (typeof config.meta === 'string') {
       meta.textContent = config.meta;
     } else {
@@ -70,7 +69,7 @@ const withItemContent = (config: ListItemConfig) => (component: any): any => {
 
   // Add trailing content (icon/meta)
   if (config.trailing) {
-    const trailing = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_TRAILING}`);
+    const trailing = createElement('div', `${prefix}-${getListClass('ITEM_TRAILING')}`);
     if (typeof config.trailing === 'string') {
       trailing.innerHTML = config.trailing;
     } else {
@@ -82,7 +81,7 @@ const withItemContent = (config: ListItemConfig) => (component: any): any => {
   // Handle selected state
   if (config.selected) {
     element.setAttribute('aria-selected', 'true');
-    element.classList.add(`${prefix}-${LIST_CLASSES.ITEM}--selected`);
+    element.classList.add(`${prefix}-${getListClass('ITEM')}--selected`);
   }
 
   return component;
@@ -100,7 +99,7 @@ const createListItem = (config: ListItemConfig): any => {
     prefix: PREFIX
   };
 
-  const layoutClass = config.layout === LIST_ITEM_LAYOUTS.VERTICAL ? 'vertical' : '';
+  const layoutClass = config.layout === 'vertical' ? 'vertical' : '';
   const combinedClass = `${layoutClass} ${config.class || ''}`.trim();
 
   return pipe(

package/src/components/list/types.ts

@@ -1,5 +1,50 @@
 // src/components/list/types.ts
-import { LIST_TYPES, LIST_LAYOUTS } from './constants';
+
+/**
+ * List type variants
+ * @category Components
+ */
+export type ListType = 'default' | 'single' | 'multi' | 'radio';
+
+/**
+ * List layout variants
+ * @category Components
+ */
+export type ListLayout = 'horizontal' | 'vertical';
+
+/**
+ * List item layout variants
+ * @category Components
+ */
+export type ListItemLayout = 'horizontal' | 'vertical';
+
+/**
+ * List element class names
+ * @internal
+ */
+export interface ListClasses {
+  ROOT: string;
+  GROUP: string;
+  GROUP_TITLE: string;
+  DIVIDER: string;
+  SECTION: string;
+  SECTION_TITLE: string;
+  ITEM: string;
+  ITEM_CONTENT: string;
+  ITEM_LEADING: string;
+  ITEM_TEXT: string;
+  ITEM_OVERLINE: string;
+  ITEM_HEADLINE: string;
+  ITEM_SUPPORTING: string;
+  ITEM_META: string;
+  ITEM_TRAILING: string;
+}
+
+/**
+ * List item states
+ * @internal
+ */
+export type ListItemState = 'selected' | 'disabled' | 'focused' | 'hovered';
 
 /**
  * List item configuration
@@ -9,7 +54,7 @@ export interface ListItemConfig {
   id: string;
   
   /** Item layout (horizontal/vertical) */
-  layout?: keyof typeof LIST_LAYOUTS | string;
+  layout?: ListLayout | string;
   
   /** Leading content (icon/avatar) */
   leading?: string | HTMLElement;
@@ -70,7 +115,7 @@ export interface SelectionChangeEvent {
   item?: ListItemData;
   
   /** List selection type */
-  type: keyof typeof LIST_TYPES | string;
+  type: ListType | string;
 }
 
 /**
@@ -92,10 +137,10 @@ export interface ListItemData {
  */
 export interface ListConfig {
   /** List selection type */
-  type?: keyof typeof LIST_TYPES | string;
+  type?: ListType | string;
   
   /** List layout */
-  layout?: keyof typeof LIST_LAYOUTS | string;
+  layout?: ListLayout | string;
   
   /** List items */
   items?: ListItemConfig[];

package/src/components/list/utils.ts

@@ -1,5 +1,23 @@
 // src/components/list/utils.ts
-import { LIST_CLASSES } from './constants';
+
+// List element class names as strings for internal use
+const LIST_CLASS_NAMES = {
+  ROOT: 'list',
+  GROUP: 'list-group',
+  GROUP_TITLE: 'list-group-title',
+  DIVIDER: 'list-divider',
+  SECTION: 'list-section',
+  SECTION_TITLE: 'list-section-title',
+  ITEM: 'list-item',
+  ITEM_CONTENT: 'list-item-content',
+  ITEM_LEADING: 'list-item-leading',
+  ITEM_TEXT: 'list-item-text',
+  ITEM_OVERLINE: 'list-item-overline',
+  ITEM_HEADLINE: 'list-item-headline',
+  ITEM_SUPPORTING: 'list-item-supporting',
+  ITEM_META: 'list-item-meta',
+  ITEM_TRAILING: 'list-item-trailing'
+};
 
 /**
  * Creates a divider element
@@ -8,7 +26,7 @@ import { LIST_CLASSES } from './constants';
  */
 export const createDivider = (prefix: string): HTMLElement => {
   const divider = document.createElement('div');
-  divider.className = `${prefix}-${LIST_CLASSES.DIVIDER}`;
+  divider.className = `${prefix}-${LIST_CLASS_NAMES.DIVIDER}`;
   divider.setAttribute('role', 'separator');
   return divider;
 };
@@ -21,7 +39,7 @@ export const createDivider = (prefix: string): HTMLElement => {
  */
 export const createSectionTitle = (title: string, prefix: string): HTMLElement => {
   const titleEl = document.createElement('div');
-  titleEl.className = `${prefix}-${LIST_CLASSES.SECTION_TITLE}`;
+  titleEl.className = `${prefix}-${LIST_CLASS_NAMES.SECTION_TITLE}`;
   titleEl.textContent = title;
   return titleEl;
 };
@@ -44,4 +62,13 @@ export const createElement = (tag: string, className: string, content?: string |
     }
   }
   return element;
+};
+
+/**
+ * Gets the class name for a list element
+ * @param {string} element - Element name
+ * @returns {string} The class name string
+ */
+export const getListClass = (element: keyof typeof LIST_CLASS_NAMES): string => {
+  return LIST_CLASS_NAMES[element];
 };