mtrl 0.2.5 → 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/component.ts

@@ -204,7 +204,7 @@ export const withElement = (options: WithElementOptions = {}) =>
       className: [
         base.getClass(options.componentName || base.componentName || 'component'),
         hasTouchSupport() && options.interactive ? base.getClass('interactive') : null,
-        options.className
+        ...(Array.isArray(options.className) ? options.className : [options.className])
       ].filter(Boolean),
       attrs: options.attrs || {},
       forwardEvents: options.forwardEvents || {},

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

@@ -0,0 +1,79 @@
+// src/core/compose/features/badge.ts
+
+import { BaseComponent, ElementComponent } from '../component';
+import createBadge from '../../../components/badge';
+import { PREFIX } from '../../config';
+
+/**
+ * Configuration for badge feature
+ */
+export interface BadgeConfig {
+  /**
+   * Badge content to display
+   */
+  badge?: string | number;
+  
+  /**
+   * Custom badge configuration
+   */
+  badgeConfig?: {
+    variant?: string;
+    color?: string;
+    size?: string;
+    position?: string;
+    max?: number;
+    [key: string]: any;
+  };
+  
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  [key: string]: any;
+}
+
+/**
+ * Component with badge capabilities
+ */
+export interface BadgeComponent extends BaseComponent {
+  /**
+   * Badge component instance
+   */
+  badge?: any;
+}
+
+/**
+ * Adds badge functionality to a component
+ * Creates and configures a badge component attached to the main component
+ * 
+ * @param {BadgeConfig} config - Badge configuration
+ * @returns {Function} Component enhancer with badge functionality
+ */
+export const withBadge = <T extends BadgeConfig>(config: T) => 
+  <C extends ElementComponent>(component: C): C & BadgeComponent => {
+    // Only create badge if content is provided
+    if (config.badge === undefined) {
+      return component as C & BadgeComponent;
+    }
+    
+    // Create badge configuration
+    const badgeConfig = {
+      content: config.badge,
+      standalone: false,
+      target: component.element,
+      ...config.badgeConfig || {},
+      // Default to top-right position if not specified
+      position: config.badgeConfig?.position || 'top-right',
+      // Set prefix to match parent component
+      prefix: config.prefix || PREFIX
+    };
+    
+    // Create badge component
+    const badge = createBadge(badgeConfig);
+    
+    return {
+      ...component,
+      badge
+    };
+  };

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/index.ts

@@ -15,6 +15,7 @@ export { withTextInput } from './textinput';
 export { withTextLabel } from './textlabel';
 export { withTrack } from './track';
 export { withEvents as withEnhancedEvents } from './withEvents';
+export { withBadge } from './badge';
 
 // State management features
 export { withDisabled } from './disabled';
@@ -32,4 +33,5 @@ export type { CheckableComponent, CheckableManager } from './checkable';
 export type { TextInputComponent } from './textinput';
 export type { LabelComponent, LabelManager } from './textlabel';
 export type { TrackComponent } from './track';
-export type { EnhancedEventComponent } from './withEvents';
+export type { EnhancedEventComponent } from './withEvents';
+export type { BadgeComponent, BadgeConfig } from './badge';

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'