mtrl 0.2.6 → 0.2.8

package/src/core/build/ripple.ts

@@ -1,73 +1,13 @@
 // src/core/build/ripple.ts
-
 import { RIPPLE_CONFIG, RIPPLE_TIMING } from './constants';
+import { PREFIX } from '../config';
+
+// ... existing interfaces ...
 
-/**
- * Ripple animation configuration
- */
-export interface RippleConfig {
-  /**
-   * Animation duration in milliseconds
-   */
-  duration?: number;
-  
-  /**
-   * Animation timing function
-   */
-  timing?: string;
-  
-  /**
-   * Opacity start and end values
-   */
-  opacity?: [string, string];
-}
-
-/**
- * End coordinates for ripple animation
- */
-interface EndCoordinates {
-  size: string;
-  top: string;
-  left: string;
-}
-
-/**
- * Document event listener
- */
-interface DocumentListener {
-  event: string;
-  handler: EventListener;
-}
-
-/**
- * Ripple controller interface
- */
-export interface RippleController {
-  /**
-   * Attaches ripple effect to an element
-   * @param element - Target element
-   */
-  mount: (element: HTMLElement) => void;
-  
-  /**
-   * Removes ripple effect from an element
-   * @param element - Target element
-   */
-  unmount: (element: HTMLElement) => void;
-}
-
-/**
- * Creates a ripple effect instance
- * 
- * @param config - Ripple configuration
- * @returns Ripple controller instance
- */
 export const createRipple = (config: RippleConfig = {}): RippleController => {
-  // Make sure we fully merge the config options
   const options = {
     ...RIPPLE_CONFIG,
     ...config,
-    // Handle nested objects like opacity array
     opacity: config.opacity || RIPPLE_CONFIG.opacity
   };
 
@@ -84,18 +24,18 @@ export const createRipple = (config: RippleConfig = {}): RippleController => {
     };
   };
 
+  // Track active ripples for proper cleanup
+  const activeRipples = new WeakMap<HTMLElement, Set<HTMLElement>>();
+
   const createRippleElement = (): HTMLDivElement => {
     const ripple = document.createElement('div');
-    ripple.className = 'ripple';
-    // Initial styles already set in CSS
-    ripple.style.transition = `all ${options.duration}ms ${options.timing}`;
+    ripple.className = `${PREFIX}-ripple-wave`;
+    // No inline transition style - let CSS handle it
     return ripple;
   };
 
-  // Store document event listeners for cleanup
   let documentListeners: DocumentListener[] = [];
 
