mtrl 0.0.1 → 0.0.3

package/TESTING.md

@@ -0,0 +1,104 @@
+# Testing MTRL Components
+
+This document provides guidelines for writing and running tests for the MTRL library. We use Bun's built-in test runner for fast, efficient testing.
+
+## Running Tests
+
+```bash
+# Run all tests
+bun test
+
+# Run tests in watch mode (re-runs tests when files change)
+bun test --watch
+
+# Run tests with coverage report
+bun test --coverage
+
+# Run tests with UI
+bun test --watch --ui
+
+# Run specific test file or pattern
+bun test test/components/button.test.js
+```
+
+## Test Structure
+
+Tests are organized to mirror the source code structure:
+
+```
+test/
+├── setup.js                # Global test setup and DOM mocking
+├── components/             # Component tests
+│   ├── button.test.js
+│   ├── textfield.test.js
+│   └── ...
+└── core/                   # Core functionality tests
+    ├── build/
+    │   └── ripple.test.js
+    ├── dom/
+    │   └── ...
+    └── state/
+        └── emitter.test.js
+```
+
+## Writing Tests
+
+When writing tests for MTRL components, follow these guidelines:
+
+### 1. Test Component Creation
+
+Always verify that components are created correctly with default options:
+
+```javascript
+test('should create a component element', () => {
+  const component = createComponent();
+  expect(component.element).toBeDefined();
+  expect(component.element.tagName).toBe('DIV');
+  expect(component.element.className).toContain('mtrl-component');
+});
+```
+
+### 2. Test Configuration Options
+
+Test that configuration options properly affect the component:
+
+```javascript
+test('should apply variant class', () => {
+  const variant = 'filled';
+  const component = createComponent({
+    variant
+  });
+  
+  expect(component.element.className).toContain(`mtrl-component--${variant}`);
+});
+```
+
+### 3. Test Events
+
+Verify that events are properly emitted and handled:
+
+```javascript
+test('should handle click events', () => {
+  const component = createComponent();
+  const handleClick = mock(() => {});
+  
+  component.on('click', handleClick);
+  
+  // Simulate event
+  const event = new Event('click');
+  component.element.dispatchEvent(event);
+  
+  expect(handleClick).toHaveBeenCalled();
+});
+```
+
+### 4. Test State Changes
+
+Test component state changes through its API:
+
+```javascript
+test('should support disabled state', () => {
+  const component = createComponent();
+  
+  // Initially not disabled
+  expect(component.element.has

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "mtrl",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A functional JavaScript component library with composable architecture based on Material Design 3",
   "keywords": ["component", "library", "ui", "user interface", "functional", "composable"],
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "test:coverage": "bun test --coverage",
+    "test:ui": "bun test --watch --ui"
   },
   "repository": {
     "type": "git",
@@ -13,5 +16,5 @@
   },
   
   "author": "floor",
-  "license": "GPL-3.0"
+  "license": "MIT License"
 }

package/src/components/button/config.js

@@ -1,4 +1,6 @@
-import PREFIX from '../../core/config'
+// src/components/button/config.js
+
+import { PREFIX } from '../../core/config'
 
 const defaultConfig = {
   componentName: 'button',

package/src/components/checkbox/checkbox.js

@@ -82,7 +82,7 @@ const createCheckbox = (config = {}) => {
     withCheckIcon(baseConfig),
     withTextLabel(baseConfig),
     enhancedWithCheckable,
-    withDisabled(),
+    withDisabled(baseConfig), // Pass the baseConfig to withDisabled
     withLifecycle(),
     comp => withAPI({
       disabled: comp.disabled,

package/src/components/checkbox/styles.scss

@@ -157,13 +157,13 @@
       &::before {
         content: '';
         position: absolute;
-        top: -8px;
-        left: -8px;
-        right: -8px;
-        bottom: -8px;
+        top: -12px;
+        left: -12px;
+        right: -12px;
+        bottom: -12px;
         background-color: var(--mtrl-sys-color-on-surface);
         opacity: 0.08;
-        border-radius: 4px;
+        border-radius: 50%;
       }
     }
   }

package/src/components/list/constants.js

@@ -30,6 +30,11 @@ export const LIST_CLASSES = {
   SECTION_TITLE: 'list-section-title'
 }
 
+export const LIST_ITEM_LAYOUTS = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+}
+
 /**
  * List configuration schema
  */

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

@@ -1,17 +1,9 @@
 // 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
-}
+import { LIST_ITEM_LAYOUTS } from './constants'
 
 /**
  * Creates a DOM element with optional class and content
@@ -56,8 +48,7 @@ const createListItem = (config = {}) => {
   }
 
   const createContent = (component) => {
-    const { element } = component
-    const { prefix } = baseConfig
+    const { element, prefix } = component
     const isVertical = config.layout === LIST_ITEM_LAYOUTS.VERTICAL
 
     // Create content container
@@ -137,7 +128,8 @@ const createListItem = (config = {}) => {
       tag: 'div',
       role: config.role || 'listitem',
       componentName: 'list-item',
-      className: `${config.layout === LIST_ITEM_LAYOUTS.VERTICAL ? 'vertical' : ''} ${config.class || ''}`
+      // Ensure that every list item includes the prefix-based class
+      className: `${baseConfig.prefix}-list-item ${config.layout === LIST_ITEM_LAYOUTS.VERTICAL ? 'vertical' : ''} ${config.class || ''}`.trim()
     }),
     withDisabled(),
     createContent

package/src/components/list/list.js

@@ -1,5 +1,3 @@
-// src/components/list/list.js
-
 import { PREFIX } from '../../core/config'
 import { pipe } from '../../core/compose'
 import { createBase, withElement } from '../../core/compose/component'
@@ -56,29 +54,29 @@ const createList = (config = {}) => {
       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)
+      const allItems = Array.from(element.querySelectorAll(`.${prefix}-list-item`))
+      const currentIndex = allItems.indexOf(focusedItem)
 
       switch (event.key) {
         case 'ArrowDown':
         case 'ArrowRight':
           event.preventDefault()
-          const nextItem = items[currentIndex + 1]
+          const nextItem = allItems[currentIndex + 1]
           if (nextItem) nextItem.focus()
           break
         case 'ArrowUp':
         case 'ArrowLeft':
           event.preventDefault()
-          const prevItem = items[currentIndex - 1]
+          const prevItem = allItems[currentIndex - 1]
           if (prevItem) prevItem.focus()
           break
         case 'Home':
           event.preventDefault()
-          items[0]?.focus()
+          allItems[0]?.focus()
           break
         case 'End':
           event.preventDefault()
-          items[items.length - 1]?.focus()
+          allItems[allItems.length - 1]?.focus()
           break
         case ' ':
         case 'Enter':
@@ -187,7 +185,7 @@ const createList = (config = {}) => {
 
     element.addEventListener('keydown', handleKeyDown)
 
-    // Clean up
+    // Clean up lifecycle if defined
     if (component.lifecycle) {
       const originalDestroy = component.lifecycle.destroy
       component.lifecycle.destroy = () => {
@@ -248,12 +246,14 @@ const createList = (config = {}) => {
     }
   }
 
-  return pipe(
+  const list = pipe(
     createBase,
     withEvents(),
     withElement({
       tag: 'div',
-      role: config.type === LIST_TYPES.DEFAULT ? 'list' : 'listbox',
+      // Use role "list" for default (non-selectable) lists,
+      // and "listbox" for interactive, selectable types.
+      role: (!config.type || config.type === LIST_TYPES.DEFAULT) ? 'list' : 'listbox',
       'aria-multiselectable': config.type === LIST_TYPES.MULTI_SELECT ? 'true' : undefined,
       componentName: LIST_CLASSES.ROOT,
       className: config.class
@@ -262,6 +262,14 @@ const createList = (config = {}) => {
     withLifecycle(),
     createContent
   )(baseConfig)
+
+  // Ensure that for default lists, the role is correctly "list"
+  if (!config.type || config.type === LIST_TYPES.DEFAULT) {
+    list.element.setAttribute('role', 'list')
+  }
+  // Expose the prefix on the returned component for testing purposes.
+  list.prefix = baseConfig.prefix
+  return list
 }
 
 export default createList

package/src/components/menu/features/items-manager.js

@@ -331,6 +331,10 @@ export const withItemsManager = (config) => (component) => {
     removeItem (name) {
       if (!name) return this
 
+      // First, ensure we remove the item from our internal map
+      itemsMap.delete(name)
+
+      // Now try to remove the item from the DOM
       const item = list.querySelector(`[data-name="${name}"]`)
       if (item) {
         // Remove event listeners
@@ -344,8 +348,8 @@ export const withItemsManager = (config) => (component) => {
           submenus.delete(name)
         }
 
+        // Remove the item from the DOM
         item.remove()
-        itemsMap.delete(name)
       }
 
       return this

package/src/components/navigation/constants.js

@@ -121,8 +121,17 @@ export const NAV_SCHEMA = {
   }
 }
 
+/**
+ * Navigation item states
+ */
+export const NAV_ITEM_STATES = {
+  EXPANDED: 'expanded',
+  COLLAPSED: 'collapsed'
+}
+
 /**
  * Navigation item schema
+ * Enhanced with support for nested items
  */
 export const NAV_ITEM_SCHEMA = {
   type: 'object',
@@ -154,82 +163,38 @@ export const NAV_ITEM_SCHEMA = {
     groupId: {
       type: 'string',
       optional: true
-    }
-  }
-}
-
-/**
- * Navigation group schema
- */
-export const NAV_GROUP_SCHEMA = {
-  type: 'object',
-  properties: {
-    id: {
-      type: 'string',
-      required: true
     },
-    title: {
-      type: 'string',
-      required: true
+    items: {
+      type: 'array',
+      optional: true,
+      description: 'Nested navigation items'
     },
     expanded: {
       type: 'boolean',
       optional: true,
-      default: true
+      default: false
     }
   }
 }
 
 /**
- * Navigation item states
+ * Navigation group schema
  */
-export const NAV_ITEM_STATES = {
-  EXPANDED: 'expanded',
-  COLLAPSED: 'collapsed'
-}
-
-
-// Update NAV_ITEM_SCHEMA to support nested items
-export const NAV_ITEM_SCHEMA = {
+export const NAV_GROUP_SCHEMA = {
   type: 'object',
   properties: {
     id: {
       type: 'string',
       required: true
     },
-    icon: {
-      type: 'string',
-      required: true
-    },
-    label: {
+    title: {
       type: 'string',
       required: true
     },
-    badge: {
-      type: 'string',
-      optional: true
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true
-    },
-    subtitle: {
-      type: 'string',
-      optional: true
-    },
-    groupId: {
-      type: 'string',
-      optional: true
-    },
-    items: {
-      type: 'array',
-      optional: true,
-      description: 'Nested navigation items'
-    },
     expanded: {
       type: 'boolean',
       optional: true,
-      default: false
+      default: true
     }
   }
-}
+}

package/src/components/switch/styles.scss

@@ -136,7 +136,24 @@
   }
 
   &--disabled {
-    opacity: .5;
+    opacity: 0.38;
+    
+    // Specific styles for disabled + checked
+    &.#{c.$prefix}-switch--checked {
+      .#{c.$prefix}-switch-track {
+        background-color: var(--mtrl-sys-color-outline);
+        border-color: var(--mtrl-sys-color-outline);
+        opacity: 0.38;
+      }
+      
+      .#{c.$prefix}-switch-thumb {
+        background-color: var(--mtrl-sys-color-on-primary);
+        opacity: 1;
+        &-icon {
+          color: var(--mtrl-sys-color-outline)
+        }
+      }
+    }
   }
 
   // Hover effects

package/src/components/switch/switch.js

@@ -58,7 +58,7 @@ const createSwitch = (config = {}) => {
     withTextLabel(baseConfig),
     withLabelPosition(baseConfig),
     withCheckable(baseConfig),
-    withDisabled(),
+    withDisabled(baseConfig), // Pass the config to ensure disabled state is properly initialized
     withLifecycle(),
     comp => withAPI({
       disabled: comp.disabled,

package/src/core/build/ripple.js

@@ -13,7 +13,13 @@ const DEFAULT_CONFIG = RIPPLE_CONFIG
  * @returns {Object} Ripple controller instance
  */
 export const createRipple = (config = {}) => {
-  const options = { ...DEFAULT_CONFIG, ...config }
+  // Make sure we fully merge the config options
+  const options = {
+    ...DEFAULT_CONFIG,
+    ...config,
+    // Handle nested objects like opacity array
+    opacity: config.opacity || DEFAULT_CONFIG.opacity
+  }
 
   const getEndCoordinates = (bounds) => {
     const size = Math.max(bounds.width, bounds.height)
@@ -36,7 +42,29 @@ export const createRipple = (config = {}) => {
     return ripple
   }
 
+  // Store document event listeners for cleanup
+  let documentListeners = []
+
+  // Safe document event handling
+  const addDocumentListener = (event, handler) => {
+    if (typeof document.addEventListener === 'function') {
+      document.addEventListener(event, handler)
+      documentListeners.push({ event, handler })
+    }
+  }
+
+  const removeDocumentListener = (event, handler) => {
+    if (typeof document.removeEventListener === 'function') {
+      document.removeEventListener(event, handler)
+      documentListeners = documentListeners.filter(
+        listener => !(listener.event === event && listener.handler === handler)
+      )
+    }
+  }
+
   const animate = (event, container) => {
+    if (!container) return
+
     const bounds = container.getBoundingClientRect()
     const ripple = createRippleElement()
 
@@ -49,7 +77,10 @@ export const createRipple = (config = {}) => {
     })
 
     container.appendChild(ripple)
-    ripple.offsetHeight // Force reflow
+
+    // Force reflow
+    // eslint-disable-next-line no-unused-expressions
+    ripple.offsetHeight
 
     // Animate to end position
     const end = getEndCoordinates(bounds)
@@ -61,13 +92,20 @@ export const createRipple = (config = {}) => {
 
     const cleanup = () => {
       ripple.style.opacity = '0'
-      setTimeout(() => ripple.remove(), options.duration)
-      document.removeEventListener('mouseup', cleanup)
-      document.removeEventListener('mouseleave', cleanup)
+
+      // Use setTimeout to remove element after animation
+      setTimeout(() => {
+        if (ripple.parentNode) {
+          ripple.parentNode.removeChild(ripple)
+        }
+      }, options.duration)
+
+      removeDocumentListener('mouseup', cleanup)
+      removeDocumentListener('mouseleave', cleanup)
     }
 
-    document.addEventListener('mouseup', cleanup)
-    document.addEventListener('mouseleave', cleanup)
+    addDocumentListener('mouseup', cleanup)
+    addDocumentListener('mouseleave', cleanup)
   }
 
   return {
@@ -81,12 +119,41 @@ export const createRipple = (config = {}) => {
       }
       element.style.overflow = 'hidden'
 
-      element.addEventListener('mousedown', (e) => animate(e, element))
+      // Store the mousedown handler to be able to remove it later
+      const mousedownHandler = (e) => animate(e, element)
+
+      // Store handler reference on the element
+      if (!element.__rippleHandlers) {
+        element.__rippleHandlers = []
+      }
+      element.__rippleHandlers.push(mousedownHandler)
+
+      element.addEventListener('mousedown', mousedownHandler)
     },
 
     unmount: (element) => {
       if (!element) return
-      element.querySelectorAll('.ripple').forEach(ripple => ripple.remove())
+
+      // Clear document event listeners
+      documentListeners.forEach(({ event, handler }) => {
+        removeDocumentListener(event, handler)
+      })
+      documentListeners = []
+
+      // Remove event listeners
+      if (element.__rippleHandlers) {
+        element.__rippleHandlers.forEach(handler => {
+          element.removeEventListener('mousedown', handler)
+        })
+        element.__rippleHandlers = []
+      }
+
+      // Remove all ripple elements
+      const ripples = element.querySelectorAll('.ripple')
+      ripples.forEach(ripple => {
+        // Call remove directly to match the test expectation
+        ripple.remove()
+      })
     }
   }
 }

package/src/core/compose/features/disabled.js

@@ -1,25 +1,64 @@
 // src/core/compose/features/disabled.js
 
-export const withDisabled = (config) => (component) => {
-  if (!component.element) return component
+/**
+ * Adds disabled state management to a component
+ * @param {Object} config - Disabled configuration
+ * @returns {Function} Component enhancer
+ */
+export const withDisabled = (config = {}) => (component) => {
+  // Get the disabled class based on component name
+  const disabledClass = `${component.getClass(component.componentName)}--disabled`
 
-  return {
-    ...component,
-    disabled: {
-      enable () {
-        console.debug('disabled')
+  // Directly implement disabled functionality
+  const disabled = {
+    enable () {
+      component.element.classList.remove(disabledClass)
+      if (component.input) {
+        component.input.disabled = false
+        component.input.removeAttribute('disabled')
+      } else {
         component.element.disabled = false
-        const className = `${config.prefix}-${config.componentName}--disable`
-        component.element.classList.remove(className)
-        return this
-      },
-      disable () {
-        console.debug('disabled')
+        component.element.removeAttribute('disabled')
+      }
+      return this
+    },
+
+    disable () {
+      component.element.classList.add(disabledClass)
+      if (component.input) {
+        component.input.disabled = true
+        component.input.setAttribute('disabled', 'true')
+      } else {
         component.element.disabled = true
-        const className = `${config.prefix}-${config.componentName}--disable`
-        component.element.classList.add(className)
-        return this
+        component.element.setAttribute('disabled', 'true')
       }
+      return this
+    },
+
+    toggle () {
+      if (this.isDisabled()) {
+        this.enable()
+      } else {
+        this.disable()
+      }
+      return this
+    },
+
+    isDisabled () {
+      return component.input ? component.input.disabled : component.element.disabled
     }
   }
+
+  // Initialize disabled state if configured
+  if (config.disabled) {
+    // Use requestAnimationFrame to ensure DOM is ready
+    requestAnimationFrame(() => {
+      disabled.disable()
+    })
+  }
+
+  return {
+    ...component,
+    disabled
+  }
 }