mtrl 0.2.6 → 0.2.8

package/src/components/button/index.ts

@@ -1,4 +1,12 @@
 // src/components/button/index.ts
 export { default } from './button'
-export { BUTTON_VARIANTS } from './constants'
-export { ButtonConfig, ButtonComponent } from './types'
+export { ButtonConfig, ButtonComponent, ButtonVariant } from './types'
+
+// Export common button variants for convenience
+export const BUTTON_VARIANTS = {
+  FILLED: 'filled',
+  TONAL: 'tonal',
+  OUTLINED: 'outlined',
+  ELEVATED: 'elevated',
+  TEXT: 'text'
+} as const;

package/src/components/button/types.ts

@@ -1,5 +1,10 @@
 // src/components/button/types.ts
-import { BUTTON_VARIANTS } from './constants';
+
+/**
+ * Button variant types
+ * @category Components
+ */
+export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'elevated' | 'text';
 
 /**
  * Configuration interface for the Button component
@@ -10,7 +15,7 @@ export interface ButtonConfig {
    * Button variant that determines visual styling
    * @default 'filled'
    */
-  variant?: keyof typeof BUTTON_VARIANTS | string;
+  variant?: ButtonVariant | string;
   
   /** 
    * Whether the button is initially disabled
@@ -81,6 +86,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;
 }
 
 /**
@@ -254,4 +265,11 @@ export interface ButtonComponent {
    * @returns The button component for chaining
    */
   addClass: (...classes: string[]) => ButtonComponent;
+
+  /**
+   * Sets the aria-label attribute for accessibility
+   * @param label - Aria label text
+   * @returns The button component for chaining
+   */
+  setAriaLabel: (label: string) => ButtonComponent;
 }

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

@@ -3,15 +3,20 @@ 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
  * @const {CardSchema}
  */
 export const defaultConfig: CardSchema = {
-  variant: CARD_VARIANTS.ELEVATED,
+  variant: 'elevated',
   interactive: false,
   fullWidth: false,
   clickable: false,
@@ -19,57 +24,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);
+    });
+  }
 };
 
 /**
@@ -146,6 +189,16 @@ export const getApiConfig = (comp: any) => ({
   }
 });
 
+/**
+ * Card elevation levels
+ */
+export const CARD_ELEVATION_LEVELS = {
+  LEVEL0: 0,
+  LEVEL1: 1,
+  LEVEL2: 2,
+  LEVEL4: 4
+};
+
 /**
  * Adds interactive behavior to card component
  * Uses the MTRL elevation system for proper elevation levels
@@ -161,14 +214,14 @@ export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
   if (isInteractive) {
     // Mouse interactions
     comp.element.addEventListener('mouseenter', () => {
-      if (config.variant === CARD_VARIANTS.ELEVATED) {
-        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL2));
+      if (config.variant === 'elevated') {
+        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL2));
       }
     });
 
     comp.element.addEventListener('mouseleave', () => {
-      if (config.variant === CARD_VARIANTS.ELEVATED) {
-        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL1));
+      if (config.variant === 'elevated') {
+        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL1));
       }
     });
     
@@ -196,7 +249,7 @@ export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
     comp.element.setAttribute('draggable', 'true');
     
     comp.element.addEventListener('dragstart', (e: DragEvent) => {
-      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL4));
+      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL4));
       comp.element.classList.add(`${comp.getClass('card')}--dragging`);
       comp.emit?.('dragstart', { event: e });
       
@@ -209,7 +262,7 @@ export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
     });
 
     comp.element.addEventListener('dragend', (e: DragEvent) => {
-      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL1));
+      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL1));
       comp.element.classList.remove(`${comp.getClass('card')}--dragging`);
       comp.emit?.('dragend', { event: e });
     });

package/src/components/card/content.ts

@@ -2,8 +2,11 @@
 import { PREFIX } from '../../core/config';
 import { pipe } from '../../core/compose';
 import { createBase, withElement } from '../../core/compose/component';
-import { CardContentConfig } from './types';
-import { CARD_CONTENT_PADDING } from './constants';
+import { createElement } from '../../core/dom/create';
+import { CardContentConfig, CardHeaderConfig, CardMediaConfig, CardActionsConfig } from './types';
+
+// Constants for content padding
+export const CARD_CONTENT_PADDING = true;
 
 /**
  * Creates a card content component
@@ -78,9 +81,6 @@ export const createCardContent = (config: CardContentConfig = {}): HTMLElement =
   }
 };
 
-// src/components/card/header.ts
-import { createElement } from '../../core/dom/create';
-
 /**
  * Creates a card header component
  * 
@@ -103,7 +103,7 @@ import { createElement } from '../../core/dom/create';
  * });
  * ```
  */
