mtrl 0.2.5 → 0.2.7

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

@@ -1,5 +1,17 @@
 // src/components/navigation/nav-item.ts
-import { NavItemConfig } from './types';
+
+// 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;
+}
 
 /**
  * Creates an expand/collapse icon element
@@ -31,7 +43,9 @@ export const createNestedContainer = (
 ): HTMLElement => {
   const container = document.createElement('div');
   container.className = `${prefix}-nav-nested-container`;
-  container.setAttribute('role', 'group');
+  
+  // Use appropriate role for nested menu
+  container.setAttribute('role', 'menu');
   container.hidden = true;
 
   items.forEach(itemConfig => {
@@ -56,18 +70,45 @@ export const createNavItem = (
   const itemContainer = document.createElement('div');
   itemContainer.className = `${prefix}-nav-item-container`;
 
-  const item = document.createElement('button');
-  item.className = `${prefix}-nav-item`;
-  item.setAttribute('role', config.items?.length ? 'button' : 'menuitem');
-  item.setAttribute('aria-selected', 'false');
+  // Determine if parent container uses tabs or menu role pattern
+  const isMenuContext = container.getAttribute('role') === 'menu';
+  const isTabContext = container.getAttribute('role') === 'tablist';
+  const isDrawerVariant = container.closest(`.${prefix}-nav--drawer, .${prefix}-nav--drawer-modal, .${prefix}-nav--drawer-standard`) !== null;
+  
+  // Create the item element
+  const itemElement = document.createElement('button');
+  itemElement.className = `${prefix}-nav-item`;
+  itemElement.type = 'button'; // Ensure it's a button type for proper behavior
+  
+  // Set appropriate role based on context and items
+  if (config.items?.length) {
+    if (isDrawerVariant) {
+      // For expandable drawer items with nested items
+      itemElement.setAttribute('role', 'button');
+      itemElement.setAttribute('aria-expanded', config.expanded ? 'true' : 'false');
+      itemElement.setAttribute('aria-haspopup', 'menu');
+    } else {
+      // For non-drawer variants with nested items
+      itemElement.setAttribute('role', 'button');
+    }
+  } else if (isMenuContext) {
+    // For menu items
+    itemElement.setAttribute('role', 'menuitem');
+  } else if (isTabContext) {
+    // For tab items
+    itemElement.setAttribute('role', 'tab');
+    itemElement.setAttribute('aria-selected', config.active ? 'true' : 'false');
+    itemElement.setAttribute('tabindex', config.active ? '0' : '-1');
+  } 
+  // For plain navigation buttons, we don't need to set the role since buttons have inherent semantics
 
   if (config.id) {
-    item.dataset.id = config.id;
+    itemElement.dataset.id = config.id;
   }
 
   if (config.disabled) {
-    item.disabled = true;
-    item.setAttribute('aria-disabled', 'true');
+    itemElement.disabled = true;
+    itemElement.setAttribute('aria-disabled', 'true');
   }
 
   // Add icon if provided
@@ -75,7 +116,7 @@ export const createNavItem = (
     const icon = document.createElement('span');
     icon.className = `${prefix}-nav-item-icon`;
     icon.innerHTML = config.icon;
-    item.appendChild(icon);
+    itemElement.appendChild(icon);
   }
 
   // Add label if provided
@@ -83,8 +124,8 @@ export const createNavItem = (
     const label = document.createElement('span');
     label.className = `${prefix}-nav-item-label`;
     label.textContent = config.label;
-    item.appendChild(label);
-    item.setAttribute('aria-label', config.label);
+    itemElement.appendChild(label);
+    itemElement.setAttribute('aria-label', config.label);
   }
 
   // Add badge if provided
@@ -92,29 +133,37 @@ export const createNavItem = (
     const badge = document.createElement('span');
     badge.className = `${prefix}-nav-item-badge`;
     badge.textContent = config.badge;
+    // Use appropriate aria labeling
     badge.setAttribute('aria-label', `${config.badge} notifications`);
-    item.appendChild(badge);
+    itemElement.appendChild(badge);
+  }
+
+  // Mark active state with appropriate semantics
+  if (config.active && !config.items?.length) {
+    itemElement.classList.add(`${prefix}-nav-item--active`);
+    
+    // Use aria-current for standard navigation
+    if (!isTabContext) {
+      itemElement.setAttribute('aria-current', 'page');
+    }
   }
 
-  itemContainer.appendChild(item);
+  itemContainer.appendChild(itemElement);
 
   // Handle nested items - only for drawer variant
-  if (config.items?.length && container.closest('.mtrl-nav--drawer, .mtrl-nav--drawer-modal, .mtrl-nav--drawer-standard')) {
+  if (config.items?.length && isDrawerVariant) {
     const expandIcon = createExpandIcon(prefix);
-    item.appendChild(expandIcon);
-
-    item.setAttribute('aria-expanded', config.expanded ? 'true' : 'false');
-    item.setAttribute('aria-haspopup', 'true');
+    itemElement.appendChild(expandIcon);
 
     const nestedContainer = createNestedContainer(config.items, prefix, createNavItem);
     nestedContainer.hidden = !config.expanded;
     itemContainer.appendChild(nestedContainer);
 
     // Handle expand/collapse
-    item.addEventListener('click', (event) => {
+    itemElement.addEventListener('click', (event) => {
       event.stopPropagation();
-      const isExpanded = item.getAttribute('aria-expanded') === 'true';
-      item.setAttribute('aria-expanded', (!isExpanded).toString());
+      const isExpanded = itemElement.getAttribute('aria-expanded') === 'true';
+      itemElement.setAttribute('aria-expanded', (!isExpanded).toString());
       nestedContainer.hidden = isExpanded;
 
       // Toggle expand icon rotation
@@ -125,7 +174,7 @@ export const createNavItem = (
   }
 
   container.appendChild(itemContainer);
-  return item;
+  return itemElement;
 };
 
 /**

package/src/components/navigation/navigation.ts

@@ -6,7 +6,7 @@ import {
   withDisabled,
   withLifecycle,
   withVariant,
-  withPosition // Import core position feature
+  withPosition
 } from '../../core/compose/features';
 import { withAPI } from './api';
 import { withNavItems } from './features/items';
@@ -16,6 +16,48 @@ import {
   getElementConfig,
   getApiConfig
 } from './config';
+import { NAV_VARIANTS } from './constants';
+
+/**
+ * Sets up proper ARIA roles based on navigation variant
+ * @param {NavigationComponent} nav - Navigation component
+ * @param {NavigationConfig} config - Navigation configuration  
+ */
+const setupAccessibility = (nav: NavigationComponent, config: NavigationConfig): void => {
+  const { element } = nav;
+  const variant = config.variant || 'rail';
+  const prefix = config.prefix || 'mtrl';
+  
+  // Set appropriate aria-label
+  element.setAttribute('aria-label', config.ariaLabel || 'Main Navigation');
+
+  // For bar navigation (bottom or top nav)
+  if (variant === NAV_VARIANTS.BAR) {
+    // If bar navigation is acting as tabs
+    const hasNestedItems = config.items?.some(item => item.items?.length) || false;
+    
+    if (!hasNestedItems) {
+      element.setAttribute('role', 'tablist');
+      element.setAttribute('aria-orientation', 'horizontal');
+    } else {
+      element.setAttribute('role', 'menubar');
+      element.setAttribute('aria-orientation', 'horizontal');
+    }
+  } 
+  // For rail and drawer navigation
+  else {
+    // Use standard navigation landmark
+    element.setAttribute('role', 'navigation'); 
+  }
+
+  // Set hidden state for modal drawers if needed
+  if ((variant === NAV_VARIANTS.DRAWER_MODAL || 
+       variant === 'modal' || 
+       (variant === NAV_VARIANTS.DRAWER && config.behavior === 'dismissible')) && 
+      !config.expanded) {
+    element.classList.add(`${prefix}-nav--hidden`);
+  }
+};
 
 /**
  * Creates a new Navigation component
@@ -40,7 +82,17 @@ const createNavigation = (config: NavigationConfig = {}): NavigationComponent =>
       comp => withAPI(getApiConfig(comp))(comp)
     )(baseConfig);
 
-    return navigation as NavigationComponent;
+    const nav = navigation as NavigationComponent;
+    
+    // Set up proper ARIA roles and relationships
+    setupAccessibility(nav, baseConfig);
+
+    // Implement any initialization logic
+    if (baseConfig.disabled) {
+      nav.disable();
+    }
+
+    return nav;
   } catch (error) {
     console.error('Navigation creation error:', error instanceof Error ? error.message : String(error));
     throw new Error(`Failed to create navigation: ${error instanceof Error ? error.message : String(error)}`);

package/src/components/navigation/types.ts

@@ -1,212 +1,234 @@
-// src/components/navigation/types.ts
-import { 
-  NAV_VARIANTS, 
-  NAV_POSITIONS, 
-  NAV_BEHAVIORS 
-} from './constants';
+// src/components/button/types.ts
+import { BUTTON_VARIANTS } from './constants';
 
 /**
- * Navigation item configuration
+ * Configuration interface for the Button component
+ * @category Components
  */
