mtrl 0.3.5 → 0.3.7

package/src/core/layout/utils.ts

@@ -1,15 +1,15 @@
 // src/core/layout/utils.ts
 /**
  * @module core/layout
- * @description Optimized utility functions for layout creation
+ * @description Utility functions for layout creation
  */
 
 import { PREFIX } from '../config';
 import { ComponentLike } from './types';
+import { normalizeClasses as normalizeClassesUtil } from '../utils';
 
 /**
  * Checks if a value is a component object (has an element property)
- * Optimized fast path check by only validating that element property exists
  * 
  * @param value - Value to check
  * @returns True if the value is a component-like object
@@ -29,9 +29,18 @@ export function createFragment(): DocumentFragment {
   return document.createDocumentFragment();
 }
 
+/**
+ * Normalizes class values into an array of strings
+ */
+export function normalizeClasses(...classes: (string | string[])[]): string[] {
+  return normalizeClassesUtil(...classes);
+}
+
+// Constant for prefix with dash
+const PREFIX_WITH_DASH = `${PREFIX}-`;
+
 /**
  * Processes className options to add prefix if needed
- * Supports BEM naming conventions when enabled
  * 
  * @param options - Element options
  * @param skipPrefix - Whether to skip adding prefixes
@@ -43,76 +52,73 @@ export function processClassNames(
   skipPrefix: boolean = false,
   useBEM: boolean = false
 ): Record<string, any> {
-  // Fast path - if no options or skipping prefix, return as is
+  // Fast path - if no options or skipping prefix, return a new object
   if (!options || skipPrefix) return { ...options };
   
-  // Clone options to avoid mutating the original
+  // Avoid unnecessary clone if no class properties exist
+  const hasClassProps = options.class || options.className || options.rawClass;
+  if (!hasClassProps) return { ...options };
+  
+  // Create clone only once
   const processed = { ...options };
   
-  /**
-   * Processes a single class name with optional BEM handling
-   * 
-   * @param cls - Class name to process
-   * @returns Processed class name with prefix
-   */
-  const processClass = (cls: string): string => {
-    // Already prefixed - leave it as is
-    if (cls.startsWith(`${PREFIX}-`)) {
-      return cls;
+  // Unify class and className as aliases
+  if (processed.className) {
+    if (!processed.class) {
+      // Simple transfer if only className exists
+      processed.class = processed.className;
+    } else {
+      // Merge if both exist
+      const classNames = normalizeClasses([processed.class, processed.className]);
+      processed.class = classNames.join(' ');
     }
-    
-    if (useBEM) {
-      // For BEM classes (with __ or --), only prefix the block part
-      if (cls.includes('__')) {
-        // This is a BEM element, prefix only the block part
-        const [block, element] = cls.split('__');
-        return `${PREFIX}-${block}__${element}`;
-      } else if (cls.includes('--')) {
-        // This is a BEM modifier, prefix only the block part
-        const [block, modifier] = cls.split('--');
-        return `${PREFIX}-${block}--${modifier}`;
-      }
-    }
-    
-    // Standard case - prefix the entire class name
-    return `${PREFIX}-${cls}`;
-  };
+    // Always remove className after processing
+    delete processed.className;
+  }
   
-  /**
-   * Process a class property (either 'class' or 'className')
-   * 
-   * @param prop - Property name to process
-   */
-  const processProperty = (prop: string): void => {
-    if (!processed[prop]) return;
-    
-    // Handle string class names
-    if (typeof processed[prop] === 'string') {
-      processed[prop] = processed[prop]
-        .split(' ')
-        .map(cls => cls ? processClass(cls) : '')
-        .filter(Boolean)
-        .join(' ');
-    }
-    // Handle array class names
-    else if (Array.isArray(processed[prop])) {
-      processed[prop] = processed[prop]
-        .map(cls => typeof cls === 'string' ? processClass(cls) : cls)
+  // Process prefixed classes
+  if (processed.class && !skipPrefix) {
+    // Handle string format
+    if (typeof processed.class === 'string') {
+      const classes = processed.class.split(/\s+/).filter(Boolean);
+      
+      if (useBEM) {
+        // Handle BEM notation with special prefixing rules
+        processed.class = classes.map(cls => {
+          if (!cls || cls.startsWith(PREFIX_WITH_DASH)) return cls;
+          
+          if (cls.includes('__')) {
+            const [block, element] = cls.split('__');
+            return `${PREFIX_WITH_DASH}${block}__${element}`;
+          } else if (cls.includes('--')) {
+            const [block, modifier] = cls.split('--');
+            return `${PREFIX_WITH_DASH}${block}--${modifier}`;
+          }
+          
+          return `${PREFIX_WITH_DASH}${cls}`;
+        }).join(' ');
+      } else {
+        // Standard prefix handling
+        processed.class = classes.map(cls => 
+          cls && !cls.startsWith(PREFIX_WITH_DASH) ? `${PREFIX_WITH_DASH}${cls}` : cls
+        ).filter(Boolean).join(' ');
+      }
+    } 
+    // Handle array format
+    else if (Array.isArray(processed.class)) {
+      processed.class = processed.class
         .filter(Boolean)
+        .map(cls => typeof cls === 'string' && !cls.startsWith(PREFIX_WITH_DASH) ? 
+          `${PREFIX_WITH_DASH}${cls}` : cls)
         .join(' ');
     }
-  };
-  
-  // Process both possible class properties for compatibility
-  processProperty('class');
-  processProperty('className');
+  }
   
   return processed;
 }
 
 /**
  * Flattens a nested layout into a simple object with element and component references
- * Optimized by using a direct property access loop and early exits
  * 
  * @param layout - Layout object
  * @returns Flattened layout with all elements and components
@@ -120,17 +126,19 @@ export function processClassNames(
 export function flattenLayout(layout: Record<string, any>): Record<string, any> {
   const flattened: Record<string, any> = {};
   
+  // Fast path - return empty object for empty layout
+  if (!layout || typeof layout !== 'object') return flattened;
+  
   for (const key in layout) {
     const value = layout[key];
     
     // Only include components, elements, and non-functions
-    // Fast path with fewer type checks
     if (value && 
         typeof value !== 'function' && 
-        (value instanceof HTMLElement || 'element' in value)) {
+        (value instanceof HTMLElement || isComponent(value))) {
       flattened[key] = value;
     }
   }
   
   return flattened;
-}
+}

package/src/index.ts

@@ -6,7 +6,7 @@
  */
 
 // Direct component imports
-import { createElement } from './core/dom/create';
+import { createElement, addClass, removeClass, hasClass, toggleClass } from './core/dom';
 import createLayout from './core/layout';
 import createBadge from './components/badge';
 import createBottomAppBar from './components/bottom-app-bar';
@@ -36,6 +36,7 @@ import createSegmentedButton, { createSegment } from './components/segmented-but
 import createSheet from './components/sheet';
 import createSlider from './components/slider';
 import createSnackbar from './components/snackbar';
+import createSelect from './components/select';
 import createSwitch from './components/switch';
 import createTabs, { createTab } from './components/tabs';
 import createTextfield from './components/textfield';
@@ -45,6 +46,7 @@ import createTooltip from './components/tooltip';
 
 // Export all "create*" functions
 export {
+  addClass, removeClass, hasClass, toggleClass,
   createElement,
   createLayout,
   createBadge,
@@ -58,7 +60,7 @@ export {
   createCarousel,
   createCheckbox,
   createChip,
-  createChipSet,
+  createChips,
   createDatePicker,
   createDialog,
   createDivider,
@@ -72,6 +74,7 @@ export {
   createProgress,
   createRadios,
   createSearch,
+  createSelect,
   createSegmentedButton,
   createSegment,
   createSheet,
@@ -115,6 +118,7 @@ export {
   createProgress as fProgress,
   createRadios as fRadios,
   createSearch as fSearch,
+  createSelect as fSelect,
   createSegmentedButton as fSegmentedButton,
   createSegment as fSegment,
   createSheet as fSheet,

package/src/styles/abstract/_variables.scss

@@ -284,4 +284,22 @@ $spacing-scale: (
     @return map.get($chip-config, $key);
   }
   @return $fallback;
+}
+
+// Textfield configuration
+$textfield: (
+  'height': 56px,
+  'height-small': 48px,
+  'height-large': 64px,
+  'padding-horizontal': 16px,
+  'padding-vertical': 16px,
+  'border-radius': map.get($shape, 'extra-small'),
+  'border-width': 1px,
+  'label-offset': 16px,
+  'icon-size': 24px
+) !default;
+
+// Add textfield function
+@function textfield($key) {
+  @return map.get($textfield, $key);
 }

package/src/styles/components/_button.scss

@@ -106,6 +106,17 @@ $component: '#{base.$prefix}-button';
     opacity: 0.38
   }
 
+  // Active state - applied when the button has a menu open
+  &--active {
+    // Common active state styling for all variants
+    box-shadow: none;
+    
+    // ARIA attribute to indicate active state for accessibility
+    &[aria-expanded="true"] {
+      // For compatibility with ARIA
+    }
+  }
+
   // Variants
   &--filled {
     background-color: t.color('primary');
@@ -116,7 +127,8 @@ $component: '#{base.$prefix}-button';
       @include m.elevation(1);
     }
     
-    &:active {
+    &:active,
+    &.#{$component}--active {
       @include m.state-layer(t.color('on-primary'), 'pressed');
       @include m.elevation(0);
     }
@@ -133,7 +145,8 @@ $component: '#{base.$prefix}-button';
       @include m.elevation(2);
     }
     
-    &:active {
+    &:active,
+    &.#{$component}--active {
       @include m.state-layer(t.color('primary'), 'pressed');
       @include m.elevation(1);
     }
@@ -160,7 +173,8 @@ $component: '#{base.$prefix}-button';
       @include m.elevation(1);
     }
     
-    &:active {
+    &:active,
+    &.#{$component}--active {
       @include m.state-layer(t.color('on-secondary-container'), 'pressed');
       @include m.elevation(0);
     }
@@ -175,7 +189,8 @@ $component: '#{base.$prefix}-button';
       background-color: t.alpha('primary', 0.08);
     }
     