-  // Safe document event handling
   const addDocumentListener = (event: string, handler: EventListener): void => {
     if (typeof document.addEventListener === 'function') {
       document.addEventListener(event, handler);
@@ -113,45 +53,56 @@ export const createRipple = (config: RippleConfig = {}): RippleController => {
   };
 
   const animate = (event: MouseEvent, container: HTMLElement): void => {
-    if (!container) return;
+    if (!container || !container.__rippleContainer) return;
 
+    const rippleContainer = container.__rippleContainer;
     const bounds = container.getBoundingClientRect();
     const ripple = createRippleElement();
 
-    // Set initial position and state
+    // Calculate ripple size - should be larger than the container
+    // Use the maximum dimension of the container multiplied by 2
+    const size = Math.max(bounds.width, bounds.height) * 2;
+    
+    // Calculate position to center the ripple on the click point
+    const x = event.clientX - bounds.left - (size / 2);
+    const y = event.clientY - bounds.top - (size / 2);
+
+    // Set explicit size and position
     Object.assign(ripple.style, {
-      left: `${event.offsetX || bounds.width / 2}px`,
-      top: `${event.offsetY || bounds.height / 2}px`,
-      transform: 'scale(0)',
-      opacity: options.opacity[0]
+      width: `${size}px`,
+      height: `${size}px`,
+      left: `${x}px`,
+      top: `${y}px`
     });
 
-    container.appendChild(ripple);
+    // Append to container
+    rippleContainer.appendChild(ripple);
 
     // Force reflow
-    // eslint-disable-next-line no-unused-expressions
     ripple.offsetHeight;
 
-    // Animate to end position
-    const end = getEndCoordinates(bounds);
-    Object.assign(ripple.style, {
-      ...end,
-      transform: 'scale(1)',
-      opacity: options.opacity[1]
+    // Add active class to trigger animation
+    requestAnimationFrame(() => {
+      ripple.classList.add('active');
     });
 
     const cleanup = () => {
-      ripple.style.opacity = '0';
+      // Remove document listeners
+      removeDocumentListener('mouseup', cleanup);
+      removeDocumentListener('mouseleave', cleanup);
 
-      // Use setTimeout to remove element after animation
+      // Remove active class and add fade-out class
+      ripple.classList.remove('active');
+      ripple.classList.add('fade-out');
+      
+      // Remove after animation
       setTimeout(() => {
         if (ripple.parentNode) {
           ripple.parentNode.removeChild(ripple);
         }
+        // Remove from tracking
+        activeRipples.get(container)?.delete(ripple);
       }, options.duration);
-
-      removeDocumentListener('mouseup', cleanup);
-      removeDocumentListener('mouseleave', cleanup);
     };
 
     addDocumentListener('mouseup', cleanup);
@@ -167,8 +118,21 @@ export const createRipple = (config: RippleConfig = {}): RippleController => {
       if (currentPosition === 'static') {
         element.style.position = 'relative';
       }
-      element.style.overflow = 'hidden';
+      
+      // Create ripple container if it doesn't exist
+      let rippleContainer = element.querySelector(`.${PREFIX}-ripple`);
+      if (!rippleContainer) {
+        rippleContainer = document.createElement('div');
+        rippleContainer.className = `${PREFIX}-ripple`;
+        element.appendChild(rippleContainer);
+      }
 
+      // Store reference to container
+      element.__rippleContainer = rippleContainer as HTMLElement;
+      
+      // Initialize ripple tracking
+      activeRipples.set(element, new Set());
+      
       // Store the mousedown handler to be able to remove it later
       const mousedownHandler = (e: MouseEvent) => animate(e, element);
 
@@ -198,19 +162,32 @@ export const createRipple = (config: RippleConfig = {}): RippleController => {
         element.__rippleHandlers = [];
       }
 
-      // Remove all ripple elements
-      const ripples = element.querySelectorAll('.ripple');
-      ripples.forEach(ripple => {
-        // Call remove directly to match the test expectation
-        ripple.remove();
-      });
+      // Remove all active ripples immediately
+      if (activeRipples.has(element)) {
+        const ripples = activeRipples.get(element);
+        if (ripples) {
+          ripples.forEach(ripple => {
+            if (ripple.parentNode) {
+              ripple.parentNode.removeChild(ripple);
+            }
+          });
+        }
+        activeRipples.delete(element);
+      }
+
+      // Remove ripple container
+      if (element.__rippleContainer && element.__rippleContainer.parentNode) {
+        element.__rippleContainer.parentNode.removeChild(element.__rippleContainer);
+        delete element.__rippleContainer;
+      }
     }
   };
 };
 
-// Extend the HTMLElement interface to add rippleHandlers property
+// Extend the HTMLElement interface
 declare global {
   interface HTMLElement {
     __rippleHandlers?: Array<(e: MouseEvent) => void>;
+    __rippleContainer?: HTMLElement;
   }
 }

package/src/core/compose/features/icon.ts

@@ -58,7 +58,9 @@ export const withIcon = <T extends IconConfig>(config: T) =>
       icon.setIcon(config.icon);
     }
 
-    updateCircularStyle(component, config);
+    if (component.componentName === 'button') {
+      updateCircularStyle(component, config);
+    }
 
     return {
       ...component,

package/src/core/compose/features/ripple.ts

@@ -31,6 +31,9 @@ export const withRipple = <T extends RippleFeatureConfig>(config: T) =>
     if (!config.ripple) return component as C & RippleComponent;
 
     const rippleInstance = createRipple(config.rippleConfig);
+    
+    // Immediately mount ripple to ensure it's available right away
+    rippleInstance.mount(component.element);
 
     // If component has lifecycle methods, integrate ripple with them
     if (component.lifecycle) {
@@ -39,7 +42,7 @@ export const withRipple = <T extends RippleFeatureConfig>(config: T) =>
 
       component.lifecycle.mount = () => {
         originalMount.call(component.lifecycle);
-        rippleInstance.mount(component.element);
+        // We don't need to mount again here since we already did it above
       };
 
       component.lifecycle.destroy = () => {

package/src/core/compose/features/textlabel.ts

@@ -11,6 +11,11 @@ export interface TextLabelConfig {
    */
   label?: string;
   
+  /**
+   * Label position ('start' or 'end')
+   */
+  labelPosition?: 'start' | 'end';
+  
   /**
    * CSS class prefix
    */
@@ -69,8 +74,24 @@ export const withTextLabel = <T extends TextLabelConfig>(config: T = {} as T) =>
     labelElement.className = `${config.prefix}-${config.componentName}-label`;
     labelElement.textContent = config.label;
 
-    // Insert label after input for proper z-index stacking
-    component.element.appendChild(labelElement);
+    // Position the label based on labelPosition (default to 'start')
+    const position = config.labelPosition || 'start';
+    
+    if (position === 'start') {
+      // Insert label as the first child
+      if (component.element.firstChild) {
+        component.element.insertBefore(labelElement, component.element.firstChild);
+      } else {
+        component.element.appendChild(labelElement);
+      }
+    } else {
+      // Insert label at the end (default behavior)
+      component.element.appendChild(labelElement);
+    }
+
+    if (position && component.componentName !== 'slider') {
+      component.element.classList.add(`${config.prefix}-${config.componentName}--label-${position}`);
+    }
 
     const label: LabelManager = {
       setText(text: string) {

package/src/core/dom/create.ts

@@ -35,6 +35,11 @@ export interface CreateElementOptions {
    * Element ID
    */
   id?: string;
+
+  /**
+   * Element ariaLabel
+   */
+  ariaLabel?: string;
   
   /**
    * Dataset attributes

package/src/index.ts

@@ -2,21 +2,30 @@
 export { createElement } from './core/dom/create'
 export { default as createLayout } from './core/layout'
 export { default as createButton } from './components/button'
+export { default as createFab } from './components/fab'
+export { default as createExtendedFab } from './components/extended-fab'
+export { default as createSegmentedButton } from './components/segmented-button'
+export { default as createBottomAppBar } from './components/bottom-app-bar'
 export { default as createBadge } from './components/badge'
 export { default as createCard } from './components/card'
 export { default as createCarousel } from './components/carousel'
 export { default as createCheckbox } from './components/checkbox'
 export { default as createChip } from './components/chip'
+export { default as createDatePicker } from './components/datepicker'
 export { default as createDialog } from './components/dialog'
+export { default as createDivider } from './components/divider'
 export { default as createMenu } from './components/menu'
 export { default as createNavigation } from './components/navigation'
 export { default as createProgress } from './components/progress'
 export { default as createRadios } from './components/radios'
+export { default as createSearch } from './components/search'
 export { default as createSheet } from './components/sheet'
 export { default as createSlider } from './components/slider'
 export { default as createSnackbar } from './components/snackbar'
 export { default as createSwitch } from './components/switch'
 export { default as createTabs } from './components/tabs'
 export { default as createTextfield } from './components/textfield'
+export { default as createTimePicker } from './components/timepicker'
+export { default as createTopAppBar } from './components/top-app-bar'
 export { default as createTooltip } from './components/tooltip'
 export { default as createList } from './components/list'

package/src/styles/abstract/_theme.scss

@@ -48,8 +48,16 @@ $mtrl-sys-shape: (
   @return var(--#{$prefix}-sys-color-#{$key}-rgb);
 }
 
+/**
+ * Creates a color with alpha transparency using RGB values
+ * This version uses string.unquote to preserve the rgba function correctly
+ * @param {String} $key - Color token name
+ * @param {Number} $opacity - Opacity value (0-1)
+ * @return {String} rgba CSS function with variable
+ */
 @function alpha($key, $opacity) {
-  @return rgba(var(--#{$prefix}-sys-color-#{$key}-rgb), $opacity);
+  // #{'...'} prevents SASS from interpreting rgba as a SASS function
+  @return #{'rgba(var(--#{$prefix}-sys-color-#{$key}-rgb), #{$opacity})'};
 }
 
 @function state($key) {

package/src/styles/components/_badge.scss

@@ -0,0 +1,182 @@
+// src/components/badge/_badge.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/theme' as t;
+
+/**
+ * Badge component styles
+ * 
+ * Badge specifications:
+ * - Small badge size: 6dp
+ * - Large badge height: 16dp
+ * - Small badge corner radius: 3dp
+ * - Large badge corner radius: 8dp
+ * - Small badge: positioned 6dp from container edge
+ * - Large badge: positioned 14dp (height) x 12dp (width) from container edge
+ */
+$component: '#{base.$prefix}-badge';
+$wrapper: '#{base.$prefix}-badge-wrapper';
+
+// Wrapper styles to establish positioning context
+.#{$wrapper} {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.#{$component} {
+  // Base badge styles
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  box-sizing: border-box;
+  overflow: hidden;
+  transition: all 200ms ease;
+  text-overflow: ellipsis;
+  
+  // Hide for visibility: false
+  &--invisible {
+    display: none;
+  }
+  
+  // Small badge (dot)
+  &--small {
+    width: 6px;
+    height: 6px;
+    min-width: 6px;
+    border-radius: 3px; // 3dp corner radius
+    font-size: 0;
+    padding: 0;
+  }
+  
+  // Large badge
+  &--large {
+    height: 16px;
+    min-width: 16px;
+    border-radius: 8px; // 8dp corner radius
+    padding: 0 4px;
+    font-size: 11px;
+    line-height: 16px;
+    
+    // Handle max character count container (16dp x 34dp)
+    &.#{$component}--overflow {
+      min-width: auto;
+      max-width: 34px; // max width is 34dp for overflow badges
+      padding: 0 4px;
+    }
+  }
+  
+  // Position specs
+  &--positioned {
+    // Small badge placement (6dp from container edge)
+    &.#{$component}--small {
+      &.#{$component}--top-right {
+        top: -3px;
+        right: -3px;
+      }
+      
+      &.#{$component}--top-left {
+        top: -3px;
+        left: -3px;
+      }
+      
+      &.#{$component}--bottom-right {
+        bottom: -3px;
+        right: -3px;
+      }
+      
+      &.#{$component}--bottom-left {
+        bottom: -3px;
+        left: -3px;
+      }
+    }
+    
+    // Large badge placement (14dp x 12dp from container edge)
+    &.#{$component}--large {
+      &.#{$component}--top-right {
+        top: -8px;
+        right: -8px;
+      }
+      
+      &.#{$component}--top-left {
+        top: -8px;
+        left: -8px;
+      }
+      
+      &.#{$component}--bottom-right {
+        bottom: -8px;
+        right: -8px;
+      }
+      
+      &.#{$component}--bottom-left {
+        bottom: -8px;
+        left: -8px;
+      }
+    }
+  }
+  
+  // badge color system
+  &--error {
+    background-color: t.color('error');
+    color: t.color('on-error');
+  }
+  
+  &--primary {
+    background-color: t.color('primary');
+    color: t.color('on-primary');
+  }
+  
+  &--secondary {
+    background-color: t.color('secondary');
+    color: t.color('on-secondary');
+  }
+  
+  &--tertiary {
+    background-color: t.color('tertiary');
+    color: t.color('on-tertiary');
+  }
+  
+  &--success {
+    background-color: t.color('success');
+    color: t.color('on-success');
+  }
+  
+  &--warning {
+    background-color: t.color('warning');
+    color: t.color('on-warning');
+  }
+  
+  &--info {
+    background-color: t.color('info');
+    color: t.color('on-info');
+  }
+}
+
+// RTL support
+[dir="rtl"] {
+  .#{$component}--positioned {
+    &.#{$component}--top-right {
+      right: auto;
+      left: -8px;
+    }
+    
+    &.#{$component}--top-left {
+      left: auto;
+      right: -8px;
+    }
+    
+    &.#{$component}--bottom-right {
+      right: auto;
+      left: -8px;
+    }
+    
+    &.#{$component}--bottom-left {
+      left: auto;
+      right: -8px;
+    }
+  }
+}

