mtrl 0.0.0

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

@@ -0,0 +1,169 @@
+// src/components/navigation/styles/_drawer.scss
+@use 'sass:map';
+@use '../../../styles/abstract/config' as c;
+@use 'base';
+
+.#{c.$prefix}-nav {
+  &--drawer,
+  &--drawer-modal,
+  &--drawer-standard {
+    flex-direction: column;
+    width: 256px;
+    height: 100%;
+    padding: 12px 0;
+    transition: transform 0.2s ease-in-out;
+    transform: translateX(0);
+
+    // Hidden state
+    &.#{c.$prefix}-nav--hidden {
+      transform: translateX(-100%);
+      
+      @include c.rtl {
+        transform: translateX(100%);
+      }
+    }
+
+    // Item container for nesting
+    .#{c.$prefix}-nav-item-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    // Base nav item styles
+    .#{c.$prefix}-nav-item {
+      padding: 12px 16px;
+      align-items: center;
+      justify-content: flex-start;
+      border-radius: 28px;
+      margin: 0 12px;
+      width: calc(100% - 24px);
+
+      &:hover {
+        @include c.state-layer(var(--mtrl-sys-color-on-surface), 'hover');
+      }
+
+      &--active {
+        background-color: var(--mtrl-sys-color-secondary-container);
+        color: var(--mtrl-sys-color-on-secondary-container);
+
+        &:hover {
+          background-color: var(--mtrl-sys-color-secondary-container);
+        }
+      }
+
+      &-icon {
+        margin-right: 12px;
+        flex-shrink: 0;
+      }
+
+      &-label {
+        @include c.typography('label-large');
+        flex-grow: 1;
+        text-align: left;
+      }
+
+      &-badge {
+        position: static;
+        margin-left: auto;
+        margin-right: 8px;
+      }
+    }
+
+    // Nested navigation styles
+    .#{c.$prefix}-nav-nested-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      margin-left: 28px;
+      padding-right: 12px;
+      
+      &[hidden] {
+        display: none;
+      }
+
+      // Adjust nested items styles
+      .#{c.$prefix}-nav-item {
+        margin: 0;
+        padding: 8px 16px;
+        font-size: 14px;
+        
+        &-icon {
+          width: 20px;
+          height: 20px;
+          padding: 6px;
+          
+          svg {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+    }
+
+    // Expand icon styles
+    .#{c.$prefix}-nav-expand-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      margin-left: auto;
+      color: inherit;
+      @include c.motion-transition(transform);
+
+      svg {
+        width: 20px;
+        height: 20px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2px;
+      }
+    }
+
+    // RTL support
+    @include c.rtl {
+      .#{c.$prefix}-nav-item {
+        &-icon {
+          margin-right: 0;
+          margin-left: 12px;
+        }
+
+        &-label {
+          text-align: right;
+        }
+
+        &-badge {
+          margin-left: 8px;
+          margin-right: auto;
+        }
+      }
+
+      .#{c.$prefix}-nav-nested-container {
+        margin-left: 0;
+        margin-right: 28px;
+        padding-right: 0;
+        padding-left: 12px;
+      }
+
+      .#{c.$prefix}-nav-expand-icon {
+        margin-left: 0;
+        margin-right: auto;
+        transform: scaleX(-1);
+      }
+    }
+  }
+
+  &--drawer-modal {
+    @include c.elevation(2);
+  }
+
+  &--drawer-standard {
+    border-right: 1px solid var(--mtrl-sys-color-outline-variant);
+
+    @include c.rtl {
+      border-right: none;
+      border-left: 1px solid var(--mtrl-sys-color-outline-variant);
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+// src/components/navigation/styles/_rail.scss
+@use 'sass:map';
+@use '../../../styles/abstract/config' as c;
+@use 'base';
+
+.#{c.$prefix}-nav {
+  &--rail {
+    flex-direction: column;
+    width: 80px;
+    height: 100%;
+    padding: 12px 0;
+
+    .#{c.$prefix}-nav-item {
+      flex-direction: column;
+      width: 100%;
+      min-height: 56px;
+      padding: 2px;
+      margin: -2px auto 14px;
+      gap: 0;
+
+      &: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: 8px;
+        width: 56px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 16px;
+        @include c.motion-transition(background-color);
+
+        svg {
+          width: 24px;
+          height: 24px;
+          fill: currentColor;
+        }
+      }
+
+      &-label {
+        @include c.typography('label-small');
+        text-align: center;
+        color: inherit;
+        font-size: 12px;
+        line-height: 16px;
+      }
+
+      &-badge {
+        top: 4px;
+        right: 16px;
+      }
+    }
+  }
+}

