mtrl 0.1.2 → 0.2.0

package/src/components/container/container.js

@@ -1,45 +0,0 @@
-// src/components/container/container.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import { withEvents, withLifecycle } from '../../core/compose/features'
-import { withAPI } from './api'
-
-/**
- * Creates a new Container component
- * @param {Object} config - Container configuration
- * @param {string} [config.variant] - Visual variant
- * @param {number} [config.elevation] - Elevation level
- * @param {string} [config.class] - Additional CSS classes
- */
-const createContainer = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'container',
-    prefix: PREFIX
-  }
-
-  try {
-    return pipe(
-      createBase,
-      withElement({
-        tag: 'div',
-        componentName: 'container',
-        className: [
-          config.variant && `${PREFIX}-container--${config.variant}`,
-          config.elevation && `${PREFIX}-container--elevation-${config.elevation}`,
-          config.class
-        ]
-      }),
-      withEvents(),
-      withLifecycle(),
-      comp => withAPI({
-        lifecycle: comp.lifecycle
-      })(comp)
-    )(baseConfig)
-  } catch (error) {
-    throw new Error(`Failed to create container: ${error.message}`)
-  }
-}
-
-export default createContainer

package/src/components/container/index.js

@@ -1,2 +0,0 @@
-// src/components/container/index.js
-export { default } from './container.js'

package/src/components/container/styles.scss

@@ -1,66 +0,0 @@
-// src/components/container/_container.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}-container';
-
-.#{$component} {
-  @include m.shape('medium');
-  @include m.motion-transition(
-    background-color,
-    box-shadow
-  );
-  
-  padding: 16px;
-  background-color: t.color('surface-container');
-
-  // Surface container variants
-  &--low {
-    background-color: t.color('surface-container-low');
-  }
-  
-  &--lowest {
-    background-color: t.color('surface-container-lowest'); 
-  }
-
-  &--high {
-    background-color: t.color('surface-container-high');
-  }
-
-  &--highest {
-    background-color: t.color('surface-container-highest');
-  }
-
-  // Elevation variants
-  &--elevation-0 {
-    @include m.elevation(0);
-  }
-
-  &--elevation-1 {
-    @include m.elevation(1);
-  }
-
-  &--elevation-2 {
-    @include m.elevation(2);
-  }
-
-  &--elevation-3 {
-    @include m.elevation(3);
-  }
-
-  &--elevation-4 {
-    @include m.elevation(4);
-  }
-  
-  // Accessibility
-  @include m.reduced-motion {
-    transition: none;
-  }
-
-  @include m.high-contrast {
-    border: 1px solid currentColor;
-  }
-}

package/src/components/list/index.js

@@ -1,2 +0,0 @@
-// src/components/list/index.js
-export { default } from './list.js'

package/src/components/list/list-item.js

