mtrl 0.2.9 → 0.3.1

package/src/components/navigation/system/types.ts

@@ -0,0 +1,364 @@
+// src/components/navigation/system/types.ts
+
+/**
+ * Configuration options for the navigation system
+ */
+export interface NavigationSystemConfig {
+  /**
+   * Screen width breakpoint for mobile mode (in pixels)
+   * @default 960
+   */
+  breakpoint?: number;
+  
+  /**
+   * Prevent body scrolling when mobile drawer is open
+   * @default true
+   */
+  lockBodyScroll?: boolean;
+  
+  /**
+   * Close drawer when clicking outside of it in mobile mode
+   * @default true
+   */
+  hideOnClickOutside?: boolean;
+  
+  /**
+   * Enable swipe gestures for mobile navigation
+   * @default true
+   */
+  enableSwipeGestures?: boolean;
+  
+  /**
+   * Optimize touch targets for mobile devices
+   * @default true
+   */
+  optimizeForTouch?: boolean;
+  
+  /**
+   * CSS class for the overlay element
+   * @default 'mtrl-nav-overlay'
+   */
+  overlayClass?: string;
+  
+  /**
+   * CSS class for the close button
+   * @default 'mtrl-nav-close-btn'
+   */
+  closeButtonClass?: string;
+  
+  /**
+   * CSS class applied to body when drawer is open (to prevent scrolling)
+   * @default 'mtrl-body-drawer-open'
+   */
+  bodyLockClass?: string;
+  
+  /**
+   * Display labels on rail navigation items
+   * @default true
+   */
+  showLabelsOnRail?: boolean;
+  
+  /**
+   * Hide drawer when an item is clicked
+   * @default false
+   */
+  hideDrawerOnClick?: boolean;
+  
+  /**
+   * Start with drawer expanded
+   * @default false
+   */
+  expanded?: boolean;
+  
+  /**
+   * Delay before opening drawer on hover (in ms)
+   * @default 200
+   */
+  hoverDelay?: number;
+  
+  /**
+   * Delay before closing drawer after mouseleave (in ms)
+   * @default 100
+   */
+  closeDelay?: number;
+  
+  /**
+   * ID of the initially active section
+   */
+  activeSection?: string;
+  
+  /**
+   * ID of the initially active subsection
+   */
+  activeSubsection?: string;
+  
+  /**
+   * Navigation items configuration
+   */
+  items?: Record<string, NavigationSection>;
+  
+  /**
+   * Additional options for the rail component
+   */
+  railOptions?: Record<string, any>;
+  
+  /**
+   * Additional options for the drawer component
+   */
+  drawerOptions?: Record<string, any>;
+}
+
+/**
+ * Navigation section configuration
+ */
+export interface NavigationSection {
+  /**
+   * Display label for the section
+   */
+  label: string;
+  
+  /**
+   * Icon for the section
+   */
+  icon?: string;
+  
+  /**
+   * Subsection items
+   */
+  items?: NavigationItem[];
+}
+
+/**
+ * Navigation item configuration
+ */
+export interface NavigationItem {
+  /**
+   * Unique identifier for the item
+   */
+  id: string;
+  
+  /**
+   * Display label for the item
+   */
+  label: string;
+  
+  /**
+   * Icon for the item
+   */
+  icon?: string;
+  
+  /**
+   * Whether the item is currently active
+   */
+  active?: boolean;
+  
+  /**
+   * Additional properties
+   */
+  [key: string]: any;
+}
+
+/**
+ * Navigation system state interface
+ */
+export interface NavigationSystemState {
+  /**
+   * Rail navigation component instance
+   */
+  rail: any;
+  
+  /**
+   * Drawer navigation component instance
+   */
+  drawer: any;
+  
+  /**
+   * ID of the active section
+   */
+  activeSection: string | null;
+  
+  /**
+   * ID of the active subsection
+   */
+  activeSubsection: string | null;
+  
+  /**
+   * Navigation items configuration
+   */
+  items: Record<string, NavigationSection>;
+  
+  /**
+   * Whether the mouse is currently inside the drawer
+   */
+  mouseInDrawer: boolean;
+  
+  /**
+   * Whether the mouse is currently inside the rail
+   */
+  mouseInRail: boolean;
+  
+  /**
+   * Timer ID for hover delay
+   */
+  hoverTimer: number | null;
+  
+  /**
+   * Timer ID for close delay
+   */
+  closeTimer: number | null;
+  
+  /**
+   * Whether the system is currently processing a change
+   */
+  processingChange: boolean;
+  
+  /**
+   * Whether the system is in mobile mode
+   */
+  isMobile: boolean;
+  
+  /**
+   * Overlay element for mobile mode
+   */
+  overlayElement: HTMLElement | null;
+  
+  /**
+   * Close button element for mobile mode
+   */
+  closeButtonElement: HTMLElement | null;
+  
+  /**
+   * ResizeObserver instance for responsive behavior
+   */
+  resizeObserver: ResizeObserver | null;
+  
+  /**
+   * Handler function for outside clicks
+   */
+  outsideClickHandler: ((event: Event) => void) | null;
+  
+  /**
+   * Whether outside click handling is set up
+   */
+  outsideClickHandlerSet: boolean;
+}
+
+/**
+ * View change event data
+ */
+export interface ViewChangeEvent {
+  /**
+   * Whether the system is now in mobile mode
+   */
+  mobile: boolean;
+  
+  /**
+   * Whether the system was previously in mobile mode
+   */
+  previousMobile: boolean;
+  
+  /**
+   * Current window width
+   */
+  width: number;
+}
+
+/**
+ * Navigation system API interface
+ */
+export interface NavigationSystem {
+  /**
+   * Initialize the navigation system
+   */
+  initialize(): NavigationSystem;
+  
+  /**
+   * Clean up resources
+   */
+  cleanup(): void;
+  
+  /**
+   * Navigate to a specific section and subsection
+   * @param section - Section ID
+   * @param subsection - Subsection ID (optional)
+   * @param silent - Whether to suppress change events
+   */
+  navigateTo(section: string, subsection?: string, silent?: boolean): void;
+  
+  /**
+   * Get the rail navigation component
+   */
+  getRail(): any;
+  
+  /**
+   * Get the drawer navigation component
+   */
+  getDrawer(): any;
+  
+  /**
+   * Get the active section ID
+   */
+  getActiveSection(): string | null;
+  
+  /**
+   * Get the active subsection ID
+   */
+  getActiveSubsection(): string | null;
+  
+  /**
+   * Show the drawer
+   */
+  showDrawer(): void;
+  
+  /**
+   * Hide the drawer
+   */
+  hideDrawer(): void;
+  
+  /**
+   * Check if the drawer is visible
+   */
+  isDrawerVisible(): boolean;
+  
+  /**
+   * Update configuration
+   * @param newConfig - New configuration options
+   */
+  configure(newConfig: Partial<NavigationSystemConfig>): NavigationSystem;
+  
+  /**
+   * Set processing change state
+   * @param isProcessing - Whether a change is being processed
+   */
+  setProcessingChange(isProcessing: boolean): void;
+  
+  /**
+   * Check if a change is being processed
+   */
+  isProcessingChange(): boolean;
+  
+  /**
+   * Check if the system is in mobile mode
+   */
+  isMobile(): boolean;
+  
+  /**
+   * Check and update mobile state
+   */
+  checkMobileState(): void;
+  
+  /**
+   * Handler for section changes
+   */
+  onSectionChange?: (sectionId: string, eventData: any) => void;
+  
+  /**
+   * Handler for item selection
+   */
+  onItemSelect?: (event: any) => void;
+  
+  /**
+   * Handler for view changes (mobile/desktop)
+   */
+  onViewChange?: (event: ViewChangeEvent) => void;
+}