-export const createCardHeader = (config: any = {}): HTMLElement => {
+export const createCardHeader = (config: CardHeaderConfig = {}): HTMLElement => {
   const baseConfig = {
     ...config,
     componentName: 'card-header',
@@ -200,7 +200,6 @@ export const createCardHeader = (config: any = {}): HTMLElement => {
   }
 };
 
-// src/components/card/actions.ts
 /**
  * Creates a card actions component
  * 
@@ -225,7 +224,7 @@ export const createCardHeader = (config: any = {}): HTMLElement => {
  * });
  * ```
  */
-export const createCardActions = (config: any = {}): HTMLElement => {
+export const createCardActions = (config: CardActionsConfig = {}): HTMLElement => {
   const baseConfig = {
     ...config,
     componentName: 'card-actions',
@@ -273,7 +272,6 @@ export const createCardActions = (config: any = {}): HTMLElement => {
   }
 };
 
-// src/components/card/media.ts
 /**
  * Creates a card media component
  * 
@@ -296,7 +294,7 @@ export const createCardActions = (config: any = {}): HTMLElement => {
  * });
  * ```
  */
-export const createCardMedia = (config: any = {}): HTMLElement => {
+export const createCardMedia = (config: CardMediaConfig = {}): HTMLElement => {
   const baseConfig = {
     ...config,
     componentName: 'card-media',

package/src/components/card/features.ts

@@ -2,6 +2,7 @@
 import { PREFIX } from '../../core/config';
 import { createElement } from '../../core/dom/create';
 import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from './types';
+import { CARD_ELEVATION_LEVELS } from './config';
 
 interface LoadingConfig {
   initialState?: boolean;
@@ -112,9 +113,9 @@ export const withElevation = (component: BaseComponent): BaseComponent => {
   
   // Set initial elevation based on variant
   if (config.variant === 'elevated') {
-    component.element.style.setProperty('--card-elevation', '1');
+    component.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL1));
   } else {
-    component.element.style.setProperty('--card-elevation', '0');
+    component.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL0));
   }
   
   return component;
@@ -263,7 +264,7 @@ export const withExpandable = (config: ExpandableConfig = {}) => (component: Bas
  *     onSwipeLeft: (card) => console.log('Swiped left'),
  *     onSwipeRight: (card) => console.log('Swiped right')
  *   })
- * )({ variant: CardVariant.ELEVATED });
+ * )({ variant: 'elevated' });
  * ```
  */
 export const withSwipeable = (config: SwipeableConfig = {}) => (component: BaseComponent): BaseComponent & { swipeable: SwipeableFeature } => {

package/src/components/card/index.ts

@@ -29,7 +29,7 @@ export {
 
 export {
   CardVariant,
-  CardElevation,
+  CardElevationLevel,
   CardSchema,
   CardHeaderConfig,
   CardContentConfig,
@@ -38,4 +38,31 @@ export {
   CardAriaAttributes,
   CardComponent
 } from './types';
-export { CARD_VARIANTS, CARD_ELEVATIONS, CARD_WIDTHS, CARD_CORNER_RADIUS } from './constants';
+
+// Export card constants for backward compatibility
+export const CARD_VARIANTS = {
+  ELEVATED: 'elevated',
+  FILLED: 'filled',
+  OUTLINED: 'outlined'
+} as const;
+
+export const CARD_ELEVATIONS = {
+  LEVEL0: 0,
+  LEVEL1: 1,
+  LEVEL2: 2,
+  LEVEL4: 4
+} as const;
+
+// Additional constants
+export const CARD_WIDTHS = {
+  SMALL: '344px',
+  MEDIUM: '480px',
+  LARGE: '624px',
+  FULL: '100%'
+} as const;
+
+export const CARD_CORNER_RADIUS = {
+  SMALL: '8px',
+  MEDIUM: '12px',
+  LARGE: '16px'
+} as const;

package/src/components/card/types.ts

@@ -1,30 +1,28 @@
 // src/components/card/types.ts
+
 /**
- * Card variant types following Material Design 3 specifications
- * @enum {string}
+ * Card variant types
  */
-export enum CardVariant {
-  /** Elevated card with shadow */
-  ELEVATED = 'elevated',
-  /** Filled card with higher surface container color */
-  FILLED = 'filled',
-  /** Outlined card with border */
-  OUTLINED = 'outlined'
-}
+export type CardVariant = 'elevated' | 'filled' | 'outlined';
+
+/**
+ * Card elevation levels
+ */
+export type CardElevationLevel = 0 | 1 | 2 | 4;
 
 /**
- * Card elevation levels based on MD3 guidelines
- * @enum {number}
+ * Button configuration interface for buttons shorthand
+ * @interface ButtonConfig
  */
-export enum CardElevation {
-  /** No elevation (for filled and outlined variants) */
-  LEVEL0 = 0,
-  /** Default elevation for elevated cards */
-  LEVEL1 = 1,
-  /** Elevation for hovered state */
-  LEVEL2 = 2,
-  /** Elevation for dragged state */
-  LEVEL4 = 4
+export interface ButtonConfig {
+  /** Button text */
+  text?: string;
+  /** Button variant */
+  variant?: string;
+  /** Button icon */
+  icon?: string;
+  /** Additional button properties */
+  [key: string]: any;
 }
 
 /**
@@ -33,7 +31,7 @@ export enum CardElevation {
  */
 export interface CardSchema {
   /** Card variant type (elevated, filled, outlined) */
-  variant?: CardVariant;
+  variant?: CardVariant | string;
   /** Whether the card is interactive */
   interactive?: boolean;
   /** Whether the card should take full width */
@@ -54,6 +52,19 @@ export interface CardSchema {
   mediaConfig?: CardMediaConfig;
   /** ARIA attributes for accessibility */
   aria?: CardAriaAttributes;
+  
+  // New inline configuration options
+  /** Inline header configuration (alternative to headerConfig) */
+  header?: CardHeaderConfig;
+  /** Inline content configuration (alternative to contentConfig) */
+  content?: CardContentConfig;
+  /** Inline media configuration (alternative to mediaConfig) */
+  media?: CardMediaConfig;
+  /** Inline actions configuration (alternative to actionsConfig) */
+  actions?: CardActionsConfig;
+  /** Simple buttons array for actions (will be converted to actionsConfig) */
+  buttons?: ButtonConfig[];
+
   /** Internal component name */
   componentName?: string;
   /** CSS class prefix */

package/src/components/checkbox/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { CheckboxConfig, BaseComponent, ApiOptions } from './types';
-import { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from './constants';
 
 /**
  * Default configuration for the Checkbox component
  */
 export const defaultConfig: CheckboxConfig = {
-  variant: CHECKBOX_VARIANTS.FILLED,
-  labelPosition: CHECKBOX_LABEL_POSITION.END
+  variant: 'filled',
+  labelPosition: 'end'
 };
 
 /**
@@ -58,7 +57,7 @@ export const withCheckIcon = (config: CheckboxConfig) => (component: BaseCompone
  * @param {CheckboxConfig} config - Component configuration
  */
 export const withLabelPosition = (config: CheckboxConfig) => (component: BaseComponent): BaseComponent => {
-  const position = config.labelPosition || CHECKBOX_LABEL_POSITION.END;
+  const position = config.labelPosition || 'end';
   const positionClass = `${config.prefix}-checkbox--label-${position}`;
 
   component.element.classList.add(positionClass);

package/src/components/checkbox/index.ts

@@ -1,4 +1,3 @@
 // src/components/checkbox/index.ts
 export { default } from './checkbox';
-export { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from './constants';
-export { CheckboxConfig, CheckboxComponent } from './types';
+export { CheckboxConfig, CheckboxComponent, CheckboxVariant, CheckboxLabelPosition } from './types';

package/src/components/checkbox/types.ts

@@ -1,5 +1,14 @@
 // src/components/checkbox/types.ts
-import { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from './constants';
+
+/**
+ * Checkbox variant types
+ */
+export type CheckboxVariant = 'filled' | 'outlined';
+
+/**
+ * Checkbox label position types
+ */
+export type CheckboxLabelPosition = 'start' | 'end';
 
 /**
  * Configuration interface for the Checkbox component
@@ -27,10 +36,10 @@ export interface CheckboxConfig {
   label?: string;
   
   /** Label position (start/end) */
-  labelPosition?: keyof typeof CHECKBOX_LABEL_POSITION | string;
+  labelPosition?: CheckboxLabelPosition | string;
   
   /** Visual variant */
-  variant?: keyof typeof CHECKBOX_VARIANTS | string;
+  variant?: CheckboxVariant | string;
   
   /** Additional CSS classes */
   class?: string;