@@ -1,147 +0,0 @@
-// src/components/list/list-item.js
-
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import { withEvents, withDisabled } from '../../core/compose/features'
-
-/**
- * Supported list item layouts
- */
-export const LIST_ITEM_LAYOUTS = {
-  HORIZONTAL: 'horizontal', // Default horizontal layout
-  VERTICAL: 'vertical' // Stacked layout with vertical alignment
-}
-
-/**
- * Creates a DOM element with optional class and content
- * @param {string} tag - HTML tag name
- * @param {string} className - CSS class name
- * @param {string|HTMLElement} [content] - Element content or child element
- * @returns {HTMLElement} Created element
- */
-const createElement = (tag, className, content) => {
-  const element = document.createElement(tag)
-  element.className = className
-  if (content) {
-    if (typeof content === 'string') {
-      element.textContent = content
-    } else {
-      element.appendChild(content)
-    }
-  }
-  return element
-}
-
-/**
- * Creates a list item component
- * @param {Object} config - List item configuration
- * @param {string} [config.layout='horizontal'] - Item layout (horizontal/vertical)
- * @param {string|HTMLElement} [config.leading] - Leading content (icon/avatar)
- * @param {string} [config.headline] - Primary text
- * @param {string} [config.supportingText] - Secondary text
- * @param {string|HTMLElement} [config.trailing] - Trailing content (icon/meta)
- * @param {string} [config.overline] - Text above headline (vertical only)
- * @param {string|HTMLElement} [config.meta] - Meta information (vertical only)
- * @param {boolean} [config.disabled] - Disabled state
- * @param {boolean} [config.selected] - Selected state
- * @param {string} [config.class] - Additional CSS classes
- * @param {string} [config.role='listitem'] - ARIA role
- */
-const createListItem = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'list-item',
-    prefix: PREFIX
-  }
-
-  const createContent = (component) => {
-    const { element } = component
-    const { prefix } = baseConfig
-    const isVertical = config.layout === LIST_ITEM_LAYOUTS.VERTICAL
-
-    // Create content container
-    const content = createElement('div', `${prefix}-list-item-content`)
-
-    // Add leading content (icon/avatar)
-    if (config.leading) {
-      const leading = createElement('div', `${prefix}-list-item-leading`)
-      if (typeof config.leading === 'string') {
-        leading.innerHTML = config.leading
-      } else {
-        leading.appendChild(config.leading)
-      }
-      element.appendChild(leading)
-    }
-
-    // Text wrapper for proper alignment
-    const textWrapper = createElement('div', `${prefix}-list-item-text`)
-
-    // Add overline text (vertical only)
-    if (isVertical && config.overline) {
-      const overline = createElement('div', `${prefix}-list-item-overline`, config.overline)
-      textWrapper.appendChild(overline)
-    }
-
-    // Add headline (primary text)
-    if (config.headline) {
-      const headline = createElement('div', `${prefix}-list-item-headline`, config.headline)
-      textWrapper.appendChild(headline)
-    }
-
-    // Add supporting text (secondary text)
-    if (config.supportingText) {
-      const supporting = createElement('div', `${prefix}-list-item-supporting`, config.supportingText)
-      textWrapper.appendChild(supporting)
-    }
-
-    content.appendChild(textWrapper)
-
-    // Add meta information (vertical only)
-    if (isVertical && config.meta) {
-      const meta = createElement('div', `${prefix}-list-item-meta`)
-      if (typeof config.meta === 'string') {
-        meta.textContent = config.meta
-      } else {
-        meta.appendChild(config.meta)
-      }
-      content.appendChild(meta)
-    }
-
-    element.appendChild(content)
-
-    // Add trailing content (icon/meta)
-    if (config.trailing) {
-      const trailing = createElement('div', `${prefix}-list-item-trailing`)
-      if (typeof config.trailing === 'string') {
-        trailing.innerHTML = config.trailing
-      } else {
-        trailing.appendChild(config.trailing)
-      }
-      element.appendChild(trailing)
-    }
-
-    // Handle selected state
-    if (config.selected) {
-      element.setAttribute('aria-selected', 'true')
-      element.classList.add(`${prefix}-list-item--selected`)
-    }
-
-    return component
-  }
-
-  return pipe(
-    createBase,
-    withEvents(),
-    withElement({
-      tag: 'div',
-      role: config.role || 'listitem',
-      componentName: 'list-item',
-      className: `${config.layout === LIST_ITEM_LAYOUTS.VERTICAL ? 'vertical' : ''} ${config.class || ''}`
-    }),
-    withDisabled(),
-    createContent
-  )(baseConfig)
-}
-
-export default createListItem

package/src/components/list/list.js

