mtrl 0.2.7 → 0.2.8

package/src/components/segmented-button/segment.ts

@@ -2,7 +2,6 @@
 import { createElement } from '../../core/dom/create';
 import { createRipple } from '../../core/build/ripple';
 import { SegmentConfig, Segment } from './types';
-import { DEFAULT_CHECKMARK_ICON, CLASSES } from './constants';
 import { getSegmentConfig } from './config';
 
 /**
@@ -40,7 +39,7 @@ export const createSegment = (
   if (config.text) {
     textElement = createElement({
       tag: 'span',
-      className: `${prefix}-${CLASSES.SEGMENT}-${CLASSES.TEXT}`,
+      className: `${prefix}-segmentedbutton-segment-text`,
       text: config.text,
       container: element
     });
@@ -52,7 +51,7 @@ export const createSegment = (
     // Create icon element
     iconElement = createElement({
       tag: 'span',
-      className: `${prefix}-${CLASSES.SEGMENT}-${CLASSES.ICON}`,
+      className: `${prefix}-segmentedbutton-segment-icon`,
       html: config.icon,
       container: element
     });
@@ -60,8 +59,8 @@ export const createSegment = (
     // Create checkmark element (hidden initially)
     checkmarkElement = createElement({
       tag: 'span',
-      className: `${prefix}-${CLASSES.SEGMENT}-${CLASSES.CHECKMARK}`,
-      html: DEFAULT_CHECKMARK_ICON,
+      className: `${prefix}-segmentedbutton-segment-'checkmark'`,
+      html: 'icon',
       container: element
     });
     
@@ -82,7 +81,7 @@ export const createSegment = (
    * @private
    */
   const updateSelectedState = (selected: boolean) => {
-    element.classList.toggle(`${prefix}-${CLASSES.SEGMENT}--${CLASSES.SELECTED}`, selected);
+    element.classList.toggle(`${prefix}-segmentedbutton-segment--selected`, selected);
     element.setAttribute('aria-pressed', selected ? 'true' : 'false');
     
     // Handle icon/checkmark swap if we have both text and icon
@@ -102,7 +101,7 @@ export const createSegment = (
    */
   const updateDisabledState = (disabled: boolean) => {
     const isDisabled = disabled || groupDisabled;
-    element.classList.toggle(`${prefix}-${CLASSES.SEGMENT}--${CLASSES.DISABLED}`, isDisabled);
+    element.classList.toggle(`${prefix}-segmentedbutton-segment--disabled`, isDisabled);
     
     if (isDisabled) {
       element.setAttribute('disabled', 'true');

package/src/components/segmented-button/segmented-button.ts

@@ -6,7 +6,6 @@ import { createEmitter } from '../../core/state/emitter';
 import { SegmentedButtonConfig, SegmentedButtonComponent, SelectionMode, Segment } from './types';
 import { createBaseConfig, getContainerConfig } from './config';
 import { createSegment } from './segment';
-import { EVENTS } from './constants';
 
 /**
  * Creates a new Segmented Button component
@@ -91,7 +90,7 @@ const createSegmentedButton = (config: SegmentedButtonConfig = {}): SegmentedBut
         oldValue.some(v => !newValue.includes(v)) ||
         newValue.some(v => !oldValue.includes(v))
       ) {
-        emitter.emit(EVENTS.CHANGE, {
+        emitter.emit('change', {
           selected: getSelected(),
           value: newValue,
           oldValue
@@ -153,7 +152,7 @@ const createSegmentedButton = (config: SegmentedButtonConfig = {}): SegmentedBut
           // Emit change event
           const newValue = getSelectedValues();
           if (oldValue.join(',') !== newValue.join(',')) {
-            emitter.emit(EVENTS.CHANGE, {
+            emitter.emit('change', {
               selected: getSelected(),
               value: newValue,
               oldValue
@@ -177,7 +176,7 @@ const createSegmentedButton = (config: SegmentedButtonConfig = {}): SegmentedBut
               // Emit change event
               const newValue = getSelectedValues();
               if (oldValue.join(',') !== newValue.join(',')) {
-                emitter.emit(EVENTS.CHANGE, {
+                emitter.emit('change', {
                   selected: getSelected(),
                   value: newValue,
                   oldValue
@@ -192,7 +191,7 @@ const createSegmentedButton = (config: SegmentedButtonConfig = {}): SegmentedBut
             // Emit change event
             const newValue = getSelectedValues();
             if (oldValue.join(',') !== newValue.join(',')) {
-              emitter.emit(EVENTS.CHANGE, {
+              emitter.emit('change', {
                 selected: getSelected(),
                 value: newValue,
                 oldValue

package/src/components/segmented-button/types.ts

@@ -11,6 +11,34 @@ export enum SelectionMode {
   MULTI = 'multi'
 }
 
+/**
+ * Event types for segmented button
+ */
+export type SegmentedButtonEventType = 'change';
+
+/**
+ * Event data for segmented button events
+ */
+export interface SegmentedButtonEvent {
+  /** The segmented button component that triggered the event */
+  segmentedButton: SegmentedButtonComponent;
+  
+  /** The selected segments */
+  selected: Segment[];
+  
+  /** Values of the selected segments */
+  values: string[];
+  
+  /** Original DOM event if available */
+  originalEvent: Event | null;
+  
+  /** Function to prevent default behavior */
+  preventDefault: () => void;
+  
+  /** Whether default behavior was prevented */
+  defaultPrevented: boolean;
+}
+
 /**
  * Configuration for a single segment within a segmented button
  * @category Components
@@ -106,6 +134,13 @@ export interface SegmentedButtonConfig {
     /** Opacity values for ripple start and end [start, end] */
     opacity?: [string, string];
   };
+  
+  /**
+   * Event handlers for segmented button events
+   */
+  on?: {
+    [key in SegmentedButtonEventType]?: (event: SegmentedButtonEvent) => void;
+  };
 }
 
 /**
@@ -202,7 +237,7 @@ export interface SegmentedButtonComponent {
    * @param handler - Event handler function
    * @returns The SegmentedButtonComponent for chaining
    */
-  on: (event: string, handler: Function) => SegmentedButtonComponent;
+  on: (event: SegmentedButtonEventType, handler: (event: SegmentedButtonEvent) => void) => SegmentedButtonComponent;
 
   /**
    * Removes an event listener from the segmented button
@@ -210,7 +245,7 @@ export interface SegmentedButtonComponent {
    * @param handler - Event handler function
    * @returns The SegmentedButtonComponent for chaining
    */
-  off: (event: string, handler: Function) => SegmentedButtonComponent;
+  off: (event: SegmentedButtonEventType, handler: (event: SegmentedButtonEvent) => void) => SegmentedButtonComponent;
 
   /**
    * Destroys the component and cleans up resources

package/src/components/slider/types.ts

@@ -1,6 +1,24 @@
 // src/components/slider/types.ts
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
 
+/**
+ * Available slider color variants
+ */
+export type SliderColor = 'primary' | 'secondary' | 'tertiary' | 'error';
+
+/**
+ * Available slider size variants
+ */
+export type SliderSize = 'small' | 'medium' | 'large';
+
+/**
+ * Available slider event types
+ */
+export type SliderEventType = 'change' | 'input' | 'focus' | 'blur' | 'start' | 'end';
+
+/**
+ * Configuration options for the slider component
+ * @interface SliderConfig
+ */
 export interface SliderConfig {
   /** Minimum value of the slider */
   min?: number;
@@ -21,10 +39,10 @@ export interface SliderConfig {
   disabled?: boolean;
   
   /** Color variant of the slider */
-  color?: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS];
+  color?: SliderColor;
   
   /** Size variant of the slider */
-  size?: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES];
+  size?: SliderSize;
   
   /** Whether to show tick marks */
   ticks?: boolean;
@@ -58,10 +76,14 @@ export interface SliderConfig {
   
   /** Event handlers for slider events */
   on?: {
-    [key in keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS]]?: (event: SliderEvent) => void;
+    [key in SliderEventType]?: (event: SliderEvent) => void;
   };
 }
 
+/**
+ * Slider event data
+ * @interface SliderEvent
+ */
 export interface SliderEvent {
   /** The slider component that triggered the event */
   slider: any;
@@ -82,6 +104,10 @@ export interface SliderEvent {
   defaultPrevented: boolean;
 }
 
+/**
+ * Slider component public API interface
+ * @interface SliderComponent
+ */
 export interface SliderComponent {
   /** The root element of the slider */
   element: HTMLElement;
@@ -126,13 +152,13 @@ export interface SliderComponent {
   isDisabled: () => boolean;
   
   /** Sets slider color */
-  setColor: (color: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS]) => SliderComponent;
+  setColor: (color: SliderColor) => SliderComponent;
   
   /** Gets slider color */
   getColor: () => string;
   
   /** Sets slider size */
-  setSize: (size: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES]) => SliderComponent;
+  setSize: (size: SliderSize) => SliderComponent;
   
   /** Gets slider size */
   getSize: () => string;
@@ -156,10 +182,10 @@ export interface SliderComponent {
   getIcon: () => string;
   
   /** Adds event listener */
-  on: (event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) => SliderComponent;
+  on: (event: SliderEventType, handler: (event: SliderEvent) => void) => SliderComponent;
   
   /** Removes event listener */
-  off: (event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) => SliderComponent;
+  off: (event: SliderEventType, handler: (event: SliderEvent) => void) => SliderComponent;
   
   /** Destroys the slider component and cleans up resources */
   destroy: () => void;

package/src/components/snackbar/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { SnackbarConfig, BaseComponent, ApiOptions } from './types';
-import { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS } from './constants';
 
 /**
  * Default configuration for the Snackbar component
  */
 export const defaultConfig: SnackbarConfig = {
-  variant: SNACKBAR_VARIANTS.BASIC,
-  position: SNACKBAR_POSITIONS.CENTER,
+  variant: 'basic',
+  position: 'center',
   duration: 4000
 };
 

package/src/components/snackbar/constants.ts

@@ -17,38 +17,6 @@ export const SNACKBAR_POSITIONS = {
   END: 'end'
 } as const;
 
-/**
- * Validation schema for snackbar configuration
- */
-export const SNACKBAR_SCHEMA = {
-  variant: {
-    type: 'string',
-    enum: Object.values(SNACKBAR_VARIANTS),
-    required: false
-  },
-  position: {
-    type: 'string',
-    enum: Object.values(SNACKBAR_POSITIONS),
-    required: false
-  },
-  message: {
-    type: 'string',
-    required: true
-  },
-  action: {
-    type: 'string',
-    required: false
-  },
-  duration: {
-    type: 'number',
-    required: false
-  },
-  class: {
-    type: 'string',
-    required: false
-  }
-} as const;
-
 /**
  * Snackbar state classes
  */

package/src/components/snackbar/index.ts

@@ -1,4 +1,3 @@
 // src/components/snackbar/index.ts
 export { default } from './snackbar'
-export { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS } from './constants'
 export { SnackbarConfig, SnackbarComponent } from './types'

package/src/components/snackbar/position.ts

@@ -1,7 +1,15 @@
 // src/components/snackbar/position.ts
-import { SNACKBAR_POSITIONS } from './constants';
 import { BaseComponent } from './types';
 
+/**
+ * Snackbar display positions
+ */
+const SNACKBAR_POSITIONS = {
+  CENTER: 'center',
+  START: 'start',
+  END: 'end'
+}
+
 /**
  * Position configuration for the withPosition function
  */

package/src/components/snackbar/types.ts

@@ -1,58 +1,134 @@
-// src/components/snackbar/constants.ts
+// src/components/snackbar/types.ts
 
 /**
- * Snackbar visual variants
+ * Available snackbar variants
  */
-export const SNACKBAR_VARIANTS = {
-  BASIC: 'basic',
-  ACTION: 'action' // With action button
-} as const;
+export type SnackbarVariant = 'basic' | 'action';
 
 /**
- * Snackbar display positions
+ * Available snackbar positions
  */
-export const SNACKBAR_POSITIONS = {
-  CENTER: 'center',
-  START: 'start',
-  END: 'end'
-} as const;
+export type SnackbarPosition = 'center' | 'start' | 'end';
 
 /**
- * Validation schema for snackbar configuration
+ * Snackbar visibility states
  */
-export const SNACKBAR_SCHEMA = {
-  variant: {
-    type: 'string',
-    enum: Object.values(SNACKBAR_VARIANTS),
-    required: false
-  },
-  position: {
-    type: 'string',
-    enum: Object.values(SNACKBAR_POSITIONS),
-    required: false
-  },
-  message: {
-    type: 'string',
-    required: true
-  },
-  action: {
-    type: 'string',
-    required: false
-  },
-  duration: {
-    type: 'number',
-    required: false
-  },
-  class: {
-    type: 'string',
-    required: false
-  }
-} as const;
+export type SnackbarState = 'visible' | 'hidden';
 
 /**
- * Snackbar state classes
+ * Available snackbar event types
  */
-export const SNACKBAR_STATES = {
-  VISIBLE: 'visible',
-  HIDDEN: 'hidden'
-} as const;
+export type SnackbarEventType = 'open' | 'close' | 'action';
+
+/**
+ * Snackbar event data
+ * @interface SnackbarEvent
+ */
+export interface SnackbarEvent {
+  /** The snackbar component that triggered the event */
+  snackbar: SnackbarComponent;
+  
+  /** Original DOM event if available */
+  originalEvent: Event | null;
+  
+  /** Function to prevent default behavior */
+  preventDefault: () => void;
+  
+  /** Whether default behavior was prevented */
+  defaultPrevented: boolean;
+}
+
+/**
+ * Configuration options for the snackbar component
+ * @interface SnackbarConfig
+ */
+export interface SnackbarConfig {
+  /** Visual variant of the snackbar */
+  variant?: SnackbarVariant;
+  
+  /** Position of the snackbar on screen */
+  position?: SnackbarPosition;
+  
+  /** Text message to display */
+  message: string;
+  
+  /** Action button text (for 'action' variant) */
+  action?: string;
+  
+  /** Duration in milliseconds to show the snackbar (0 for indefinite) */
+  duration?: number;
+  
+  /** Action button callback function */
+  onAction?: (event: SnackbarEvent) => void;
+  
+  /** Callback function when the snackbar opens */
+  onOpen?: (event: SnackbarEvent) => void;
+  
+  /** Callback function when the snackbar closes */
+  onClose?: (event: SnackbarEvent) => void;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Component prefix for CSS classes */
+  prefix?: string;
+  
+  /** Component name for CSS classes */
+  componentName?: string;
+  
+  /** Event handlers for snackbar events */
+  on?: {
+    [key in SnackbarEventType]?: (event: SnackbarEvent) => void;
+  };
+}
+
+/**
+ * Snackbar component public API interface
+ * @interface SnackbarComponent
+ */
+export interface SnackbarComponent {
+  /** The root element of the snackbar */
+  element: HTMLElement;
+  
+  /** Current state of the snackbar */
+  state: SnackbarState;
+  
+  /** Displays the snackbar */
+  show: () => SnackbarComponent;
+  
+  /** Hides the snackbar */
+  hide: () => SnackbarComponent;
+  
+  /** Sets the message text */
+  setMessage: (message: string) => SnackbarComponent;
+  
+  /** Gets the message text */
+  getMessage: () => string;
+  
+  /** Sets the action button text */
+  setAction: (text: string) => SnackbarComponent;
+  
+  /** Gets the action button text */
+  getAction: () => string;
+  
+  /** Sets the display duration */
+  setDuration: (duration: number) => SnackbarComponent;
+  
+  /** Gets the display duration */
+  getDuration: () => number;
+  
+  /** Sets the snackbar position */
+  setPosition: (position: SnackbarPosition) => SnackbarComponent;
+  
+  /** Gets the snackbar position */
+  getPosition: () => SnackbarPosition;
+  
+  /** Adds event listener */
+  on: (event: SnackbarEventType, handler: (event: SnackbarEvent) => void) => SnackbarComponent;
+  
+  /** Removes event listener */
+  off: (event: SnackbarEventType, handler: (event: SnackbarEvent) => void) => SnackbarComponent;
+  
+  /** Destroys the snackbar component and cleans up resources */
+  destroy: () => void;
+}

package/src/components/switch/config.ts

@@ -5,13 +5,12 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { SwitchConfig, BaseComponent, ApiOptions } from './types';
-import { SWITCH_LABEL_POSITION } from './constants';
 
 /**
  * Default configuration for the Switch component
  */
 export const defaultConfig: SwitchConfig = {
-  labelPosition: SWITCH_LABEL_POSITION.END
+  labelPosition: 'end'
 };
 
 /**
@@ -42,7 +41,7 @@ export const getElementConfig = (config: SwitchConfig) =>
 export const withLabelPosition = (config: SwitchConfig) => (component: BaseComponent): BaseComponent => {
   if (!config.label) return component;
 
-  const position = config.labelPosition || SWITCH_LABEL_POSITION.END;
+  const position = config.labelPosition || 'end';
   const positionClass = `${config.prefix}-switch--label-${position}`;
 
   component.element.classList.add(positionClass);

package/src/components/switch/index.ts

@@ -1,4 +1,3 @@
 // src/components/switch/index.ts
 export { default } from './switch'
-export { SWITCH_LABEL_POSITION } from './constants'
 export { SwitchConfig, SwitchComponent } from './types'

package/src/components/switch/types.ts

@@ -1,5 +1,6 @@
 // src/components/switch/types.ts
-import { SWITCH_LABEL_POSITION } from './constants';
+
+export type SwitchPosition = 'center' | 'start' | 'end';
 
 /**
  * Configuration interface for the Switch component
@@ -24,7 +25,7 @@ export interface SwitchConfig {
   label?: string;
   
   /** Label position (start/end) */
-  labelPosition?: keyof typeof SWITCH_LABEL_POSITION | string;
+  labelPosition?: SwitchPosition | string;
   
   /** Additional CSS classes */
   class?: string;

package/src/components/tabs/config.ts

@@ -6,13 +6,12 @@ import {
 } from '../../core/config/component-config';
 import { withElement } from '../../core/compose/component';
 import { TabConfig } from './types';
-import { TABS_VARIANTS, TAB_STATES } from './constants';
 
 /**
  * Default configuration for a Tab
  */
 export const defaultTabConfig: TabConfig = {
-  state: TAB_STATES.INACTIVE,
+  state: 'inactive',
   componentName: 'tab',
   ripple: true
 };
@@ -21,7 +20,7 @@ export const defaultTabConfig: TabConfig = {
  * Default configuration for the Tabs component
  */
 export const defaultTabsConfig = {
-  variant: TABS_VARIANTS.PRIMARY,
+  variant: 'primary',
   scrollable: true,
   showDivider: true,
   componentName: 'tabs'
@@ -48,7 +47,7 @@ export const getTabsElementConfig = (config) => {
     },
     className: [
       `${config.prefix}-tabs`,
-      `${config.prefix}-tabs--${config.variant || TABS_VARIANTS.PRIMARY}`,
+      `${config.prefix}-tabs--${config.variant || 'primary'}`,
       config.class
     ]
   };

package/src/components/tabs/index.ts

@@ -7,21 +7,6 @@ import { createTabsState } from './state';
 import { createTabIndicator } from './indicator';
 import { updateTabPanels, setupKeyboardNavigation } from './utils';
 
-export { 
-  // Main component creators
-  createTabs,
-  createTab,
-  
-  // Constants
-  TABS_VARIANTS, 
-  TAB_STATES, 
-  TAB_LAYOUT,
-  TAB_INTERACTION_STATES,
-  TAB_ANIMATION,
-  TAB_A11Y,
-  TAB_COLORS
-} from './constants';
-
 export { 
   // Types
   TabsConfig, 

package/src/components/tabs/tab-api.ts

@@ -1,9 +1,17 @@
 // src/components/tabs/tab-api.ts
 import { TabComponent } from './types';
-import { TAB_STATES, TAB_LAYOUT } from './constants';
 import { BadgeComponent } from '../badge/types';
 import createBadge from '../badge';
 
+const TAB_LAYOUT = {
+  /** Icon-only tab layout */
+  ICON_ONLY: 'icon-only',
+  /** Text-only tab layout */
+  TEXT_ONLY: 'text-only',
+  /** Icon and text layout */
+  ICON_AND_TEXT: 'icon-and-text'
+}
+
 /**
  * API options for a Tab component
  */
@@ -82,7 +90,7 @@ export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) =>
        * Activates the tab
        */
       activate() {
-        component.element.classList.add(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        component.element.classList.add(`${component.getClass('tab')}--active`);
         component.element.setAttribute('aria-selected', 'true');
         return this;
       },
@@ -91,7 +99,7 @@ export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) =>
        * Deactivates the tab
        */
       deactivate() {
-        component.element.classList.remove(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        component.element.classList.remove(`${component.getClass('tab')}--active`);
         component.element.setAttribute('aria-selected', 'false');
         return this;
       },
@@ -100,7 +108,7 @@ export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) =>
        * Checks if the tab is active
        */
       isActive() {
-        return component.element.classList.contains(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        return component.element.classList.contains(`${component.getClass('tab')}--active`);
       },
       
       /**