mtrl 0.2.7 → 0.2.9

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,9 +2,7 @@
 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';
+import { CARD_ELEVATION_LEVELS } from './config';
 
 interface LoadingConfig {
   initialState?: boolean;
@@ -115,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;
@@ -266,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,31 +1,14 @@
 // 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 based on MD3 guidelines
- * @enum {number}
+ * Card elevation levels
  */
-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 type CardElevationLevel = 0 | 1 | 2 | 4;
 
 /**
  * Button configuration interface for buttons shorthand
@@ -48,7 +31,7 @@ export interface ButtonConfig {
  */
 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 */

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;

package/src/components/chip/api.ts

@@ -1,244 +1,193 @@
-// src/components/chip/api.js
+// src/components/chip/api.ts
+import { ApiOptions, ChipComponent } from './types'
+
+interface ComponentWithElements {
+  element: HTMLElement;
+  text?: {
+    setText: (content: string) => any;
+    getText: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  icon?: {
+    setIcon: (html: string) => any;
+    getIcon: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  getClass: (name: string) => string;
+}
 
 /**
  * Enhances a chip component with API methods
- * @param {Object} options - API configuration options
- * @param {Object} options.disabled - Object containing enable/disable methods
- * @param {Object} options.lifecycle - Object containing lifecycle methods
+ * @param {ApiOptions} options - API configuration options
  * @returns {Function} Higher-order function that adds API methods to component
  * @internal This is an internal utility for the Chip component
  */
-export const withAPI = ({ disabled, lifecycle }) => (component) => {
-  // Track selected state internally
-  let isSelected = component.element.classList.contains(`${component.getClass('chip')}--selected`);
-  
-  return {
-    ...component,
-    element: component.element,
-
-    /**
-     * Gets the chip's value
-     * @returns {string} The chip's value attribute
-     */
-    getValue() {
-      return component.element.getAttribute('data-value') || '';
-    },
-
-    /**
-     * Sets the chip's value
-     * @param {string} value - Value to set
-     * @returns {Object} The chip instance for chaining
-     */
-    setValue(value) {
-      component.element.setAttribute('data-value', value || '');
-      return this;
-    },
-
-    /**
-     * Checks if the chip is disabled
-     * @returns {boolean} True if the chip is disabled
-     */
-    isDisabled() {
-      return component.element.getAttribute('aria-disabled') === 'true';
-    },
-
-    /**
-     * Enables the chip
-     * @returns {Object} The chip instance for chaining
-     */
-    enable() {
-      disabled.enable();
-      component.element.classList.remove(`${component.getClass('chip')}--disabled`);
-      component.element.setAttribute('aria-disabled', 'false');
-      component.element.setAttribute('tabindex', '0');
-      return this;
-    },
-
-    /**
-     * Disables the chip
-     * @returns {Object} The chip instance for chaining
-     */
-    disable() {
-      disabled.disable();
-      component.element.classList.add(`${component.getClass('chip')}--disabled`);
-      component.element.setAttribute('aria-disabled', 'true');
-      component.element.setAttribute('tabindex', '-1');
-      return this;
-    },
-
-    /**
-     * Sets the chip's text content
-     * @param {string} content - Text content
-     * @returns {Object} The chip instance for chaining
-     */
-    setText(content) {
-      const containerSelector = `.${component.getClass('chip')}-content`;
-      const contentContainer = component.element.querySelector(containerSelector) || component.element;
+export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
+  (component: ComponentWithElements): ChipComponent => {
+    // Track selected state internally
+    let isSelected = component.element.classList.contains(`${component.getClass('chip')}--selected`);
+    
+    return {
+      ...component as any,
+      element: component.element,
+      
+      getValue() {
+        return component.element.getAttribute('data-value') || null;
+      },
+      
+      setValue(value: string) {
+        component.element.setAttribute('data-value', value || '');
+        return this;
+      },
       
-      const textSelector = `.${component.getClass('chip')}-text`;
-      let textElement = component.element.querySelector(textSelector);
+      isDisabled() {
+        return component.element.getAttribute('aria-disabled') === 'true';
+      },
       
-      if (!textElement && content) {
-        textElement = document.createElement('span');
-        textElement.className = `${component.getClass('chip')}-text`;
+      enable() {
+        disabled.enable();
+        component.element.classList.remove(`${component.getClass('chip')}--disabled`);
+        component.element.setAttribute('aria-disabled', 'false');
+        component.element.setAttribute('tabindex', '0');
+        return this;
+      },
+      
+      disable() {
+        disabled.disable();
+        component.element.classList.add(`${component.getClass('chip')}--disabled`);
+        component.element.setAttribute('aria-disabled', 'true');
+        component.element.setAttribute('tabindex', '-1');
+        return this;
+      },
+      
+      setText(content: string) {
+        const containerSelector = `.${component.getClass('chip')}-content`;
+        const contentContainer = component.element.querySelector(containerSelector) || component.element;
         
-        // Find the right position to insert (after leading icon if present, or as first child)
-        const leadingIcon = component.element.querySelector(`.${component.getClass('chip')}-leading-icon`);
-        if (leadingIcon) {
-          contentContainer.insertBefore(textElement, leadingIcon.nextSibling);
-        } else {
-          contentContainer.insertBefore(textElement, contentContainer.firstChild);
+        const textSelector = `.${component.getClass('chip')}-text`;
+        let textElement = component.element.querySelector(textSelector);
+        
+        if (!textElement && content) {
+          textElement = document.createElement('span');
+          textElement.className = `${component.getClass('chip')}-text`;
+          
+          // Find the right position to insert (after leading icon if present, or as first child)
+          const leadingIcon = component.element.querySelector(`.${component.getClass('chip')}-leading-icon`);
+          if (leadingIcon) {
+            contentContainer.insertBefore(textElement, leadingIcon.nextSibling);
+          } else {
+            contentContainer.insertBefore(textElement, contentContainer.firstChild);
+          }
         }
-      }
-      
-      if (textElement) {
-        textElement.textContent = content || '';
         
-        // Remove the element if content is empty
-        if (!content && textElement.parentNode) {
-          textElement.parentNode.removeChild(textElement);
+        if (textElement) {
+          textElement.textContent = content || '';
+          
+          // Remove the element if content is empty
+          if (!content && textElement.parentNode) {
+            textElement.parentNode.removeChild(textElement);
+          }
         }
-      }
+        
+        return this;
+      },
       
-      return this;
-    },
-
-    /**
-     * Gets the chip's text content
-     * @returns {string} The chip's text content
-     */
-    getText() {
-      const textElement = component.element.querySelector(`.${component.getClass('chip')}-text`);
-      return textElement ? textElement.textContent : '';
-    },
-
-    /**
-     * Sets the chip's leading icon (alias for setLeadingIcon)
-     * @param {string} icon - Icon HTML content
-     * @returns {Object} The chip instance for chaining
-     */
-    setIcon(icon) {
-      return this.setLeadingIcon(icon);
-    },
-
-    /**
-     * Gets the chip's icon content
-     * @returns {string} The chip's icon HTML
-     */
-    getIcon() {
-      const iconElement = component.element.querySelector(`.${component.getClass('chip')}-leading-icon`);
-      return iconElement ? iconElement.innerHTML : '';
-    },
-
-    /**
-     * Sets the chip's leading icon
-     * @param {string} icon - Icon HTML content
-     * @returns {Object} The chip instance for chaining
-     */
-    setLeadingIcon(icon) {
-      const contentContainer = component.element.querySelector(`.${component.getClass('chip')}-content`) || component.element;
-      const leadingIconSelector = `.${component.getClass('chip')}-leading-icon`;
-      let leadingIconElement = component.element.querySelector(leadingIconSelector);
-
-      if (!leadingIconElement && icon) {
-        leadingIconElement = document.createElement('span');
-        leadingIconElement.className = `${component.getClass('chip')}-leading-icon`;
+      getText() {
+        const textElement = component.element.querySelector(`.${component.getClass('chip')}-text`);
+        return textElement ? textElement.textContent || '' : '';
+      },
+      
+      setIcon(icon: string) {
+        return this.setLeadingIcon(icon);
+      },
+      
+      getIcon() {
+        const iconElement = component.element.querySelector(`.${component.getClass('chip')}-leading-icon`);
+        return iconElement ? iconElement.innerHTML : '';
+      },
+      
+      setLeadingIcon(icon: string) {
+        const contentContainer = component.element.querySelector(`.${component.getClass('chip')}-content`) || component.element;
+        const leadingIconSelector = `.${component.getClass('chip')}-leading-icon`;
+        let leadingIconElement = component.element.querySelector(leadingIconSelector);
         
-        // Insert as first child of the content container
-        contentContainer.insertBefore(leadingIconElement, contentContainer.firstChild);
-      }
-
-      if (leadingIconElement) {
-        leadingIconElement.innerHTML = icon || '';
+        if (!leadingIconElement && icon) {
+          leadingIconElement = document.createElement('span');
+          leadingIconElement.className = `${component.getClass('chip')}-leading-icon`;
+          
+          // Insert as first child of the content container
+          contentContainer.insertBefore(leadingIconElement, contentContainer.firstChild);
+        }
         
-        // Remove the element if icon is empty
-        if (!icon && leadingIconElement.parentNode) {
-          leadingIconElement.parentNode.removeChild(leadingIconElement);
+        if (leadingIconElement) {
+          leadingIconElement.innerHTML = icon || '';
+          
+          // Remove the element if icon is empty
+          if (!icon && leadingIconElement.parentNode) {
+            leadingIconElement.parentNode.removeChild(leadingIconElement);
+          }
         }
-      }
-
-      return this;
-    },
-
-    /**
-     * Sets the chip's trailing icon
-     * @param {string} icon - Icon HTML content
-     * @param {Function} [onClick] - Click handler for the trailing icon
-     * @returns {Object} The chip instance for chaining
-     */
-    setTrailingIcon(icon, onClick) {
-      const contentContainer = component.element.querySelector(`.${component.getClass('chip')}-content`) || component.element;
-      const trailingIconSelector = `.${component.getClass('chip')}-trailing-icon`;
-      let trailingIconElement = component.element.querySelector(trailingIconSelector);
-
-      if (!trailingIconElement && icon) {
-        trailingIconElement = document.createElement('span');
-        trailingIconElement.className = `${component.getClass('chip')}-trailing-icon`;
         
-        // Add as last child of content container
-        contentContainer.appendChild(trailingIconElement);
+        return this;
+      },
+      
+      setTrailingIcon(icon: string, onClick?: (chip: ChipComponent) => void) {
+        const contentContainer = component.element.querySelector(`.${component.getClass('chip')}-content`) || component.element;
+        const trailingIconSelector = `.${component.getClass('chip')}-trailing-icon`;
+        let trailingIconElement = component.element.querySelector(trailingIconSelector);
         
-        // Add click handler if provided
-        if (onClick) {
-          trailingIconElement.addEventListener('click', (e) => {
-            e.stopPropagation(); // Prevent chip click event
-            onClick(this);
-          });
+        if (!trailingIconElement && icon) {
+          trailingIconElement = document.createElement('span');
+          trailingIconElement.className = `${component.getClass('chip')}-trailing-icon`;
+          
+          // Add as last child of content container
+          contentContainer.appendChild(trailingIconElement);
+          
+          // Add click handler if provided
+          if (onClick) {
+            trailingIconElement.addEventListener('click', (e) => {
+              e.stopPropagation(); // Prevent chip click event
+              onClick(this as unknown as ChipComponent);
+            });
+          }
         }
-      }
-
-      if (trailingIconElement) {
-        trailingIconElement.innerHTML = icon || '';
         
-        // Remove the element if icon is empty
-        if (!icon && trailingIconElement.parentNode) {
-          trailingIconElement.parentNode.removeChild(trailingIconElement);
+        if (trailingIconElement) {
+          trailingIconElement.innerHTML = icon || '';
+          
+          // Remove the element if icon is empty
+          if (!icon && trailingIconElement.parentNode) {
+            trailingIconElement.parentNode.removeChild(trailingIconElement);
+          }
         }
-      }
-
-      return this;
-    },
-    
-    /**
-     * Checks if the chip is selected
-     * @returns {boolean} True if the chip is selected
-     */
-    isSelected() {
-      return isSelected;
-    },
-    
-    /**
-     * Sets the chip's selected state
-     * @param {boolean} selected - Whether the chip should be selected
-     * @returns {Object} The chip instance for chaining
-     */
-    setSelected(selected) {
-      isSelected = !!selected;
+        
+        return this;
+      },
       
-      if (selected) {
-        component.element.classList.add(`${component.getClass('chip')}--selected`);
-        component.element.setAttribute('aria-selected', 'true');
-      } else {
-        component.element.classList.remove(`${component.getClass('chip')}--selected`);
-        component.element.setAttribute('aria-selected', 'false');
-      }
+      isSelected() {
+        return isSelected;
+      },
       
-      return this;
-    },
-    
-    /**
-     * Toggles the chip's selected state
-     * @returns {Object} The chip instance for chaining
-     */
-    toggleSelected() {
-      return this.setSelected(!isSelected);
-    },
-
-    /**
-     * Destroys the chip component and cleans up resources
-     */
-    destroy() {
-      lifecycle.destroy();
-    }
-  };
-};
+      setSelected(selected: boolean) {
+        isSelected = !!selected;
+        
+        if (selected) {
+          component.element.classList.add(`${component.getClass('chip')}--selected`);
+          component.element.setAttribute('aria-selected', 'true');
+        } else {
+          component.element.classList.remove(`${component.getClass('chip')}--selected`);
+          component.element.setAttribute('aria-selected', 'false');
+        }
+        
+        return this;
+      },
+      
+      toggleSelected() {
+        return this.setSelected(!isSelected);
+      },
+      
+      destroy() {
+        lifecycle.destroy();
+      }
+    } as unknown as ChipComponent;
+  };