@@ -1,267 +0,0 @@
-// src/components/list/list.js
-
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import { withEvents, withDisabled, withLifecycle } from '../../core/compose/features'
-import createListItem from './list-item'
-import { LIST_TYPES, LIST_LAYOUTS, LIST_CLASSES } from './constants'
-
-/**
- * Creates a divider element
- * @param {string} prefix - CSS class prefix
- * @returns {HTMLElement} Divider element
- */
-const createDivider = (prefix) => {
-  const divider = document.createElement('div')
-  divider.className = `${prefix}-${LIST_CLASSES.DIVIDER}`
-  divider.setAttribute('role', 'separator')
-  return divider
-}
-
-/**
- * Creates a section title element
- * @param {string} title - Section title text
- * @param {string} prefix - CSS class prefix
- * @returns {HTMLElement} Section title element
- */
-const createSectionTitle = (title, prefix) => {
-  const titleEl = document.createElement('div')
-  titleEl.className = `${prefix}-${LIST_CLASSES.SECTION_TITLE}`
-  titleEl.textContent = title
-  return titleEl
-}
-
-/**
- * Creates a list component
- * @param {Object} config - List configuration
- */
-const createList = (config = {}) => {
-  const baseConfig = {
-    ...config,
-    componentName: 'list',
-    prefix: PREFIX
-  }
-
-  const createContent = (component) => {
-    const { element, prefix } = component
-    const items = new Map()
-    const selectedItems = new Set()
-
-    // Set list type
-    element.setAttribute('data-type', config.type || LIST_TYPES.DEFAULT)
-
-    // Handle keyboard navigation
-    const handleKeyDown = (event) => {
-      const focusedItem = document.activeElement
-      if (!focusedItem?.classList.contains(`${prefix}-list-item`)) return
-
-      const items = Array.from(element.querySelectorAll(`.${prefix}-list-item`))
-      const currentIndex = items.indexOf(focusedItem)
-
-      switch (event.key) {
-        case 'ArrowDown':
-        case 'ArrowRight':
-          event.preventDefault()
-          const nextItem = items[currentIndex + 1]
-          if (nextItem) nextItem.focus()
-          break
-        case 'ArrowUp':
-        case 'ArrowLeft':
-          event.preventDefault()
-          const prevItem = items[currentIndex - 1]
-          if (prevItem) prevItem.focus()
-          break
-        case 'Home':
-          event.preventDefault()
-          items[0]?.focus()
-          break
-        case 'End':
-          event.preventDefault()
-          items[items.length - 1]?.focus()
-          break
-        case ' ':
-        case 'Enter':
-          event.preventDefault()
-          handleItemClick(focusedItem)
-          break
-      }
-    }
-
-    // Handle item selection
-    const handleItemClick = (itemElement) => {
-      const id = itemElement.dataset.id
-      if (!id) return
-
-      const itemData = items.get(id)
-      if (!itemData || itemData.disabled) return
-
-      switch (config.type) {
-        case LIST_TYPES.SINGLE_SELECT:
-          // Deselect previously selected item
-          selectedItems.forEach(selectedId => {
-            const selected = items.get(selectedId)
-            if (selected) {
-              selected.element.classList.remove(`${prefix}-list-item--selected`)
-              selected.element.setAttribute('aria-selected', 'false')
-            }
-          })
-          selectedItems.clear()
-
-          // Select new item
-          itemElement.classList.add(`${prefix}-list-item--selected`)
-          itemElement.setAttribute('aria-selected', 'true')
-          selectedItems.add(id)
-          break
-
-        case LIST_TYPES.MULTI_SELECT:
-          const isSelected = selectedItems.has(id)
-          if (isSelected) {
-            itemElement.classList.remove(`${prefix}-list-item--selected`)
-            itemElement.setAttribute('aria-selected', 'false')
-            selectedItems.delete(id)
-          } else {
-            itemElement.classList.add(`${prefix}-list-item--selected`)
-            itemElement.setAttribute('aria-selected', 'true')
-            selectedItems.add(id)
-          }
-          break
-      }
-
-      component.emit('selectionChange', {
-        selected: Array.from(selectedItems),
-        item: itemData,
-        type: config.type
-      })
-    }
-
-    // Create items from configuration
-    const createItems = (itemsConfig = [], container = element) => {
-      itemsConfig.forEach((itemConfig, index) => {
-        if (itemConfig.divider) {
-          container.appendChild(createDivider(prefix))
-          return
-        }
-
-        const item = createListItem({
-          ...itemConfig,
-          layout: config.layout || LIST_LAYOUTS.HORIZONTAL,
-          role: config.type === LIST_TYPES.RADIO ? 'radio' : 'option'
-        })
-
-        item.element.dataset.id = itemConfig.id
-        item.element.tabIndex = index === 0 ? 0 : -1
-        items.set(itemConfig.id, item)
-
-        if (itemConfig.selected) {
-          selectedItems.add(itemConfig.id)
-          item.element.classList.add(`${prefix}-list-item--selected`)
-          item.element.setAttribute('aria-selected', 'true')
-        }
-
-        container.appendChild(item.element)
-      })
-    }
-
-    // Create sections if configured
-    if (config.sections?.length) {
-      config.sections.forEach(section => {
-        const sectionEl = document.createElement('div')
-        sectionEl.className = `${prefix}-${LIST_CLASSES.SECTION}`
-        sectionEl.setAttribute('role', 'group')
-        if (section.title) {
-          sectionEl.appendChild(createSectionTitle(section.title, prefix))
-        }
-        createItems(section.items, sectionEl)
-        element.appendChild(sectionEl)
-      })
-    } else {
-      createItems(config.items)
-    }
-
-    // Add event listeners
-    element.addEventListener('click', (event) => {
-      const item = event.target.closest(`.${prefix}-list-item`)
-      if (item) handleItemClick(item)
-    })
-
-    element.addEventListener('keydown', handleKeyDown)
-
-    // Clean up
-    if (component.lifecycle) {
-      const originalDestroy = component.lifecycle.destroy
-      component.lifecycle.destroy = () => {
-        items.clear()
-        selectedItems.clear()
-        element.removeEventListener('keydown', handleKeyDown)
-        originalDestroy?.()
-      }
-    }
-
-    return {
-      ...component,
-      items,
-      selectedItems,
-
-      // Public methods
-      getSelected: () => Array.from(selectedItems),
-
-      setSelected: (ids) => {
-        selectedItems.clear()
-        items.forEach((item, id) => {
-          const isSelected = ids.includes(id)
-          item.element.classList.toggle(`${prefix}-list-item--selected`, isSelected)
-          item.element.setAttribute('aria-selected', isSelected.toString())
-          if (isSelected) selectedItems.add(id)
-        })
-        component.emit('selectionChange', {
-          selected: Array.from(selectedItems),
-          type: config.type
-        })
-      },
-
-      addItem: (itemConfig) => {
-        if (items.has(itemConfig.id)) return
-
-        const item = createListItem({
-          ...itemConfig,
-          layout: config.layout || LIST_LAYOUTS.HORIZONTAL
-        })
-
-        item.element.dataset.id = itemConfig.id
-        items.set(itemConfig.id, item)
-        element.appendChild(item.element)
-
-        component.emit('itemAdded', { id: itemConfig.id, item })
-      },
-
-      removeItem: (id) => {
-        const item = items.get(id)
-        if (!item) return
-
-        item.element.remove()
-        items.delete(id)
-        selectedItems.delete(id)
-
-        component.emit('itemRemoved', { id, item })
-      }
-    }
-  }
-
-  return pipe(
-    createBase,
-    withEvents(),
-    withElement({
-      tag: 'div',
-      role: config.type === LIST_TYPES.DEFAULT ? 'list' : 'listbox',
-      'aria-multiselectable': config.type === LIST_TYPES.MULTI_SELECT ? 'true' : undefined,
-      componentName: LIST_CLASSES.ROOT,
-      className: config.class
-    }),
-    withDisabled(),
-    withLifecycle(),
-    createContent
-  )(baseConfig)
-}
-
-export default createList

