mtrl 0.2.6 → 0.2.8

package/src/components/badge/features.ts

@@ -1,6 +1,16 @@
 // src/components/badge/features.ts
-import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
 import { BadgeConfig } from './types';
+import { formatBadgeLabel } from './config';
+
+// Common badge variants
+const VARIANT_SMALL = 'small';
+const VARIANT_LARGE = 'large';
+
+// Common badge colors
+const COLOR_ERROR = 'error';
+
+// Common badge positions
+const POSITION_TOP_RIGHT = 'top-right';
 
 /**
  * Higher-order function that adds visibility control features to a component
@@ -64,15 +74,24 @@ export const withVisibility = () => component => {
  */
 export const withVariant = (config: BadgeConfig) => component => {
   // Get variant from config with fallback to default
-  const variant = config.variant || BADGE_VARIANTS.STANDARD;
-  
-  // Apply variant class if not standard variant
-  if (variant !== BADGE_VARIANTS.STANDARD) {
-    component.element.classList.add(`${component.getClass('badge')}--${variant}`);
+  const variant = config.variant || VARIANT_LARGE;
+  
+  // Apply variant class
+  component.element.classList.add(`${component.getClass('badge')}--${variant}`);
+  
+  // Small badges (dot variant) don't have text
+  if (variant === VARIANT_SMALL) {
+    component.element.textContent = '';
+    component.element.setAttribute('aria-hidden', 'true');
+  } else {
+    // Add accessibility for large badges
+    component.element.setAttribute('role', 'status');
     
-    // Clear content if dot variant
-    if (variant === BADGE_VARIANTS.DOT) {
-      component.element.textContent = '';
+    // Set the label if available and variant is large
+    if (config.label !== undefined && config.label !== '') {
+      // Format the label according to max value
+      const formattedLabel = formatBadgeLabel(config.label, config.max);
+      component.element.textContent = formattedLabel;
     }
   }
   
@@ -86,7 +105,7 @@ export const withVariant = (config: BadgeConfig) => component => {
  */
 export const withColor = (config: BadgeConfig) => component => {
   // Get color from config with fallback to default
-  const color = config.color || BADGE_COLORS.ERROR;
+  const color = config.color || COLOR_ERROR;
   
   // Apply color class
   component.element.classList.add(`${component.getClass('badge')}--${color}`);
@@ -94,40 +113,22 @@ export const withColor = (config: BadgeConfig) => component => {
   return component;
 };
 
-/**
- * Higher-order function that adds size features to a badge component
- * @param {BadgeConfig} config - Badge configuration
- * @returns {Function} Component enhancer with size features
- */
-export const withSize = (config: BadgeConfig) => component => {
-  // Get size from config with fallback to default
-  const size = config.size || BADGE_SIZES.MEDIUM;
-  
-  // Apply size class if not medium (default)
-  if (size !== BADGE_SIZES.MEDIUM) {
-    component.element.classList.add(`${component.getClass('badge')}--${size}`);
-  }
-  
-  return component;
-};
-
 /**
  * Higher-order function that adds positioning features to a badge component
  * @param {BadgeConfig} config - Badge configuration
  * @returns {Function} Component enhancer with positioning features
  */
 export const withPosition = (config: BadgeConfig) => component => {
-  // Skip for standalone badges
-  if (config.standalone) {
-    return component;
-  }
-  
   // Get position from config with fallback to default
-  const position = config.position || BADGE_POSITIONS.TOP_RIGHT;
+  const position = config.position || POSITION_TOP_RIGHT;
   
-  // Apply position class and positioned class
+  // Apply position class
   component.element.classList.add(`${component.getClass('badge')}--${position}`);
-  component.element.classList.add(`${component.getClass('badge')}--positioned`);
+  
+  // If there's a target, add positioned class
+  if (config.target) {
+    component.element.classList.add(`${component.getClass('badge')}--positioned`);
+  }
   
   return component;
 };
@@ -138,8 +139,8 @@ export const withPosition = (config: BadgeConfig) => component => {
  * @returns {Function} Component enhancer with max value features
  */
 export const withMax = (config: BadgeConfig) => component => {
-  // Skip if no max is defined
-  if (config.max === undefined) {
+  // Skip if no max is defined or for small badges
+  if (config.max === undefined || config.variant === VARIANT_SMALL) {
     return component;
   }
   
@@ -147,9 +148,14 @@ export const withMax = (config: BadgeConfig) => component => {
   component.config.max = config.max;
   
   // Apply max formatting if needed
-  if (typeof config.content === 'number' && config.content > config.max) {
-    component.element.textContent = String(config.max);
-    component.element.classList.add(`${component.getClass('badge')}--max`);
+  if (config.label !== undefined && config.label !== '') {
+    const formattedLabel = formatBadgeLabel(config.label, config.max);
+    component.element.textContent = formattedLabel;
+    
+    // Add overflow class if label was truncated
+    if (typeof config.label === 'number' && config.label > config.max) {
+      component.element.classList.add(`${component.getClass('badge')}--overflow`);
+    }
   }
   
   return component;
@@ -161,8 +167,8 @@ export const withMax = (config: BadgeConfig) => component => {
  * @returns {Function} Component enhancer with attachment features
  */
 export const withAttachment = (config: BadgeConfig) => component => {
-  // Skip for standalone badges or if no target is provided
-  if (config.standalone || !config.target) {
+  // Skip if no target is provided
+  if (!config.target) {
     return component;
   }
   
@@ -170,6 +176,9 @@ export const withAttachment = (config: BadgeConfig) => component => {
   const wrapper = document.createElement('div');
   wrapper.classList.add(component.getClass('badge-wrapper'));
   
+  // Make sure positioning context is correct
+  wrapper.style.position = 'relative';
+  
   // Replace the target with the wrapper
   const parent = config.target.parentNode;
   if (parent) {

package/src/components/badge/index.ts

@@ -1,4 +1,29 @@
 // src/components/badge/index.ts
 export { default } from './badge';
-export { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
-export { BadgeConfig, BadgeComponent } from './types';
+export { BadgeConfig, BadgeComponent, BadgeVariant, BadgeColor, BadgePosition } from './types';
+
+// Export common badge constants for convenience and backward compatibility
+export const BADGE_VARIANTS = {
+  SMALL: 'small',
+  LARGE: 'large'
+} as const;
+
+export const BADGE_COLORS = {
+  ERROR: 'error',
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  SUCCESS: 'success',
+  WARNING: 'warning',
+  INFO: 'info'
+} as const;
+
+export const BADGE_POSITIONS = {
+  TOP_RIGHT: 'top-right',
+  TOP_LEFT: 'top-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  BOTTOM_LEFT: 'bottom-left'
+} as const;
+
+// Export max characters constant
+export const BADGE_MAX_CHARACTERS = 4;

package/src/components/badge/types.ts

@@ -1,43 +1,78 @@
 // src/components/badge/types.ts
-import { BADGE_VARIANTS, BADGE_SIZES, BADGE_COLORS, BADGE_POSITIONS } from './constants';
+
+/**
+ * Badge variant types
+ * @category Components
+ */
+export type BadgeVariant = 'small' | 'large';
+
+/**
+ * Badge color types
+ * @category Components
+ */
+export type BadgeColor = 'error' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'info';
+
+/**
+ * Badge position types
+ * @category Components
+ */
+export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 /**
  * Configuration interface for the Badge component
+ * Following Material Design 3 specifications
  */
 export interface BadgeConfig {
-  /** Badge variant (standard, dot, outlined) */
-  variant?: keyof typeof BADGE_VARIANTS | BADGE_VARIANTS;
-  
-  /** Badge size (small, medium, large) */
-  size?: keyof typeof BADGE_SIZES | BADGE_SIZES;
-  
-  /** Badge color (primary, secondary, tertiary, error, success, warning, info) */
-  color?: keyof typeof BADGE_COLORS | BADGE_COLORS;
-  
-  /** Badge position relative to its container (top-right, top-left, bottom-right, bottom-left) */
-  position?: keyof typeof BADGE_POSITIONS | BADGE_POSITIONS;
-  
-  /** Text content inside the badge */
-  content?: string | number;
-  
-  /** Maximum value to display (shows "{max}+" if content exceeds max) */
+  /** 
+   * Badge variant (small dot or large numbered)
+   * Small badge (6dp) or Large badge (16dp height)
+   * @default 'large'
+   */
+  variant?: BadgeVariant | string;
+  
+  /** 
+   * Badge color (error is default)
+   * @default 'error'
+   */
+  color?: BadgeColor | string;
+  
+  /** 
+   * Badge position relative to its container
+   * @default 'top-right' 
+   */
+  position?: BadgePosition | string;
+  
+  /** 
+   * Text label inside the badge (for large badges)
+   * Up to 4 characters, with "+" for overflow 
+   */
+  label?: string | number;
+  
+  /** 
+   * Maximum value to display (shows "{max}+" if label exceeds max)
+   * Usually 999+ for large numbers
+   */
   max?: number;
   
   /** Whether the badge should be visible */
   visible?: boolean;
   
-  /** Whether the badge should be standalone (not attached to another element) */
-  standalone?: boolean;
-  
   /** Target element to which badge will be attached */
   target?: HTMLElement;
   
   /** Additional CSS classes */
   class?: string;
+  
+  /** CSS class prefix */
+  prefix?: string;
+  
+  /** Component name */
+  componentName?: string;
 }
 
 /**
  * Badge component interface
+ * Following Material Design 3 specifications
  */
 export interface BadgeComponent {
   /** Badge element */
@@ -46,11 +81,11 @@ export interface BadgeComponent {
   /** Badge wrapper element (if badge is attached to target) */
   wrapper?: HTMLElement;
   
-  /** Sets badge text content */
-  setContent: (content: string | number) => BadgeComponent;
+  /** Sets badge text label */
+  setLabel: (label: string | number) => BadgeComponent;
   
-  /** Gets badge text content */
-  getContent: () => string;
+  /** Gets badge text label */
+  getLabel: () => string;
   
   /** Shows the badge */
   show: () => BadgeComponent;
@@ -68,16 +103,13 @@ export interface BadgeComponent {
   setMax: (max: number) => BadgeComponent;
   
   /** Sets badge color */
-  setColor: (color: keyof typeof BADGE_COLORS | BADGE_COLORS) => BadgeComponent;
+  setColor: (color: BadgeColor | string) => BadgeComponent;
   
   /** Sets badge variant */
-  setVariant: (variant: keyof typeof BADGE_VARIANTS | BADGE_VARIANTS) => BadgeComponent;
-  
-  /** Sets badge size */
-  setSize: (size: keyof typeof BADGE_SIZES | BADGE_SIZES) => BadgeComponent;
+  setVariant: (variant: BadgeVariant | string) => BadgeComponent;
   
   /** Sets badge position */
-  setPosition: (position: keyof typeof BADGE_POSITIONS | BADGE_POSITIONS) => BadgeComponent;
+  setPosition: (position: BadgePosition | string) => BadgeComponent;
   
   /** Attaches badge to a target element */
   attachTo: (target: HTMLElement) => BadgeComponent;

package/src/components/bottom-app-bar/bottom-app-bar.ts

@@ -0,0 +1,154 @@
+// src/components/bottom-app-bar/bottom-app-bar.ts
+/**
+ * @module components/bottom-app-bar
+ * @description Bottom app bar implementation
+ */
+
+import { 
+  createBase, 
+  withElement, 
+  withEvents, 
+  withLifecycle,
+  ElementComponent, 
+  BaseComponent 
+} from '../../core/compose';
+
+import { createConfig } from './config';
+import { BottomAppBar, BottomAppBarConfig } from './types';
+
+/**
+ * Creates a bottom app bar component
+ * 
+ * @param {BottomAppBarConfig} config - Configuration options
+ * @returns {BottomAppBar} Bottom app bar component instance
+ */
+export const createBottomAppBar = (config: BottomAppBarConfig = {}): BottomAppBar => {
+  // Process configuration with defaults
+  const componentConfig = createConfig(config);
+  
+  // Create base component
+  const component = createBase(componentConfig);
+  
+  // Create actions container 
+  const actionsContainer = document.createElement('div');
+  actionsContainer.className = `${component.getClass('bottom-app-bar')}-actions`;
+  
+  // FAB container for proper positioning
+  const fabContainer = document.createElement('div');
+  fabContainer.className = `${component.getClass('bottom-app-bar')}-fab-container`;
+  
+  // Apply Element enhancer
+  const enhancedComponent = withElement({
+    tag: componentConfig.tag,
+    componentName: 'bottom-app-bar',
+    className: [
+      componentConfig.hasFab ? `${component.getClass('bottom-app-bar')}--with-fab` : '',
+      componentConfig.fabPosition === 'center' ? `${component.getClass('bottom-app-bar')}--fab-center` : '',
+      componentConfig.class
+    ],
+    attrs: {
+      role: 'toolbar',
+      'aria-label': 'Bottom app bar'
+    },
+    interactive: true
+  })(component);
+  
+  // Apply events enhancer for component events
+  const withEventsComponent = withEvents()(enhancedComponent);
+  
+  // Apply lifecycle enhancer for cleanup
+  const withLifecycleComponent = withLifecycle()(withEventsComponent);
+  
+  // Append actions and FAB containers to the main element
+  withLifecycleComponent.element.appendChild(actionsContainer);
+  withLifecycleComponent.element.appendChild(fabContainer);
+  
+  // Flag to track visibility
+  let isVisible = true;
+  
+  // Previous scroll position for determining scroll direction
+  let prevScrollY = window.scrollY;
+  
+  // Handle scrolling behavior if autoHide is enabled
+  if (componentConfig.autoHide) {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      
+      // Determine scroll direction
+      if (currentScrollY > prevScrollY + 10) {
+        // Scrolling down - hide the bottom bar
+        if (isVisible) {
+          bottomBar.hide();
+          componentConfig.onVisibilityChange?.(false);
+        }
+      } else if (currentScrollY < prevScrollY - 10) {
+        // Scrolling up - show the bottom bar
+        if (!isVisible) {
+          bottomBar.show();
+          componentConfig.onVisibilityChange?.(true);
+        }
+      }
+      
+      prevScrollY = currentScrollY;
+    };
+    
+    // Add scroll event listener
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    
+    // Clean up event listener on destroy
+    const originalDestroy = withLifecycleComponent.lifecycle.destroy;
+    withLifecycleComponent.lifecycle.destroy = () => {
+      window.removeEventListener('scroll', handleScroll);
+      originalDestroy();
+    };
+  }
+  
+  const bottomBar: BottomAppBar = {
+    ...withLifecycleComponent,
+    
+    addAction(button: HTMLElement) {
+      actionsContainer.appendChild(button);
+      return this;
+    },
+    
+    addFab(fab: HTMLElement) {
+      // Clear existing FAB if any
+      fabContainer.innerHTML = '';
+      
+      // Add the new FAB
+      fabContainer.appendChild(fab);
+      
+      // Update component class to indicate it has a FAB
+      this.element.classList.add(`${component.getClass('bottom-app-bar')}--with-fab`);
+      
+      return this;
+    },
+    
+    show() {
+      this.element.classList.remove(`${component.getClass('bottom-app-bar')}--hidden`);
+      isVisible = true;
+      return this;
+    },
+    
+    hide() {
+      this.element.classList.add(`${component.getClass('bottom-app-bar')}--hidden`);
+      isVisible = false;
+      return this;
+    },
+    
+    isVisible() {
+      return isVisible;
+    },
+
+    getActionsContainer() {
+      return actionsContainer;
+    }
+  };
+  
+  // Set the appropriate styles for transitions if needed
+  if (componentConfig.autoHide && componentConfig.transitionDuration) {
+    bottomBar.element.style.transition = `transform ${componentConfig.transitionDuration}ms ease-in-out`;
+  }
+  
+  return bottomBar;
+};

package/src/components/bottom-app-bar/config.ts

@@ -0,0 +1,29 @@
+// src/components/bottom-app-bar/config.ts
+/**
+ * @module components/bottom-app-bar
+ * @description Configuration for bottom app bar component
+ */
+
+import { createComponentConfig, BaseComponentConfig } from '../../core/config/component-config';
+import { PREFIX } from '../../core/config';
+import { BottomAppBarConfig } from './types';
+
+/**
+ * Default configuration for bottom app bar
+ */
+export const defaultConfig: Partial<BottomAppBarConfig> = {
+  tag: 'div',
+  hasFab: false,
+  fabPosition: 'end',
+  autoHide: false,
+  transitionDuration: 300
+};
+
+/**
+ * Creates the configuration for a bottom app bar component
+ * 
+ * @param {BottomAppBarConfig} config - User provided configuration
+ * @returns {BottomAppBarConfig} Complete configuration with defaults applied
+ */
+export const createConfig = (config: BottomAppBarConfig = {} as BottomAppBarConfig): BottomAppBarConfig => 
+  createComponentConfig(defaultConfig, config, 'bottom-app-bar') as BottomAppBarConfig;

package/src/components/bottom-app-bar/index.ts

@@ -0,0 +1,17 @@
+// src/components/bottom-app-bar/index.ts
+/**
+ * @module components/bottom-app-bar
+ * @description Bottom app bar component for mobile interfaces
+ */
+
+import { createBottomAppBar } from './bottom-app-bar';
+
+export default createBottomAppBar;
+export { createBottomAppBar };
+export type { BottomAppBarConfig, BottomAppBar } from './types';
+
+// Export position constants for convenience and backward compatibility
+export const FAB_POSITIONS = {
+  CENTER: 'center',
+  END: 'end'
+} as const;

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

@@ -0,0 +1,114 @@
+// src/components/bottom-app-bar/types.ts
+/**
+ * @module components/bottom-app-bar
+ * @description Type definitions for Bottom App Bar component
+ */
+
+import { ElementComponent } from '../../core/compose';
+
+/**
+ * FAB position type for Bottom App Bar
+ * @category Components
+ */
+export type FabPosition = 'center' | 'end';
+
+/**
+ * Configuration options for Bottom App Bar component
+ * @category Components
+ */
+export interface BottomAppBarConfig {
+  /**
+   * Element to use for the container
+   * @default 'div'
+   */
+  tag?: string;
+  
+  /**
+   * Whether to show FAB in the bottom bar
+   * @default false
+   */
+  hasFab?: boolean;
+  
+  /**
+   * FAB position in bottom bar
+   * @default 'end'
+   */
+  fabPosition?: FabPosition;
+  
+  /**
+   * Additional CSS classes to apply
+   */
+  class?: string;
+  
+  /**
+   * Whether to enable auto-hide on scroll
+   * @default false
+   */
+  autoHide?: boolean;
+
+  /**
+   * Transition duration for show/hide in ms
+   * @default 300
+   */
+  transitionDuration?: number;
+
+  /**
+   * Optional callback when scrolling shows/hides the bar
+   */
+  onVisibilityChange?: (visible: boolean) => void;
+
+  /**
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
+
+  /**
+   * Component name for class generation
+   */
+  componentName?: string;
+}
+
+/**
+ * Bottom App Bar component interface
+ * @category Components
+ */
+export interface BottomAppBar extends ElementComponent {
+  /**
+   * Adds an action button to the bottom bar
+   * @param {HTMLElement} button - Button element to add
+   * @returns {BottomAppBar} BottomAppBar instance for chaining
+   */
+  addAction: (button: HTMLElement) => BottomAppBar;
+  
+  /**
+   * Adds a floating action button to the bottom bar
+   * @param {HTMLElement} fab - FAB element to add
+   * @returns {BottomAppBar} BottomAppBar instance for chaining
+   */
+  addFab: (fab: HTMLElement) => BottomAppBar;
+  
+  /**
+   * Shows the bottom bar
+   * @returns {BottomAppBar} BottomAppBar instance for chaining
+   */
+  show: () => BottomAppBar;
+  
+  /**
+   * Hides the bottom bar
+   * @returns {BottomAppBar} BottomAppBar instance for chaining
+   */
+  hide: () => BottomAppBar;
+  
+  /**
+   * Checks if the bottom bar is visible
+   * @returns {boolean} Whether the bottom bar is visible
+   */
+  isVisible: () => boolean;
+
+  /**
+   * Get the actions container element
+   * @returns {HTMLElement} Actions container element
+   */
+  getActionsContainer: () => HTMLElement;
+}

package/src/components/button/api.ts

@@ -73,6 +73,11 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
     getIcon() {
       return component.icon.getIcon();
     },
+
+    setAriaLabel(label: string) {
+      component.element.setAttribute('aria-label', label);
+      return this;
+    },
     
     destroy() {
       lifecycle.destroy();

package/src/components/button/button.ts

@@ -13,7 +13,6 @@ import {
 } from '../../core/compose/features';
 import { withAPI } from './api';
 import { ButtonConfig } from './types';
-import { BUTTON_VARIANTS } from './constants';
 import { createBaseConfig, getElementConfig, getApiConfig } from './config';
 
 /**

package/src/components/button/config.ts

@@ -5,13 +5,12 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { ButtonConfig } from './types';
-import { BUTTON_VARIANTS } from './constants';
 
 /**
  * Default configuration for the Button component
  */
 export const defaultConfig: ButtonConfig = {
-  variant: BUTTON_VARIANTS.FILLED,
+  variant: 'filled',
   type: 'button'
   // Don't set disabled: false as default - it should be undefined by default
 };
@@ -45,6 +44,11 @@ export const getElementConfig = (config: ButtonConfig) => {
     attrs.value = config.value;
   }
   
+  // Add aria-label attribute for accessibility
+  if (config.ariaLabel) {
+    attrs['aria-label'] = config.ariaLabel;
+  }
+  
   return createElementConfig(config, {
     tag: 'button',
     attrs,