mtrl 0.2.6 → 0.2.8

package/src/components/dialog/constants.ts

@@ -1,32 +0,0 @@
-// src/components/dialog/constants.ts
-
-export const DIALOG_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large',
-  FULLWIDTH: 'fullwidth',
-  FULLSCREEN: 'fullscreen'
-};
-
-export const DIALOG_ANIMATIONS = {
-  SCALE: 'scale',
-  SLIDE_UP: 'slide-up',
-  SLIDE_DOWN: 'slide-down',
-  FADE: 'fade'
-};
-
-export const DIALOG_FOOTER_ALIGNMENTS = {
-  RIGHT: 'right',
-  LEFT: 'left',
-  CENTER: 'center',
-  SPACE_BETWEEN: 'space-between'
-};
-
-export const DIALOG_EVENTS = {
-  OPEN: 'open',
-  CLOSE: 'close',
-  BEFORE_OPEN: 'beforeopen',
-  BEFORE_CLOSE: 'beforeclose',
-  AFTER_OPEN: 'afteropen',
-  AFTER_CLOSE: 'afterclose'
-};

package/src/components/menu/constants.ts

@@ -1,154 +0,0 @@
-// src/components/menu/constants.ts
-
-/**
- * Menu alignment options
- */
-export const MENU_ALIGN = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  CENTER: 'center'
-} as const;
-
-/**
- * Menu vertical alignment options
- */
-export const MENU_VERTICAL_ALIGN = {
-  TOP: 'top',
-  BOTTOM: 'bottom',
-  MIDDLE: 'middle'
-} as const;
-
-/**
- * Menu item types
- */
-export const MENU_ITEM_TYPES = {
-  ITEM: 'item',
-  DIVIDER: 'divider'
-} as const;
-
-/**
- * Menu events
- */
-export const MENU_EVENTS = {
-  SELECT: 'select',
-  OPEN: 'open',
-  CLOSE: 'close',
-  SUBMENU_OPEN: 'submenuOpen',
-  SUBMENU_CLOSE: 'submenuClose'
-} as const;
-
-/**
- * Menu states
- */
-export const MENU_STATES = {
-  VISIBLE: 'visible',
-  HIDDEN: 'hidden',
-  DISABLED: 'disabled'
-} as const;
-
-/**
- * Menu element classes
- */
-export const MENU_CLASSES = {
-  ROOT: 'menu',
-  ITEM: 'menu-item',
-  ITEM_CONTAINER: 'menu-item-container',
-  LIST: 'menu-list',
-  DIVIDER: 'menu-divider',
-  SUBMENU: 'menu--submenu'
-} as const;
-
-/**
- * Menu positioning schema
- * Used for validation in component creation
- */
-export const MENU_POSITION_SCHEMA = {
-  type: 'object',
-  properties: {
-    align: {
-      type: 'string',
-      enum: Object.values(MENU_ALIGN),
-      optional: true,
-      default: MENU_ALIGN.LEFT
-    },
-    vAlign: {
-      type: 'string',
-      enum: Object.values(MENU_VERTICAL_ALIGN),
-      optional: true,
-      default: MENU_VERTICAL_ALIGN.BOTTOM
-    },
-    offsetX: {
-      type: 'number',
-      optional: true,
-      default: 0
-    },
-    offsetY: {
-      type: 'number',
-      optional: true,
-      default: 0
-    }
-  }
-} as const;
-
-/**
- * Validation schema for menu configuration
- */
-export const MENU_SCHEMA = {
-  type: 'object',
-  properties: {
-    items: {
-      type: 'array',
-      optional: true,
-      default: []
-    },
-    class: {
-      type: 'string',
-      optional: true
-    },
-    stayOpenOnSelect: {
-      type: 'boolean',
-      optional: true,
-      default: false
-    },
-    openingButton: {
-      optional: true
-    }
-  }
-} as const;
-
-/**
- * Menu item schema
- */
-export const MENU_ITEM_SCHEMA = {
-  type: 'object',
-  properties: {
-    name: {
-      type: 'string',
-      required: true
-    },
-    text: {
-      type: 'string',
-      required: true
-    },
-    type: {
-      type: 'string',
-      enum: Object.values(MENU_ITEM_TYPES),
-      optional: true,
-      default: MENU_ITEM_TYPES.ITEM
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true,
-      default: false
-    },
-    class: {
-      type: 'string',
-      optional: true
-    },
-    items: {
-      type: 'array',
-      optional: true,
-      description: 'Submenu items'
-    }
-  }
-} as const;

