mtrl 0.0.0

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

@@ -0,0 +1,192 @@
+// 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/navigation/index.js

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

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

@@ -0,0 +1,137 @@
+// src/components/navigation/nav-item.js
+
+/**
+ * Creates an expand/collapse icon element
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Expand icon element
+ */
+const createExpandIcon = (prefix) => {
+  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 {Array} items - Nested items configuration
+ * @param {string} prefix - CSS class prefix
+ * @param {Function} createItem - Item creation function
+ * @returns {HTMLElement} Nested items container
+ */
+const createNestedContainer = (items, prefix, createItem) => {
+  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 {Object} config - Item configuration
+ * @param {HTMLElement} container - Container element
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Created navigation item
+ */
+export const createNavItem = (config, container, prefix) => {
+  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
+      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, prefix) => {
+  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`))
+  return items.reduce((acc, nestedItem) => {
+    return [...acc, nestedItem, ...getAllNestedItems(nestedItem, prefix)]
+  }, [])
+}

package/src/components/navigation/navigation.js

@@ -0,0 +1,55 @@
+// src/components/navigation/index.js
+import { PREFIX } from '../../core/config'
+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'
+
+/**
+ * Creates a new Navigation component
+ * @param {Object} config - Navigation configuration
+ * @param {string} [config.variant='rail'] - Navigation type (rail/drawer/bar)
+ * @param {string} [config.position='left'] - Navigation position
+ * @param {Array} [config.items=[]] - Navigation items
+ * @param {boolean} [config.disabled=false] - Is navigation disabled
+ * @param {string} [config.class] - Additional CSS classes
+ */
+const createNavigation = (config = {}) => {
+  const baseConfig = {
+    ...config,
+    componentName: 'nav',
+    prefix: PREFIX
+  }
+
+  return pipe(
+    createBase,
+    // First add events system
+    withEvents(),
+    // Then add the element and other features
+    withElement({
+      tag: 'nav',
+      role: 'navigation',
+      'aria-label': config.ariaLabel || 'Main Navigation',
+      componentName: 'nav',
+      className: config.class
+    }),
+    withVariant(baseConfig),
+    withPosition(baseConfig),
+    withNavItems(baseConfig),
+    withDisabled(),
+    withLifecycle(),
+    comp => withAPI({
+      disabled: comp.disabled,
+      lifecycle: comp.lifecycle
+    })(comp)
+  )(baseConfig)
+}
+
+export default createNavigation

package/src/components/navigation/styles/_bar.scss

@@ -0,0 +1,51 @@
+// src/components/navigation/styles/_bar.scss
+@use 'sass:map';
+@use '../../../styles/abstract/config' as c;
+@use 'base';
+
+.#{c.$prefix}-nav {
+  &--bar {
+    flex-direction: row;
+    width: 100%;
+    height: 80px;
+    padding: 0 12px;
+    justify-content: space-around;
+
+    .#{c.$prefix}-nav-item {
+      flex: 1;
+      flex-direction: column;
+      height: 100%;
+      max-width: 168px;
+      gap: 4px;
+
+      &:hover {
+        .#{c.$prefix}-nav-item-icon {
+          @include c.state-layer(var(--mtrl-sys-color-on-surface), 'hover');
+        }
+      }
+
+      &--active {
+        .#{c.$prefix}-nav-item-icon {
+          background-color: var(--mtrl-sys-color-secondary-container);
+        }
+      }
+
+      &-icon {
+        margin-bottom: 4px;
+        padding: 16px;
+        @include c.motion-transition(background-color);
+      }
+
+      &-label {
+        @include c.typography('label-medium');
+        text-align: center;
+      }
+
+      &-badge {
+        top: 4px;
+        right: 50%;
+        transform: translateX(12px);
+      }
+    }
+  }
+}

package/src/components/navigation/styles/_base.scss

@@ -0,0 +1,129 @@
+// src/components/navigation/styles/_base.scss
+@use 'sass:map';
+@use '../../../styles/abstract/config' as c;
+
+.#{c.$prefix}-nav {
+  display: flex;
+  position: relative;
+  background-color: var(--mtrl-sys-color-surface-container);
+
+  // Base nav item styles
+  &-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 12px;
+    gap: 12px;
+    color: var(--mtrl-sys-color-on-surface-variant);
+    @include c.motion-transition(all);
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      color: inherit;
+      border-radius: 50%;
+      padding: 8px;
+
+      svg {
+        width: 24px;
+        height: 24px;
+        fill: currentColor;
+      }
+    }
+
+    &--active {
+      color: var(--mtrl-sys-color-primary);
+    }
+
+    &-label {
+      @include c.typography('label-large');
+      @include c.motion-transition(opacity);
+    }
+
+    &-badge {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      min-width: 16px;
+      height: 16px;
+      padding: 0 4px;
+      border-radius: 8px;
+      background-color: var(--mtrl-sys-color-error);
+      color: var(--mtrl-sys-color-on-error);
+      @include c.typography('label-small');
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  // Navigation positions
+  &--left {
+    left: 0;
+  }
+
+  &--right {
+    right: 0;
+  }
+
+  &--top {
+    top: 0;
+  }
+
+  &--bottom {
+    bottom: 0;
+  }
+
+  // States
+  &--disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+
+  // RTL Support
+  @include c.rtl {
+    &--left {
+      right: 0;
+      left: auto;
+    }
+
+    &--right {
+      left: 0;
+      right: auto;
+    }
+
+    .#{c.$prefix}-nav-item {
+      &-badge {
+        right: auto;
+        left: 8px;
+      }
+    }
+  }
+
+  // Motion
+  @include c.reduced-motion {
+    &-item,
+    &-item-label {
+      transition: none;
+    }
+  }
+
+  // High contrast
+  @include c.high-contrast {
+    border: 1px solid currentColor;
+
+    &-item {
+      &--active {
+        outline: 2px solid currentColor;
+        outline-offset: -2px;
+      }
+    }
+  }
+}