mtrl 0.2.4 → 0.2.5

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "mtrl",
-  "version": "0.2.4",
-  "description": "A functional JavaScript component library with composable architecture based on Material Design 3",
+  "version": "0.2.5",
+  "description": "A functional TypeScript/JavaScript component library with composable architecture based on Material Design 3",
   "keywords": [
     "component",
     "library",
     "ui",
     "user interface",
+    "typescript",
     "functional",
-    "composable"
+    "composable",
+    "material design 3",
+    "md3"
   ],
   "main": "index.js",
   "scripts": {

package/src/components/slider/_styles.scss

@@ -43,7 +43,7 @@ $component: '#{base.$prefix}-slider';
     background-color: t.color('primary');
     transform-origin: left center;
     // transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease;
-    border-radius: 5px;
+    border-radius: 2px;
     opacity: 0.24;
     z-index: 1;
     
@@ -72,7 +72,7 @@ $component: '#{base.$prefix}-slider';
     background-color: t.color('primary');
     transform-origin: left center;
     // transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease, left 0.1s ease, bottom 0.1s ease;
-    border-radius: 5px;
+    border-radius: 2px;
     z-index: 1;
 
     .#{$component}--secondary & {
@@ -97,7 +97,7 @@ $component: '#{base.$prefix}-slider';
     background-color: t.color('primary');
     transform-origin: left center;
     // transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease, left 0.1s ease, bottom 0.1s ease;
-    border-radius: 5px;
+    border-radius: 2px;
     width: 100%;
     z-index: 0;
     
@@ -125,38 +125,44 @@ $component: '#{base.$prefix}-slider';
     width: 4px;
     height: 4px;
     border-radius: 50%;
-    background-color: t.color('primary');
     top: 50%;
     transform: translateY(-50%);
     z-index: 1;
     
     // Start dot
     &--start {
-      left: 4px;
+      left: 6px;
+      // Color variants
+      background-color: t.color('on-primary');
+      
+      .#{$component}--secondary & {
+        background-color: t.color('on-secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('on-tertiary');
+      }
     }
     
     // End dot
     &--end {
-      right: 4px;
-    }
-    
-    // Color variants
-    .#{$component}--secondary & {
-      background-color: t.color('secondary');
-    }
-    
-    .#{$component}--tertiary & {
-      background-color: t.color('tertiary');
-    }
-    
-    .#{$component}--error & {
-      background-color: t.color('error');
+      right: 6px;
+      // Color variants
+      background-color: t.color('primary');
+      
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
+      }
     }
     
-    // Disabled state
     .#{$component}--disabled & {
       opacity: 0.38;
     }
+ 
   }
   
   // Thumb - updated to MD3 style with T-shape
@@ -165,7 +171,7 @@ $component: '#{base.$prefix}-slider';
     top: 50%;
     transform: translate(-50%, -50%);
     cursor: pointer;
-    z-index: 2;
+    z-index: 4;
     // transition: left 0.1s ease, bottom 0.1s ease;
     width: 16px;
     height: 100%;
@@ -182,7 +188,7 @@ $component: '#{base.$prefix}-slider';
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      transition: background-color 0.15s ease;
+      transition: background-color 0.15s ease, width 0.15s ease;
       
       .#{$component}--secondary & {
         background-color: t.color('secondary');
@@ -207,6 +213,13 @@ $component: '#{base.$prefix}-slider';
       pointer-events: auto;
     }
     
+    // Make thumb line slimmer during dragging
+    .#{$component}--dragging & {
+      &::before {
+        width: 3px;
+      }
+    }
+    
     // Hover state
     &:hover::before, &:hover::after {
       background-color: t.color('primary');
@@ -278,6 +291,17 @@ $component: '#{base.$prefix}-slider';
     }
   }
   
