mtrl 0.2.6 → 0.2.7

package/src/components/top-app-bar/types.ts

@@ -0,0 +1,140 @@
+// src/components/top-app-bar/types.ts
+/**
+ * @module components/top-app-bar
+ * @description Type definitions for Top App Bar component
+ */
+
+import { ElementComponent } from '../../core/compose';
+
+/**
+ * Top App Bar types
+ * @category Components
+ */
+export type TopAppBarType = 'small' | 'medium' | 'large' | 'center';
+
+/**
+ * Configuration options for Top App Bar component
+ * @category Components
+ */
+export interface TopAppBarConfig {
+  /**
+   * Element to use for the container
+   * @default 'header'
+   */
+  tag?: string;
+  
+  /**
+   * Type of top app bar to display
+   * @default 'small'
+   */
+  type?: TopAppBarType;
+  
+  /**
+   * Title text to display in the app bar
+   */
+  title?: string;
+  
+  /**
+   * Whether to enable scrolling behavior
+   * @default true
+   */
+  scrollable?: boolean;
+  
+  /**
+   * Whether to compress medium/large variants to small on scroll
+   * @default true
+   */
+  compressible?: boolean;
+  
+  /**
+   * Scroll threshold in pixels to trigger the scrolled state
+   * @default 4
+   */
+  scrollThreshold?: number;
+  
+  /**
+   * Additional CSS classes to apply
+   */
+  class?: string;
+
+  /**
+   * Optional callback when scrolling changes the bar appearance
+   */
+  onScroll?: (scrolled: boolean) => void;
+
+  /**
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
+
+  /**
+   * Component name for class generation
+   */
+  componentName?: string;
+}
+
+/**
+ * Top App Bar component interface
+ * @category Components
+ */
+export interface TopAppBar extends ElementComponent {
+  /**
+   * Sets the title of the top app bar
+   * @param {string} title - Title text
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setTitle: (title: string) => TopAppBar;
+  
+  /**
+   * Gets the current title
+   * @returns {string} Current title text
+   */
+  getTitle: () => string;
+  
+  /**
+   * Adds a leading navigation icon or element
+   * @param {HTMLElement} element - Element to add to the leading section
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  addLeadingElement: (element: HTMLElement) => TopAppBar;
+  
+  /**
+   * Adds a trailing action icon or element
+   * @param {HTMLElement} element - Element to add to the trailing section
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  addTrailingElement: (element: HTMLElement) => TopAppBar;
+  
+  /**
+   * Changes the top app bar type
+   * @param {TopAppBarType} type - New app bar type
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setType: (type: TopAppBarType) => TopAppBar;
+  
+  /**
+   * Manually sets the scrolled state
+   * @param {boolean} scrolled - Whether to show the scrolled state
+   * @returns {TopAppBar} TopAppBar instance for chaining
+   */
+  setScrollState: (scrolled: boolean) => TopAppBar;
+  
+  /**
+   * Gets the headline element
+   * @returns {HTMLElement} Headline element
+   */
+  getHeadlineElement: () => HTMLElement;
+  
+  /**
+   * Gets the leading container element
+   * @returns {HTMLElement} Leading container element
+   */
+  getLeadingContainer: () => HTMLElement;
+  
+  /**
+   * Gets the trailing container element
+   * @returns {HTMLElement} Trailing container element
+   */
+  getTrailingContainer: () => HTMLElement;
+}

package/src/core/build/_ripple.scss

@@ -19,20 +19,20 @@ $component: '#{base.$prefix}-ripple';
   pointer-events: none;
   z-index: 0;
   
-  // Ripple element
   &-wave {
     position: absolute;
     border-radius: 50%;
+    
+    // Make the ripple more visible with these changes:
     background-color: currentColor;
-    transform: scale(0);
-    opacity: 0;
+    opacity: 0;  // Start with 0 opacity
+    transform: scale(0);  // Start slightly larger for better visibility
     pointer-events: none;
     will-change: transform, opacity;
     
     // Animation
-    transition-property: transform, opacity;
-    transition-duration: v.motion('duration-short4');
-    transition-timing-function: v.motion('easing-standard');
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
+                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     
     // Active ripple
     &.active {

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,27 @@ 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);
+    }
+
+    console.log('componentName', component.componentName)
+    console.log('position', position)
+
+    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/themes/_autumn.scss

@@ -40,6 +40,24 @@
   --#{$prefix}-sys-color-outline: #85736C;
   --#{$prefix}-sys-color-outline-variant: #D7C1BA;
 
