mtrl 0.2.6 → 0.2.8

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];
 };

package/src/components/menu/features/items-manager.ts

@@ -1,6 +1,6 @@
 // src/components/menu/features/items-manager.ts
 import { createMenuItem } from '../menu-item';
-import { MENU_EVENTS } from '../constants';
+import { MENU_EVENT } from '../utils';
 import { BaseComponent, MenuConfig, MenuItemConfig, MenuItemData } from '../types';
 
 interface SubmenuMap {
@@ -63,8 +63,8 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
     });
 
     // Handle submenu selection
-    submenu.on?.(MENU_EVENTS.SELECT, (detail: any) => {
-      component.emit?.(MENU_EVENTS.SELECT, {
+    submenu.on?.(MENU_EVENT.SELECT, (detail: any) => {
+      component.emit?.(MENU_EVENT.SELECT, {
         name: `${name}:${detail.name}`,
         text: detail.text,
         path: [name, detail.name]
@@ -116,7 +116,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
       });
 
       // Emit submenu open event
-      component.emit?.(MENU_EVENTS.SUBMENU_OPEN, { name });
+      component.emit?.(MENU_EVENT.SUBMENU_OPEN, { name });
     }
   };
 
@@ -143,7 +143,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
     activeSubmenu = null;
 
     // Emit submenu close event
-    component.emit?.(MENU_EVENTS.SUBMENU_CLOSE, { name });
+    component.emit?.(MENU_EVENT.SUBMENU_CLOSE, { name });
   };
 
   /**
@@ -160,7 +160,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
     
     // Cancel any pending close timer for this item
     if (closeTimers.has(name)) {
-      window.clearTimeout(closeTimers.get(name));
+      window.clearTimeout(closeTimers.get(name)!);
       closeTimers.delete(name);
     }
     
@@ -194,7 +194,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
     if (submenu && submenu.element) {
       // Cancel any existing close timer for this item
       if (closeTimers.has(name)) {
-        window.clearTimeout(closeTimers.get(name));
+        window.clearTimeout(closeTimers.get(name)!);
       }
 
       // Set a new close timer
@@ -254,7 +254,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
     // For regular items, emit select event
     const name = item.getAttribute('data-name');
     if (name) {
-      component.emit?.(MENU_EVENTS.SELECT, { name, text: item.textContent });
+      component.emit?.(MENU_EVENT.SELECT, { name, text: item.textContent });
       // Hide menu after selection unless configured otherwise
       if (!config.stayOpenOnSelect) {
         component.hide?.();
@@ -430,7 +430,7 @@ export const withItemsManager = (config: MenuConfig) => (component: BaseComponen
 
     /**
      * Gets all registered items
-     * @returns {Map<string, MenuItemConfig>} Map of item names to configurations
+     * @returns {Map<string, MenuItemData>} Map of item names to data
      */
     getItems(): Map<string, MenuItemData> {
       const result = new Map<string, MenuItemData>();

package/src/components/menu/features/positioning.ts

@@ -1,6 +1,6 @@
 // src/components/menu/features/positioning.ts
 import { BaseComponent, MenuPositionConfig, MenuPosition } from '../types';
-import { MENU_ALIGN, MENU_VERTICAL_ALIGN } from '../constants';
+import { MENU_ALIGNMENT, MENU_VERTICAL_ALIGNMENT } from '../utils';
 
 /**
  * Positions a menu element relative to a target element
@@ -34,8 +34,8 @@ export const positionMenu = (
   menuElement.style.opacity = originalOpacity;
 
   const {
-    align = MENU_ALIGN.LEFT,
-    vAlign = MENU_VERTICAL_ALIGN.BOTTOM,
+    align = MENU_ALIGNMENT.LEFT,
+    vAlign = MENU_VERTICAL_ALIGNMENT.BOTTOM,
     offsetX = 0,
     offsetY = 0
   } = options;
@@ -44,16 +44,16 @@ export const positionMenu = (
   let top = targetRect.bottom + offsetY;
 
   // Handle horizontal alignment
-  if (align === MENU_ALIGN.RIGHT) {
+  if (align === MENU_ALIGNMENT.RIGHT) {
     left = targetRect.right - menuRect.width + offsetX;
-  } else if (align === MENU_ALIGN.CENTER) {
+  } else if (align === MENU_ALIGNMENT.CENTER) {
     left = targetRect.left + (targetRect.width - menuRect.width) / 2 + offsetX;
   }
 
   // Handle vertical alignment
-  if (vAlign === MENU_VERTICAL_ALIGN.TOP) {
+  if (vAlign === MENU_VERTICAL_ALIGNMENT.TOP) {
     top = targetRect.top - menuRect.height + offsetY;
-  } else if (vAlign === MENU_VERTICAL_ALIGN.MIDDLE) {
+  } else if (vAlign === MENU_VERTICAL_ALIGNMENT.MIDDLE) {
     top = targetRect.top + (targetRect.height - menuRect.height) / 2 + offsetY;
   }
 

package/src/components/menu/features/visibility.ts

@@ -1,6 +1,6 @@
 // src/components/menu/features/visibility.ts
 import { BaseComponent, MenuConfig } from '../types';
-import { MENU_EVENTS } from '../constants';
+import { MENU_EVENT, MENU_CLASSES } from '../utils';
 
 /**
  * Adds visibility management functionality to a menu component
@@ -56,11 +56,11 @@ export const withVisibility = (config: MenuConfig) => (component: BaseComponent)
       // Force a reflow before adding the visible class for animation
       // eslint-disable-next-line no-void
       void component.element.offsetHeight;
-      component.element.classList.add(`${prefix}-menu--visible`);
+      component.element.classList.add(`${prefix}-${MENU_CLASSES.VISIBLE}`);
       component.element.setAttribute('aria-hidden', 'false');
 
       // Emit open event
-      component.emit?.(MENU_EVENTS.OPEN, {});
+      component.emit?.(MENU_EVENT.OPEN, {});
 
       return this;
     },
@@ -92,7 +92,7 @@ export const withVisibility = (config: MenuConfig) => (component: BaseComponent)
       }
 
       // Hide the menu with visual indication first
-      component.element.classList.remove(`${prefix}-menu--visible`);
+      component.element.classList.remove(`${prefix}-${MENU_CLASSES.VISIBLE}`);
       component.element.setAttribute('aria-hidden', 'true');
 
       // Define a reliable cleanup function
@@ -123,7 +123,7 @@ export const withVisibility = (config: MenuConfig) => (component: BaseComponent)
       setTimeout(cleanupElement, 300);
 
       // Emit close event
-      component.emit?.(MENU_EVENTS.CLOSE, {});
+      component.emit?.(MENU_EVENT.CLOSE, {});
 
       return this;
     },
@@ -145,7 +145,7 @@ export const withVisibility = (config: MenuConfig) => (component: BaseComponent)
     if (!isVisible) return;
 
     // Store the opening button if available
-    const openingButton = config.openingButton?.element;
+    const origin = config.origin?.element;
 
     // Check if click is outside the menu but not on the opening button
     const clickedElement = event.target as Node;
@@ -156,7 +156,7 @@ export const withVisibility = (config: MenuConfig) => (component: BaseComponent)
     }
 
     // Don't close if the click is on the opening button (it will handle opening/closing)
-    if (openingButton && (openingButton === clickedElement || openingButton.contains(clickedElement))) {
+    if (origin && (origin === clickedElement || origin.contains(clickedElement))) {
       return;
     }
 

package/src/components/menu/index.ts

@@ -1,14 +1,12 @@
 // src/components/menu/index.ts
-export { default } from './menu'
-export {
-  MENU_ALIGN,
-  MENU_VERTICAL_ALIGN,
-  MENU_ITEM_TYPES,
-  MENU_EVENTS
-} from './constants'
+export { default } from './menu';
 export {
   MenuConfig,
   MenuComponent,
   MenuItemConfig,
-  MenuPositionConfig
-} from './types'
+  MenuPositionConfig,
+  MenuAlign,
+  MenuVerticalAlign,
+  MenuItemType,
+  MenuEvent
+} from './types';

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

@@ -1,6 +1,6 @@
 // src/components/menu/menu-item.ts
 import { MenuItemConfig } from './types';
-import { MENU_ITEM_TYPES } from './constants';
+import { MENU_ITEM_TYPE, getMenuClass } from './utils';
 
 /**
  * Creates a menu item element
@@ -10,10 +10,10 @@ import { MENU_ITEM_TYPES } from './constants';
  */
 export const createMenuItem = (itemConfig: MenuItemConfig, prefix: string): HTMLElement => {
   const item = document.createElement('li');
-  item.className = `${prefix}-menu-item`;
+  item.className = `${prefix}-${getMenuClass('ITEM')}`;
 
-  if (itemConfig.type === MENU_ITEM_TYPES.DIVIDER) {
-    item.className = `${prefix}-menu-divider`;
+  if (itemConfig.type === MENU_ITEM_TYPE.DIVIDER) {
+    item.className = `${prefix}-${getMenuClass('DIVIDER')}`;
     return item;
   }
 
@@ -23,7 +23,7 @@ export const createMenuItem = (itemConfig: MenuItemConfig, prefix: string): HTML
 
   if (itemConfig.disabled) {
     item.setAttribute('aria-disabled', 'true');
-    item.className += ` ${prefix}-menu-item--disabled`;
+    item.className += ` ${prefix}-${getMenuClass('ITEM')}--disabled`;
   }
 
   if (itemConfig.name) {
@@ -33,7 +33,7 @@ export const createMenuItem = (itemConfig: MenuItemConfig, prefix: string): HTML
   item.textContent = itemConfig.text || '';
 
   if (itemConfig.items?.length) {
-    item.className += ` ${prefix}-menu-item--submenu`;
+    item.className += ` ${prefix}-${getMenuClass('ITEM')}--submenu`;
     item.setAttribute('aria-haspopup', 'true');
     item.setAttribute('aria-expanded', 'false');
     // We don't need to add a submenu indicator as it's handled by CSS ::after

package/src/components/menu/menu.ts

@@ -18,6 +18,28 @@ import {
  * Creates a new Menu component
  * @param {MenuConfig} config - Menu configuration
  * @returns {MenuComponent} Menu component instance
+ * 
+ * @example
+ * ```typescript
+ * // Create a basic menu with items
+ * const menu = createMenu({
+ *   items: [
+ *     { name: 'item1', text: 'Option 1' },
+ *     { name: 'item2', text: 'Option 2' },
+ *     { type: 'divider' },
+ *     { name: 'item3', text: 'Option 3' }
+ *   ]
+ * });
+ * 
+ * // Show the menu positioned relative to a button
+ * const button = document.getElementById('menuButton');
+ * menu.position(button).show();
+ * 
+ * // Listen for item selection
+ * menu.on('select', (event) => {
+ *   console.log(`Selected: ${event.name}`);
+ * });
+ * ```
  */
 const createMenu = (config: MenuConfig = {}): MenuComponent => {
   const baseConfig = createBaseConfig(config);

package/src/components/menu/types.ts

@@ -1,9 +1,28 @@
 // src/components/menu/types.ts
-import { 
-  MENU_ALIGN, 
-  MENU_VERTICAL_ALIGN, 
-  MENU_ITEM_TYPES 
-} from './constants';
+
+/**
+ * Menu alignment options
+ * @category Components
+ */
+export type MenuAlign = 'left' | 'right' | 'center';
+
+/**
+ * Menu vertical alignment options
+ * @category Components
+ */
+export type MenuVerticalAlign = 'top' | 'bottom' | 'middle';
+
+/**
+ * Menu item types
+ * @category Components
+ */
+export type MenuItemType = 'item' | 'divider';
+
+/**
+ * Menu events
+ * @category Components
+ */
+export type MenuEvent = 'select' | 'open' | 'close' | 'submenuOpen' | 'submenuClose';
 
 /**
  * Menu item configuration
@@ -16,7 +35,7 @@ export interface MenuItemConfig {
   text: string;
   
   /** Type of menu item */
-  type?: keyof typeof MENU_ITEM_TYPES | string;
+  type?: MenuItemType | string;
   
   /** Whether the item is disabled */
   disabled?: boolean;
@@ -33,10 +52,10 @@ export interface MenuItemConfig {
  */
 export interface MenuPositionConfig {
   /** Horizontal alignment */
-  align?: keyof typeof MENU_ALIGN | string;
+  align?: MenuAlign | string;
   
   /** Vertical alignment */
-  vAlign?: keyof typeof MENU_VERTICAL_ALIGN | string;
+  vAlign?: MenuVerticalAlign | string;
   
   /** Horizontal offset in pixels */
   offsetX?: number;
@@ -94,8 +113,8 @@ export interface MenuConfig {
   /** Whether to keep menu open after selection */
   stayOpenOnSelect?: boolean;
   
-  /** Button element that opens the menu */
-  openingButton?: HTMLElement | { element: HTMLElement };
+  /** Orgin element that opens the menu */
+  origin?: HTMLElement | { element: HTMLElement };
   
   /** Parent item element (for submenus) */
   parentItem?: HTMLElement;

package/src/components/menu/utils.ts

@@ -0,0 +1,67 @@
+// src/components/menu/utils.ts
+
+/**
+ * Menu alignment constants for internal use
+ * @internal
+ */
+export const MENU_ALIGNMENT = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center'
+};
+
+/**
+ * Menu vertical alignment constants for internal use
+ * @internal
+ */
+export const MENU_VERTICAL_ALIGNMENT = {
+  TOP: 'top',
+  BOTTOM: 'bottom',
+  MIDDLE: 'middle'
+};
+
+/**
+ * Menu item types for internal use
+ * @internal
+ */
+export const MENU_ITEM_TYPE = {
+  ITEM: 'item',
+  DIVIDER: 'divider'
+};
+
+/**
+ * Menu events for internal use
+ * @internal
+ */
+export const MENU_EVENT = {
+  SELECT: 'select',
+  OPEN: 'open',
+  CLOSE: 'close',
+  SUBMENU_OPEN: 'submenuOpen',
+  SUBMENU_CLOSE: 'submenuClose'
+};
+
+/**
+ * Menu CSS classes for internal use
+ * @internal
+ */
+export const MENU_CLASSES = {
+  ROOT: 'menu',
+  ITEM: 'menu-item',
+  ITEM_CONTAINER: 'menu-item-container',
+  LIST: 'menu-list',
+  DIVIDER: 'menu-divider',
+  SUBMENU: 'menu--submenu',
+  VISIBLE: 'menu--visible',
+  DISABLED: 'menu--disabled'
+};
+
+/**
+ * Gets a class name for menu elements
+ * @param {string} element - Element name from MENU_CLASSES
+ * @returns {string} The class name
+ * @internal
+ */
+export const getMenuClass = (element: keyof typeof MENU_CLASSES): string => {
+  return MENU_CLASSES[element];
+};

package/src/components/navigation/api.ts

@@ -1,79 +1,107 @@
-// src/components/navigation/api.ts
-import { 
-  BaseComponent, 
-  NavigationComponent, 
-  ApiOptions, 
-  NavItemConfig,
-  NavItemData
-} from './types';
+// src/components/button/api.ts
+import { ButtonComponent } from './types';
+
+interface ApiOptions {
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+interface ComponentWithElements {
+  element: HTMLElement;
+  text: {
+    setText: (content: string) => any;
+    getText: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  icon: {
+    setIcon: (html: string) => any;
+    getIcon: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  getClass: (name: string) => string;
+}
 
 /**
- * Enhances navigation component with API methods
- * @param {ApiOptions} options - API configuration
+ * Enhances a button component with API methods
+ * @param {ApiOptions} options - API configuration options
  * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Button component
  */
 export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
-  (component: BaseComponent): NavigationComponent => ({
+  (component: ComponentWithElements): ButtonComponent => ({
     ...component as any,
-    element: component.element,
-    items: component.items as Map<string, NavItemData>,
-
-    // Item management
-    addItem(config: NavItemConfig): NavigationComponent {
-      component.addItem?.(config);
-      return this;
-    },
+    element: component.element as HTMLButtonElement,
+    
+    getValue: () => component.element.value,
     
-    removeItem(id: string): NavigationComponent {
-      component.removeItem?.(id);
+    setValue(value: string) {
+      component.element.value = value;
       return this;
     },
     
-    getItem(id: string): NavItemData | undefined {
-      return component.getItem?.(id);
+    enable() {
+      disabled.enable();
+      return this;
     },
     
-    getAllItems(): NavItemData[] {
-      return component.getAllItems?.() || [];
+    disable() {
+      disabled.disable();
+      return this;
     },
     
-    getItemPath(id: string): string[] {
-      return component.getItemPath?.(id) || [];
-    },
-
-    // Active state management
-    setActive(id: string): NavigationComponent {
-      component.setActive?.(id);
+    setText(content: string) {
+      component.text.setText(content);
+      this.updateCircularStyle();
+      
+      // If removing text from a button with an icon, ensure it has an accessible name
+      if (!content && component.icon.getElement()) {
+        if (!this.element.getAttribute('aria-label')) {
+          const className = this.element.className.split(' ')
+            .find(cls => !cls.startsWith(`${component.getClass('button')}`));
+          
+          if (className) {
+            this.element.setAttribute('aria-label', className);
+          }
+        }
+      }
+      
       return this;
     },
     
-    getActive(): NavItemData | null {
-      return component.getActive?.() || null;
-    },
-
-    // Event handling
-    on(event: string, handler: Function): NavigationComponent {
-      component.on?.(event, handler);
-      return this;
+    getText() {
+      return component.text.getText();
     },
     
-    off(event: string, handler: Function): NavigationComponent {
-      component.off?.(event, handler);
+    setIcon(icon: string) {
+      component.icon.setIcon(icon);
+      this.updateCircularStyle();
       return this;
     },
-
-    // State management
-    enable(): NavigationComponent {
-      disabled.enable();
-      return this;
+    
+    getIcon() {
+      return component.icon.getIcon();
     },
     
-    disable(): NavigationComponent {
-      disabled.disable();
+    setAriaLabel(label: string) {
+      component.element.setAttribute('aria-label', label);
       return this;
     },
     
-    destroy(): void {
+    destroy() {
       lifecycle.destroy();
+    },
+    
+    updateCircularStyle() {
+      const hasText = component.text.getText();
+      if (!hasText && component.icon.getElement()) {
+        component.element.classList.add(`${component.getClass('button')}--circular`);
+      } else {
+        component.element.classList.remove(`${component.getClass('button')}--circular`);
+      }
     }
   });

package/src/components/navigation/config.ts

@@ -5,15 +5,14 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { NavigationConfig, BaseComponent, ApiOptions } from './types';
-import { NAV_VARIANTS, NAV_POSITIONS, NAV_BEHAVIORS } from './constants';
 
 /**
  * Default configuration for the Navigation component
  */
 export const defaultConfig: NavigationConfig = {
-  variant: NAV_VARIANTS.RAIL,
-  position: NAV_POSITIONS.LEFT,
-  behavior: NAV_BEHAVIORS.FIXED,
+  variant: 'rail',
+  position: 'left',
+  behavior: 'fixed',
   items: [],
   showLabels: true,
   scrimEnabled: false
@@ -32,16 +31,29 @@ export const createBaseConfig = (config: NavigationConfig = {}): NavigationConfi
  * @param {NavigationConfig} config - Navigation configuration
  * @returns {Object} Element configuration object for withElement
  */
-export const getElementConfig = (config: NavigationConfig) => 
-  createElementConfig(config, {
+export const getElementConfig = (config: NavigationConfig) => {
+  // Build class list - start with the variant class
+  const variantClass = config.variant ? `${config.prefix}-nav--${config.variant}` : '';
+  
+  // Add position class if specified
+  const positionClass = config.position ? `${config.prefix}-nav--${config.position}` : '';
+  
+  // Add user-provided classes
+  const userClass = config.class || '';
+  
+  // Combine all classes
+  const classNames = [variantClass, positionClass, userClass].filter(Boolean);
+  
+  return createElementConfig(config, {
     tag: 'nav',
     componentName: 'nav',
     attrs: {
       role: 'navigation',
       'aria-label': config.ariaLabel || 'Main Navigation'
     },
-    className: config.class
+    className: classNames
   });
+};
 
 /**
  * Creates API configuration for the Navigation component
@@ -50,11 +62,11 @@ export const getElementConfig = (config: NavigationConfig) =>
  */
 export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
   disabled: {
-    enable: comp.disabled?.enable,
-    disable: comp.disabled?.disable
+    enable: comp.disabled?.enable || (() => {}),
+    disable: comp.disabled?.disable || (() => {})
   },
   lifecycle: {
-    destroy: comp.lifecycle?.destroy
+    destroy: comp.lifecycle?.destroy || (() => {})
   }
 });