-export interface NavItemConfig {
-  /** Unique identifier for the item */
-  id: string;
-  
-  /** HTML content for the icon */
-  icon: string;
-  
-  /** Text label for the item */
-  label: string;
-  
-  /** Optional badge text (notifications, etc.) */
-  badge?: string;
-  
-  /** Whether the item is disabled */
+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
+   */
   disabled?: boolean;
   
-  /** Whether the item is active */
-  active?: boolean;
-  
-  /** Optional subtitle (for drawer variant) */
-  subtitle?: string;
-  
-  /** ID of the group this item belongs to */
-  groupId?: string;
-  
-  /** Nested navigation items */
-  items?: NavItemConfig[];
-  
-  /** Whether nested items are expanded */
-  expanded?: boolean;
-}
-
-/**
- * Navigation group configuration
- */
-export interface NavGroupConfig {
-  /** Unique identifier for the group */
-  id: string;
-  
-  /** Group title text */
-  title: string;
-  
-  /** Whether the group is expanded */
-  expanded?: boolean;
-}
-
-/**
- * Stored item data
- */
-export interface NavItemData {
-  /** DOM element for the item */
-  element: HTMLElement;
-  
-  /** Item configuration */
-  config: NavItemConfig;
-}
-
-/**
- * Navigation change event data
- */
-export interface NavChangeEvent {
-  /** ID of the active item */
-  id: string;
-  
-  /** Item data */
-  item: NavItemData;
-  
-  /** Previously active item */
-  previousItem: NavItemData | null;
+  /** 
+   * Initial button text content
+   * @example 'Submit'
+   */
+  text?: string;
+  
+  /** 
+   * Initial button icon HTML content
+   * @example '<svg>...</svg>'
+   */
+  icon?: string;
+  
+  /** 
+   * Icon size in pixels or other CSS units
+   * @example '18px'
+   */
+  iconSize?: string;
+  
+  /** 
+   * Additional CSS classes to add to the button
+   * @example 'form-submit header-action'
+   */
+  class?: string;
   
-  /** Path of parent item IDs */
-  path: string[];
-}
+  /** 
+   * Button value attribute
+   */
+  value?: string;
+  
+  /** 
+   * Button type attribute
+   * @default 'button'
+   */
+  type?: 'button' | 'submit' | 'reset';
+  
+  /** 
+   * Whether to enable ripple effect
+   * @default true
+   */
+  ripple?: boolean;
 