package/src/components/navigation/styles.scss

@@ -0,0 +1,6 @@
+// src/components/navigation/styles.scss
+@use '../../styles/abstract/config' as c;
+@use 'styles/base';
+@use 'styles/rail';
+@use 'styles/drawer';
+@use 'styles/bar';

package/src/components/snackbar/api.js

@@ -0,0 +1,125 @@
+// src/components/snackbar/api.js
+
+/**
+ * Enhances snackbar component with API methods
+ * @param {Object} options - API configuration
+ * @param {Object} options.lifecycle - Lifecycle handlers
+ * @param {Object} options.queue - Snackbar queue manager
+ */
+export const withAPI = ({ lifecycle, queue }) => (component) => {
+  if (!queue) {
+    throw new Error('Snackbar queue is required')
+  }
+
+  let isVisible = false
+
+  const enhancedComponent = {
+    ...component,
+    element: component.element,
+
+    /**
+     * Shows the snackbar with animation
+     */
+    show () {
+      if (isVisible) return this
+      isVisible = true
+
+      queue.add({
+        ...this,
+        _show: () => {
+          document.body.appendChild(component.element)
+
+          // Force reflow for animation
+          const _ = component.element.offsetHeight
+
+          component.element.classList.add(`${component.getClass('snackbar')}--visible`)
+
+          if (component.timer) {
+            component.timer.start()
+          }
+
+          return this
+        }
+      })
+
+      return this
+    },
+
+    /**
+     * Hides the snackbar with animation and cleanup
+     */
+    hide () {
+      if (!isVisible) return this
+      isVisible = false
+
+      if (component.timer) {
+        component.timer.stop()
+      }
+
+      const handleTransitionEnd = (event) => {
+        if (event.propertyName !== 'opacity') return
+
+        component.element.removeEventListener('transitionend', handleTransitionEnd)
+        if (component.element.parentNode) {
+          component.element.remove()
+        }
+      }
+
+      component.element.addEventListener('transitionend', handleTransitionEnd)
+      component.element.classList.remove(`${component.getClass('snackbar')}--visible`)
+
+      return this
+    },
+
+    setMessage (text) {
+      component.text.setText(text)
+      return this
+    },
+
+    getMessage () {
+      return component.text.getText()
+    },
+
+    on: component.on,
+    off: component.off,
+
+    destroy () {
+      if (isVisible) {
+        component.element.remove()
+      }
+      if (component.timer) {
+        component.timer.stop()
+      }
+      lifecycle.destroy()
+    }
+  }
+
+  // Set up action button handler
+  if (component.actionButton) {
+    component.actionButton.addEventListener('click', () => {
+      component.emit('action')
+      component.emit('dismiss') // Emit dismiss to handle queue cleanup
+    })
+  }
+
+  // Set up dismiss handler
+  if (component.on) {
+    // Store the handler reference so it can be properly removed
+    const dismissHandler = () => {
+      if (isVisible) {
+        enhancedComponent.hide()
+      }
+    }
+
+    component.on('dismiss', dismissHandler)
+
+    // Add cleanup to lifecycle
+    const originalDestroy = lifecycle.destroy
+    lifecycle.destroy = () => {
+      component.off('dismiss', dismissHandler)
+      originalDestroy?.call(lifecycle)
+    }
+  }
+
+  return enhancedComponent
+}

package/src/components/snackbar/constants.js

