mtrl 0.3.3 → 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/_button.scss

@@ -96,6 +96,12 @@ $component: '#{base.$prefix}-button';
     }
   }
   
+
+  &--icon {
+    padding: 0 v.button('padding-horizontal') 0 calc(v.button('padding-horizontal') / 2 + 6px);
+  }
+  
+
   &--disabled {
     opacity: 0.38
   }

package/src/styles/components/_chip.scss

@@ -124,7 +124,7 @@ $container: '#{base.$prefix}-chips';
       background-color: t.color('on-surface');
       opacity: 0.08;
       pointer-events: none;
-      border-radius: inherit;
+      border-radius: v.chip('border-radius');
     }
     
     &:active::after {
@@ -253,7 +253,6 @@ $container: '#{base.$prefix}-chips';
   
   // Filter chip
   &--filter {
-    
     color: t.color('on-surface');
     position: relative;
     border: 1px solid t.alpha('outline', v.chip('outlined-border-opacity'));
@@ -266,7 +265,7 @@ $container: '#{base.$prefix}-chips';
       background-color: t.color('on-surface');
       opacity: 0.08;
       pointer-events: none;
-      border-radius: inherit;
+      border-radius: calc(v.chip('border-radius') - 1px);
     }
     
     &.#{$component}--selected {
@@ -309,7 +308,7 @@ $container: '#{base.$prefix}-chips';
         background-color: t.color('on-secondary-container');
         opacity: 0.08;
         pointer-events: none;
-        border-radius: inherit;
+        border-radius: calc(v.chip('border-radius') - 1px);
       }
     }
   }
@@ -330,7 +329,7 @@ $container: '#{base.$prefix}-chips';
       background-color: t.color('on-surface');
       opacity: 0.08;
       pointer-events: none;
-      border-radius: inherit;
+      border-radius: v.chip('border-radius');
     }
     
     &.#{$component}--selected {

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/components/_segmented-button.scss

@@ -13,49 +13,103 @@ $component: '#{base.$prefix}-segmented-button';
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 40px;
-  border-radius: v.shape('full');
+  border-radius: 20px; // Half of height per MD3 specs
   border: 1px solid t.color('outline');
   background-color: transparent;
   overflow: hidden;
   
-  // Disabled state
+  // Density variables with defaults (Material Design 3 standard density)
+  --segment-height: 40px;
+  --segment-padding-x: 24px;
+  --segment-padding-icon-only: 12px;
+  --segment-padding-icon-text-left: 16px;
+  --segment-padding-icon-text-right: 24px;
+  --segment-icon-size: 18px;
+  --segment-text-size: 0.875rem;
+  --segment-border-radius: 20px;
+  
+  // Set height from the CSS variable
+  height: var(--segment-height);
+  // Adjust border radius based on height
+  border-radius: calc(var(--segment-height) / 2);
+  
+  // Comfortable density (medium)
+  &--comfortable {
+    --segment-height: 36px;
+    --segment-padding-x: 20px;
+    --segment-padding-icon-only: 10px;
+    --segment-padding-icon-text-left: 14px;
+    --segment-padding-icon-text-right: 20px;
+    --segment-icon-size: 16px;
+    --segment-text-size: 0.8125rem;
+    --segment-border-radius: 18px;
+    
+    border-radius: var(--segment-border-radius);
+  }
+  
+  // Compact density (small)
+  &--compact {
+    --segment-height: 32px;
+    --segment-padding-x: 16px;
+    --segment-padding-icon-only: 8px;
+    --segment-padding-icon-text-left: 12px;
+    --segment-padding-icon-text-right: 16px;
+    --segment-icon-size: 16px;
+    --segment-text-size: 0.75rem;
+    --segment-border-radius: 16px;
+    
+    border-radius: var(--segment-border-radius);
+  }
+  
+  // Disabled state for whole component
   &--disabled {
     opacity: 0.38;
     pointer-events: none;
   }
 