-/**
- * Configuration interface for the Navigation component
- */
-export interface NavigationConfig {
-  /** Navigation variant */
-  variant?: keyof typeof NAV_VARIANTS | string;
-  
-  /** Navigation position */
-  position?: keyof typeof NAV_POSITIONS | string;
-  
-  /** Navigation behavior */
-  behavior?: keyof typeof NAV_BEHAVIORS | string;
-  
-  /** Initial navigation items */
-  items?: NavItemConfig[];
-  
-  /** Navigation groups */
-  groups?: NavGroupConfig[];
-  
-  /** Whether the navigation is disabled */
-  disabled?: boolean;
-  
-  /** Whether drawer is initially expanded */
-  expanded?: boolean;
+  /**
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
   
-  /** Whether to show labels */
-  showLabels?: boolean;
+  /**
+   * Component name used in class generation
+   */
+  componentName?: string;
   
-  /** Whether backdrop scrim is enabled */
-  scrimEnabled?: boolean;
+  /** 
+   * 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];
+  };
   
-  /** ARIA label for accessibility */
+  /**
+   * Accessible name for the button (aria-label)
+   * Required for icon-only buttons without text
+   */
   ariaLabel?: string;
   
-  /** Additional CSS classes */
-  class?: string;
-  
-  /** Prefix for class names */
-  prefix?: string;
-  
-  /** Component name */
-  componentName?: string;
+  /**
+   * Descriptive name for the button
+   * Used to derive an accessible name for icon-only buttons
+   */
+  name?: string;
 }
 
 /**
- * Navigation component interface
+ * Button component interface
+ * @category Components
  */
