mtrl 0.3.1 → 0.3.3

package/src/styles/components/_tabs.scss

@@ -14,7 +14,7 @@ $container: '#{base.$prefix}-tabs';
   display: flex;
   flex-direction: column;
   width: 100%;
-  background-color: t.color('surface'); // MD3: Surface color
+  // background-color: t.color('surface'); // MD3: Surface color
   box-sizing: border-box;
   
   // Basic container sizing

package/src/styles/themes/_autumn.scss

@@ -58,6 +58,9 @@
   --#{$prefix}-sys-color-on-info: #003060;
   --#{$prefix}-sys-color-on-info-rgb: 0, 48, 96;
 
+    // Include status colors for light theme
+  @include status-colors-light();
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #DDB995; // Softer brown

package/CLAUDE.md

@@ -1,33 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Build & Development Commands
-- Build: `bun run build`
-- Dev server: `bun run dev`
-- Tests: `bun test`
-- Single test: `bun test test/components/button.test.ts`
-- Watch tests: `bun test --watch`
-- Test with UI: `bun test --watch --ui`
-- Test coverage: `bun test --coverage`
-- Docs: `bun run docs` (uses TypeDoc)
-
-## Code Conventions
-- Factory pattern: Use `createComponent` naming for component creators
-- Functional composition with pipe pattern
-- Follow BEM-style CSS naming: `mtrl-component__element--modifier`
-- Use TypeDoc-compatible comments for documentation
-- Use TypeScript with strict typing where possible
-- Error handling: Try/catch blocks for component creation
-- Import order: core modules first, then utility functions, local imports last
-- Components follow a standard structure in their directories (api.ts, config.ts, etc.)
-- Use ES6+ features with full browser compatibility
-
-## Test Conventions
-- Tests live in `test/components/` with `.test.ts` extension
-- Use JSDOM for DOM manipulation in tests
-- Create mock implementations to avoid circular dependencies
-- Test structure follows `describe/test` pattern
-- Test component creation, options, events, and state changes
-- Use `import type` to avoid circular dependencies in TypeScript tests
-- Test directory structure mirrors src directory structure

package/src/components/checkbox/constants.ts

@@ -1,37 +0,0 @@
-// src/components/checkbox/constants.ts
-
-/**
- * Visual variants for checkbox
- */
-export const CHECKBOX_VARIANTS = {
-  FILLED: 'filled',
-  OUTLINED: 'outlined'
-} as const;
-
-/**
- * Label position options
- */
-export const CHECKBOX_LABEL_POSITION = {
-  START: 'start',
-  END: 'end'
-} as const;
-
-/**
- * Checkbox state classes
- */
-export const CHECKBOX_STATES = {
-  CHECKED: 'checked',
-  INDETERMINATE: 'indeterminate',
-  DISABLED: 'disabled',
-  FOCUSED: 'focused'
-} as const;
-
-/**
- * Checkbox element classes
- */
-export const CHECKBOX_CLASSES = {
-  ROOT: 'checkbox',
-  INPUT: 'checkbox-input',
-  ICON: 'checkbox-icon',
-  LABEL: 'checkbox-label'
-} as const;

package/src/components/chip/chip-set.ts

