mtrl 0.2.7 → 0.2.8

package/src/components/navigation/nav-item.ts

@@ -1,17 +1,5 @@
 // src/components/navigation/nav-item.ts
-
-// Simple interface for NavItemConfig if not imported
-interface NavItemConfig {
-  id: string;
-  icon?: string;
-  label?: string;
-  badge?: string;
-  disabled?: boolean;
-  active?: boolean;
-  expanded?: boolean;
-  items?: NavItemConfig[];
-  [key: string]: any;
-}
+import { NavItemConfig, NavClass } from './types';
 
 /**
  * Creates an expand/collapse icon element
@@ -20,7 +8,7 @@ interface NavItemConfig {
  */
 export const createExpandIcon = (prefix: string): HTMLElement => {
   const icon = document.createElement('span');
-  icon.className = `${prefix}-nav-expand-icon`;
+  icon.className = `${prefix}-${NavClass.EXPAND_ICON}`;
   icon.innerHTML = `
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
       <polyline points="9 18 15 12 9 6"></polyline>
@@ -42,7 +30,7 @@ export const createNestedContainer = (
   createItem: (config: NavItemConfig, container: HTMLElement, prefix: string) => HTMLElement
 ): HTMLElement => {
   const container = document.createElement('div');
-  container.className = `${prefix}-nav-nested-container`;
+  container.className = `${prefix}-${NavClass.NESTED_CONTAINER}`;
   
   // Use appropriate role for nested menu
   container.setAttribute('role', 'menu');
@@ -68,7 +56,7 @@ export const createNavItem = (
   prefix: string
 ): HTMLElement => {
   const itemContainer = document.createElement('div');
-  itemContainer.className = `${prefix}-nav-item-container`;
+  itemContainer.className = `${prefix}-${NavClass.ITEM_CONTAINER}`;
 
   // Determine if parent container uses tabs or menu role pattern
   const isMenuContext = container.getAttribute('role') === 'menu';
@@ -77,7 +65,7 @@ export const createNavItem = (
   
   // Create the item element
   const itemElement = document.createElement('button');
-  itemElement.className = `${prefix}-nav-item`;
+  itemElement.className = `${prefix}-${NavClass.ITEM}`;
   itemElement.type = 'button'; // Ensure it's a button type for proper behavior
   
   // Set appropriate role based on context and items
@@ -114,7 +102,7 @@ export const createNavItem = (
   // Add icon if provided
   if (config.icon) {
     const icon = document.createElement('span');
-    icon.className = `${prefix}-nav-item-icon`;
+    icon.className = `${prefix}-${NavClass.ICON}`;
     icon.innerHTML = config.icon;
     itemElement.appendChild(icon);
   }
@@ -122,7 +110,7 @@ export const createNavItem = (
   // Add label if provided
   if (config.label) {
     const label = document.createElement('span');
-    label.className = `${prefix}-nav-item-label`;
+    label.className = `${prefix}-${NavClass.LABEL}`;
     label.textContent = config.label;
     itemElement.appendChild(label);
     itemElement.setAttribute('aria-label', config.label);
@@ -131,7 +119,7 @@ export const createNavItem = (
   // Add badge if provided
   if (config.badge) {
     const badge = document.createElement('span');
-    badge.className = `${prefix}-nav-item-badge`;
+    badge.className = `${prefix}-${NavClass.BADGE}`;
     badge.textContent = config.badge;
     // Use appropriate aria labeling
     badge.setAttribute('aria-label', `${config.badge} notifications`);
@@ -140,7 +128,7 @@ export const createNavItem = (
 
   // Mark active state with appropriate semantics
   if (config.active && !config.items?.length) {
-    itemElement.classList.add(`${prefix}-nav-item--active`);
+    itemElement.classList.add(`${prefix}-${NavClass.ITEM}--active`);
     
     // Use aria-current for standard navigation
     if (!isTabContext) {
@@ -184,13 +172,13 @@ export const createNavItem = (
  * @returns {Array<HTMLElement>} Array of all nested items
  */
 export const getAllNestedItems = (item: HTMLElement, prefix: string): HTMLElement[] => {
-  const container = item.closest(`.${prefix}-nav-item-container`);
+  const container = item.closest(`.${prefix}-${NavClass.ITEM_CONTAINER}`);
   if (!container) return [];
 
-  const nestedContainer = container.querySelector(`.${prefix}-nav-nested-container`);
+  const nestedContainer = container.querySelector(`.${prefix}-${NavClass.NESTED_CONTAINER}`);
   if (!nestedContainer) return [];
 
-  const items = Array.from(nestedContainer.querySelectorAll(`.${prefix}-nav-item`)) as HTMLElement[];
+  const items = Array.from(nestedContainer.querySelectorAll(`.${prefix}-${NavClass.ITEM}`)) as HTMLElement[];
   return items.reduce((acc: HTMLElement[], nestedItem: HTMLElement) => {
     return [...acc, nestedItem, ...getAllNestedItems(nestedItem, prefix)];
   }, []);

package/src/components/navigation/navigation.ts

@@ -10,13 +10,12 @@ import {
 } from '../../core/compose/features';
 import { withAPI } from './api';
 import { withNavItems } from './features/items';
-import { NavigationConfig, NavigationComponent } from './types';
+import { NavigationConfig, NavigationComponent, NavVariant } from './types';
 import { 
   createBaseConfig, 
   getElementConfig,
   getApiConfig
 } from './config';
-import { NAV_VARIANTS } from './constants';
 
 /**
  * Sets up proper ARIA roles based on navigation variant
@@ -32,7 +31,7 @@ const setupAccessibility = (nav: NavigationComponent, config: NavigationConfig):
   element.setAttribute('aria-label', config.ariaLabel || 'Main Navigation');
 
   // For bar navigation (bottom or top nav)
-  if (variant === NAV_VARIANTS.BAR) {
+  if (variant === 'bar') {
     // If bar navigation is acting as tabs
     const hasNestedItems = config.items?.some(item => item.items?.length) || false;
     
@@ -51,9 +50,8 @@ const setupAccessibility = (nav: NavigationComponent, config: NavigationConfig):
   }
 
   // Set hidden state for modal drawers if needed
-  if ((variant === NAV_VARIANTS.DRAWER_MODAL || 
-       variant === 'modal' || 
-       (variant === NAV_VARIANTS.DRAWER && config.behavior === 'dismissible')) && 
+  if ((variant === 'modal' || 
+       (variant === 'drawer' && config.behavior === 'dismissible')) && 
       !config.expanded) {
     element.classList.add(`${prefix}-nav--hidden`);
   }

package/src/components/navigation/types.ts

@@ -1,234 +1,259 @@
-// src/components/button/types.ts
-import { BUTTON_VARIANTS } from './constants';
+// src/components/navigation/types.ts
 
 /**
- * Configuration interface for the Button component
+ * Navigation variants following Material Design 3
  * @category Components
  */
-export interface ButtonConfig {
-  /** 
-   * Button variant that determines visual styling
-   * @default 'filled'
-   */
-  variant?: keyof typeof BUTTON_VARIANTS | string;
-  
-  /** 
-   * Whether the button is initially disabled
-   * @default false
-   */
+export type NavVariant = 'rail' | 'drawer' | 'bar' | 'modal' | 'standard';
+
+/**
+ * Navigation positions
+ * @category Components
+ */
+export type NavPosition = 'left' | 'right' | 'top' | 'bottom';
+
+/**
+ * Navigation behaviors
+ * @category Components
+ */
+export type NavBehavior = 'fixed' | 'dismissible' | 'modal';
+
+/**
+ * Navigation item state
+ * @category Components
+ */
+export type NavItemState = 'active' | 'disabled' | 'expanded' | 'collapsed' | 'hovered' | 'focused' | 'pressed';
+
+/**
+ * Navigation element class names
+ * Used internally to maintain consistent class names
+ * @internal
+ */
+export const NavClass = {
+  ITEM: 'nav-item',
+  ITEM_CONTAINER: 'nav-item-container',
+  ICON: 'nav-item-icon',
+  LABEL: 'nav-item-label',
+  BADGE: 'nav-item-badge',
+  DIVIDER: 'nav-divider',
+  SCRIM: 'nav-scrim',
+  GROUP: 'nav-group',
+  GROUP_TITLE: 'nav-group-title',
+  SUBTITLE: 'nav-subtitle',
+  NESTED_CONTAINER: 'nav-nested-container',
+  NESTED_ITEM: 'nav-nested-item',
+  EXPAND_ICON: 'nav-expand-icon'
+} as const;
+
+/**
+ * Navigation item configuration
+ */
+export interface NavItemConfig {
+  /** Unique identifier for the item */
+  id: string;
+  
+  /** Icon HTML content */
+  icon?: string;
+  
+  /** Text label */
+  label?: string;
+  
+  /** Badge text */
+  badge?: string;
+  
+  /** Whether the item is disabled */
   disabled?: boolean;
   
-  /** 
-   * Initial button text content
-   * @example 'Submit'
-   */
-  text?: string;
+  /** Whether the item is active */
+  active?: boolean;
   
-  /** 
-   * Initial button icon HTML content
-   * @example '<svg>...</svg>'
-   */
-  icon?: string;
+  /** Whether nested items are expanded */
+  expanded?: boolean;
   
-  /** 
-   * Icon size in pixels or other CSS units
-   * @example '18px'
-   */
-  iconSize?: string;
+  /** Subtitle text (for drawer items) */
+  subtitle?: string;
   
-  /** 
-   * Additional CSS classes to add to the button
-   * @example 'form-submit header-action'
-   */
-  class?: string;
+  /** Group ID this item belongs to */
+  groupId?: string;
+  
+  /** Nested navigation items */
+  items?: NavItemConfig[];
+}
+
+/**
+ * Navigation group configuration
+ */
+export interface NavGroupConfig {
+  /** Unique identifier for the group */
+  id: string;
   
-  /** 
-   * Button value attribute
-   */
-  value?: string;
-  
-  /** 
-   * Button type attribute
-   * @default 'button'
-   */
-  type?: 'button' | 'submit' | 'reset';
-  
-  /** 
-   * Whether to enable ripple effect
-   * @default true
-   */
-  ripple?: boolean;
+  /** Group title text */
+  title: string;
+  
+  /** Whether the group is expanded */
+  expanded?: boolean;
+}
 
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
+/**
+ * Navigation item data
+ */
+export interface NavItemData {
+  /** The item's DOM element */
+  element: HTMLElement;
+  
+  /** Item configuration */
+  config: NavItemConfig;
+}
+
+/**
+ * Navigation change event data
+ */
+export interface NavChangeEvent {
+  /** ID of the selected item */
+  id: string;
+  
+  /** Selected item data */
+  item: NavItemData;
+  
+  /** Previously selected item data */
+  previousItem?: NavItemData | null;
+  
+  /** Path of parent item IDs */
+  path: string[];
+}
+
+/**
+ * Configuration interface for the Navigation component
+ */
+export interface NavigationConfig {
+  /** Navigation variant */
+  variant?: NavVariant | string;
+  
+  /** Navigation position */
+  position?: NavPosition | string;
+  
+  /** Navigation behavior */
+  behavior?: NavBehavior | string;
+  
+  /** Navigation items */
+  items?: NavItemConfig[];
+  
+  /** Navigation groups */
+  groups?: NavGroupConfig[];
+  
+  /** Whether the navigation is disabled */
+  disabled?: boolean;
+  
+  /** Whether the navigation is expanded (for drawer) */
+  expanded?: boolean;
+  
+  /** Whether to show item labels */
+  showLabels?: boolean;
+  
+  /** Whether to enable background scrim (for modal drawer) */
+  scrimEnabled?: boolean;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Accessibility label */
+  ariaLabel?: string;
+  
+  /** Component prefix for class names */
   prefix?: string;
   
-  /**
-   * Component name used in class generation
-   */
+  /** Component name */
   componentName?: string;
+}
+
+/**
+ * Navigation component interface
+ */
+export interface NavigationComponent {
+  /** The navigation's DOM element */
+  element: HTMLElement;
   
-  /** 
-   * Ripple effect configuration
-   */
-  rippleConfig?: {
-    /** Duration of the ripple animation in milliseconds */
-    duration?: number;
-    /** Timing function for the ripple animation */
-    timing?: string;
-    /** Opacity values for ripple start and end [start, end] */
-    opacity?: [string, string];
-  };
+  /** Map of navigation items */
+  items: Map<string, NavItemData>;
   
-  /**
-   * Accessible name for the button (aria-label)
-   * Required for icon-only buttons without text
-   */
-  ariaLabel?: string;
+  /** Adds a navigation item */
+  addItem: (config: NavItemConfig) => NavigationComponent;
+  
+  /** Removes a navigation item */
+  removeItem: (id: string) => NavigationComponent;
+  
+  /** Gets a navigation item by ID */
+  getItem: (id: string) => NavItemData | undefined;
+  
+  /** Gets all navigation items */
+  getAllItems: () => NavItemData[];
+  
+  /** Gets the active navigation item */
+  getActive: () => NavItemData | null;
+  
+  /** Gets the path to an item (parent IDs) */
+  getItemPath: (id: string) => string[];
   
-  /**
-   * Descriptive name for the button
-   * Used to derive an accessible name for icon-only buttons
-   */
-  name?: string;
+  /** Sets the active navigation item */
+  setActive: (id: string) => NavigationComponent;
+  
+  /** Enables the navigation */
+  enable: () => NavigationComponent;
+  
+  /** Disables the navigation */
+  disable: () => NavigationComponent;
+  
+  /** Expands the navigation (for drawer) */
+  expand: () => NavigationComponent;
+  
+  /** Collapses the navigation (for drawer) */
+  collapse: () => NavigationComponent;
+  
+  /** Checks if the navigation is expanded */
+  isExpanded: () => boolean;
+  
+  /** Toggles the navigation expansion state */
+  toggle: () => NavigationComponent;
+  
+  /** Adds an event listener */
+  on: (event: string, handler: Function) => NavigationComponent;
+  
+  /** Removes an event listener */
+  off: (event: string, handler: Function) => NavigationComponent;
+  
+  /** Destroys the navigation component */
+  destroy: () => void;
 }
 
 /**
- * Button component interface
- * @category Components
+ * Base component interface
  */
-export interface ButtonComponent {
-  /** The button's DOM element */
-  element: HTMLButtonElement;
-  
-  /** API for managing button text */
-  text: {
-    setText: (content: string) => any;
-    getText: () => string;
-    getElement: () => HTMLElement | null;
+export interface BaseComponent {
+  element: HTMLElement;
+  prefix?: string;
+  items?: Map<string, NavItemData>;
+  emit?: (event: string, data: any) => void;
+  on?: (event: string, handler: Function) => any;
+  off?: (event: string, handler: Function) => any;
+  lifecycle?: {
+    destroy: () => void;
   };
-  
-  /** API for managing button icons */
-  icon: {
-    setIcon: (html: string) => any;
-    getIcon: () => string;
-    getElement: () => HTMLElement | null;
+  disabled?: {
+    enable: () => any;
+    disable: () => any;
   };
-  
-  /** API for managing disabled state */
+  [key: string]: any;
+}
+
+/**
+ * API options interface
+ */
+export interface ApiOptions {
   disabled: {
-    /** Enables the button */
     enable: () => void;
-    /** Disables the button */
     disable: () => void;
-    /** Checks if the button is disabled */
-    isDisabled: () => boolean;
   };
-  
-  /** API for managing component lifecycle */
   lifecycle: {
-    /** Destroys the component and cleans up resources */
     destroy: () => void;
   };
-  
-  /**
-   * Gets a class name with the component's prefix
-   * @param name - Base class name
-   * @returns Prefixed class name
-   */
-  getClass: (name: string) => string;
-  
-  /**
-   * Gets the button's value attribute
-   * @returns Button value
-   */
-  getValue: () => string;
-  
-  /**
-   * Sets the button's value attribute
-   * @param value - New value
-   * @returns The button component for chaining
-   */
-  setValue: (value: string) => ButtonComponent;
-  
-  /**
-   * Enables the button (removes disabled attribute)
-   * @returns The button component for chaining
-   */
-  enable: () => ButtonComponent;
-  
-  /**
-   * Disables the button (adds disabled attribute)
-   * @returns The button component for chaining
-   */
-  disable: () => ButtonComponent;
-  
-  /**
-   * Sets the button's text content
-   * @param content - Text content
-   * @returns The button component for chaining
-   */
-  setText: (content: string) => ButtonComponent;
-  
-  /**
-   * Gets the button's text content
-   * @returns Button text content
-   */
-  getText: () => string;
-  
-  /**
-   * Sets the button's icon
-   * @param icon - Icon HTML content
-   * @returns The button component for chaining
-   */
-  setIcon: (icon: string) => ButtonComponent;
-  
-  /**
-   * Gets the button's icon HTML content
-   * @returns Icon HTML
-   */
-  getIcon: () => string;
-  
-  /**
-   * Sets the accessible name (aria-label) for the button
-   * @param label - Accessible name
-   * @returns The button component for chaining
-   */
-  setAriaLabel: (label: string) => ButtonComponent;
-  
-  /**
-   * Destroys the button component and cleans up resources
-   */
-  destroy: () => void;
-  
-  /**
-   * Updates the button's circular style based on content
-   * Internal method used when changing content
-   */
-  updateCircularStyle: () => void;
-  
-  /**
-   * Adds an event listener to the button
-   * @param event - Event name ('click', 'focus', etc.)
-   * @param handler - Event handler function
-   * @returns The button component for chaining
-   */
-  on: (event: string, handler: Function) => ButtonComponent;
-  
-  /**
-   * Removes an event listener from the button
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @returns The button component for chaining
-   */
-  off: (event: string, handler: Function) => ButtonComponent;
-  
-  /**
-   * Adds CSS classes to the button element
-   * @param classes - One or more class names to add
-   * @returns The button component for chaining
-   */
-  addClass: (...classes: string[]) => ButtonComponent;
 }

package/src/components/progress/api.ts

@@ -1,7 +1,6 @@
 // src/components/progress/api.ts
 
 import { ProgressComponent } from './types';
-import { PROGRESS_EVENTS } from './constants';
 
 interface ApiOptions {
   value: {
@@ -80,7 +79,7 @@ export const withAPI = (options: ApiOptions) =>
         component.labelElement.textContent = formatter(value, options.value.getMax());
       }
       
-      component.emit(PROGRESS_EVENTS.VALUE_CHANGE, { value });
+      component.emit('valueChange', { value });
       return this;
     },
     
@@ -163,7 +162,7 @@ export const withAPI = (options: ApiOptions) =>
       }
       
       if (wasIndeterminate !== indeterminate) {
-        component.emit(PROGRESS_EVENTS.STATE_CHANGE, { indeterminate });
+        component.emit('stateChange', { indeterminate });
       }
       
       return this;

package/src/components/progress/config.ts

@@ -5,13 +5,12 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { ProgressConfig } from './types';
-import { PROGRESS_VARIANTS } from './constants';
 
 /**
  * Default configuration for the Progress component
  */
 export const defaultConfig: ProgressConfig = {
-  variant: PROGRESS_VARIANTS.LINEAR,
+  variant: 'linear',
   value: 0,
   max: 100,
   buffer: 0,
@@ -52,7 +51,7 @@ export const getElementConfig = (config: ProgressConfig) => {
     attrs['aria-disabled'] = 'true';
   }
   
-  const isCircular = config.variant === PROGRESS_VARIANTS.CIRCULAR;
+  const isCircular = config.variant === 'circular';
   
   return createElementConfig(config, {
     tag: 'div',

package/src/components/progress/index.ts

@@ -1,5 +1,4 @@
 // src/components/progress/index.ts
 
 export { default } from './progress';
-export { PROGRESS_VARIANTS, PROGRESS_EVENTS } from './constants';
 export { ProgressConfig, ProgressComponent } from './types';

package/src/components/progress/progress.ts

@@ -11,7 +11,6 @@ import {
 } from '../../core/compose/features';
 import { withAPI } from './api';
 import { ProgressConfig, ProgressComponent } from './types';
-import { PROGRESS_VARIANTS, PROGRESS_EVENTS } from './constants';
 import { createBaseConfig, getElementConfig, getApiConfig } from './config';
 
 // Helper functions
@@ -104,7 +103,7 @@ const createProgress = (config: ProgressConfig = {}): ProgressComponent => {
       // Add DOM structure based on variant
       (component) => {
         const baseClass = component.getClass('progress');
-        const isCircular = baseConfig.variant === PROGRESS_VARIANTS.CIRCULAR;
+        const isCircular = baseConfig.variant === 'circular';
         
         if (isCircular) {
           const { track, indicator, svg } = createCircularProgressDOM(baseClass);