mtrl 0.2.6 → 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

@@ -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/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/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/types.ts

@@ -81,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;
 }
 
 /**

package/src/components/card/card.ts

@@ -13,7 +13,9 @@ import {
   createBaseConfig, 
   getElementConfig, 
   getApiConfig, 
-  withInteractiveBehavior
+  withInteractiveBehavior,
+  processInlineConfig,
+  applyInlineConfiguration
 } from './config';
 import { withElevation } from './features';
 
@@ -25,44 +27,30 @@ import { withElevation } from './features';
  * 
  * @param {CardSchema} config - Card configuration object
  * @returns {CardComponent} Card component instance
- * 
- * @example
- * ```typescript
- * // Create a basic elevated card
- * const card = createCard();
- * 
- * // Create a filled card with content
- * const filledCard = createCard({
- *   variant: CardVariant.FILLED,
- *   contentConfig: { text: 'Card content' }
- * });
- * 
- * // Create an interactive outlined card
- * const interactiveCard = createCard({
- *   variant: CardVariant.OUTLINED,
- *   interactive: true,
- *   clickable: true,
- *   aria: { label: 'Click to view details' }
- * });
- * ```
  */
 const createCard = (config: CardSchema = {}): CardComponent => {
-  const baseConfig = createBaseConfig(config);
+  // Process inline configuration (map shorthand properties)
+  const processedConfig = processInlineConfig(config);
+  const baseConfig = createBaseConfig(processedConfig);
 
   try {
+    // Create the core card component
     const card = pipe(
       createBase,
       withEvents(),
       withElement(getElementConfig(baseConfig)),
       withVariant(baseConfig),
-      config.clickable ? withRipple(baseConfig) : (c: BaseComponent) => c,
+      baseConfig.clickable ? withRipple(baseConfig) : (c: BaseComponent) => c,
       withLifecycle(),
       withInteractiveBehavior,
       withElevation,
       comp => withAPI(getApiConfig(comp))(comp)
-    )(baseConfig);
+    )(baseConfig) as CardComponent;
+    
+    // Apply any inline configuration
+    applyInlineConfiguration(card, processedConfig);
     
-    return card as CardComponent;
+    return card;
   } catch (error) {
     console.error('Card creation error:', error instanceof Error ? error.message : String(error));
     throw new Error(`Failed to create card: ${error instanceof Error ? error.message : String(error)}`);

package/src/components/card/config.ts

@@ -1,10 +1,17 @@
 // src/components/card/config.ts
+
 import { 
   createComponentConfig, 
   createElementConfig
 } from '../../core/config/component-config';
-import { BaseComponent, CardSchema } from './types';
 import { CARD_VARIANTS, CARD_ELEVATIONS } from './constants';
+import { 
+  createCardHeader, 
+  createCardContent, 
+  createCardMedia, 
+  createCardActions 
+} from './content';
+import { CardComponent, CardSchema, ButtonConfig, BaseComponent } from './types';
 
 /**
  * Default configuration for the Card component
@@ -19,57 +26,95 @@ export const defaultConfig: CardSchema = {
 };
 
 /**
- * Initializes a card component with its configured elements in the correct order
- * 
- * Creates and adds all configured elements to the card in the following order:
- * 1. Top media elements (position='top')
- * 2. Header element
- * 3. Content elements
- * 4. Bottom media elements (position='bottom')
- * 5. Actions elements
+ * Processes inline configuration options into standard config format
+ * Maps shorthand properties to their proper config counterparts
  * 
- * This ordering ensures that media appears before header when both are configured,
- * maintaining proper visual hierarchy according to Material Design guidelines.
+ * @param {CardSchema} config - Raw card configuration
+ * @returns {CardSchema} Processed configuration
+ */
+export const processInlineConfig = (config: CardSchema): CardSchema => {
+  const processedConfig: CardSchema = { ...config };
+  
+  // Map inline properties to their *Config counterparts
+  if (config.header) {
+    processedConfig.headerConfig = config.header;
+  }
+  
+  if (config.content) {
+    processedConfig.contentConfig = config.content;
+  }
+  
+  if (config.media) {
+    processedConfig.mediaConfig = config.media;
+  }
+  
+  if (config.actions) {
+    processedConfig.actionsConfig = config.actions;
+  }
+  
+  return processedConfig;
+};
+
+/**
+ * Applies inline configuration to a card component
+ * Adds configured elements to the card in the correct order
  * 
- * @param {CardComponent} card - Card component to initialize
- * @param {CardSchema} config - Card configuration
- * @returns {CardComponent} Initialized card component
- * @internal This is an internal utility for the Card component
+ * @param {CardComponent} card - Card component to configure
+ * @param {CardSchema} config - Processed configuration
  */
-export const initializeCardElements = (card: CardComponent, config: CardSchema): CardComponent => {
-  // 1. Add top media first 
+export const applyInlineConfiguration = (card: CardComponent, config: CardSchema): void => {
+  // Add media (top position) if configured
   if (config.mediaConfig && (!config.mediaConfig.position || config.mediaConfig.position === 'top')) {
     const { position, ...mediaConfigWithoutPosition } = config.mediaConfig;
     const mediaElement = createCardMedia(mediaConfigWithoutPosition);
     card.addMedia(mediaElement, 'top');
   }
   
-  // 2. Add header AFTER top media
+  // Add header if configured
   if (config.headerConfig) {
     const headerElement = createCardHeader(config.headerConfig);
     card.setHeader(headerElement);
   }
   
-  // 3. Add content AFTER header
+  // Add content if configured
   if (config.contentConfig) {
     const contentElement = createCardContent(config.contentConfig);
     card.addContent(contentElement);
   }
   
-  // 4. Add bottom media AFTER content
+  // Add media (bottom position) if configured
   if (config.mediaConfig && config.mediaConfig.position === 'bottom') {
     const { position, ...mediaConfigWithoutPosition } = config.mediaConfig;
     const mediaElement = createCardMedia(mediaConfigWithoutPosition);
     card.addMedia(mediaElement, 'bottom');
   }
   
-  // 5. Add actions LAST
+  // Add actions if configured
   if (config.actionsConfig) {
     const actionsElement = createCardActions(config.actionsConfig);
     card.setActions(actionsElement);
   }
   
-  return card;
+  // Process buttons if provided (asynchronously)
+  if (Array.isArray(config.buttons) && config.buttons.length > 0) {
+    import('../button').then(({ default: createButton }) => {
+      // Create buttons from configuration
+      const actionButtons = config.buttons!.map(buttonConfig => 
+        createButton(buttonConfig).element
+      );
+      
+      // Create actions container
+      const actionsElement = createCardActions({
+        actions: actionButtons,
+        align: config.actionsConfig?.align || 'end'
+      });
+      
+      // Add the actions to the card
+      card.setActions(actionsElement);
+    }).catch(error => {
+      console.error('Error processing buttons:', error);
+    });
+  }
 };
 
 /**

package/src/components/card/features.ts

@@ -3,6 +3,9 @@ import { PREFIX } from '../../core/config';
 import { createElement } from '../../core/dom/create';
 import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from './types';
 
+import { createCardHeader, createCardContent, createCardMedia, createCardActions } from './content';
+import { BaseComponent, CardComponent, CardHeaderConfig, CardContentConfig, CardMediaConfig, CardActionsConfig, CardSchema, ButtonConfig } from './types';
+
 interface LoadingConfig {
   initialState?: boolean;
 }