@@ -1,225 +0,0 @@
-// src/components/chip/chip-set.js
-import { PREFIX } from '../../core/config'
-import createChip from './chip'
-
-/**
- * Creates a chip set container for grouping related chips
- * @param {Object} config - ChipSet configuration
- * @param {Array} [config.chips=[]] - Array of chip configurations to initialize
- * @param {boolean} [config.scrollable=false] - Whether the chip set is horizontally scrollable
- * @param {boolean} [config.vertical=false] - Whether the chip set is vertically stacked
- * @param {string} [config.class] - Additional CSS classes
- * @param {string} [config.selector] - CSS selector for filtering behavior
- * @param {boolean} [config.multiSelect=false] - Whether multiple chips can be selected simultaneously
- * @param {Function} [config.onChange] - Callback function when chip selection changes
- * @returns {Object} ChipSet component instance
- */
-const createChipSet = (config = {}) => {
-  const {
-    chips = [],
-    scrollable = false,
-    vertical = false,
-    class: customClass,
-    selector = null,
-    multiSelect = false,
-    onChange = null
-  } = config
-
-  // Create container element
-  const element = document.createElement('div')
-  element.className = `${PREFIX}-chip-set`
-
-  if (customClass) {
-    element.classList.add(customClass)
-  }
-
-  if (scrollable) {
-    element.classList.add(`${PREFIX}-chip-set--scrollable`)
-  }
-
-  if (vertical) {
-    element.classList.add(`${PREFIX}-chip-set--vertical`)
-  }
-
-  // Store chip instances
-  const chipInstances = []
-
-  /**
-   * Updates chip selection states based on multiSelect configuration
-   * @param {Object} selectedChip - The chip that was clicked/selected
-   */
-  const handleSelection = (selectedChip) => {
-    if (!multiSelect) {
-      // Single selection mode - deselect all other chips
-      chipInstances.forEach(chip => {
-        if (chip !== selectedChip && chip.isSelected()) {
-          chip.setSelected(false)
-        }
-      })
-    }
-
-    // Call onChange callback if provided
-    if (typeof onChange === 'function') {
-      const selectedChips = chipInstances.filter(chip => chip.isSelected())
-      onChange(selectedChips, selectedChip)
-    }
-  }
-
-  /**
-   * Adds a chip to the chip set
-   * @param {Object} chipConfig - Configuration for the chip
-   * @returns {Object} The created chip instance
-   */
-  const addChip = (chipConfig) => {
-    const chipInstance = createChip({
-      ...chipConfig,
-      onSelect: (chip) => {
-        handleSelection(chip)
-        if (chipConfig.onSelect) {
-          chipConfig.onSelect(chip)
-        }
-      }
-    })
-
-    element.appendChild(chipInstance.element)
-    chipInstances.push(chipInstance)
-
-    // Add click handler to toggle selection
-    chipInstance.element.addEventListener('click', () => {
-      if (!chipInstance.element.getAttribute('aria-disabled') === 'true') {
-        chipInstance.toggleSelected()
-        handleSelection(chipInstance)
-      }
-    })
-
-    return chipInstance
-  }
-
-  // Initialize with provided chips
-  chips.forEach(chipConfig => addChip(chipConfig))
-
-  return {
-    element,
-
-    /**
-     * Adds a new chip to the chip set
-     * @param {Object} chipConfig - Configuration for the chip
-     * @returns {Object} The chip set instance for chaining
-     */
-    addChip (chipConfig) {
-      addChip(chipConfig)
-      return this
-    },
-
-    /**
-     * Removes a chip from the chip set
-     * @param {Object|number} chipOrIndex - Chip instance or index to remove
-     * @returns {Object} The chip set instance for chaining
-     */
-    removeChip (chipOrIndex) {
-      const index = typeof chipOrIndex === 'number'
-        ? chipOrIndex
-        : chipInstances.indexOf(chipOrIndex)
-
-      if (index >= 0 && index < chipInstances.length) {
-        const chip = chipInstances[index]
-        chip.destroy()
-        chipInstances.splice(index, 1)
-      }
-
-      return this
-    },
-
-    /**
-     * Gets all chip instances in the set
-     * @returns {Array} Array of chip instances
-     */
-    getChips () {
-      return [...chipInstances]
-    },
-
-    /**
-     * Gets currently selected chips
-     * @returns {Array} Array of selected chip instances
-     */
-    getSelectedChips () {
-      return chipInstances.filter(chip => chip.isSelected())
-    },
-
-    /**
-     * Gets the values of selected chips
-     * @returns {Array} Array of selected chip values
-     */
-    getSelectedValues () {
-      return this.getSelectedChips().map(chip => chip.getValue())
-    },
-
-    /**
-     * Selects chips by their values
-     * @param {Array|string} values - Value or array of values to select
-     * @returns {Object} The chip set instance for chaining
-     */
-    selectByValue (values) {
-      const valueArray = Array.isArray(values) ? values : [values]
-
-      chipInstances.forEach(chip => {
-        const shouldSelect = valueArray.includes(chip.getValue())
-        if (shouldSelect !== chip.isSelected()) {
-          chip.setSelected(shouldSelect)
-        }
-      })
-
-      return this
-    },
-
-    /**
-     * Clears all selections
-     * @returns {Object} The chip set instance for chaining
-     */
-    clearSelection () {
-      chipInstances.forEach(chip => {
-        chip.setSelected(false)
-      })
-      return this
-    },
-
-    /**
-     * Sets the scrollable state of the chip set
-     * @param {boolean} isScrollable - Whether the chip set should be scrollable
-     * @returns {Object} The chip set instance for chaining
-     */
-    setScrollable (isScrollable) {
-      if (isScrollable) {
-        element.classList.add(`${PREFIX}-chip-set--scrollable`)
-      } else {
-        element.classList.remove(`${PREFIX}-chip-set--scrollable`)
-      }
-      return this
-    },
-
-    /**
-     * Sets the vertical layout state
-     * @param {boolean} isVertical - Whether the chip set should be vertically stacked
-     * @returns {Object} The chip set instance for chaining
-     */
-    setVertical (isVertical) {
-      if (isVertical) {
-        element.classList.add(`${PREFIX}-chip-set--vertical`)
-      } else {
-        element.classList.remove(`${PREFIX}-chip-set--vertical`)
-      }
-      return this
-    },
-
-    /**
-     * Destroys the chip set and all contained chips
-     */
-    destroy () {
-      chipInstances.forEach(chip => chip.destroy())
-      chipInstances.length = 0
-      element.remove()
-    }
-  }
-}
-
-export default createChipSet

