mtrl 0.2.4 → 0.2.6

package/src/components/slider/api.ts

@@ -1,7 +1,10 @@
 // src/components/slider/api.ts
 import { SliderComponent, SliderEvent } from './types';
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS, SLIDER_EVENTS } from './constants';
+import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
 
+/**
+ * API options interface - structured by feature area
+ */
 interface ApiOptions {
   slider: {
     setValue: (value: number, triggerEvent?: boolean) => any;
@@ -26,10 +29,7 @@ interface ApiOptions {
     getColor: () => string;
     setSize: (size: string) => void;
     getSize: () => string;
-    setOrientation: (orientation: string) => void;
-    getOrientation: () => string;
     showTicks: (show: boolean) => void;
-    showTickLabels: (show: boolean | string[]) => void;
     showCurrentValue: (show: boolean) => void;
   };
   events: {
@@ -41,6 +41,9 @@ interface ApiOptions {
   };
 }
 
+/**
+ * Component with elements
+ */
 interface ComponentWithElements {
   element: HTMLElement;
 }
@@ -53,46 +56,6 @@ interface ComponentWithElements {
  */
 export const withAPI = (options: ApiOptions) => 
   (component: ComponentWithElements): SliderComponent => {
-    // Make sure options is defined with fallbacks
-    const safeOptions: ApiOptions = options || {
-      slider: {
-        setValue: () => {},
-        getValue: () => 0,
-        setSecondValue: () => {},
-        getSecondValue: () => null,
-        setMin: () => {},
-        getMin: () => 0,
-        setMax: () => {},
-        getMax: () => 100,
-        setStep: () => {},
-        getStep: () => 1,
-        regenerateTicks: () => {}
-      },
-      disabled: {
-        enable: () => {},
-        disable: () => {},
-        isDisabled: () => false
-      },
-      appearance: {
-        setColor: () => {},
-        getColor: () => 'primary',
-        setSize: () => {},
-        getSize: () => 'medium',
-        setOrientation: () => {},
-        getOrientation: () => 'horizontal',
-        showTicks: () => {},
-        showTickLabels: () => {},
-        showCurrentValue: () => {}
-      },
-      events: {
-        on: () => {},
-        off: () => {}
-      },
-      lifecycle: {
-        destroy: () => {}
-      }
-    };
-    
     return {
       ...component as any,
       
@@ -103,7 +66,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {SliderComponent} Slider component instance for chaining
        */
       setValue(value: number, triggerEvent: boolean = true) {
-        safeOptions.slider.setValue(value, triggerEvent);
+        options.slider.setValue(value, triggerEvent);
         return this;
       },
       
@@ -112,7 +75,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {number} Current slider value
        */
       getValue() {
-        return safeOptions.slider.getValue();
+        return options.slider.getValue();
       },
       
       /**
@@ -122,7 +85,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {SliderComponent} Slider component instance for chaining
        */
       setSecondValue(value: number, triggerEvent: boolean = true) {
-        safeOptions.slider.setSecondValue(value, triggerEvent);
+        options.slider.setSecondValue(value, triggerEvent);
         return this;
       },
       
@@ -131,7 +94,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {number|null} Current secondary value or null
        */
       getSecondValue() {
-        return safeOptions.slider.getSecondValue();
+        return options.slider.getSecondValue();
       },
       
       /**
@@ -140,7 +103,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {SliderComponent} Slider component instance for chaining
        */
       setMin(min: number) {
-        safeOptions.slider.setMin(min);
+        options.slider.setMin(min);
         return this;
       },
       
@@ -149,7 +112,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {number} Current minimum value
        */
       getMin() {
-        return safeOptions.slider.getMin();
+        return options.slider.getMin();
       },
       
       /**
@@ -158,7 +121,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {SliderComponent} Slider component instance for chaining
        */
       setMax(max: number) {
-        safeOptions.slider.setMax(max);
+        options.slider.setMax(max);
         return this;
       },
       
@@ -167,7 +130,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {number} Current maximum value
        */
       getMax() {
-        return safeOptions.slider.getMax();
+        return options.slider.getMax();
       },
       
       /**
@@ -176,7 +139,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {SliderComponent} Slider component instance for chaining
        */
       setStep(step: number) {
-        safeOptions.slider.setStep(step);
+        options.slider.setStep(step);
         return this;
       },
       
@@ -185,7 +148,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {number} Current step size
        */
       getStep() {
-        return safeOptions.slider.getStep();
+        return options.slider.getStep();
       },
       
       /**
@@ -193,7 +156,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {SliderComponent} Slider component instance for chaining
        */
       enable() {
-        safeOptions.disabled.enable();
+        options.disabled.enable();
         return this;
       },
       
@@ -202,7 +165,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {SliderComponent} Slider component instance for chaining
        */
       disable() {
-        safeOptions.disabled.disable();
+        options.disabled.disable();
         return this;
       },
       
@@ -211,7 +174,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {boolean} True if slider is disabled
        */
       isDisabled() {
-        return safeOptions.disabled.isDisabled();
+        return options.disabled.isDisabled();
       },
       
       /**
@@ -219,8 +182,8 @@ export const withAPI = (options: ApiOptions) =>
        * @param {string} color - Color variant
        * @returns {SliderComponent} Slider component instance for chaining
        */
-      setColor(color: keyof typeof SLIDER_COLORS | SLIDER_COLORS) {
-        safeOptions.appearance.setColor(color);
+      setColor(color: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS]) {
+        options.appearance.setColor(color);
         return this;
       },
       
@@ -229,7 +192,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {string} Current color name
        */
       getColor() {
-        return safeOptions.appearance.getColor();
+        return options.appearance.getColor();
       },
       
       /**
@@ -237,8 +200,8 @@ export const withAPI = (options: ApiOptions) =>
        * @param {string} size - Size variant
        * @returns {SliderComponent} Slider component instance for chaining
        */
-      setSize(size: keyof typeof SLIDER_SIZES | SLIDER_SIZES) {
-        safeOptions.appearance.setSize(size);
+      setSize(size: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES]) {
+        options.appearance.setSize(size);
         return this;
       },
       
@@ -247,25 +210,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {string} Current size name
        */
       getSize() {
-        return safeOptions.appearance.getSize();
-      },
-      
-      /**
-       * Sets slider orientation
-       * @param {string} orientation - Orientation variant
-       * @returns {SliderComponent} Slider component instance for chaining
-       */
-      setOrientation(orientation: keyof typeof SLIDER_ORIENTATIONS | SLIDER_ORIENTATIONS) {
-        safeOptions.appearance.setOrientation(orientation);
-        return this;
-      },
-      
-      /**
-       * Gets slider orientation
-       * @returns {string} Current orientation name
-       */
-      getOrientation() {
-        return safeOptions.appearance.getOrientation();
+        return options.appearance.getSize();
       },
       
       /**
@@ -274,17 +219,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {SliderComponent} Slider component instance for chaining
        */
       showTicks(show: boolean) {
-        safeOptions.appearance.showTicks(show);
-        return this;
-      },
-      
-      /**
-       * Shows or hides tick labels
-       * @param {boolean|string[]} show - Whether to show labels or array of label texts
-       * @returns {SliderComponent} Slider component instance for chaining
-       */
-      showTickLabels(show: boolean | string[]) {
-        safeOptions.appearance.showTickLabels(show);
+        options.appearance.showTicks(show);
         return this;
       },
       
@@ -294,7 +229,7 @@ export const withAPI = (options: ApiOptions) =>
        * @returns {SliderComponent} Slider component instance for chaining
        */
       showCurrentValue(show: boolean) {
-        safeOptions.appearance.showCurrentValue(show);
+        options.appearance.showCurrentValue(show);
         return this;
       },
       
@@ -304,9 +239,9 @@ export const withAPI = (options: ApiOptions) =>
        * @param {Function} handler - Event handler
        * @returns {SliderComponent} Slider component instance for chaining
        */
-      on(event: keyof typeof SLIDER_EVENTS | SLIDER_EVENTS, handler: (event: SliderEvent) => void) {
-        if (safeOptions.events && typeof safeOptions.events.on === 'function') {
-          safeOptions.events.on(event, handler);
+      on(event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) {
+        if (options.events && typeof options.events.on === 'function') {
+          options.events.on(event, handler);
         }
         return this;
       },
@@ -317,9 +252,9 @@ export const withAPI = (options: ApiOptions) =>
        * @param {Function} handler - Event handler
        * @returns {SliderComponent} Slider component instance for chaining
        */
-      off(event: keyof typeof SLIDER_EVENTS | SLIDER_EVENTS, handler: (event: SliderEvent) => void) {
-        if (safeOptions.events && typeof safeOptions.events.off === 'function') {
-          safeOptions.events.off(event, handler);
+      off(event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) {
+        if (options.events && typeof options.events.off === 'function') {
+          options.events.off(event, handler);
         }
         return this;
       },
@@ -328,8 +263,8 @@ export const withAPI = (options: ApiOptions) =>
        * Destroys the slider component and cleans up resources
        */
       destroy() {
-        if (safeOptions.lifecycle && typeof safeOptions.lifecycle.destroy === 'function') {
-          safeOptions.lifecycle.destroy();
+        if (options.lifecycle && typeof options.lifecycle.destroy === 'function') {
+          options.lifecycle.destroy();
         }
       }
     };

package/src/components/slider/config.ts

@@ -4,7 +4,7 @@ import {
   createElementConfig
 } from '../../core/config/component-config';
 import { SliderConfig } from './types';
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS } from './constants';
+import { SLIDER_COLORS, SLIDER_SIZES } from './constants';
 
 /**
  * Default configuration for the Slider component
@@ -17,9 +17,7 @@ export const defaultConfig: SliderConfig = {
   disabled: false,
   color: SLIDER_COLORS.PRIMARY,
   size: SLIDER_SIZES.MEDIUM,
-  orientation: SLIDER_ORIENTATIONS.HORIZONTAL,
   ticks: false,
-  tickLabels: false,
   showValue: true,
   snapToSteps: true,
   range: false,
@@ -43,13 +41,11 @@ export const getElementConfig = (config: SliderConfig) => {
   return createElementConfig(config, {
     tag: 'div',
     attrs: {
-      'role': 'slider',
-      'tabindex': config.disabled ? -1 : 0,
+      // Accessibility improvement: Container is not focusable; only thumbs are
+      'tabindex': '-1',
       'aria-disabled': config.disabled === true ? true : false,
-      'aria-valuemin': config.min,
-      'aria-valuemax': config.max,
-      'aria-valuenow': config.value,
-      'aria-orientation': config.orientation
+      // ARIA attributes will be set directly on thumbs instead
+      'role': 'none',
     },
     className: config.class
   });
@@ -61,85 +57,40 @@ export const getElementConfig = (config: SliderConfig) => {
  * @returns {Object} API configuration object
  */
 export const getApiConfig = (comp) => {
-  // Create safe accessor functions to avoid undefined errors
-  const safeCall = (obj, path, fallback = () => {}) => {
-    try {
-      const parts = path.split('.');
-      let current = obj;
-      
-      for (const part of parts) {
-        if (current === undefined || current === null) return fallback;
-        current = current[part];
-      }
-      
-      return typeof current === 'function' ? current : fallback;
-    } catch {
-      return fallback;
-    }
-  };
-
-  const safeGetter = (obj, path, defaultValue = null) => {
-    try {
-      const parts = path.split('.');
-      let current = obj;
-      
-      for (const part of parts) {
-        if (current === undefined || current === null) return defaultValue;
-        current = current[part];
-      }
-      
-      return current === undefined ? defaultValue : current;
-    } catch {
-      return defaultValue;
-    }
-  };
-
-  // Create API configuration using safe accessors
+  // Create API configuration using accessor pattern
   return {
     slider: {
-      setValue: (value, triggerEvent) => safeCall(comp, 'slider.setValue')(value, triggerEvent),
-      getValue: () => safeGetter(comp, 'slider.getValue', 0)(),
-      setSecondValue: (value, triggerEvent) => safeCall(comp, 'slider.setSecondValue')(value, triggerEvent),
-      getSecondValue: () => safeGetter(comp, 'slider.getSecondValue', null)(),
-      setMin: (min) => safeCall(comp, 'slider.setMin')(min),
-      getMin: () => safeGetter(comp, 'slider.getMin', 0)(),
-      setMax: (max) => safeCall(comp, 'slider.setMax')(max),
-      getMax: () => safeGetter(comp, 'slider.getMax', 100)(),
-      setStep: (step) => safeCall(comp, 'slider.setStep')(step),
-      getStep: () => safeGetter(comp, 'slider.getStep', 1)()
+      setValue: (value, triggerEvent) => comp.slider?.setValue(value, triggerEvent),
+      getValue: () => comp.slider?.getValue() ?? 0,
+      setSecondValue: (value, triggerEvent) => comp.slider?.setSecondValue(value, triggerEvent),
+      getSecondValue: () => comp.slider?.getSecondValue() ?? null,
+      setMin: (min) => comp.slider?.setMin(min),
+      getMin: () => comp.slider?.getMin() ?? 0,
+      setMax: (max) => comp.slider?.setMax(max),
+      getMax: () => comp.slider?.getMax() ?? 100,
+      setStep: (step) => comp.slider?.setStep(step),
+      getStep: () => comp.slider?.getStep() ?? 1,
+      regenerateTicks: () => comp.slider?.regenerateTicks?.()
     },
     disabled: {
-      enable: () => safeCall(comp, 'disabled.enable')(),
-      disable: () => safeCall(comp, 'disabled.disable')(),
-      isDisabled: () => safeGetter(comp, 'disabled.isDisabled', false)()
+      enable: () => comp.disabled?.enable?.(),
+      disable: () => comp.disabled?.disable?.(),
+      isDisabled: () => comp.disabled?.isDisabled?.() ?? false
     },
     appearance: {
-      setColor: (color) => safeCall(comp, 'appearance.setColor')(color),
-      getColor: () => safeGetter(comp, 'appearance.getColor', 'primary')(),
-      setSize: (size) => safeCall(comp, 'appearance.setSize')(size),
-      getSize: () => safeGetter(comp, 'appearance.getSize', 'medium')(),
-      setOrientation: (orientation) => safeCall(comp, 'appearance.setOrientation')(orientation),
-      getOrientation: () => safeGetter(comp, 'appearance.getOrientation', 'horizontal')(),
-      showTicks: (show) => safeCall(comp, 'appearance.showTicks')(show),
-      showTickLabels: (show) => safeCall(comp, 'appearance.showTickLabels')(show),
-      showCurrentValue: (show) => safeCall(comp, 'appearance.showCurrentValue')(show)
+      setColor: (color) => comp.appearance?.setColor?.(color),
+      getColor: () => comp.appearance?.getColor?.() ?? 'primary',
+      setSize: (size) => comp.appearance?.setSize?.(size),
+      getSize: () => comp.appearance?.getSize?.() ?? 'medium',
+      showTicks: (show) => comp.appearance?.showTicks?.(show),
+      showCurrentValue: (show) => comp.appearance?.showCurrentValue?.(show)
     },
     events: {
-      on: (event, handler) => {
-        if (comp && comp.events && typeof comp.events.on === 'function') {
-          return comp.events.on(event, handler);
-        }
-        return undefined;
-      },
-      off: (event, handler) => {
-        if (comp && comp.events && typeof comp.events.off === 'function') {
-          return comp.events.off(event, handler);
-        }
-        return undefined;
-      }
+      on: (event, handler) => comp.on?.(event, handler),
+      off: (event, handler) => comp.off?.(event, handler)
     },
     lifecycle: {
-      destroy: () => safeCall(comp, 'lifecycle.destroy')()
+      destroy: () => comp.lifecycle?.destroy?.()
     }
   };
 };

package/src/components/slider/constants.ts

@@ -1,23 +1,27 @@
 // src/components/slider/constants.ts
 
+/**
+ * Available slider color variants
+ */
 export const SLIDER_COLORS = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   TERTIARY: 'tertiary',
   ERROR: 'error'
-};
+} as const;
 
+/**
+ * Available slider size variants
+ */
 export const SLIDER_SIZES = {
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large'
-};
-
-export const SLIDER_ORIENTATIONS = {
-  HORIZONTAL: 'horizontal',
-  VERTICAL: 'vertical'
-};
+} as const;
 
+/**
+ * Available slider events
+ */
 export const SLIDER_EVENTS = {
   CHANGE: 'change',
   INPUT: 'input',
@@ -25,4 +29,4 @@ export const SLIDER_EVENTS = {
   BLUR: 'blur',
   START: 'start',
   END: 'end'
-};
+} as const;

package/src/components/slider/features/appearance.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/appearance.ts
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS } from '../constants';
+import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
 import { SliderConfig } from '../types';
 
 /**
@@ -69,39 +69,6 @@ export const withAppearance = (config: SliderConfig) => component => {
         return sizeClass || SLIDER_SIZES.MEDIUM;
       },
       
-      /**
-       * Sets slider orientation
-       * @param orientation Orientation variant
-       */
-      setOrientation(orientation: keyof typeof SLIDER_ORIENTATIONS | SLIDER_ORIENTATIONS) {
-        // Clear existing orientation class
-        component.element.classList.remove(`${component.getClass('slider')}--${SLIDER_ORIENTATIONS.VERTICAL}`);
-        
-        // Add orientation class if vertical
-        if (orientation === SLIDER_ORIENTATIONS.VERTICAL) {
-          component.element.classList.add(`${component.getClass('slider')}--${SLIDER_ORIENTATIONS.VERTICAL}`);
-        }
-        
-        // Update ARIA attribute
-        component.element.setAttribute('aria-orientation', orientation);
-        
-        // Update visual elements
-        if (component.slider) {
-          const eventData = { slider: component, value: component.slider.getValue() };
-          component.events.trigger('change', eventData);
-        }
-      },
-      
-      /**
-       * Gets slider orientation
-       * @returns Current orientation name
-       */
-      getOrientation() {
-        return component.element.classList.contains(`${component.getClass('slider')}--${SLIDER_ORIENTATIONS.VERTICAL}`)
-          ? SLIDER_ORIENTATIONS.VERTICAL
-          : SLIDER_ORIENTATIONS.HORIZONTAL;
-      },
-      
       /**
        * Shows or hides tick marks
        * @param show Whether to show ticks
@@ -115,19 +82,6 @@ export const withAppearance = (config: SliderConfig) => component => {
         }
       },
       
-      /**
-       * Shows or hides tick labels
-       * @param show Whether to show labels or array of label texts
-       */
-      showTickLabels(show: boolean | string[]) {
-        config.tickLabels = show;
-        
-        // Regenerate ticks if slider is initialized
-        if (component.slider) {
-          component.slider.regenerateTicks();
-        }
-      },
-      
       /**
        * Shows or hides current value bubble while dragging
        * @param show Whether to show value bubble

package/src/components/slider/features/disabled.ts

@@ -10,29 +10,54 @@ export const withDisabled = (config: SliderConfig) => component => {
   // Initial disabled state
   const isDisabled = config.disabled === true;
   
+  // Apply initial disabled state if needed
+  if (isDisabled && component.structure) {
+    setTimeout(() => {
+      disableComponent();
+    }, 0);
+  }
+  
+  function disableComponent() {
+    component.element.classList.add(`${component.getClass('slider')}--disabled`);
+    component.element.setAttribute('aria-disabled', 'true');
+    
+    // Ensure thumbs cannot receive focus when disabled
+    if (component.structure.thumb) {
+      component.structure.thumb.tabIndex = -1;
+      component.structure.thumb.setAttribute('aria-disabled', 'true');
+    }
+    
+    if (config.range && component.structure.secondThumb) {
+      component.structure.secondThumb.tabIndex = -1;
+      component.structure.secondThumb.setAttribute('aria-disabled', 'true');
+    }
+  }
+  
+  function enableComponent() {
+    component.element.classList.remove(`${component.getClass('slider')}--disabled`);
+    component.element.setAttribute('aria-disabled', 'false');
+    
+    // Re-enable focus on thumbs
+    if (component.structure.thumb) {
+      component.structure.thumb.tabIndex = 0;
+      component.structure.thumb.setAttribute('aria-disabled', 'false');
+    }
+    
+    if (config.range && component.structure.secondThumb) {
+      component.structure.secondThumb.tabIndex = 0;
+      component.structure.secondThumb.setAttribute('aria-disabled', 'false');
+    }
+  }
+  
   return {
     ...component,
     disabled: {
       enable() {
-        component.element.classList.remove(`${component.getClass('slider')}--disabled`);
-        component.element.setAttribute('aria-disabled', 'false');
-        component.element.tabIndex = 0;
-        component.structure.thumb.tabIndex = 0;
-        
-        if (config.range && component.structure.secondThumb) {
-          component.structure.secondThumb.tabIndex = 0;
-        }
+        enableComponent();
       },
       
       disable() {
-        component.element.classList.add(`${component.getClass('slider')}--disabled`);
-        component.element.setAttribute('aria-disabled', 'true');
-        component.element.tabIndex = -1;
-        component.structure.thumb.tabIndex = -1;
-        
-        if (config.range && component.structure.secondThumb) {
-          component.structure.secondThumb.tabIndex = -1;
-        }
+        disableComponent();
       },
       
       isDisabled() {