@@ -0,0 +1,41 @@
+// src/components/snackbar/constants.js
+
+export const SNACKBAR_VARIANTS = {
+  BASIC: 'basic',
+  ACTION: 'action' // With action button
+}
+
+export const SNACKBAR_POSITIONS = {
+  CENTER: 'center',
+  START: 'start',
+  END: 'end'
+}
+
+export const SNACKBAR_SCHEMA = {
+  variant: {
+    type: 'string',
+    enum: Object.values(SNACKBAR_VARIANTS),
+    required: false
+  },
+  position: {
+    type: 'string',
+    enum: Object.values(SNACKBAR_POSITIONS),
+    required: false
+  },
+  message: {
+    type: 'string',
+    required: true
+  },
+  action: {
+    type: 'string',
+    required: false
+  },
+  duration: {
+    type: 'number',
+    required: false
+  },
+  class: {
+    type: 'string',
+    required: false
+  }
+}

package/src/components/snackbar/features.js

@@ -0,0 +1,69 @@
+// src/components/snackbar/features.js
+
+/**
+ * Adds action button to snackbar
+ */
+export const withActionButton = (config) => (component) => {
+  if (!config.action) return component
+
+  const button = document.createElement('button')
+  button.className = `${config.prefix}-snackbar-action`
+  button.textContent = config.action
+
+  component.element.appendChild(button)
+
+  return {
+    ...component,
+    actionButton: button
+  }
+}
+
+/**
+ * Adds auto-dismiss timer functionality
+ */
+export const withDismissTimer = (config) => (component) => {
+  let timeoutId = null
+
+  const startTimer = () => {
+    // Clear any existing timer
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeoutId = null
+    }
+
+    // Only start timer if duration is positive and numeric
+    if (typeof config.duration === 'number' && config.duration > 0) {
+      timeoutId = setTimeout(() => {
+        if (component.element && component.emit) {
+          component.emit('dismiss')
+        }
+      }, config.duration)
+    }
+  }
+
+  const stopTimer = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeoutId = null
+    }
+  }
+
+  // Clean up on destroy
+  const originalDestroy = component.lifecycle?.destroy
+  if (component.lifecycle) {
+    component.lifecycle.destroy = () => {
+      stopTimer()
+      if (originalDestroy) {
+        originalDestroy.call(component.lifecycle)
+      }
+    }
+  }
+
+  return {
+    ...component,
+    timer: {
+      start: startTimer,
+      stop: stopTimer
+    }
+  }
+}

package/src/components/snackbar/index.js

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

package/src/components/snackbar/position.js

@@ -0,0 +1,63 @@
+// src/components/snackbar/position.js
+
+import { SNACKBAR_POSITIONS } from './constants'
+
+/**
+ * Adds position handling to snackbar
+ * @param {Object} config - Position configuration
+ * @param {string} config.prefix - Component prefix
+ * @param {string} config.position - Position variant (start, center, end)
+ */
+export const withPosition = (config) => (component) => {
+  const position = config.position || SNACKBAR_POSITIONS.CENTER
+  const positionClass = `${config.prefix}-snackbar--${position}`
+
+  // Add position class
+  component.element.classList.add(positionClass)
+
+  // Method to update position
+  const setPosition = (newPosition) => {
+    // Remove current position class
+    component.element.classList.remove(positionClass)
+
+    // Add new position class
+    const newPositionClass = `${config.prefix}-snackbar--${newPosition}`
+    component.element.classList.add(newPositionClass)
+
+    // Update visible state transform for center position
+    if (component.element.classList.contains(`${config.prefix}-snackbar--visible`)) {
+      if (newPosition === SNACKBAR_POSITIONS.CENTER) {
+        component.element.style.transform = 'translateX(-50%) scale(1)'
+      } else {
+        component.element.style.transform = 'scale(1)'
+      }
+    }
+  }
+
+  return {
+    ...component,
+    position: {
+      /**
+       * Get current position
+       * @returns {string} Current position
+       */
+      getPosition: () => position,
+
+      /**
+       * Set new position
+       * @param {string} newPosition - New position to set
+       * @returns {Object} Component instance
+       */
+      setPosition: (newPosition) => {
+        if (Object.values(SNACKBAR_POSITIONS).includes(newPosition)) {
+          setPosition(newPosition)
+          return component
+        } else {
+          console.warn(`Invalid position: ${newPosition}. Using default: ${SNACKBAR_POSITIONS.CENTER}`)
+          setPosition(SNACKBAR_POSITIONS.CENTER)
+          return component
+        }
+      }
+    }
+  }
+}

