mtrl 0.3.5 → 0.3.6

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';
@@ -45,6 +45,7 @@ import createTooltip from './components/tooltip';
 
 // Export all "create*" functions
 export {
+  addClass, removeClass, hasClass, toggleClass,
   createElement,
   createLayout,
   createBadge,

package/src/styles/components/_menu.scss

@@ -1,11 +1,10 @@
 // src/components/menu/_menu.scss
-@use '../../styles/abstract/base' as base;
 @use '../../styles/abstract/variables' as v;
-@use '../../styles/abstract/functions' as f;
 @use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/functions' as f;
 @use '../../styles/abstract/theme' as t;
 
-$component: '#{base.$prefix}-menu';
+$component: 'mtrl-menu';
 
 .#{$component} {
   // Base styles
@@ -21,19 +20,25 @@ $component: '#{base.$prefix}-menu';
   color: t.color('on-surface');
   @include m.elevation(2);
   
-  display: none;
+  // Initial state - hidden
+  display: block;
   opacity: 0;
   transform: scale(0.8);
   transform-origin: top left;
   pointer-events: none;
+  visibility: hidden; // Added for better measurement handling
   transition: opacity v.motion('duration-short2') v.motion('easing-standard'),
-              transform v.motion('duration-short2') v.motion('easing-standard');
+              transform v.motion('duration-short2') v.motion('easing-standard'),
+              visibility 0s linear v.motion('duration-short2'); // Delay visibility change
   
   &--visible {
-    display: block;
     opacity: 1;
     transform: scale(1);
     pointer-events: auto;
+    visibility: visible;
+    transition: opacity v.motion('duration-short2') v.motion('easing-standard'),
+                transform v.motion('duration-short2') v.motion('easing-standard'),
+                visibility 0s linear 0s; // No delay for visibility
   }
   
   &--submenu {
@@ -62,7 +67,6 @@ $component: '#{base.$prefix}-menu';
     cursor: pointer;
     user-select: none;
     color: t.color('on-surface');
-    @include m.motion-transition(background-color);
     
     &:hover {
       @include m.state-layer(t.color('on-surface'), 'hover');
@@ -82,12 +86,20 @@ $component: '#{base.$prefix}-menu';
       padding-right: 48px;
       
       &::after {
-        @include m.icon('chevron_right');
+        content: '';
         position: absolute;
         right: 16px;
         top: 50%;
         transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
         opacity: 0.87;
+        // This ensures the SVG inherits the exact same color as the menu item text
+        color: inherit;
       }
       
       &[aria-expanded="true"] {

package/src/styles/main.scss

@@ -37,29 +37,29 @@
 @use './components/tabs' as tabs;
 @use './components/top-app-bar' as top-app-bar;
 
-@use '../components/styles/button' as button;
-@use '../components/styles/fab' as fab;
-@use '../components/styles/extended-fab' as extended-fab;
-@use '../components/styles/segmented-button' as segmented-button;
-@use '../components/styles/card' as card;
-@use '../components/styles/carousel' as carousel;
-@use '../components/styles/checkbox' as checkbox;
-@use '../components/styles/chip' as chip;
-@use '../components/styles/datepicker' as datepicker;
-@use '../components/styles/dialog' as dialog;
-@use '../components/styles/divider' as divider;
-
-@use '../components/styles/progress' as progress;
-
-@use '../components/styles/radios' as radios;
-@use '../components/styles/timepicker' as timepicker;
-@use '../components/styles/search' as search;
-
-@use '../components/styles/snackbar' as snackbar;
-@use '../components/styles/navigation' as navigation;
-@use '../components/styles/list' as list;
-
-@use '../core/build/ripple';
+@use './components/button' as button;
+@use './components/fab' as fab;
+@use './components/extended-fab' as extended-fab;
+@use './components/segmented-button' as segmented-button;
+@use './components/card' as card;
+@use './components/carousel' as carousel;
+@use './components/checkbox' as checkbox;
+@use './components/chip' as chip;
+@use './components/datepicker' as datepicker;
+@use './components/dialog' as dialog;
+@use './components/divider' as divider;
+
+@use './components/progress' as progress;
+
+@use './components/radios' as radios;
+@use './components/timepicker' as timepicker;
+@use './components/search' as search;
+
+@use './components/snackbar' as snackbar;
+@use './components/navigation' as navigation;
+@use './components/list' as list;
+
+@use './utilities/ripple';
 
 // Initialize theme system
 :root {