package/src/components/chip/chip.ts

@@ -1,118 +0,0 @@
-// src/components/chip/chip.ts
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
-import {
-  withEvents,
-  withText,
-  withIcon,
-  withVariant,
-  withRipple,
-  withDisabled,
-  withLifecycle
-} from '../../core/compose/features'
-import { withAPI } from './api'
-import { ChipConfig, ChipComponent } from './types'
-import { createBaseConfig, getElementConfig, getApiConfig } from './config'
-
-/**
- * Creates a new Chip component
- * @param {ChipConfig} config - Chip configuration
- * @returns {ChipComponent} Chip component instance
- */
-const createChip = (config: ChipConfig = {}): ChipComponent => {
-  const baseConfig = createBaseConfig(config)
-
-  try {
-    // Create base component with core features
-    const chip = pipe(
-      createBase,
-      withEvents(),
-      withElement(getElementConfig(baseConfig)),
-      withVariant(baseConfig),
-      withDisabled(baseConfig),
-      withRipple(baseConfig),
-      withLifecycle()
-    )(baseConfig)
-    
-    // Create a container for the chip content to ensure proper ordering
-    const contentContainer = document.createElement('div')
-    contentContainer.className = `${chip.getClass('chip')}-content`
-    contentContainer.style.display = 'flex'
-    contentContainer.style.alignItems = 'center'
-    contentContainer.style.justifyContent = 'center'
-    contentContainer.style.width = '100%'
-    chip.element.appendChild(contentContainer)
-    
-    // Add leading icon if provided
-    if (config.leadingIcon || config.icon) {
-      const leadingIconElement = document.createElement('span')
-      leadingIconElement.className = `${chip.getClass('chip')}-leading-icon`
-      leadingIconElement.innerHTML = config.leadingIcon || config.icon || ''
-      contentContainer.appendChild(leadingIconElement)
-    }
-
-    // Add text element if provided
-    if (config.text) {
-      const textElement = document.createElement('span')
-      textElement.className = `${chip.getClass('chip')}-text`
-      textElement.textContent = config.text
-      contentContainer.appendChild(textElement)
-    }
-
-    // Add trailing icon if provided
-    if (config.trailingIcon) {
-      const trailingIconElement = document.createElement('span')
-      trailingIconElement.className = `${chip.getClass('chip')}-trailing-icon`
-      trailingIconElement.innerHTML = config.trailingIcon
-      
-      // Add click handler for trailing icon
-      if (config.onTrailingIconClick) {
-        trailingIconElement.addEventListener('click', (e) => {
-          e.stopPropagation() // Prevent chip click event
-          config.onTrailingIconClick(chip as unknown as ChipComponent)
-        })
-      }
-      
-      contentContainer.appendChild(trailingIconElement)
-    }
-    
-    // Add selected class if needed
-    if (config.selected) {
-      chip.element.classList.add(`${chip.getClass('chip')}--selected`)
-      chip.element.setAttribute('aria-selected', 'true')
-    }
-
-    // Add API methods to the component
-    const enhancedChip = withAPI(getApiConfig(chip))(chip)
-
-    // Add click handler for selection toggle
-    if (config.variant === 'filter' || 
-        config.variant === 'assist' ||
-        config.selectable) {
-      
-      chip.element.addEventListener('click', () => {
-        if (enhancedChip.isDisabled()) return
-        
-        enhancedChip.toggleSelected()
-        
-        // Call onChange callback if provided
-        if (config.onChange) {
-          config.onChange(enhancedChip as unknown as ChipComponent)
-        }
-        
-        // Call onSelect callback if provided
-        if (config.onSelect) {
-          config.onSelect(enhancedChip as unknown as ChipComponent)
-        }
-      })
-    }
-
-    return enhancedChip as unknown as ChipComponent
-  } catch (error) {
-    console.error('Chip creation error:', error)
-    throw new Error(`Failed to create chip: ${(error as Error).message}`)
-  }
-}
-
-export default createChip

package/src/components/chip/constants.ts