-    &:active {
+    &:active,
+    &.#{$component}--active {
       @include m.state-layer(t.color('primary'), 'pressed');
     }
   }
@@ -189,7 +204,8 @@ $component: '#{base.$prefix}-button';
       background-color: t.alpha('primary', 0.08);
     }
     
-    &:active {
+    &:active,
+    &.#{$component}--active {
       background-color: t.alpha('primary', 0.12);
     }
     

package/src/styles/components/{_chip.scss → _chips.scss}

@@ -44,6 +44,17 @@ $container: '#{base.$prefix}-chips';
     outline-offset: 2px;
   }
   
+  // Active state - applied when the chip has a menu open
+  &--active {
+    // Base active state styling
+    // Will use variant-specific implementations below
+    
+    // ARIA attribute to indicate active state for accessibility
+    &[aria-expanded="true"] {
+      // For compatibility with ARIA
+    }
+  }
+  
   // Disabled state
   &--disabled {
     opacity: 0.38;
@@ -127,7 +138,8 @@ $container: '#{base.$prefix}-chips';
       border-radius: v.chip('border-radius');
     }
     
-    &:active::after {
+    &:active::after,
+    &.#{$component}--active::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -151,7 +163,8 @@ $container: '#{base.$prefix}-chips';
         border-radius: inherit;
       }
       