package/src/components/navigation/constants.ts

@@ -1,200 +0,0 @@
-// src/components/navigation/constants.ts
-
-/**
- * Navigation variants following Material Design 3
- */
-export const NAV_VARIANTS = {
-  RAIL: 'rail', // Vertical slim navigation
-  DRAWER: 'drawer', // Expandable side navigation
-  BAR: 'bar', // Bottom or top navigation bar
-  DRAWER_MODAL: 'modal', // Modal drawer overlay
-  DRAWER_STANDARD: 'standard' // Standard permanent drawer
-} as const;
-
-/**
- * Navigation positions
- */
-export const NAV_POSITIONS = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  TOP: 'top',
-  BOTTOM: 'bottom'
-} as const;
-
-/**
- * Navigation behaviors
- */
-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
- */
-export const NAV_STATES = {
-  ACTIVE: 'active', // Currently selected item
-  DISABLED: 'disabled', // Disabled state
-  EXPANDED: 'expanded', // Drawer expanded state
-  COLLAPSED: 'collapsed', // Drawer collapsed state
-  HOVERED: 'hovered', // Hover state
-  FOCUSED: 'focused', // Keyboard focus state
-  PRESSED: 'pressed' // Press/click state
-} as const;
-
-/**
- * Navigation element classes
- */
-export const NAV_CLASSES = {
-  ROOT: 'nav',
-  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;
-
-/**
- * Validation schema for navigation configuration
- */
-export const NAV_SCHEMA = {
-  type: 'object',
-  properties: {
-    variant: {
-      type: 'string',
-      enum: Object.values(NAV_VARIANTS),
-      optional: true,
-      default: NAV_VARIANTS.RAIL
-    },
-    position: {
-      type: 'string',
-      enum: Object.values(NAV_POSITIONS),
-      optional: true,
-      default: NAV_POSITIONS.LEFT
-    },
-    behavior: {
-      type: 'string',
-      enum: Object.values(NAV_BEHAVIORS),
-      optional: true,
-      default: NAV_BEHAVIORS.FIXED
-    },
-    items: {
-      type: 'array',
-      optional: true,
-      default: []
-    },
-    groups: {
-      type: 'array',
-      optional: true
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true
-    },
-    expanded: {
-      type: 'boolean',
-      optional: true
-    },
-    showLabels: {
-      type: 'boolean',
-      optional: true,
-      default: true
-    },
-    scrimEnabled: {
-      type: 'boolean',
-      optional: true,
-      default: false
-    },
-    class: {
-      type: 'string',
-      optional: true
-    }
-  }
-} as const;
-
-/**
- * Navigation item states
- */
-export const NAV_ITEM_STATES = {
-  EXPANDED: 'expanded',
-  COLLAPSED: 'collapsed'
-} as const;
-
-/**
- * Navigation item schema
- * Enhanced with support for nested items
- */
-export const NAV_ITEM_SCHEMA = {
-  type: 'object',
-  properties: {
-    id: {
-      type: 'string',
-      required: true
-    },
-    icon: {
-      type: 'string',
-      required: true
-    },
-    label: {
-      type: 'string',
-      required: true
-    },
-    badge: {
-      type: 'string',
-      optional: true
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true
-    },
-    subtitle: {
-      type: 'string',
-      optional: true
-    },
-    groupId: {
-      type: 'string',
-      optional: true
-    },
-    items: {
-      type: 'array',
-      optional: true,
-      description: 'Nested navigation items'
-    },
-    expanded: {
-      type: 'boolean',
-      optional: true,
-      default: false
-    }
-  }
-} as const;
-
-/**
- * Navigation group schema
- */
-export const NAV_GROUP_SCHEMA = {
-  type: 'object',
-  properties: {
-    id: {
-      type: 'string',
-      required: true
-    },
-    title: {
-      type: 'string',
-      required: true
-    },
-    expanded: {
-      type: 'boolean',
-      optional: true,
-      default: true
-    }
-  }
-} as const;

package/src/components/navigation/features/items.js

@@ -1,192 +0,0 @@
-// src/components/navigation/features/items.js
-import { createNavItem, getAllNestedItems } from '../nav-item'
-
-export const withNavItems = (config) => (component) => {
-  const items = new Map()
-  let activeItem = null
-
-  /**
-   * Recursively stores items in the items Map
-   * @param {Object} itemConfig - Item configuration
-   * @param {HTMLElement} item - Created item element
-   */
-  const storeItem = (itemConfig, item) => {
-    items.set(itemConfig.id, { element: item, config: itemConfig })
-
-    if (itemConfig.items?.length) {
-      itemConfig.items.forEach(nestedConfig => {
-        const container = item.closest(`.${config.prefix}-nav-item-container`)
-        const nestedContainer = container.querySelector(`.${config.prefix}-nav-nested-container`)
-        const nestedItem = nestedContainer.querySelector(`[data-id="${nestedConfig.id}"]`)
-        storeItem(nestedConfig, nestedItem)
-      })
-    }
-  }
-
-  // Create initial items
-  if (config.items) {
-    config.items.forEach(itemConfig => {
-      const item = createNavItem(itemConfig, component.element, config.prefix)
-      storeItem(itemConfig, item)
-
-      if (itemConfig.active) {
-        activeItem = { element: item, config: itemConfig }
-        item.classList.add(`${config.prefix}-nav-item--active`)
-        item.setAttribute('aria-selected', 'true')
-      }
-    })
-  }
-
-  // Handle item clicks
-  component.element.addEventListener('click', (event) => {
-    const item = event.target.closest(`.${config.prefix}-nav-item`)
-    if (!item || item.disabled || item.getAttribute('aria-haspopup') === 'true') return
-
-    const id = item.dataset.id
-    const itemData = items.get(id)
-    if (!itemData) return
-
-    // Store previous item before updating
-    const previousItem = activeItem
-
-    // Update active state
-    if (activeItem) {
-      activeItem.element.classList.remove(`${config.prefix}-nav-item--active`)
-      activeItem.element.setAttribute('aria-selected', 'false')
-    }
-
-    item.classList.add(`${config.prefix}-nav-item--active`)
-    item.setAttribute('aria-selected', 'true')
-    activeItem = itemData
-
-    // Emit change event with item data
-    component.emit('change', {
-      id,
-      item: itemData,
-      previousItem,
-      path: getItemPath(id)
-    })
-  })
-
-  /**
-   * Gets the path to an item (parent IDs)
-   * @param {string} id - Item ID to get path for
-   * @returns {Array<string>} Array of parent item IDs
-   */
-  const getItemPath = (id) => {
-    const path = []
-    let currentItem = items.get(id)
-
-    while (currentItem) {
-      const parentContainer = currentItem.element.closest(`.${config.prefix}-nav-nested-container`)
-      if (!parentContainer) break
-
-      const parentItem = parentContainer.previousElementSibling
-      if (!parentItem) break
-
-      const parentId = parentItem.dataset.id
-      if (!parentId) break
-
-      path.unshift(parentId)
-      currentItem = items.get(parentId)
-    }
-
-    return path
-  }
-
-  // Clean up when component is destroyed
-  if (component.lifecycle) {
-    const originalDestroy = component.lifecycle.destroy
-    component.lifecycle.destroy = () => {
-      items.clear()
-      originalDestroy?.()
-    }
-  }
-
-  return {
-    ...component,
-    items,
-
-    addItem (itemConfig) {
-      if (items.has(itemConfig.id)) return this
-
-      const item = createNavItem(itemConfig, component.element, config.prefix)
-      storeItem(itemConfig, item)
-
-      if (itemConfig.active) {
-        this.setActive(itemConfig.id)
-      }
-
-      component.emit('itemAdded', {
-        id: itemConfig.id,
-        item: { element: item, config: itemConfig }
-      })
-      return this
-    },
-
-    removeItem (id) {
-      const item = items.get(id)
-      if (!item) return this
-
-      // Remove all nested items first
-      const nestedItems = getAllNestedItems(item.element, config.prefix)
-      nestedItems.forEach(nestedItem => {
-        const nestedId = nestedItem.dataset.id
-        if (nestedId) items.delete(nestedId)
-      })
-
-      if (activeItem?.config.id === id) {
-        activeItem = null
-      }
-
-      // Remove the entire item container
-      const container = item.element.closest(`.${config.prefix}-nav-item-container`)
-      container?.remove()
-      items.delete(id)
-
-      component.emit('itemRemoved', { id, item })
-      return this
-    },
-
-    getItem: (id) => items.get(id),
-    getAllItems: () => Array.from(items.values()),
-    getActive: () => activeItem,
-    getItemPath: (id) => getItemPath(id),
-
-    setActive (id) {
-      const item = items.get(id)
-      if (!item || item.config.disabled) return this
-
-      if (activeItem) {
-        activeItem.element.classList.remove(`${config.prefix}-nav-item--active`)
-        activeItem.element.setAttribute('aria-selected', 'false')
-      }
-
-      item.element.classList.add(`${config.prefix}-nav-item--active`)
-      item.element.setAttribute('aria-selected', 'true')
-      activeItem = item
-
-      // Ensure all parent items are expanded
-      const path = getItemPath(id)
-      path.forEach(parentId => {
-        const parentItem = items.get(parentId)
-        if (parentItem) {
-          const parentButton = parentItem.element
-          const nestedContainer = parentButton.closest(`.${config.prefix}-nav-item-container`)
-            .querySelector(`.${config.prefix}-nav-nested-container`)
-
-          parentButton.setAttribute('aria-expanded', 'true')
-          nestedContainer.hidden = false
-        }
-      })
-
-      component.emit('activeChanged', {
-        id,
-        item,
-        previousItem: activeItem,
-        path: getItemPath(id)
-      })
-      return this
-    }
-  }
-}

package/src/components/progress/constants.ts

@@ -1,29 +0,0 @@
-// src/components/progress/constants.ts
-
-/**
- * Progress component variants
- */
-export const PROGRESS_VARIANTS = {
-  /** Standard linear progress bar */
-  LINEAR: 'linear',
-  
-  /** Circular progress indicator */
-  CIRCULAR: 'circular',
-  
-  /** Progress with known value */
-  DETERMINATE: 'determinate',
-  
-  /** Indeterminate progress animation */
-  INDETERMINATE: 'indeterminate'
-} as const;
-
-/**
- * Progress component events
- */
-export const PROGRESS_EVENTS = {
-  /** Fired when value changes */
-  VALUE_CHANGE: 'valueChange',
-  
-  /** Fired when component becomes determinate/indeterminate */
-  STATE_CHANGE: 'stateChange'
-} as const;

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

@@ -1,94 +0,0 @@
-// src/components/slider/features/appearance.ts
-import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
-import { SliderConfig } from '../types';
-
-/**
- * Add appearance management features to slider component
- * @param config Slider configuration
- * @returns Component enhancer with appearance features
- */
-export const withAppearance = (config: SliderConfig) => component => {
-  return {
-    ...component,
-    appearance: {
-      /**
-       * Sets slider color
-       * @param color Color variant
-       */
-      setColor(color: keyof typeof SLIDER_COLORS | SLIDER_COLORS) {
-        // Remove existing color classes
-        Object.values(SLIDER_COLORS).forEach(colorName => {
-          component.element.classList.remove(`${component.getClass('slider')}--${colorName}`);
-        });
-        
-        // Add new color class if not primary (default)
-        if (color !== SLIDER_COLORS.PRIMARY) {
-          component.element.classList.add(`${component.getClass('slider')}--${color}`);
-        }
-      },
-      
-      /**
-       * Gets slider color
-       * @returns Current color name
-       */
-      getColor() {
-        // Find which color class is active
-        const colorClass = Object.values(SLIDER_COLORS).find(colorName => 
-          component.element.classList.contains(`${component.getClass('slider')}--${colorName}`)
-        );
-        
-        return colorClass || SLIDER_COLORS.PRIMARY;
-      },
-      
-      /**
-       * Sets slider size
-       * @param size Size variant
-       */
-      setSize(size: keyof typeof SLIDER_SIZES | SLIDER_SIZES) {
-        // Remove existing size classes
-        Object.values(SLIDER_SIZES).forEach(sizeName => {
-          component.element.classList.remove(`${component.getClass('slider')}--${sizeName}`);
-        });
-        
-        // Add new size class if not medium (default)
-        if (size !== SLIDER_SIZES.MEDIUM) {
-          component.element.classList.add(`${component.getClass('slider')}--${size}`);
-        }
-      },
-      
-      /**
-       * Gets slider size
-       * @returns Current size name
-       */
-      getSize() {
-        // Find which size class is active
-        const sizeClass = Object.values(SLIDER_SIZES).find(sizeName => 
-          component.element.classList.contains(`${component.getClass('slider')}--${sizeName}`)
-        );
-        
-        return sizeClass || SLIDER_SIZES.MEDIUM;
-      },
-      
-      /**
-       * Shows or hides tick marks
-       * @param show Whether to show ticks
-       */
-      showTicks(show: boolean) {
-        config.ticks = show;
-        
-        // Regenerate ticks if slider is initialized
-        if (component.slider) {
-          component.slider.regenerateTicks();
-        }
-      },
-      
-      /**
-       * Shows or hides current value bubble while dragging
-       * @param show Whether to show value bubble
-       */
-      showCurrentValue(show: boolean) {
-        config.showValue = show;
-      }
-    }
-  };
-};