@@ -1,28 +0,0 @@
-// src/components/chip/constants.js
-
-/**
- * Available variants for the Chip component
- * @enum {string}
- */
-export const CHIP_VARIANTS = {
-  /** Standard filled chip with solid background */
-  FILLED: 'filled',
-
-  /** Outlined chip with transparent background and border */
-  OUTLINED: 'outlined',
-
-  /** Elevated chip with shadow */
-  ELEVATED: 'elevated',
-
-  /** Assist chip for suggesting actions */
-  ASSIST: 'assist',
-
-  /** Filter chip for filtering content */
-  FILTER: 'filter',
-
-  /** Input chip for representing user input */
-  INPUT: 'input',
-
-  /** Suggestion chip for presenting options */
-  SUGGESTION: 'suggestion'
-};

package/src/components/chip/index.ts

@@ -1,12 +0,0 @@
-// src/components/chip/index.ts
-export { default } from './chip'
-export { default as createChipSet } from './chip-set'
-export type { 
-  ChipConfig, 
-  ChipComponent,
-  ChipVariant
-} from './types'
-export type { 
-  ChipSetConfig, 
-  ChipSetComponent 
-} from './chip-set'

package/src/components/list/constants.ts

@@ -1,116 +0,0 @@
-// src/components/list/constants.ts
-
-/**
- * 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
-} as const;
-
-/**
- * List layout variants
- */
-export const LIST_LAYOUTS = {
-  HORIZONTAL: 'horizontal', // Default horizontal layout
-  VERTICAL: 'vertical' // Items with more content stacked vertically
-} as const;
-
-/**
- * List item layouts
- */
-export const LIST_ITEM_LAYOUTS = {
-  HORIZONTAL: 'horizontal', // Default horizontal layout
-  VERTICAL: 'vertical' // Stacked layout with vertical alignment
-} as const;
-
-/**
- * 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',
-  ITEM: 'list-item',
-  ITEM_CONTENT: 'list-item-content',
-  ITEM_LEADING: 'list-item-leading',
-  ITEM_TEXT: 'list-item-text',
-  ITEM_OVERLINE: 'list-item-overline',
-  ITEM_HEADLINE: 'list-item-headline',
-  ITEM_SUPPORTING: 'list-item-supporting',
-  ITEM_META: 'list-item-meta',
-  ITEM_TRAILING: 'list-item-trailing'
-} as const;
-
-/**
- * List validation 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
-    }
-  }
-} as const;
-
-/**
- * List item states
- */
-export const LIST_ITEM_STATES = {
-  SELECTED: 'selected',
-  DISABLED: 'disabled',
-  FOCUSED: 'focused',
-  HOVERED: 'hovered'
-} as const;

package/src/components/sheet/constants.ts

@@ -1,20 +0,0 @@
-// src/components/sheet/constants.ts
-export const SHEET_VARIANTS = {
-  STANDARD: 'standard',
-  MODAL: 'modal',
-  EXPANDED: 'expanded'
-}
-
-export const SHEET_POSITIONS = {
-  BOTTOM: 'bottom',
-  TOP: 'top',
-  LEFT: 'left',
-  RIGHT: 'right'
-}
-
-export const SHEET_EVENTS = {
-  OPEN: 'open',
-  CLOSE: 'close',
-  DRAG_START: 'dragstart',
-  DRAG_END: 'dragend'
-}

package/src/components/slider/constants.ts

@@ -1,32 +0,0 @@
-// src/components/slider/constants.ts
-
-/**
- * Available slider color variants
- */
-export const SLIDER_COLORS = {
-  PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  TERTIARY: 'tertiary',
-  ERROR: 'error'
-} as const;
-
-/**
- * Available slider size variants
- */
-export const SLIDER_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-} as const;
-
-/**
- * Available slider events
- */
-export const SLIDER_EVENTS = {
-  CHANGE: 'change',
-  INPUT: 'input',
-  FOCUS: 'focus',
-  BLUR: 'blur',
-  START: 'start',
-  END: 'end'
-} as const;

package/src/components/tooltip/constants.ts

@@ -1,27 +0,0 @@
-// src/components/tooltip/constants.ts
-
-export const TOOLTIP_POSITIONS = {
-  TOP: 'top',
-  RIGHT: 'right',
-  BOTTOM: 'bottom',
-  LEFT: 'left',
-  TOP_START: 'top-start',
-  TOP_END: 'top-end',
-  RIGHT_START: 'right-start',
-  RIGHT_END: 'right-end',
-  BOTTOM_START: 'bottom-start',
-  BOTTOM_END: 'bottom-end',
-  LEFT_START: 'left-start',
-  LEFT_END: 'left-end'
-}
-
-export const TOOLTIP_VARIANTS = {
-  DEFAULT: 'default',
-  RICH: 'rich',
-  PLAIN: 'plain'
-}
-
-export const DEFAULT_SHOW_DELAY = 300
-export const DEFAULT_HIDE_DELAY = 100
-export const DEFAULT_OFFSET = 8
-export const DEFAULT_ARROW_SIZE = 8