-      &:active::after {
+      &:active::after,
+      &.#{$component}--active::after {
         content: '';
         position: absolute;
         inset: 0;
@@ -182,7 +195,8 @@ $container: '#{base.$prefix}-chips';
       border-color: t.alpha('outline', v.chip('outlined-border-focus-opacity'));
     }
     
-    &:active::after {
+    &:active::after,
+    &.#{$component}--active::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -206,6 +220,17 @@ $container: '#{base.$prefix}-chips';
         pointer-events: none;
         border-radius: inherit;
       }
+      
+      &:active::after,
+      &.#{$component}--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: inherit;
+      }
     }
   }
   
@@ -225,7 +250,8 @@ $container: '#{base.$prefix}-chips';
       border-radius: inherit;
     }
     
-    &:active::after {
+    &:active::after,
+    &.#{$component}--active::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -248,6 +274,17 @@ $container: '#{base.$prefix}-chips';
         pointer-events: none;
         border-radius: inherit;
       }
+      
+      &:active::after,
+      &.#{$component}--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: inherit;
+      }
     }
   }
   
@@ -268,6 +305,17 @@ $container: '#{base.$prefix}-chips';
       border-radius: calc(v.chip('border-radius') - 1px);
     }
     
+    &:active::after,
+    &.#{$component}--active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: calc(v.chip('border-radius') - 1px);
+    }
+    
     &.#{$component}--selected {
       
       padding-left: 8px;
@@ -310,6 +358,17 @@ $container: '#{base.$prefix}-chips';
         pointer-events: none;
         border-radius: calc(v.chip('border-radius') - 1px);
       }
+      
+      &:active::after,
+      &.#{$component}--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: calc(v.chip('border-radius') - 1px);
+      }
     }
   }
   
@@ -332,6 +391,17 @@ $container: '#{base.$prefix}-chips';
       border-radius: v.chip('border-radius');
     }
     
+    &:active::after,
+    &.#{$component}--active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: v.chip('border-radius');
+    }
+    
     &.#{$component}--selected {
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
@@ -349,6 +419,17 @@ $container: '#{base.$prefix}-chips';
         pointer-events: none;
         border-radius: inherit;
       }
+      
+      &:active::after,
+      &.#{$component}--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: inherit;
+      }
     }
   }
   
@@ -375,6 +456,17 @@ $container: '#{base.$prefix}-chips';
       pointer-events: none;
       border-radius: inherit;
     }
+    
+    &:active::after,
+    &.#{$component}--active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: inherit;
+    }
   }
   
   // Suggestion chip
@@ -403,6 +495,17 @@ $container: '#{base.$prefix}-chips';
       border-radius: inherit;
     }
     
+    &:active::after,
+    &.#{$component}--active::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: t.color('on-surface');
+      opacity: 0.12;
+      pointer-events: none;
+      border-radius: inherit;
+    }
+    
     &.#{$component}--selected {
       background-color: t.color('secondary-container');
       color: t.color('on-secondary-container');
@@ -416,6 +519,17 @@ $container: '#{base.$prefix}-chips';
         pointer-events: none;
         border-radius: inherit;
       }
+      
+      &:active::after,
+      &.#{$component}--active::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: t.color('on-secondary-container');
+        opacity: 0.12;
+        pointer-events: none;
+        border-radius: inherit;
+      }
     }
   }
 }