mtrl 0.0.0

package/src/components/container/container.js

@@ -0,0 +1,45 @@
+// 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

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

package/src/components/container/styles.scss

@@ -0,0 +1,59 @@
+// src/components/container/styles.scss
+@use 'sass:map';
+@use '../../styles/abstract/config' as c;
+
+.#{c.$prefix}-container {
+ @include c.shape('medium');
+ @include c.motion-transition(
+   background-color,
+   box-shadow
+ );
+ 
+ padding: 16px;
+ background-color: var(--mtrl-sys-color-surface-container);
+
+ &--low {
+   background-color: var(--mtrl-sys-color-surface-container-low);
+ }
+ 
+ &--lowest {
+   background-color: var(--mtrl-sys-color-surface-container-lowest); 
+ }
+
+ &--high {
+   background-color: var(--mtrl-sys-color-surface-container-high);
+ }
+
+ &--highest {
+   background-color: var(--mtrl-sys-color-surface-container-highest);
+ }
+
+ // Elevation variants
+ &--elevation-0 {
+   @include c.elevation(0);
+ }
+
+ &--elevation-1 {
+   @include c.elevation(1);
+ }
+
+ &--elevation-2 {
+   @include c.elevation(2);
+ }
+
+ &--elevation-3 {
+   @include c.elevation(3);
+ }
+
+ &--elevation-4 {
+   @include c.elevation(4);
+ }
+
+ @include c.reduced-motion {
+   transition: none;
+ }
+
+ @include c.high-contrast {
+   border: 1px solid currentColor;
+ }
+}

package/src/components/list/constants.js

@@ -0,0 +1,89 @@
+// src/components/list/constants.js
+
+/**
+ * List types/variants
+ */
+export const LIST_TYPES = {
+  DEFAULT: 'default', // Standard list
+  SINGLE_SELECT: 'single', // Single selection list
+  MULTI_SELECT: 'multi', // Multiple selection list
+  RADIO: 'radio' // Radio button list
+}
+
+/**
+ * List layout variants
+ */
+export const LIST_LAYOUTS = {
+  HORIZONTAL: 'horizontal', // Default horizontal layout
+  VERTICAL: 'vertical' // Items with more content stacked vertically
+}
+
+/**
+ * List element class names
+ */
+export const LIST_CLASSES = {
+  ROOT: 'list',
+  GROUP: 'list-group',
+  GROUP_TITLE: 'list-group-title',
+  DIVIDER: 'list-divider',
+  SECTION: 'list-section',
+  SECTION_TITLE: 'list-section-title'
+}
+
+/**
+ * List configuration schema
+ */
+export const LIST_SCHEMA = {
+  type: 'object',
+  properties: {
+    type: {
+      type: 'string',
+      enum: Object.values(LIST_TYPES),
+      default: LIST_TYPES.DEFAULT
+    },
+    layout: {
+      type: 'string',
+      enum: Object.values(LIST_LAYOUTS),
+      default: LIST_LAYOUTS.HORIZONTAL
+    },
+    items: {
+      type: 'array',
+      items: {
+        type: 'object'
+      },
+      default: []
+    },
+    groups: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          id: { type: 'string', required: true },
+          title: { type: 'string' },
+          items: { type: 'array' }
+        }
+      },
+      optional: true
+    },
+    sections: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          id: { type: 'string', required: true },
+          title: { type: 'string', required: true },
+          items: { type: 'array', required: true }
+        }
+      },
+      optional: true
+    },
+    disabled: {
+      type: 'boolean',
+      default: false
+    },
+    class: {
+      type: 'string',
+      optional: true
+    }
+  }
+}

package/src/components/list/index.js

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

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

@@ -0,0 +1,147 @@
+// 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

@@ -0,0 +1,267 @@
+// 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