mtrl 0.2.5 → 0.2.7

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

@@ -0,0 +1,196 @@
+// 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, BottomAppBarConfig } from './config';
+
+/**
+ * Bottom app bar component interface
+ */
+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;
+}
+
+/**
+ * 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,73 @@
+// 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';
+
+/**
+ * Configuration options for bottom app bar
+ */
+export interface BottomAppBarConfig extends BaseComponentConfig {
+  /**
+   * 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?: 'center' | 'end';
+  
+  /**
+   * 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;
+}
+
+/**
+ * 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,11 @@
+// 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 } from './config';

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

@@ -0,0 +1,108 @@
+// 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';
+
+/**
+ * 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?: 'center' | 'end';
+  
+  /**
+   * 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/_styles.scss

@@ -8,7 +8,6 @@
 $component: '#{base.$prefix}-button';
 
 .#{$component} {
-  // @include m.touch-target;
   // Base styles
   position: relative;
   display: inline-flex;
@@ -95,31 +94,10 @@ $component: '#{base.$prefix}-button';
     .#{$component}-icon {
      margin: 0;
     }
-
-    .#{$component}--small {
-     width: 32px;
-     height: 32px;
-    }
-
-    .#{$component}--large {
-     width: 48px;
-     height: 48px;
-    }
-  }
-  
-  // Ripple container
-  .ripple {
-    position: absolute;
-    border-radius: 50%;
-    transform: scale(0);
-    pointer-events: none;
-    background-color: currentColor;
-    opacity: 0.12;
   }
   
   &--disabled {
     opacity: 0.38
-    
   }
 
   // Variants
@@ -136,11 +114,6 @@ $component: '#{base.$prefix}-button';
       @include m.state-layer(t.color('on-primary'), 'pressed');
       @include m.elevation(0);
     }
-    
-    // &:disabled {
-    //   background-color: t.alpha('on-surface', 0.12);
-    //   color: t.alpha('on-surface', 0.38);
-    // }
   }
   
   // Elevated button variant
@@ -170,10 +143,6 @@ $component: '#{base.$prefix}-button';
     .#{$component}-icon {
       color: t.color('primary');
     }
-    
-    // &:disabled .#{$component}-icon {
-    //   color: t.alpha('on-surface', 0.38);
-    // }
   }
   
   &--tonal {
@@ -189,11 +158,6 @@ $component: '#{base.$prefix}-button';
       @include m.state-layer(t.color('on-secondary-container'), 'pressed');
       @include m.elevation(0);
     }
-    
-    // &:disabled {
-    //   background-color: t.alpha('on-surface', 0.12);
-    //   color: t.alpha('on-surface', 0.38);
-    // }
   }
   
   &--outlined {
@@ -208,11 +172,6 @@ $component: '#{base.$prefix}-button';
     &:active {
       @include m.state-layer(t.color('primary'), 'pressed');
     }
-    
-    // &:disabled {
-    //   border-color: t.alpha('on-surface', 0.12);
-    //   color: t.alpha('on-surface', 0.38);
-    // }
   }
   
   &--text {
@@ -233,36 +192,11 @@ $component: '#{base.$prefix}-button';
     }
   }
   
-  // Size variants
-  &--small {
-    height: 32px;
-    min-width: 48px;
-    padding: 0 v.button('padding-horizontal-small');
-    font-size: 13px;
-  }
-  
-  &--large {
-    height: 48px;
-    min-width: 78px;
-    padding: 0 32px;
-    font-size: 16px;
-  }
-  
   // Special case for icon-only buttons
   &--icon-only {
     min-width: v.button('height');
     width: v.button('height');
     padding: 0;
     border-radius: 50%;
-    
-    &.#{$component}--small {
-      min-width: 32px;
-      width: 32px;
-    }
-    
-    &.#{$component}--large {
-      min-width: 48px;
-      width: 48px;
-    }
   }
 }

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

@@ -7,7 +7,6 @@ import {
   withText,
   withIcon,
   withVariant,
-  withSize,
   withRipple,
   withDisabled,
   withLifecycle
@@ -31,7 +30,6 @@ const createButton = (config: ButtonConfig = {}) => {
       withEvents(),
       withElement(getElementConfig(baseConfig)),
       withVariant(baseConfig),
-      withSize(baseConfig),
       withText(baseConfig),
       withIcon(baseConfig),
       withDisabled(baseConfig),

package/src/components/button/config.ts

@@ -45,6 +45,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,

package/src/components/button/constants.ts

@@ -8,10 +8,4 @@ export const BUTTON_VARIANTS = {
   OUTLINED: 'outlined',
   ELEVATED: 'elevated',
   TEXT: 'text'
-}
-
-export const BUTTON_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
 }

package/src/components/button/index.ts

@@ -1,4 +1,4 @@
 // src/components/button/index.ts
 export { default } from './button'
-export { BUTTON_VARIANTS, BUTTON_SIZES } from './constants'
-export { ButtonConfig, ButtonComponent } from './types'
+export { BUTTON_VARIANTS } from './constants'
+export { ButtonConfig, ButtonComponent } from './types'

package/src/components/button/types.ts

@@ -1,5 +1,5 @@
 // src/components/button/types.ts
-import { BUTTON_VARIANTS, BUTTON_SIZES } from './constants';
+import { BUTTON_VARIANTS } from './constants';
 
 /**
  * Configuration interface for the Button component
@@ -12,12 +12,6 @@ export interface ButtonConfig {
    */
   variant?: keyof typeof BUTTON_VARIANTS | string;
   
-  /** 
-   * Button size 
-   * @default 'medium'
-   */
-  size?: keyof typeof BUTTON_SIZES | string;
-  
   /** 
    * Whether the button is initially disabled
    * @default false
@@ -87,6 +81,12 @@ export interface ButtonConfig {
     /** Opacity values for ripple start and end [start, end] */
     opacity?: [string, string];
   };
+
+  /**
+   * Accessible name for the button (aria-label)
+   * Required for icon-only buttons without text
+   */
+  ariaLabel?: string;
 }
 
 /**