package/src/components/navigation/types.ts

@@ -6,18 +6,51 @@
  */
 export type NavVariant = 'rail' | 'drawer' | 'bar' | 'modal' | 'standard';
 
+/**
+ * Navigation variants enum
+ * @category Components
+ */
+export const NAV_VARIANTS: Record<string, NavVariant> = {
+  RAIL: 'rail',
+  DRAWER: 'drawer',
+  BAR: 'bar',
+  MODAL: 'modal',
+  STANDARD: 'standard'
+} as const;
+
 /**
  * Navigation positions
  * @category Components
  */
 export type NavPosition = 'left' | 'right' | 'top' | 'bottom';
 
+/**
+ * Navigation positions enum
+ * @category Components
+ */
+export const NAV_POSITIONS: Record<string, NavPosition> = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  TOP: 'top',
+  BOTTOM: 'bottom'
+} as const;
+
 /**
  * Navigation behaviors
  * @category Components
  */
 export type NavBehavior = 'fixed' | 'dismissible' | 'modal';
 
+/**
+ * Navigation behaviors enum
+ * @category Components
+ */
+export const NAV_BEHAVIORS: Record<string, NavBehavior> = {
+  FIXED: 'fixed',
+  DISMISSIBLE: 'dismissible',
+  MODAL: 'modal'
+} as const;
+
 /**
  * Navigation item state
  * @category Components

package/src/components/slider/config.ts

@@ -5,7 +5,7 @@ import {
 } from '../../core/config/component-config';
 import { SliderConfig } from './types';
 import { SLIDER_COLORS, SLIDER_SIZES } from './constants';
-import { createSliderDefinition } from './structure';
+import { createSliderSchema } from './schema';
 
 /**
  * Default configuration for the Slider component
@@ -47,7 +47,7 @@ export const createBaseConfig = (config: SliderConfig = {}): SliderConfig => {
   };
   
   // Add the structure definition to the config
-  baseConfig.structureDefinition = createSliderDefinition(baseComponent, baseConfig);
+  baseConfig.schema = createSliderSchema(baseComponent, baseConfig);
   
   return baseConfig;
 };

package/src/components/slider/features/controller.ts

@@ -16,30 +16,6 @@ export const withController = (config: SliderConfig) => component => {
     console.warn('Cannot initialize slider controller: missing element or components');
     return component;
   }
-
-  // Ensure component has events
-  if (!component.events) {
-    component.events = {
-      listeners: {},
-      on(event, handler) {
-        if (!this.listeners[event]) this.listeners[event] = [];
-        this.listeners[event].push(handler);
-        return this;
-      },
-      off(event, handler) {
-        if (this.listeners[event]) {
-          this.listeners[event] = this.listeners[event].filter(h => h !== handler);
-        }
-        return this;
-      },
-      trigger(event, data) {
-        if (this.listeners[event]) {
-          this.listeners[event].forEach(handler => handler(data));
-        }
-        return this;
-      }
-    };
-  }
   
   // Initialize state
   const state = {
@@ -68,7 +44,7 @@ export const withController = (config: SliderConfig) => component => {
         defaultPrevented: false
       };
       
-      state.component.events.trigger(eventName, eventData);
+      state.component.emit(eventName, eventData);
       return eventData;
     }
   };

package/src/components/slider/features/handlers.ts

@@ -174,7 +174,6 @@ export const createHandlers = (config: SliderConfig, state, uiRenderer, eventHel
       // Update UI and trigger events
       render();
       triggerEvent(SLIDER_EVENTS.INPUT, e);
-      triggerEvent(SLIDER_EVENTS.CHANGE, e);
     } catch (error) {
       console.warn('Error handling track click:', error);
     }

package/src/components/slider/features/range.ts

@@ -10,7 +10,7 @@ import { createElement } from '../../../core/dom/create';
  */
 export const withRange = (config: SliderConfig) => component => {
   // If not a range slider or missing structure definition, return unmodified
-  if (!config.range || !config.secondValue || !component.structureDefinition) {
+  if (!config.range || !config.secondValue || !component.schema) {
     return component;
   }
   
@@ -25,18 +25,18 @@ export const withRange = (config: SliderConfig) => component => {
     const getClass = component.getClass;
     
     // Clone the structure definition (deep copy)
-    const structureDefinition = JSON.parse(JSON.stringify(component.structureDefinition));
+    const schema = JSON.parse(JSON.stringify(component.schema));
     
     // Add range class to root element
-    const rootClasses = structureDefinition.element.options.className || [];
+    const rootClasses = schema.element.options.className || [];
     if (Array.isArray(rootClasses)) {
       rootClasses.push(getClass('slider--range'));
     } else {
-      structureDefinition.element.options.className = `${rootClasses} ${getClass('slider--range')}`.trim();
+      schema.element.options.className = `${rootClasses} ${getClass('slider--range')}`.trim();
     }
     
     // Add start track segment to track children
-    const trackChildren = structureDefinition.element.children.container.children.track.children;
+    const trackChildren = schema.element.children.container.children.track.children;
     trackChildren.startTrack = {
       name: 'startTrack',
       creator: createElement,
@@ -50,7 +50,7 @@ export const withRange = (config: SliderConfig) => component => {
     };
     
     // Add second handle to container children
-    const containerChildren = structureDefinition.element.children.container.children;
+    const containerChildren = schema.element.children.container.children;
     containerChildren.secondHandle = {
       name: 'secondHandle',
       creator: createElement,
@@ -95,7 +95,7 @@ export const withRange = (config: SliderConfig) => component => {
     // Return component with updated structure definition
     return {
       ...component,
-      structureDefinition
+      schema
     };
   } catch (error) {
     console.warn('Error enhancing structure with range functionality:', error);

package/src/components/slider/{structure.ts → schema.ts}

@@ -6,9 +6,9 @@ import { SliderConfig } from './types';
  * 
  * @param component Component for class name generation
  * @param config Slider configuration
- * @returns Structure definition object
+ * @returns Structure schema object
  */
-export function createSliderDefinition(component, config: SliderConfig) {
+export function createSliderSchema(component, config: SliderConfig) {
   // Get prefixed class names
   const getClass = (className) => component.getClass(className);
 
@@ -26,7 +26,6 @@ export function createSliderDefinition(component, config: SliderConfig) {
   return {
     element: {
       options: {
-        tag: 'div',
         className: [getClass('slider'), config.class].filter(Boolean),
         attrs: {
           tabindex: '-1',
@@ -38,20 +37,17 @@ export function createSliderDefinition(component, config: SliderConfig) {
         // Container with all slider elements
         container: {
           options: {
-            tag: 'div',
             className: getClass('slider-container')
           },
           children: {
             // Track with segments
             track: {
               options: {
-                tag: 'div',
                 className: getClass('slider-track')
               },
               children: {
                 activeTrack: {
                   options: {
-                    tag: 'div',
                     className: getClass('slider-active-track'),
                     style: {
                       width: `${valuePercent}%`
@@ -60,7 +56,6 @@ export function createSliderDefinition(component, config: SliderConfig) {
                 },
                 startTrack: {
                   options: {
-                    tag: 'div',
                     className: getClass('slider-start-track'),
                     style: {
                       display: 'none', // Initially hidden for single slider
@@ -70,7 +65,6 @@ export function createSliderDefinition(component, config: SliderConfig) {
                 },
                 remainingTrack: {
                   options: {
-                    tag: 'div',
                     className: getClass('slider-remaining-track'),
                     style: {
                       width: `${100 - valuePercent}%`
@@ -83,7 +77,6 @@ export function createSliderDefinition(component, config: SliderConfig) {
             // Ticks container
             ticksContainer: {
               options: {
-                tag: 'div',
                 className: getClass('slider-ticks-container')
               }
             },
@@ -91,7 +84,6 @@ export function createSliderDefinition(component, config: SliderConfig) {
             // Dots for ends
             startDot: {
               options: {
-                tag: 'div',
                 className: [
                   getClass('slider-dot'),
                   getClass('slider-dot--start')
@@ -100,7 +92,6 @@ export function createSliderDefinition(component, config: SliderConfig) {
             },
             endDot: {
               options: {
-                tag: 'div',
                 className: [
                   getClass('slider-dot'),
                   getClass('slider-dot--end')
@@ -111,7 +102,6 @@ export function createSliderDefinition(component, config: SliderConfig) {
             // Main handle
             handle: {
               options: {
-                tag: 'div',
                 className: getClass('slider-handle'),
                 attrs: {
                   role: 'slider',
@@ -132,7 +122,6 @@ export function createSliderDefinition(component, config: SliderConfig) {
             // Main value bubble
             valueBubble: {
               options: {
-                tag: 'div',
                 className: getClass('slider-value'),
                 attrs: {
                   'aria-hidden': 'true',

package/src/components/slider/slider.ts

@@ -2,7 +2,7 @@
 import { pipe } from '../../core/compose/pipe';
 import { createBase } from '../../core/compose/component';
 import { withEvents, withLifecycle } from '../../core/compose/features';
-import { withStructure, withIcon, withLabel, withDom  } from '../../core/composition/features';
+import { withLayout, withIcon, withLabel, withDom  } from '../../core/composition/features';
 import { 
   withRange,
   withStates,
@@ -11,6 +11,7 @@ import {
 import { withAPI } from './api';
 import { SliderConfig, SliderComponent } from './types';
 import { createBaseConfig, getApiConfig } from './config';
+
 /**
  * Creates a new Slider component
  * 
@@ -36,7 +37,7 @@ const createSlider = (config: SliderConfig = {}): SliderComponent => {
       // Base component with event system
       createBase,
       withEvents(),
-      withStructure(baseConfig),
+      withLayout(baseConfig),
       withIcon(baseConfig),
       withLabel(baseConfig),
       withRange(baseConfig),

package/src/components/snackbar/index.ts

@@ -1,3 +1,9 @@
 // src/components/snackbar/index.ts
 export { default } from './snackbar'
-export { SnackbarConfig, SnackbarComponent } from './types'
+export { 
+  SnackbarConfig, 
+  SnackbarComponent,
+  SNACKBAR_VARIANTS,
+  SNACKBAR_POSITIONS,
+  SNACKBAR_STATES
+} from './types'

package/src/components/snackbar/types.ts

@@ -5,16 +5,41 @@
  */
 export type SnackbarVariant = 'basic' | 'action';
 
+/**
+ * Snackbar visual variants
+ */
+export const SNACKBAR_VARIANTS = {
+  BASIC: 'basic',
+  ACTION: 'action' // With action button
+} as const;
+
 /**
  * Available snackbar positions
  */
 export type SnackbarPosition = 'center' | 'start' | 'end';
 
+/**
+ * Snackbar display positions
+ */
+export const SNACKBAR_POSITIONS = {
+  CENTER: 'center',
+  START: 'start',
+  END: 'end'
+} as const;
+
 /**
  * Snackbar visibility states
  */
 export type SnackbarState = 'visible' | 'hidden';
 
+/**
+ * Snackbar state classes
+ */
+export const SNACKBAR_STATES = {
+  VISIBLE: 'visible',
+  HIDDEN: 'hidden'
+} as const;
+
 /**
  * Available snackbar event types
  */