-export interface NavigationComponent {
-  /** The root element of the navigation */
-  element: HTMLElement;
-  
-  /** Map of all navigation items */
-  items: Map<string, NavItemData>;
-  
-  /** Adds a new navigation item */
-  addItem: (itemConfig: NavItemConfig) => NavigationComponent;
-  
-  /** Removes a navigation item by ID */
-  removeItem: (id: string) => NavigationComponent;
-  
-  /** Retrieves a navigation item by ID */
-  getItem: (id: string) => NavItemData | undefined;
-  
-  /** Retrieves all navigation items */
-  getAllItems: () => NavItemData[];
-  
-  /** Gets the currently active item */
-  getActive: () => NavItemData | null;
-  
-  /** Gets the path to an item (parent IDs) */
-  getItemPath: (id: string) => string[];
-  
-  /** Sets an item as active by ID */
-  setActive: (id: string) => NavigationComponent;
-  
-  /** Adds event listener */
-  on: (event: string, handler: Function) => NavigationComponent;
-  
-  /** Removes event listener */
-  off: (event: string, handler: Function) => NavigationComponent;
-  
-  /** Enables the navigation */
-  enable: () => NavigationComponent;
+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;
+  };
   
-  /** Disables the navigation */
-  disable: () => NavigationComponent;
+  /** API for managing button icons */
+  icon: {
+    setIcon: (html: string) => any;
+    getIcon: () => string;
+    getElement: () => HTMLElement | null;
+  };
   
-  /** Destroys the navigation component and cleans up resources */
-  destroy: () => void;
-}
-
-/**
- * API options interface
- */
-export interface ApiOptions {
+  /** API for managing disabled state */
   disabled: {
-    enable: () => any;
-    disable: () => any;
+    /** 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;
   };
-}
-
-/**
- * Base component interface
- */
-export interface BaseComponent {
-  element: HTMLElement;
-  emit?: (event: string, data: any) => void;
-  on?: (event: string, handler: Function) => any;
-  off?: (event: string, handler: Function) => any;
-  addItem?: (itemConfig: NavItemConfig) => any;
-  removeItem?: (id: string) => any;
-  getItem?: (id: string) => NavItemData | undefined;
-  getAllItems?: () => NavItemData[];
-  getActive?: () => NavItemData | null;
-  getItemPath?: (id: string) => string[];
-  setActive?: (id: string) => any;
-  disabled?: {
-    enable: () => any;
-    disable: () => any;
-  };
-  lifecycle?: {
-    destroy: () => void;
-  };
-  [key: string]: any;
+  
+  /**
+   * 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;
 }