-  // Segment container
-  &-segment {
-    // Base styles
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    min-width: 48px;
-    padding: 0 12px;
-    border: none;
+  // Style for button elements used as segments
+  .#{base.$prefix}-button {
+    // Reset button styles that we don't want
+    margin: 0;
+    box-shadow: none;
     background-color: transparent;
-    color: t.color('on-surface');
-    cursor: pointer;
-    user-select: none;
+    border: none;
+    position: relative; // For pseudo-elements
+    border-radius: 0; // Reset any border-radius
+    min-width: 48px;
+    height: 100%;
+    color: t.color('on-surface'); // Original color
+    
+    // Use CSS variables for dynamic sizing based on density
+    padding: 0 var(--segment-padding-x);
     
-    // Fix segmented borders
-    &:not(:first-child) {
-      border-left: 1px solid t.color('outline');
+    // Icon-only segments have equal padding all around
+    &.#{base.$prefix}-button--circular {
+      padding: 0 var(--segment-padding-icon-only);
     }
     
-    // Typography
-    @include m.typography('label-large');
+    // Segments with both icon and text
+    &:has(.#{base.$prefix}-button-icon + .#{base.$prefix}-button-text) {
+      padding: 0 var(--segment-padding-icon-text-right) 0 var(--segment-padding-icon-text-left);
+    }
     
-    // Transition
-    @include m.motion-transition(
-      background-color, 
-      color
-    );
+    // Only add border radius to first and last segments
+    &:first-child {
+      border-top-left-radius: var(--segment-border-radius);
+      border-bottom-left-radius: var(--segment-border-radius);
+    }
     
-    // States
+    &:last-child {
+      border-top-right-radius: var(--segment-border-radius);
+      border-bottom-right-radius: var(--segment-border-radius);
+    }
+    
+    // Hover state - keeping original color
+    &:hover:not([disabled]) {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    // Focus state
     &:focus {
       outline: none;
     }
@@ -65,53 +119,109 @@ $component: '#{base.$prefix}-segmented-button';
       outline-offset: -2px;
     }
     
-    &:hover:not(.#{$component}-segment--disabled) {
-      background-color: t.alpha('on-surface', 0.08);
+    // Replace border with pseudo-elements for better control
+    // Each segment has its own right border (except last)
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 1px;
+      background-color: t.color('outline');
+      pointer-events: none;
     }
     
-    // Selected state
-    &--selected {
-      background-color: t.color('secondary-container');
-      color: t.color('on-secondary-container');
+    // Disabled state handling
+    &[disabled] {
+      opacity: 0.38;
+      
+      // When a disabled button has a right border, make it lower opacity
+      &::after {
+        background-color: t.alpha('outline', 0.38);
+      }
+      
+      // When a disabled button is before a non-disabled button, let the non-disabled handle the border
+      + .#{base.$prefix}-button:not([disabled])::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 1px;
+        background-color: t.color('outline');
+        pointer-events: none;
+      }
       
-      &:hover:not(.#{$component}-segment--disabled) {
-        background-color: t.alpha('secondary-container', 0.8);
+      // When a disabled button is after a non-disabled button, make the non-disabled button's border low opacity
+      &:not(:first-child) {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 1px;
+          background-color: t.alpha('outline', 0.38);
+          pointer-events: none;
+        }
       }
     }
     
-    // Disabled state
-    &--disabled {
-      opacity: 0.38;
-      cursor: not-allowed;
+    // Ensure all button styles are reset appropriately
+    &.#{base.$prefix}-button--filled,
+    &.#{base.$prefix}-button--outlined,
+    &.#{base.$prefix}-button--tonal,
+    &.#{base.$prefix}-button--elevated,
+    &.#{base.$prefix}-button--text {
+      background-color: transparent;
+      box-shadow: none;
+      color: t.color('on-surface');
     }
+  }
+  
+  // Selected state
+  .#{base.$prefix}-segment--selected {
+    background-color: t.color('secondary-container');
+    color: t.color('on-secondary-container');
     
-    // Text element
-    &-text {
-      // For when both icon and text are present
-      margin: 0 auto;
+    &:hover:not([disabled]) {
+      background-color: t.alpha('secondary-container', 0.8);
     }
     
-    // Icon styles
-    &-icon, &-checkmark {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 18px;
-      height: 18px;
-      
-      svg {
-        width: 18px;
-        height: 18px;
-      }
-      
-      + .#{$component}-segment-text {
-        margin-left: 8px;
-      }
+    // Ensure color change even with different button variants
+    &.#{base.$prefix}-button--filled,
+    &.#{base.$prefix}-button--outlined,
+    &.#{base.$prefix}-button--tonal,
+    &.#{base.$prefix}-button--elevated,
+    &.#{base.$prefix}-button--text {
+      background-color: t.color('secondary-container');
+      color: t.color('on-secondary-container');
     }
+  }
+  
+  // Ensure proper spacing in button contents
+  .#{base.$prefix}-button-text {
+    margin: 0;
+    white-space: nowrap;
+    @include m.typography('label-large');
+    // Apply density-specific font sizing
+    font-size: var(--segment-text-size);
+  }
+  
+  .#{base.$prefix}-button-icon + .#{base.$prefix}-button-text {
+    margin-left: 8px; // MD3 spec for space between icon and text
+  }
+  
+  // Icon sizing per MD3
+  .#{base.$prefix}-button-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     
-    // Space the checkmark icon
-    &-checkmark + .#{$component}-segment-text {
-      margin-left: 8px;
+    svg {
+      width: var(--segment-icon-size);
+      height: var(--segment-icon-size);
     }
   }
 }

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 {