package/src/components/snackbar/queue.js

@@ -0,0 +1,74 @@
+// src/components/snackbar/queue.js
+
+/**
+ * Creates a queue manager for snackbars
+ * Ensures only one snackbar is visible at a time
+ */
+export const createSnackbarQueue = () => {
+  const queue = []
+  let isProcessing = false
+
+  const processQueue = () => {
+    if (queue.length === 0) {
+      isProcessing = false
+      return
+    }
+
+    isProcessing = true
+    const snackbar = queue[0]
+
+    const handleDismiss = () => {
+      // Remove from queue
+      queue.shift()
+      // Remove listener and cleanup
+      snackbar.off?.('dismiss', handleDismiss)
+      // Reset processing state if queue is empty
+      if (queue.length === 0) {
+        isProcessing = false
+      } else {
+        // Process next after a small delay
+        setTimeout(processQueue, 200)
+      }
+    }
+
+    // Handle both normal dismiss and action button dismissal
+    snackbar.on?.('dismiss', handleDismiss)
+    snackbar._show()
+  }
+
+  return {
+    /**
+     * Adds a snackbar to the queue
+     * @param {Object} snackbar - Snackbar instance
+     */
+    add (snackbar) {
+      if (!snackbar._show) {
+        throw new Error('Snackbar must implement _show method')
+      }
+
+      queue.push(snackbar)
+
+      // Only start processing if not already processing
+      if (!isProcessing) {
+        processQueue()
+      }
+    },
+
+    /**
+     * Clears all pending snackbars
+     */
+    clear () {
+      // Remove all queued items
+      queue.length = 0
+      isProcessing = false
+    },
+
+    /**
+     * Gets current queue length
+     * @returns {number} Number of snackbars in queue
+     */
+    getLength () {
+      return queue.length
+    }
+  }
+}

package/src/components/snackbar/snackbar.js

@@ -0,0 +1,70 @@
+// src/components/snackbar/snackbar.js
+import { PREFIX } from '../../core/config'
+import { pipe } from '../../core/compose'
+import { createBase, withElement } from '../../core/compose/component'
+import { withActionButton, withDismissTimer } from './features'
+import { withPosition } from './position'
+import {
+  withEvents,
+  withText,
+  withVariant,
+  withLifecycle
+} from '../../core/compose/features'
+import { withAPI } from './api'
+import { createSnackbarQueue } from './queue'
+import { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS } from './constants'
+
+// Create a single queue instance to be shared across all snackbars
+const queue = createSnackbarQueue()
+
+/**
+ * Creates a new Snackbar component
+ * @param {Object} config - Snackbar configuration
+ * @param {string} config.message - Message to display
+ * @param {string} [config.action] - Action button text
+ * @param {string} [config.variant='basic'] - Snackbar variant
+ * @param {string} [config.position='center'] - Display position
+ * @param {number} [config.duration=4000] - Display duration in ms
+ * @param {string} [config.class] - Additional CSS classes
+ */
+const createSnackbar = (config = {}) => {
+  const baseConfig = {
+    ...config,
+    componentName: 'snackbar',
+    prefix: PREFIX,
+    variant: config.variant || SNACKBAR_VARIANTS.BASIC,
+    position: config.position || SNACKBAR_POSITIONS.CENTER,
+    duration: config.duration ?? 4000 // Use nullish coalescing to allow 0
+  }
+
+  try {
+    return pipe(
+      createBase,
+      withEvents(),
+      withElement({
+        tag: 'div',
+        componentName: 'snackbar',
+        className: config.class
+      }),
+      withVariant(baseConfig),
+      withPosition(baseConfig),
+      withText({
+        ...baseConfig,
+        text: config.message
+      }),
+      withActionButton(baseConfig),
+      withLifecycle(),
+      // First apply timer
+      withDismissTimer(baseConfig),
+      // Then apply API which needs timer
+      comp => withAPI({
+        lifecycle: comp.lifecycle,
+        queue
+      })(comp)
+    )(baseConfig)
+  } catch (error) {
+    throw new Error(`Failed to create snackbar: ${error.message}`)
+  }
+}
+
+export default createSnackbar