package/src/styles/components/_bottom-app-bar.scss

@@ -0,0 +1,103 @@
+// src/components/bottom-app-bar/styles.scss
+@use 'sass:map';
+@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/theme' as t;
+
+$component: '#{base.$prefix}-bottom-app-bar';
+
+.#{$component} {
+  // Core Properties
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: f.get-z-index('fixed');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80px; // Default height as per specs
+  padding: 12px 16px 12px 4px; // top/bottom 12px, right 16px, left 4px
+  background-color: t.color('surface-container');
+  
+  // Apply material elevation
+  @include m.elevation(2);
+  
+  // Apply border radius at the top
+  border-top-left-radius: t.shape('medium');
+  border-top-right-radius: t.shape('medium');
+  
+  // Add transition for smooth animations
+  transition: transform 0.3s ease-in-out;
+  
+  // Actions container on the left side
+  &-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px; // Small gap between action buttons
+    height: 100%;
+    
+    // Icon buttons should have consistent sizing
+    > * {
+      flex-shrink: 0;
+    }
+  }
+  
+  // FAB container on the right side
+  &-fab-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+  }
+  
+  // Adjustment for when FAB is present - use the specified height
+  &--with-fab {
+    height: 72px;
+  }
+  
+  // Adjustment for when FAB is centered
+  &--fab-center {
+    .#{$component}-fab-container {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+  
+  // Hidden state - moved off-screen
+  &--hidden {
+    transform: translateY(100%);
+  }
+  
+  // RTL Support
+  [dir="rtl"] & {
+    padding: 12px 4px 12px 16px;
+    
+    &-actions {
+      flex-direction: row-reverse;
+    }
+    
+    &-fab-container {
+      margin-right: auto;
+      margin-left: initial;
+    }
+  }
+  
+  // // Media query to hide on large screens
+  // @media (min-width: map.get(v.$breakpoints, 'lg')) {
+  //   display: none;
+  // }
+  
+  // Reduced motion support
+  @include m.reduced-motion {
+    transition-duration: 0.01ms;
+  }
+  
+  // High contrast mode support
+  @include m.high-contrast {
+    border-top: 1px solid currentColor;
+  }
+}

package/src/{components/button/_styles.scss → styles/components/_button.scss}

@@ -96,16 +96,6 @@ $component: '#{base.$prefix}-button';
     }
   }
   
-  // Ripple container
-  .ripple {
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    pointer-events: none;
-    background-color: currentColor;
-    opacity: 0.12;
-  }
-  
   &--disabled {
     opacity: 0.38
   }

package/src/{components/checkbox/_styles.scss → styles/components/_checkbox.scss}

@@ -70,8 +70,6 @@ $component: '#{base.$prefix}-checkbox';
 
   // Label position variants
   &--label-start {
-    flex-direction: row-reverse;
-
     .#{$component}-label {
       margin-left: 0;
       margin-right: 12px;