mtrl 0.2.5 → 0.2.6

package/src/components/progress/_styles.scss

@@ -120,71 +120,6 @@ $component: '#{base.$prefix}-progress';
     }
   }
   
-  // Size variants
-  &--small {
-    &.#{$component}--linear {
-      height: 2px;
-    }
-    
-    &.#{$component}--circular {
-      width: 24px;
-      height: 24px;
-      
-      .#{$component}-track,
-      .#{$component}-indicator {
-        stroke-width: 3;
-        border-radius: 1px;
-        linecap: round
-      }
-    }
-  }
-  
-  &--medium {
-    &.#{$component}--linear {
-      height: 4px;
-    }
-    
-    &.#{$component}--circular {
-      width: 48px;
-      height: 48px;
-      
-      .#{$component}-track,
-      .#{$component}-indicator {
-        stroke-width: 4;
-      }
-    }
-  }
-  
-  &--large {
-    &.#{$component}--linear {
-      height: 8px;
-      
-      .#{$component}-track,
-      .#{$component}-indicator {
-        border-radius: 4px;
-      }
-
-      .#{$component}-label {
-        font-size: 14px;
-        top: 12px;
-      }
-    }
-    
-    &.#{$component}--circular {
-      width: 64px;
-      height: 64px;
-      
-      .#{$component}-track,
-      .#{$component}-indicator {
-        stroke-width: 6;
-      }
-      
-      .#{$component}-label {
-        font-size: 14px;
-      }
-    }
-  }
-  
   // Disabled state
   &--disabled {
     opacity: 0.38;

package/src/components/progress/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { ProgressConfig } from './types';
-import { PROGRESS_VARIANTS, PROGRESS_SIZES } from './constants';
+import { PROGRESS_VARIANTS } from './constants';
 
 /**
  * Default configuration for the Progress component
  */
 export const defaultConfig: ProgressConfig = {
   variant: PROGRESS_VARIANTS.LINEAR,
-  size: PROGRESS_SIZES.MEDIUM,
   value: 0,
   max: 100,
   buffer: 0,

package/src/components/progress/constants.ts

@@ -17,20 +17,6 @@ export const PROGRESS_VARIANTS = {
   INDETERMINATE: 'indeterminate'
 } as const;
 
-/**
- * Progress component sizes
- */
-export const PROGRESS_SIZES = {
-  /** Small progress indicator (2px height for linear, 16px diameter for circular) */
-  SMALL: 'small',
-  
-  /** Medium progress indicator (4px height for linear, 24px diameter for circular) */
-  MEDIUM: 'medium',
-  
-  /** Large progress indicator (8px height for linear, 48px diameter for circular) */
-  LARGE: 'large'
-} as const;
-
 /**
  * Progress component events
  */

package/src/components/progress/index.ts

@@ -1,5 +1,5 @@
 // src/components/progress/index.ts
 
 export { default } from './progress';
-export { PROGRESS_VARIANTS, PROGRESS_SIZES, PROGRESS_EVENTS } from './constants';
+export { PROGRESS_VARIANTS, PROGRESS_EVENTS } from './constants';
 export { ProgressConfig, ProgressComponent } from './types';

package/src/components/progress/progress.ts

@@ -6,13 +6,12 @@ import { createBase, withElement } from '../../core/compose/component';
 import {
   withEvents,
   withVariant,
-  withSize,
   withDisabled,
   withLifecycle
 } from '../../core/compose/features';
 import { withAPI } from './api';
 import { ProgressConfig, ProgressComponent } from './types';
-import { PROGRESS_VARIANTS, PROGRESS_SIZES, PROGRESS_EVENTS } from './constants';
+import { PROGRESS_VARIANTS, PROGRESS_EVENTS } from './constants';
 import { createBaseConfig, getElementConfig, getApiConfig } from './config';
 
 // Helper functions
@@ -72,7 +71,6 @@ const createCircularProgressDOM = (baseClass: string) => {
  * // Create an indeterminate circular progress
  * const loader = createProgress({
  *   variant: 'circular',
- *   size: 'large',
  *   indeterminate: true
  * });
  * ```
@@ -101,7 +99,6 @@ const createProgress = (config: ProgressConfig = {}): ProgressComponent => {
       withEvents(),
       withElement(getElementConfig(baseConfig)),
       withVariant(baseConfig),
-      withSize(baseConfig),
       withDisabled(baseConfig),
       withLifecycle(),
       // Add DOM structure based on variant

package/src/components/progress/types.ts

@@ -1,5 +1,5 @@
 // src/components/progress/types.ts
-import { PROGRESS_VARIANTS, PROGRESS_SIZES } from './constants';
+import { PROGRESS_VARIANTS } from './constants';
 
 /**
  * Configuration interface for the Progress component
@@ -8,9 +8,6 @@ export interface ProgressConfig {
   /** Progress variant (linear, circular) */
   variant?: keyof typeof PROGRESS_VARIANTS | string;
   
-  /** Progress size (small, medium, large) */
-  size?: keyof typeof PROGRESS_SIZES | string;
-  
   /** Initial progress value (0-100) */
   value?: number;
   

package/src/components/radios/_styles.scss

@@ -184,49 +184,4 @@ $component: '#{base.$prefix}-radios';
     margin-left: 8px;
     line-height: 1.2;
   }
-  
-  // Size variants
-  &--small {
-    .#{$component}-control {
-      width: 36px;
-      height: 36px;
-    }
-    
-    .#{$component}-circle {
-      width: 18px;
-      height: 18px;
-      
-      &:after {
-        width: 10px;
-        height: 10px;
-      }
-    }
-    
-    .#{$component}-label {
-      font-size: 13px;
-      height: 36px;
-    }
-  }
-  
-  &--large {
-    .#{$component}-control {
-      width: 48px;
-      height: 48px;
-    }
-    
-    .#{$component}-circle {
-      width: 24px;
-      height: 24px;
-      
-      &:after {
-        width: 14px;
-        height: 14px;
-      }
-    }
-    
-    .#{$component}-label {
-      font-size: 16px;
-      height: 48px;
-    }
-  }
 }

package/src/components/radios/api.ts

@@ -27,6 +27,7 @@ interface ComponentWithRadio {
   events: {
     on: (event: string, handler: Function) => void;
     off: (event: string, handler: Function) => void;
+    emit?: (event: string, data: any) => void;
   };
 }
 
@@ -37,64 +38,88 @@ interface ComponentWithRadio {
  * @internal This is an internal utility for the Radios component
  */
 export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
-  (component: ComponentWithRadio): RadiosComponent => ({
-    ...component as any,
-    element: component.element,
-    radios: component.radios,
-    
-    getValue: () => component.getValue(),
-    
-    setValue(value: string) {
-      component.setValue(value);
-      return this;
-    },
-    
-    getSelected: () => component.getSelected(),
-    
-    addOption(option) {
-      component.addOption(option);
-      return this;
-    },
-    
-    removeOption(value: string) {
-      component.removeOption(value);
-      return this;
-    },
-    
-    enable() {
-      disabled.enable();
-      return this;
-    },
-    
-    disable() {
-      disabled.disable();
-      return this;
-    },
-    
-    enableOption(value: string) {
-      component.enableOption(value);
-      return this;
-    },
-    
-    disableOption(value: string) {
-      component.disableOption(value);
-      return this;
-    },
-    
-    on(event: string, handler: Function) {
-      component.events.on(event, handler);
-      return this;
-    },
-    
-    off(event: string, handler: Function) {
-      component.events.off(event, handler);
-      return this;
-    },
-    
-    destroy() {
-      // First destroy all radio items
-      component.radios.forEach(radio => radio.destroy());
-      // Then destroy the component
-      lifecycle.destroy();
+  (component: ComponentWithRadio): RadiosComponent => {
+    // Ensure component has events
+    if (!component.events) {
+      component.events = {
+        on: (event, handler) => {
+          component.element.addEventListener(event, (e) => handler(e.detail));
+        },
+        off: (event, handler) => {
+          component.element.removeEventListener(event, handler);
+        },
+        emit: (event, data) => {
+          const customEvent = new CustomEvent(event, { detail: data });
+          component.element.dispatchEvent(customEvent);
+        }
+      };
+    } else if (!component.events.emit) {
+      // Add emit method if not present
+      component.events.emit = (event, data) => {
+        const customEvent = new CustomEvent(event, { detail: data });
+        component.element.dispatchEvent(customEvent);
+      };
     }
-  });
+    
+    return {
+      ...component as any,
+      element: component.element,
+      radios: component.radios,
+      
+      getValue: () => component.getValue(),
+      
+      setValue(value: string) {
+        component.setValue(value);
+        return this;
+      },
+      
+      getSelected: () => component.getSelected(),
+      
+      addOption(option) {
+        component.addOption(option);
+        return this;
+      },
+      
+      removeOption(value: string) {
+        component.removeOption(value);
+        return this;
+      },
+      
+      enable() {
+        disabled.enable();
+        return this;
+      },
+      
+      disable() {
+        disabled.disable();
+        return this;
+      },
+      
+      enableOption(value: string) {
+        component.enableOption(value);
+        return this;
+      },
+      
+      disableOption(value: string) {
+        component.disableOption(value);
+        return this;
+      },
+      
+      on(event: string, handler: Function) {
+        component.events.on(event, handler);
+        return this;
+      },
+      
+      off(event: string, handler: Function) {
+        component.events.off(event, handler);
+        return this;
+      },
+      
+      destroy() {
+        // First destroy all radio items
+        component.radios.forEach(radio => radio.destroy());
+        // Then destroy the component
+        lifecycle.destroy();
+      }
+    };
+  };

package/src/components/radios/config.ts

@@ -5,7 +5,7 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { RadiosConfig } from './types';
-import { RADIO_DIRECTIONS, RADIO_SIZES } from './constants';
+import { RADIO_DIRECTIONS } from './constants';
 
 /**
  * Default configuration for the Radios component
@@ -13,7 +13,6 @@ import { RADIO_DIRECTIONS, RADIO_SIZES } from './constants';
 export const defaultConfig: RadiosConfig = {
   name: '',
   direction: RADIO_DIRECTIONS.VERTICAL,
-  size: RADIO_SIZES.MEDIUM,
   disabled: false,
   ripple: true,
   options: []

package/src/components/radios/constants.ts

@@ -10,15 +10,6 @@ export const RADIO_STATES = {
   FOCUSED: 'focused'
 };
 
-/**
- * Radio sizes
- */
-export const RADIO_SIZES = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-};
-
 /**
  * Radio layout directions
  */

package/src/components/radios/index.ts

@@ -1,4 +1,4 @@
 // src/components/radios/index.ts
 export { default } from './radios';
-export { RADIO_STATES, RADIO_SIZES, RADIO_DIRECTIONS } from './constants';
+export { RADIO_STATES, RADIO_DIRECTIONS } from './constants';
 export { RadiosConfig, RadiosComponent, RadioOptionConfig } from './types';

package/src/components/radios/radio.ts

@@ -16,11 +16,6 @@ export const withRadio = (config: RadiosConfig) => (component) => {
     `${radiosClass}--${config.direction || 'vertical'}`
   );
   
-  // Add size class
-  component.element.classList.add(
-    `${radiosClass}--${config.size || 'medium'}`
-  );
-  
   // Setup disabled state if needed
   if (config.disabled) {
     component.element.classList.add(`${radiosClass}--disabled`);
@@ -112,12 +107,24 @@ export const withRadio = (config: RadiosConfig) => (component) => {
           }
         });
         
-        // Emit change event
-        component.events.emit('change', {
-          value: option.value,
-          originalEvent: e,
-          option
-        });
+        // Safely emit change event if events exist
+        if (component.events && typeof component.events.emit === 'function') {
+          component.events.emit('change', {
+            value: option.value,
+            originalEvent: e,
+            option
+          });
+        } else if (typeof component.on === 'function') {
+          // Fallback to trigger handlers directly if they were registered with on()
+          const changeEvent = new CustomEvent('change', {
+            detail: {
+              value: option.value,
+              originalEvent: e,
+              option
+            }
+          });
+          component.element.dispatchEvent(changeEvent);
+        }
       }
     };
     
@@ -188,6 +195,22 @@ export const withRadio = (config: RadiosConfig) => (component) => {
     config.options.forEach(option => addOption(option));
   }
   
+  // Create events object if it doesn't exist
+  if (!component.events) {
+    component.events = {
+      on: (event, handler) => {
+        component.element.addEventListener(event, (e) => handler(e.detail));
+      },
+      off: (event, handler) => {
+        component.element.removeEventListener(event, handler);
+      },
+      emit: (event, data) => {
+        const customEvent = new CustomEvent(event, { detail: data });
+        component.element.dispatchEvent(customEvent);
+      }
+    };
+  }
+  
   // Return enhanced component
   return {
     ...component,

package/src/components/radios/radios.ts

@@ -22,9 +22,10 @@ const createRadios = (config: RadiosConfig): RadiosComponent => {
   const baseConfig = createBaseConfig(config);
 
   try {
+    // First add events support before radio functionality
     const radios = pipe(
       createBase,
-      withEvents(),
+      withEvents(), // Make sure this runs first to provide events
       withElement(getElementConfig(baseConfig)),
       withRadio(baseConfig),
       withDisabled(baseConfig),

package/src/components/radios/types.ts

@@ -1,5 +1,5 @@
 // src/components/radios/types.ts
-import { RADIO_SIZES, RADIO_DIRECTIONS } from './constants';
+import { RADIO_DIRECTIONS } from './constants';
 
 /**
  * Configuration for a radio option in the Radios component
@@ -64,12 +64,6 @@ export interface RadiosConfig {
    */
   direction?: keyof typeof RADIO_DIRECTIONS | string;
   
-  /**
-   * Radio size
-   * @default 'medium'
-   */
-  size?: keyof typeof RADIO_SIZES | string;
-  
   /** 
    * Whether to enable ripple effect
    * @default true