package/src/components/menu/api.js

@@ -1,117 +0,0 @@
-// src/components/menu/api.js
-
-/**
- * Enhances menu component with API methods
- * @param {Object} options - API configuration
- * @param {Object} options.lifecycle - Lifecycle handlers
- */
-export const withAPI = ({ lifecycle }) => (component) => ({
-  ...component,
-  element: component.element,
-
-  /**
-   * Shows the menu
-   * @returns {Object} Component instance
-   */
-  show () {
-    component.show()
-    return this
-  },
-
-  /**
-   * Hides the menu
-   * @returns {Object} Component instance
-   */
-  hide () {
-    component.hide()
-    return this
-  },
-
-  /**
-   * Positions the menu relative to a target
-   * @param {HTMLElement} target - Target element
-   * @param {Object} options - Position options
-   * @returns {Object} Component instance
-   */
-  position (target, options) {
-    component.position(target, options)
-    return this
-  },
-
-  /**
-   * Adds an item to the menu
-   * @param {Object} config - Item configuration
-   * @returns {Object} Component instance
-   */
-  addItem (config) {
-    component.addItem?.(config)
-    return this
-  },
-
-  /**
-   * Removes an item by name
-   * @param {string} name - Item name to remove
-   * @returns {Object} Component instance
-   */
-  removeItem (name) {
-    component.removeItem?.(name)
-    return this
-  },
-
-  /**
-   * Gets all registered items
-   * @returns {Map} Map of item names to configurations
-   */
-  getItems () {
-    return component.getItems?.()
-  },
-
-  /**
-   * Checks if the menu is currently visible
-   * @returns {boolean} Whether the menu is visible
-   */
-  isVisible () {
-    return component.isVisible?.()
-  },
-
-  /**
-   * Registers an event handler
-   * @param {string} event - Event name
-   * @param {Function} handler - Event handler
-   * @returns {Object} Component instance
-   */
-  on (event, handler) {
-    component.on(event, handler)
-    return this
-  },
-
-  /**
-   * Unregisters an event handler
-   * @param {string} event - Event name
-   * @param {Function} handler - Event handler
-   * @returns {Object} Component instance
-   */
-  off (event, handler) {
-    component.off(event, handler)
-    return this
-  },
-
-  /**
-   * Destroys the menu component and cleans up resources
-   * @returns {Object} Component instance
-   */
-  destroy () {
-    // First close any open submenus
-    component.hide?.()
-
-    // Then destroy the component
-    lifecycle.destroy?.()
-
-    // Final cleanup - forcibly remove from DOM if still attached
-    if (component.element && component.element.parentNode) {
-      component.element.remove()
-    }
-
-    return this
-  }
-})

package/src/components/menu/constants.js

@@ -1,42 +0,0 @@
-// src/components/menu/constants.js
-
-/**
- * Menu alignment options
- * @enum {string}
- */
-export const MENU_ALIGN = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  CENTER: 'center'
-}
-
-/**
- * Menu vertical alignment options
- * @enum {string}
- */
-export const MENU_VERTICAL_ALIGN = {
-  TOP: 'top',
-  BOTTOM: 'bottom',
-  MIDDLE: 'middle'
-}
-
-/**
- * Menu item types
- * @enum {string}
- */
-export const MENU_ITEM_TYPES = {
-  ITEM: 'item',
-  DIVIDER: 'divider'
-}
-
-/**
- * Menu events
- * @enum {string}
- */
-export const MENU_EVENTS = {
-  SELECT: 'select',
-  OPEN: 'open',
-  CLOSE: 'close',
-  SUBMENU_OPEN: 'submenuOpen',
-  SUBMENU_CLOSE: 'submenuClose'
-}