+  // Success colors
+  --#{$prefix}-sys-color-success: #85CFA9;
+  --#{$prefix}-sys-color-success-rgb: 133, 207, 169;
+  --#{$prefix}-sys-color-on-success: #00392D;
+  --#{$prefix}-sys-color-on-success-rgb: 0, 57, 45;
+  
+  // Warning colors
+  --#{$prefix}-sys-color-warning: #FFB95C;
+  --#{$prefix}-sys-color-warning-rgb: 255, 185, 92;
+  --#{$prefix}-sys-color-on-warning: #3F2200;
+  --#{$prefix}-sys-color-on-warning-rgb: 63, 34, 0;
+  
+  // Info colors
+  --#{$prefix}-sys-color-info: #99CBFF;
+  --#{$prefix}-sys-color-info-rgb: 153, 203, 255;
+  --#{$prefix}-sys-color-on-info: #003060;
+  --#{$prefix}-sys-color-on-info-rgb: 0, 48, 96;
+
   &[data-theme-mode="dark"] {
     // Key colors
     --#{$prefix}-sys-color-primary: #DDB995; // Softer brown
@@ -62,6 +80,9 @@
     --#{$prefix}-sys-color-quaternary-container: #644900;
     --#{$prefix}-sys-color-on-quaternary-container: #FFDF8A;
 
+    // Include status colors for dark theme
+    @include status-colors-dark();
+
     // Neutral colors
     --#{$prefix}-sys-color-surface: #201A17;
     --#{$prefix}-sys-color-surface-dim: #17120F;

package/src/styles/themes/_base-theme.scss

@@ -8,6 +8,67 @@
   }
 }
 
+// Common status colors that should be available in all themes
+@mixin status-colors-light() {
+  // Error colors
+  --#{$prefix}-sys-color-error: #B3261E;
+  --#{$prefix}-sys-color-error-rgb: 179, 38, 30;
+  --#{$prefix}-sys-color-on-error: #FFFFFF;
+  --#{$prefix}-sys-color-on-error-rgb: 255, 255, 255;
+  --#{$prefix}-sys-color-error-container: #F9DEDC;
+  --#{$prefix}-sys-color-error-container-rgb: 249, 222, 220;
+  --#{$prefix}-sys-color-on-error-container: #410E0B;
+  --#{$prefix}-sys-color-on-error-container-rgb: 65, 14, 11;
+  
+  // Success colors
+  --#{$prefix}-sys-color-success: #007B5A;
+  --#{$prefix}-sys-color-success-rgb: 0, 123, 90;
+  --#{$prefix}-sys-color-on-success: #FFFFFF;
+  --#{$prefix}-sys-color-on-success-rgb: 255, 255, 255;
+  
+  // Warning colors
+  --#{$prefix}-sys-color-warning: #DD6D06;
+  --#{$prefix}-sys-color-warning-rgb: 221, 109, 6;
+  --#{$prefix}-sys-color-on-warning: #FFFFFF;
+  --#{$prefix}-sys-color-on-warning-rgb: 255, 255, 255;
+  
+  // Info colors
+  --#{$prefix}-sys-color-info: #0061A4;
+  --#{$prefix}-sys-color-info-rgb: 0, 97, 164;
+  --#{$prefix}-sys-color-on-info: #FFFFFF;
+  --#{$prefix}-sys-color-on-info-rgb: 255, 255, 255;
+}
+
+@mixin status-colors-dark() {
+  // Error colors
+  --#{$prefix}-sys-color-error: #F2B8B5;
+  --#{$prefix}-sys-color-error-rgb: 242, 184, 181;
+  --#{$prefix}-sys-color-on-error: #601410;
+  --#{$prefix}-sys-color-on-error-rgb: 96, 20, 16;
+  --#{$prefix}-sys-color-error-container: #8C1D18;
+  --#{$prefix}-sys-color-error-container-rgb: 140, 29, 24;
+  --#{$prefix}-sys-color-on-error-container: #F9DEDC;
+  --#{$prefix}-sys-color-on-error-container-rgb: 249, 222, 220;
+  
+  // Success colors
+  --#{$prefix}-sys-color-success: #85CFA9;
+  --#{$prefix}-sys-color-success-rgb: 133, 207, 169;
+  --#{$prefix}-sys-color-on-success: #00392D;
+  --#{$prefix}-sys-color-on-success-rgb: 0, 57, 45;
+  
+  // Warning colors
+  --#{$prefix}-sys-color-warning: #FFB95C;
+  --#{$prefix}-sys-color-warning-rgb: 255, 185, 92;
+  --#{$prefix}-sys-color-on-warning: #3F2200;
+  --#{$prefix}-sys-color-on-warning-rgb: 63, 34, 0;
+  
+  // Info colors
+  --#{$prefix}-sys-color-info: #99CBFF;
+  --#{$prefix}-sys-color-info-rgb: 153, 203, 255;
+  --#{$prefix}-sys-color-on-info: #003060;
+  --#{$prefix}-sys-color-on-info-rgb: 0, 48, 96;
+}
+
 %theme-base {
   // Common properties for all themes
   --#{$prefix}-sys-typescale-label-large-font-family-name: "Roboto";