mtrl 0.1.2 → 0.2.0

package/src/components/navigation/{constants.js → constants.ts}

@@ -1,4 +1,4 @@
-// src/components/navigation/constants.js
+// src/components/navigation/constants.ts
 
 /**
  * Navigation variants following Material Design 3
@@ -9,7 +9,7 @@ export const NAV_VARIANTS = {
   BAR: 'bar', // Bottom or top navigation bar
   DRAWER_MODAL: 'modal', // Modal drawer overlay
   DRAWER_STANDARD: 'standard' // Standard permanent drawer
-}
+} as const;
 
 /**
  * Navigation positions
@@ -19,7 +19,7 @@ export const NAV_POSITIONS = {
   RIGHT: 'right',
   TOP: 'top',
   BOTTOM: 'bottom'
-}
+} as const;
 
 /**
  * Navigation behaviors
@@ -28,7 +28,7 @@ export const NAV_BEHAVIORS = {
   FIXED: 'fixed', // Always visible
   DISMISSIBLE: 'dismissible', // Can be dismissed/hidden
   MODAL: 'modal' // Overlays content with scrim
-}
+} as const;
 
 /**
  * Navigation state classes
@@ -41,7 +41,7 @@ export const NAV_STATES = {
   HOVERED: 'hovered', // Hover state
   FOCUSED: 'focused', // Keyboard focus state
   PRESSED: 'pressed' // Press/click state
-}
+} as const;
 
 /**
  * Navigation element classes
@@ -61,7 +61,7 @@ export const NAV_CLASSES = {
   NESTED_CONTAINER: 'nav-nested-container',
   NESTED_ITEM: 'nav-nested-item',
   EXPAND_ICON: 'nav-expand-icon'
-}
+} as const;
 
 /**
  * Validation schema for navigation configuration
@@ -119,7 +119,7 @@ export const NAV_SCHEMA = {
       optional: true
     }
   }
-}
+} as const;
 
 /**
  * Navigation item states
@@ -127,7 +127,7 @@ export const NAV_SCHEMA = {
 export const NAV_ITEM_STATES = {
   EXPANDED: 'expanded',
   COLLAPSED: 'collapsed'
-}
+} as const;
 
 /**
  * Navigation item schema
@@ -175,7 +175,7 @@ export const NAV_ITEM_SCHEMA = {
       default: false
     }
   }
-}
+} as const;
 
 /**
  * Navigation group schema
@@ -197,4 +197,4 @@ export const NAV_GROUP_SCHEMA = {
       default: true
     }
   }
-}
+} as const;

package/src/components/navigation/index.ts

@@ -0,0 +1,14 @@
+// src/components/navigation/index.ts
+export { default } from './navigation'
+export {
+  NAV_VARIANTS,
+  NAV_POSITIONS,
+  NAV_BEHAVIORS,
+  NAV_STATES
+} from './constants'
+export {
+  NavigationConfig,
+  NavigationComponent,
+  NavItemConfig,
+  NavGroupConfig
+} from './types'

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

@@ -0,0 +1,148 @@
+// src/components/navigation/nav-item.ts
+import { NavItemConfig } from './types';
+
+/**
+ * Creates an expand/collapse icon element
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Expand icon element
+ */
+export const createExpandIcon = (prefix: string): HTMLElement => {
+  const icon = document.createElement('span');
+  icon.className = `${prefix}-nav-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>
+    </svg>
+  `;
+  return icon;
+};
+
+/**
+ * Creates a nested items container
+ * @param {NavItemConfig[]} items - Nested items configuration
+ * @param {string} prefix - CSS class prefix
+ * @param {Function} createItem - Item creation function
+ * @returns {HTMLElement} Nested items container
+ */
+export const createNestedContainer = (
+  items: NavItemConfig[], 
+  prefix: string, 
+  createItem: (config: NavItemConfig, container: HTMLElement, prefix: string) => HTMLElement
+): HTMLElement => {
+  const container = document.createElement('div');
+  container.className = `${prefix}-nav-nested-container`;
+  container.setAttribute('role', 'group');
+  container.hidden = true;
+
+  items.forEach(itemConfig => {
+    createItem(itemConfig, container, prefix);
+  });
+
+  return container;
+};
+
+/**
+ * Creates a navigation item element
+ * @param {NavItemConfig} config - Item configuration
+ * @param {HTMLElement} container - Container element
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Created navigation item
+ */
+export const createNavItem = (
+  config: NavItemConfig, 
+  container: HTMLElement, 
+  prefix: string
+): HTMLElement => {
+  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');
+
+  if (config.id) {
+    item.dataset.id = config.id;
+  }
+
+  if (config.disabled) {
+    item.disabled = true;
+    item.setAttribute('aria-disabled', 'true');
+  }
+
+  // Add icon if provided
+  if (config.icon) {
+    const icon = document.createElement('span');
+    icon.className = `${prefix}-nav-item-icon`;
+    icon.innerHTML = config.icon;
+    item.appendChild(icon);
+  }
+
+  // Add label if provided
+  if (config.label) {
+    const label = document.createElement('span');
+    label.className = `${prefix}-nav-item-label`;
+    label.textContent = config.label;
+    item.appendChild(label);
+    item.setAttribute('aria-label', config.label);
+  }
+
+  // Add badge if provided
+  if (config.badge) {
+    const badge = document.createElement('span');
+    badge.className = `${prefix}-nav-item-badge`;
+    badge.textContent = config.badge;
+    badge.setAttribute('aria-label', `${config.badge} notifications`);
+    item.appendChild(badge);
+  }
+
+  itemContainer.appendChild(item);
+
+  // Handle nested items - only for drawer variant
+  if (config.items?.length && container.closest('.mtrl-nav--drawer, .mtrl-nav--drawer-modal, .mtrl-nav--drawer-standard')) {
+    const expandIcon = createExpandIcon(prefix);
+    item.appendChild(expandIcon);
+
+    item.setAttribute('aria-expanded', config.expanded ? 'true' : 'false');
+    item.setAttribute('aria-haspopup', 'true');
+
+    const nestedContainer = createNestedContainer(config.items, prefix, createNavItem);
+    nestedContainer.hidden = !config.expanded;
+    itemContainer.appendChild(nestedContainer);
+
+    // Handle expand/collapse
+    item.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const isExpanded = item.getAttribute('aria-expanded') === 'true';
+      item.setAttribute('aria-expanded', (!isExpanded).toString());
+      nestedContainer.hidden = isExpanded;
+
+      // Toggle expand icon rotation
+      if (expandIcon.style) {
+        expandIcon.style.transform = isExpanded ? '' : 'rotate(90deg)';
+      }
+    });
+  }
+
+  container.appendChild(itemContainer);
+  return item;
+};
+
+/**
+ * Recursively gets all nested items from a navigation item
+ * @param {HTMLElement} item - Navigation item element
+ * @param {string} prefix - CSS class prefix
+ * @returns {Array<HTMLElement>} Array of all nested items
+ */
+export const getAllNestedItems = (item: HTMLElement, prefix: string): HTMLElement[] => {
+  const container = item.closest(`.${prefix}-nav-item-container`);
+  if (!container) return [];
+
+  const nestedContainer = container.querySelector(`.${prefix}-nav-nested-container`);
+  if (!nestedContainer) return [];
+
+  const items = Array.from(nestedContainer.querySelectorAll(`.${prefix}-nav-item`)) as HTMLElement[];
+  return items.reduce((acc: HTMLElement[], nestedItem: HTMLElement) => {
+    return [...acc, nestedItem, ...getAllNestedItems(nestedItem, prefix)];
+  }, []);
+};

