mtrl 0.2.7 → 0.2.9

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/config.ts

@@ -5,6 +5,7 @@ import {
 } from '../../core/config/component-config';
 import { SliderConfig } from './types';
 import { SLIDER_COLORS, SLIDER_SIZES } from './constants';
+import { createSliderDefinition } from './structure';
 
 /**
  * Default configuration for the Slider component
@@ -31,8 +32,25 @@ export const defaultConfig: SliderConfig = {
  * @param {SliderConfig} config - User provided configuration
  * @returns {SliderConfig} Complete configuration with defaults applied
  */
-export const createBaseConfig = (config: SliderConfig = {}): SliderConfig => 
-  createComponentConfig(defaultConfig, config, 'slider') as SliderConfig;
+export const createBaseConfig = (config: SliderConfig = {}): SliderConfig => {
+  // Create the base config with defaults applied
+  const baseConfig = createComponentConfig(defaultConfig, config, 'slider') as SliderConfig;
+  
+  // Create a basic component object for structure generation
+  const baseComponent = {
+    componentName: 'slider',
+    config: baseConfig,
+    getClass: (className) => {
+      const prefix = baseConfig.prefix || 'mtrl';
+      return `${prefix}-${className}`;
+    }
+  };
+  
+  // Add the structure definition to the config
+  baseConfig.structureDefinition = createSliderDefinition(baseComponent, baseConfig);
+  
+  return baseConfig;
+};
 
 /**
  * Generates element configuration for the Slider component