+  // Container for ticks in MD3 style
+  &-ticks-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: 3;
+  }
+  
   // Tick marks
   &-tick {
     position: absolute;
@@ -288,7 +312,7 @@ $component: '#{base.$prefix}-slider';
     top: 50%;
     transform: translate(-50%, -50%);
     pointer-events: none;
-    opacity: 0.6;
+    opacity: 1;
     
     &:last-child, &:first-child {
       display: none
@@ -296,32 +320,35 @@ $component: '#{base.$prefix}-slider';
 
     // Active tick (filled)
     &--active {
-      background-color: t.alpha('on-primary', 0.38);
+      // background-color: white;
+      background-color: t.color('on-primary');
       
       .#{$component}--secondary & {
-        background-color: t.alpha('on-secondary', 0.38);
+        background-color: t.color('on-secondary');
       }
       
       .#{$component}--tertiary & {
-        background-color: t.alpha('on-tertiary', 0.38);
+        background-color: t.color('on-tertiary');
+      }
+    }
+    
+    // Inactive tick (unfilled)
+    &--inactive {
+      background-color: t.color('primary');
+
+      .#{$component}--secondary & {
+        background-color: t.color('secondary');
       }
       
-      .#{$component}--error & {
-        background-color: t.alpha('on-error', 0.38);
+      .#{$component}--tertiary & {
+        background-color: t.color('tertiary');
       }
     }
-  }
-  
-  // Labels for tick marks
-  &-label {
-    position: absolute;
-    font-size: 12px;
-    color: t.color('on-surface-variant');
-    top: 45px;
-    transform: translateX(-50%);
-    white-space: nowrap;
-    pointer-events: none;
-    font-weight: 500;
+
+     // Hidden tick
+    &--hidden {
+      opacity: 0
+    }
   }
   
   // Range slider styles (for two thumbs)
@@ -363,88 +390,6 @@ $component: '#{base.$prefix}-slider';
     }
   }
   
-  // Vertical orientation
-  &--vertical {
-    width: 40px;
-    height: 200px;
-    flex-direction: column;
-    
-    .#{$component}-track {
-      width: 16px;
-      height: 100%;
-      padding: 0;
-    }
-    
-    .#{$component}-active-track {
-      width: 100%;
-      height: auto;
-      transform-origin: bottom center;
-    }
-    
-    .#{$component}-start-track {
-      width: 100%;
-      height: auto;
-      transform-origin: bottom center;
-    }
-    
-    .#{$component}-remaining-track {
-      width: 100%;
-      bottom: auto;
-      top: 0;
-      transform-origin: bottom center;
-    }
-    
-    // Reorient thumb for vertical slider
-    .#{$component}-thumb {
-      &::before {
-        width: 40px;
-        height: 4px;
-      }
-      
-      &::after {
-        width: 16px;
-        height: 16px;
-        top: 50%;
-        left: 0;
-        transform: translate(0, -50%);
-      }
-      
-      transform: translate(-50%, 50%);
-    }
-    
-    // Dots for vertical orientation
-    .#{$component}-dot {
-      left: 50%;
-      top: auto;
-      transform: translateX(-50%);
-      
-      &--start {
-        bottom: 0;
-      }
-      
-      &--end {
-        top: 0;
-      }
-    }
-    
-    .#{$component}-tick {
-      left: 50%;
-      transform: translate(-50%, 50%);
-    }
-    
-    .#{$component}-label {
-      top: auto;
-      left: 35px;
-      transform: translateY(50%);
-    }
-    
-    .#{$component}-value {
-      top: auto;
-      left: -55px;
-      transform: translateY(50%);
-    }
-  }
-  
   // Discrete slider with steps
   &--discrete {
     .#{$component}-tick {
@@ -467,22 +412,6 @@ $component: '#{base.$prefix}-slider';
         height: 14px;
       }
     }
-    
-    &.#{$component}--vertical {
-      width: 32px;
-      
-      .#{$component}-thumb {
-        &::before {
-          width: 34px;
-          height: 3px;
-        }
-        
-        &::after {
-          width: 14px;
-          height: 14px;
-        }
-      }
-    }
   }
   
   &--large {
@@ -498,21 +427,10 @@ $component: '#{base.$prefix}-slider';
         height: 18px;
       }
     }
-    
-    &.#{$component}--vertical {
-      width: 48px;
-      
-      .#{$component}-thumb {
-        &::before {
-          width: 48px;
-          height: 4px;
-        }
-        
-        &::after {
-          width: 18px;
-          height: 18px;
-        }
-      }
-    }
+  }
+  
+  // For dragging state
+  &--dragging {
+    // Additional styles when dragging will be applied to thumb::before
   }
 }

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();
         }
       }
     };