package/src/components/navigation/navigation.ts

@@ -0,0 +1,50 @@
+// src/components/navigation/navigation.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withDisabled,
+  withLifecycle,
+  withVariant,
+  withPosition // Import core position feature
+} from '../../core/compose/features';
+import { withAPI } from './api';
+import { withNavItems } from './features/items';
+import { NavigationConfig, NavigationComponent } from './types';
+import { 
+  createBaseConfig, 
+  getElementConfig,
+  getApiConfig
+} from './config';
+
+/**
+ * Creates a new Navigation component
+ * @param {NavigationConfig} config - Navigation configuration
+ * @returns {NavigationComponent} Navigation component instance
+ */
+const createNavigation = (config: NavigationConfig = {}): NavigationComponent => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    const navigation = pipe(
+      createBase,
+      // First add events system
+      withEvents(),
+      // Then add the element and other features
+      withElement(getElementConfig(baseConfig)),
+      withVariant(baseConfig),
+      withPosition(baseConfig),
+      withNavItems(baseConfig),
+      withDisabled(baseConfig),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    return navigation as NavigationComponent;
+  } 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)}`);
+  }
+};
+
+export default createNavigation;

package/src/components/navigation/types.ts

@@ -0,0 +1,212 @@
+// src/components/navigation/types.ts
+import { 
+  NAV_VARIANTS, 
+  NAV_POSITIONS, 
+  NAV_BEHAVIORS 
+} from './constants';
+
+/**
+ * Navigation item configuration
+ */
+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 */
+  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;
+  
+  /** Path of parent item IDs */
+  path: string[];
+}
+
+/**
+ * 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;
+  
+  /** Whether to show labels */
+  showLabels?: boolean;
+  
+  /** Whether backdrop scrim is enabled */
+  scrimEnabled?: boolean;
+  
+  /** ARIA label for accessibility */
+  ariaLabel?: string;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Prefix for class names */
+  prefix?: string;
+  
+  /** Component name */
+  componentName?: string;
+}
+
+/**
+ * Navigation component interface
+ */
+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;
+  
+  /** Disables the navigation */
+  disable: () => NavigationComponent;
+  
+  /** Destroys the navigation component and cleans up resources */
+  destroy: () => void;
+}
+
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+  disabled: {
+    enable: () => any;
+    disable: () => any;
+  };
+  lifecycle: {
+    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;
+}

package/src/components/progress/_styles.scss

@@ -0,0 +1,204 @@
+// src/components/progress/_styles.scss
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-progress';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: block;
+  overflow: hidden;
+  
+  // Common accessibility attributes
+  &[aria-disabled="true"] {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+  
+  // Linear progress variant
+  &--linear {
+    width: 100%;
+    height: 4px; // Default height
+    
+    .#{$component}-track {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: t.color('surface-container-highest');
+    }
+    
+    .#{$component}-buffer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 0;
+      background-color: t.alpha('primary', 0.4);
+      transition: width 0.3s ease;
+    }
+    
+    .#{$component}-indicator {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 0;
+      background-color: t.color('primary');
+      transition: width 0.3s ease;
+    }
+    
+    // Indeterminate animation for linear progress
+    &.#{$component}--indeterminate {
+      .#{$component}-buffer {
+        display: none;
+      }
+      
+      .#{$component}-indicator {
+        width: 30%;
+        animation: linear-indeterminate 2s infinite;
+      }
+    }
+    
+    .#{$component}-label {
+      position: absolute;
+      right: 0;
+      top: 8px;
+      font-size: 12px;
+      color: t.color('on-surface-variant');
+    }
+  }
+  
+  // Circular progress variant
+  &--circular {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    
+    svg {
+      width: 100%;
+      height: 100%;
+      transform: rotate(-90deg);
+    }
+    
+    .#{$component}-track {
+      stroke: t.color('surface-container-highest');
+      fill: none;
+    }
+    
+    .#{$component}-indicator {
+      stroke: t.color('primary');
+      fill: none;
+      stroke-dasharray: 283; // 2*PI*45
+      stroke-dashoffset: 283;
+      transition: stroke-dashoffset 0.3s ease;
+    }
+    
+    // Indeterminate animation for circular progress
+    &.#{$component}--indeterminate {
+      .#{$component}-indicator {
+        animation: circular-indeterminate 1.5s linear infinite;
+      }
+    }
+    
+    .#{$component}-label {
+      position: absolute;
+      font-size: 12px;
+      color: t.color('on-surface-variant');
+    }
+  }
+  
+  // Size variants
+  &--small {
+    &.#{$component}--linear {
+      height: 2px;
+    }
+    
+    &.#{$component}--circular {
+      width: 24px;
+      height: 24px;
+      
+      .#{$component}-track,
+      .#{$component}-indicator {
+        stroke-width: 3;
+      }
+    }
+  }
+  
+  &--medium {
+    &.#{$component}--linear {
+      height: 4px;
+    }
+    
+    &.#{$component}--circular {
+      width: 48px;
+      height: 48px;
+      
+      .#{$component}-track,
+      .#{$component}-indicator {
+        stroke-width: 4;
+      }
+    }
+  }
+  
+  &--large {
+    &.#{$component}--linear {
+      height: 8px;
+      
+      .#{$component}-label {
+        font-size: 14px;
+        top: 12px;
+      }
+    }
+    
+    &.#{$component}--circular {
+      width: 64px;
+      height: 64px;
+      
+      .#{$component}-track,
+      .#{$component}-indicator {
+        stroke-width: 6;
+      }
+      
+      .#{$component}-label {
+        font-size: 14px;
+      }
+    }
+  }
+  
+  // Disabled state
+  &--disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+}
+
+// Keyframes for indeterminate animations
+@keyframes linear-indeterminate {
+  0% {
+    left: -30%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+@keyframes circular-indeterminate {
+  0% {
+    stroke-dashoffset: 283;
+  }
+  50% {
+    stroke-dashoffset: 70;
+  }
+  100% {
+    stroke-dashoffset: 283;
+    transform: rotate(360deg);
+  }
+}