mtrl 0.2.6 → 0.2.7

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

@@ -2,7 +2,7 @@
 import { SliderConfig } from '../types';
 
 /**
- * Create UI update helpers for slider component with MD3 enhancements
+ * Create optimized UI update helpers for slider component
  * 
  * @param config Slider configuration
  * @param state Slider state object
@@ -12,19 +12,29 @@ export const createUiHelpers = (config: SliderConfig, state) => {
   // Return empty implementations if component structure is missing
   if (!state.component?.structure) {
     console.error('Cannot create UI helpers: component structure is missing');
-    return Object.fromEntries(['getPercentage', 'getValueFromPosition', 'roundToStep', 
-      'clamp', 'setThumbPosition', 'updateActiveTrack', 'updateStartTrack', 
-      'updateRemainingTrack', 'updateThumbPositions', 'updateValueBubbles', 
-      'showValueBubble', 'generateTicks', 'updateTicks', 'updateUi']
-      .map(method => [method, method === 'clamp' ? (v, min, max) => Math.min(Math.max(v, min), max) : 
-                              method === 'roundToStep' ? v => v : 
-                              method === 'getPercentage' || method === 'getValueFromPosition' ? () => 0 : 
-                              () => {}]));
+    return {
+      getPercentage: () => 0,
+      getValueFromPosition: () => 0,
+      roundToStep: v => v,
+      clamp: (v, min, max) => Math.min(Math.max(v, min), max),
+      updateUi: () => {},
+      showValueBubble: () => {},
+      generateTicks: () => {},
+      updateTicks: () => {}
+    };
   }
   
   const {
-    track, activeTrack, startTrack, remainingTrack, thumb, 
-    valueBubble, secondThumb, secondValueBubble, ticksContainer
+    container = null,
+    track = null, 
+    activeTrack = null, 
+    startTrack = null, 
+    remainingTrack = null, 
+    handle = null, 
+    valueBubble = null, 
+    secondHandle = null, 
+    secondValueBubble = null, 
+    ticksContainer = null
   } = state.component.structure;
   
   /**
@@ -39,21 +49,22 @@ export const createUiHelpers = (config: SliderConfig, state) => {
    * Gets track dimensions and constraints for positioning calculations
    */
   const getTrackDimensions = () => {
-    if (!track || !thumb) return null;
+    if (!track || !handle || !container) return null;
     
-    const thumbRect = thumb.getBoundingClientRect();
-    const trackRect = track.getBoundingClientRect();
-    const thumbSize = thumbRect.width || 20;
+    const handleRect = handle.getBoundingClientRect();
+    const trackRect = container.getBoundingClientRect();
+    const handleSize = handleRect.width || 20;
     const trackSize = trackRect.width;
     
-    const edgeConstraint = (thumbSize / 2) / trackSize * 100;
-    const paddingPercent = (8 / trackSize) * 100; // 8px padding
+    const edgeConstraint = (handleSize / 2) / trackSize * 100;
+    const paddingPixels = state.activeHandle ? 6 : 8; 
+    const paddingPercent = (paddingPixels / trackSize) * 100;
     
-    return { thumbSize, trackSize, edgeConstraint, paddingPercent };
+    return { handleSize, trackSize, edgeConstraint, paddingPercent };
   };
   
   /**
-   * Map value percentage to visual position with edge constraints
+   * Maps value percentage to visual position with edge constraints
    */
   const mapValueToVisualPercent = (valuePercent, edgeConstraint) => {
     const minEdge = edgeConstraint;
@@ -69,17 +80,15 @@ export const createUiHelpers = (config: SliderConfig, state) => {
    * Gets slider value from a position on the track
    */
   const getValueFromPosition = (position) => {
-    if (!track) return state.min;
+    if (!track || !container) return state.min;
     
     try {
-      const trackRect = track.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
       const range = state.max - state.min;
+      const handleWidth = handle.getBoundingClientRect().width || 20;
       
-      const thumbRect = thumb.getBoundingClientRect();
-      const thumbWidth = thumbRect.width || 20;
-      
-      const leftEdge = trackRect.left + (thumbWidth / 2);
-      const rightEdge = trackRect.right - (thumbWidth / 2);
+      const leftEdge = containerRect.left + (handleWidth / 2);
+      const rightEdge = containerRect.right - (handleWidth / 2);
       const effectiveWidth = rightEdge - leftEdge;
       
       const adjustedPosition = Math.max(leftEdge, Math.min(rightEdge, position));
@@ -109,157 +118,116 @@ export const createUiHelpers = (config: SliderConfig, state) => {
   const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
   
   /**
-   * Sets thumb position based on a value percentage with proper edge mapping
+   * Updates handle and bubble positions and transforms
    */
-  const setThumbPosition = (thumbElement, bubbleElement, valuePercent) => {
-    if (!thumbElement || !track) return;
+  const updateHandlePositions = () => {
+    if (!handle || !container) return;
     
     const dims = getTrackDimensions();
     if (!dims) return;
     
-    const { thumbSize, trackSize } = dims;
-    const edgeConstraint = (thumbSize / 2) / trackSize * 100;
-    const adjustedPercent = mapValueToVisualPercent(valuePercent, edgeConstraint);
+    const { edgeConstraint } = dims;
     
-    thumbElement.style.left = `${adjustedPercent}%`;
-    thumbElement.style.transform = 'translate(-50%, -50%)';
+    // Update main handle position
+    const percent = getPercentage(state.value);
+    const adjustedPercent = mapValueToVisualPercent(percent, edgeConstraint);
     
-    if (bubbleElement) {
-      bubbleElement.style.left = `${adjustedPercent}%`;
-      bubbleElement.style.transform = 'translateX(-50%)';
+    handle.style.left = `${adjustedPercent}%`;
+    handle.style.transform = 'translate(-50%, -50%)';
+    if (valueBubble) {
+      valueBubble.style.left = `${adjustedPercent}%`;
+      valueBubble.style.transform = 'translateX(-50%)';
     }
-  };
-
-  /**
-   * Updates start track styles
-   */
-  const updateStartTrack = () => {
-    if (!startTrack || !track || !thumb) return;
-    
-    const dims = getTrackDimensions();
-    if (!dims) return;
-    
-    const { thumbSize, trackSize, paddingPercent } = dims;
     
-    if (config.range && state.secondValue !== null) {
-      const lowerValue = Math.min(state.value, state.secondValue);
-      const lowerPercent = getPercentage(lowerValue);
-      
-      const edgeConstraint = (thumbSize / 2) / trackSize * 100;
-      const adjustedPercent = mapValueToVisualPercent(lowerPercent, edgeConstraint);
-      const finalPercent = Math.max(0, adjustedPercent - paddingPercent);
+    // Update second handle if range slider
+    if (config.range && secondHandle && state.secondValue !== null) {
+      const secondPercent = getPercentage(state.secondValue);
+      const adjustedSecondPercent = mapValueToVisualPercent(secondPercent, edgeConstraint);
       
-      startTrack.style.display = 'block';
-      startTrack.style.width = `${finalPercent}%`;
-      startTrack.style.left = '0';
-      startTrack.style.height = '100%';
-    } else {
-      startTrack.style.display = 'none';
+      secondHandle.style.left = `${adjustedSecondPercent}%`;
+      secondHandle.style.transform = 'translate(-50%, -50%)';
+      if (secondValueBubble) {
+        secondValueBubble.style.left = `${adjustedSecondPercent}%`;
+        secondValueBubble.style.transform = 'translateX(-50%)';
+      }
+    }
+    
+    // Update ARIA attributes
+    handle.setAttribute('aria-valuenow', String(state.value));
+    if (config.range && secondHandle && state.secondValue !== null) {
+      secondHandle.setAttribute('aria-valuenow', String(state.secondValue));
     }
   };
-
+  
   /**
-   * Updates active track styles
+   * Updates all track segments at once with optimized positioning
    */
-  const updateActiveTrack = () => {
-    if (!activeTrack || !track || !thumb) return;
+  const updateTrackSegments = () => {
+    if (!track || !container || !handle) return;
     
     const dims = getTrackDimensions();
     if (!dims) return;
     
-    const { thumbSize, trackSize, paddingPercent } = dims;
-    const edgeConstraint = (thumbSize / 2) / trackSize * 100;
+    const { handleSize, trackSize, paddingPercent } = dims;
+    const edgeConstraint = (handleSize / 2) / trackSize * 100;
     
     if (config.range && state.secondValue !== null) {
-      // Range slider (two thumbs)
+      // Range slider setup
       const lowerValue = Math.min(state.value, state.secondValue);
       const higherValue = Math.max(state.value, state.secondValue);
       const lowerPercent = getPercentage(lowerValue);
       const higherPercent = getPercentage(higherValue);
       
-      const adjustedLower = mapValueToVisualPercent(lowerPercent, edgeConstraint) + paddingPercent;
-      const adjustedHigher = mapValueToVisualPercent(higherPercent, edgeConstraint) - paddingPercent;
+      const adjustedLower = mapValueToVisualPercent(lowerPercent, edgeConstraint);
+      const adjustedHigher = mapValueToVisualPercent(higherPercent, edgeConstraint);
       
-      // Calculate the actual percentage difference between thumbs
-      const valueDiffPercent = Math.abs(higherPercent - lowerPercent);
+      // Start track (before first handle)
+      if (lowerPercent > 1) {
+        startTrack.style.display = 'block';
+        startTrack.style.left = '0';
+        startTrack.style.right = `${100 - (adjustedLower - paddingPercent)}%`;
+        startTrack.style.width = 'auto';
+      } else {
+        startTrack.style.display = 'none';
+      }
       
-      // Define a threshold below which we'll hide the active track
-      // This threshold is based on the thumb width plus some margin
-      const hideThreshold = (thumbSize / trackSize) * 100;
+      // Active track (between handles)
+      const valueDiffPercent = Math.abs(higherPercent - lowerPercent);
+      const hideThreshold = (handleSize / trackSize) * 100;
       
       if (valueDiffPercent <= hideThreshold) {
-        // Thumbs are too close together, hide the active track
         activeTrack.style.display = 'none';
       } else {
-        // Normal display of active track
-        let trackLength = Math.max(0, adjustedHigher - adjustedLower);
-        
         activeTrack.style.display = 'block';
-        activeTrack.style.width = `${trackLength}%`;
-        activeTrack.style.left = `${adjustedLower}%`;
-        activeTrack.style.height = '100%';
+        activeTrack.style.left = `${adjustedLower + paddingPercent}%`;
+        activeTrack.style.right = `${100 - (adjustedHigher - paddingPercent)}%`;
+        activeTrack.style.width = 'auto';
       }
+      
+      // Remaining track (after second handle)
+      remainingTrack.style.display = 'block';
+      remainingTrack.style.left = `${adjustedHigher + paddingPercent}%`;
+      remainingTrack.style.right = '0';
+      remainingTrack.style.width = 'auto';
     } else {
-      // Single thumb slider
+      // Single handle slider
       const valuePercent = getPercentage(state.value);
       const adjustedPercent = mapValueToVisualPercent(valuePercent, edgeConstraint);
-      const adjustedWidth = Math.max(0, adjustedPercent - paddingPercent);
       
+      // Hide start track for single slider
+      startTrack.style.display = 'none';
+      
+      // Active track (filled part)
       activeTrack.style.display = 'block';
-      activeTrack.style.width = `${adjustedWidth}%`;
       activeTrack.style.left = '0';
-      activeTrack.style.height = '100%';
-    }
-  };
-
-  /**
-   * Updates remaining track styles
-   */
-  const updateRemainingTrack = () => {
-    if (!remainingTrack || !track || !thumb) return;
-    
-    const dims = getTrackDimensions();
-    if (!dims) return;
-    
-    const { thumbSize, trackSize, paddingPercent } = dims;
-    const edgeConstraint = (thumbSize / 2) / trackSize * 100;
-    
-    // Find the highest thumb value
-    const highValue = config.range && state.secondValue !== null ? 
-      Math.max(state.value, state.secondValue) : state.value;
-    
-    const valuePercent = getPercentage(highValue);
-    
-    // Map percentage to visual range
-    const adjustedPercent = mapValueToVisualPercent(valuePercent, edgeConstraint) + paddingPercent;
-    const remainingSize = Math.max(0, 100 - adjustedPercent);
-    
-    remainingTrack.style.display = 'block';
-    remainingTrack.style.width = `${remainingSize}%`;
-    remainingTrack.style.left = `${adjustedPercent}%`;
-    remainingTrack.style.height = '100%';
-  };
-  
-  /**
-   * Updates thumb positions
-   */
-  const updateThumbPositions = () => {
-    if (!thumb) return;
-    
-    // Update main thumb
-    const percent = getPercentage(state.value);
-    setThumbPosition(thumb, valueBubble, percent);
-    
-    // Update second thumb if range slider
-    if (config.range && secondThumb && secondValueBubble && state.secondValue !== null) {
-      const secondPercent = getPercentage(state.secondValue);
-      setThumbPosition(secondThumb, secondValueBubble, secondPercent);
-    }
-    
-    // Update ARIA attributes
-    thumb.setAttribute('aria-valuenow', String(state.value));
-    if (config.range && secondThumb && state.secondValue !== null) {
-      secondThumb.setAttribute('aria-valuenow', String(state.secondValue));
+      activeTrack.style.right = `${100 - (adjustedPercent - paddingPercent)}%`;
+      activeTrack.style.width = 'auto';
+      
+      // Remaining track (unfilled part)
+      remainingTrack.style.display = 'block';
+      remainingTrack.style.left = `${adjustedPercent + paddingPercent}%`;
+      remainingTrack.style.right = '0';
+      remainingTrack.style.width = 'auto';
     }
   };
   
@@ -269,11 +237,9 @@ export const createUiHelpers = (config: SliderConfig, state) => {
   const updateValueBubbles = () => {
     if (!valueBubble) return;
     
-    // Format the values
     const formatter = config.valueFormatter || (value => value.toString());
-    
-    // Update main and second value bubble if needed
     valueBubble.textContent = formatter(state.value);
+    
     if (config.range && secondValueBubble && state.secondValue !== null) {
       secondValueBubble.textContent = formatter(state.secondValue);
     }
@@ -285,42 +251,30 @@ export const createUiHelpers = (config: SliderConfig, state) => {
   const showValueBubble = (bubbleElement, show) => {
     if (!bubbleElement || !config.showValue) return;
     
-    const visibleClass = `${state.component.getClass('slider-value')}--visible`;
-    bubbleElement.classList[show ? 'add' : 'remove'](visibleClass);
+    bubbleElement.classList[show ? 'add' : 'remove'](`${state.component.getClass('slider-value')}--visible`);
   };
   
   /**
    * Generates tick marks
    */
   const generateTicks = () => {
-    if (!ticksContainer) {
-      console.warn('Ticks container not found in component structure');
-      return;
-    }
+    if (!ticksContainer || !container) return;
     
     // Clear existing ticks
-    const sliderElement = state.component.element;
-    sliderElement.querySelectorAll(`.${state.component.getClass('slider-tick')}`)
-      .forEach(tick => tick.parentNode.removeChild(tick));
-    
     while (ticksContainer.firstChild) {
       ticksContainer.removeChild(ticksContainer.firstChild);
     }
     
-    // Reset ticks array
     state.ticks = [];
-    
     if (!config.ticks) return;
     
-    // Generate tick values
     const numSteps = Math.floor((state.max - state.min) / state.step);
     const tickValues = [];
     
+    // Generate tick values
     for (let i = 0; i <= numSteps; i++) {
       const value = state.min + (i * state.step);
-      if (value <= state.max) {
-        tickValues.push(value);
-      }
+      if (value <= state.max) tickValues.push(value);
     }
     
     // Ensure max value is included
@@ -329,41 +283,35 @@ export const createUiHelpers = (config: SliderConfig, state) => {
     }
     
     // CSS classes
-    const activeClass = `${state.component.getClass('slider-tick')}--active`;
-    const inactiveClass = `${state.component.getClass('slider-tick')}--inactive`;
-    const hiddenClass = `${state.component.getClass('slider-tick')}--hidden`;
     const tickClass = state.component.getClass('slider-tick');
+    const activeClass = `${tickClass}--active`;
+    const inactiveClass = `${tickClass}--inactive`;
+    const hiddenClass = `${tickClass}--hidden`;
     
-    // Create ticks
+    // Create tick elements
     tickValues.forEach(value => {
       const percent = getPercentage(value);
+      const tick = document.createElement('div');
+      tick.classList.add(tickClass);
+      tick.style.left = `${percent}%`;
       
-      // Create tick mark if enabled
-      if (config.ticks) {
-        const tick = document.createElement('div');
-        tick.classList.add(tickClass);
-        
-        // Position tick
-        tick.style.left = `${percent}%`;
-        
-        // Check if this tick should be hidden (matches exactly a selected value)
-        const isExactlySelected = value === state.value || 
-          (config.range && state.secondValue !== null && value === state.secondValue);
-        
-        if (isExactlySelected) {
-          tick.classList.add(hiddenClass);
-        } else if (config.range && state.secondValue !== null) {
-          const lowerValue = Math.min(state.value, state.secondValue);
-          const higherValue = Math.max(state.value, state.secondValue);
-          
-          tick.classList.add(value >= lowerValue && value <= higherValue ? activeClass : inactiveClass);
-        } else {
-          tick.classList.add(value <= state.value ? activeClass : inactiveClass);
-        }
+      // Determine tick active state
+      const isExactlySelected = (value === state.value || 
+                               (config.range && state.secondValue !== null && value === state.secondValue));
+      
+      if (isExactlySelected) {
+        tick.classList.add(hiddenClass);
+      } else if (config.range && state.secondValue !== null) {
+        const lowerValue = Math.min(state.value, state.secondValue);
+        const higherValue = Math.max(state.value, state.secondValue);
         
-        ticksContainer.appendChild(tick);
-        state.ticks.push(tick);
+        tick.classList.add(value >= lowerValue && value <= higherValue ? activeClass : inactiveClass);
+      } else {
+        tick.classList.add(value <= state.value ? activeClass : inactiveClass);
       }
+      
+      ticksContainer.appendChild(tick);
+      state.ticks.push(tick);
     });
   };
   
@@ -373,24 +321,23 @@ export const createUiHelpers = (config: SliderConfig, state) => {
   const updateTicks = () => {
     if (!state.ticks || state.ticks.length === 0) return;
     
-    const activeClass = `${state.component.getClass('slider-tick')}--active`;
-    const inactiveClass = `${state.component.getClass('slider-tick')}--inactive`;
-    const hiddenClass = `${state.component.getClass('slider-tick')}--hidden`;
+    const tickClass = state.component.getClass('slider-tick');
+    const activeClass = `${tickClass}--active`;
+    const inactiveClass = `${tickClass}--inactive`;
+    const hiddenClass = `${tickClass}--hidden`;
     
-    // Update active ticks based on current value
     state.ticks.forEach((tick, index) => {
-      // Calculate the value for this tick based on its index
+      // Calculate the value for this tick
       const tickValue = state.min + (index * state.step);
       
-      // First, reset visibility
+      // Reset visibility first
       tick.classList.remove(hiddenClass);
       
       // Check if this tick should be hidden (matches exactly a selected value)
-      const isExactlySelected = tickValue === state.value || 
-        (config.range && state.secondValue !== null && tickValue === state.secondValue);
+      const isExactlySelected = (tickValue === state.value || 
+                              (config.range && state.secondValue !== null && tickValue === state.secondValue));
       
       if (isExactlySelected) {
-        // Hide this tick as it exactly matches a selected value
         tick.classList.add(hiddenClass);
       } else if (config.range && state.secondValue !== null) {
         // Range slider - ticks between values should be active
@@ -421,29 +368,21 @@ export const createUiHelpers = (config: SliderConfig, state) => {
    * Updates all UI elements
    */
   const updateUi = () => {
-    updateThumbPositions();
-    updateStartTrack();
-    updateActiveTrack();
-    updateRemainingTrack();
+    updateHandlePositions();
+    updateTrackSegments();
     updateValueBubbles();
     updateTicks();
   };
   
-  // Return helper methods
+  // Return consolidated helper methods
   return {
     getPercentage,
     getValueFromPosition,
     roundToStep,
     clamp,
-    setThumbPosition,
-    updateActiveTrack,
-    updateStartTrack,
-    updateRemainingTrack,
-    updateThumbPositions,
-    updateValueBubbles,
     showValueBubble,
     generateTicks,
     updateTicks,
     updateUi
   };
-};
+}

package/src/components/slider/index.ts

@@ -4,16 +4,7 @@
 export { default } from './slider';
 
 // Export constants
-export { 
-  SLIDER_COLORS, 
-  SLIDER_SIZES, 
-  SLIDER_ORIENTATIONS, 
-  SLIDER_EVENTS 
-} from './constants';
+export { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
 
 // Export types for TypeScript users
-export type { 
-  SliderConfig, 
-  SliderComponent, 
-  SliderEvent 
-} from './types';
+export type { SliderConfig, SliderComponent, SliderEvent } from './types';

package/src/components/slider/slider.ts

@@ -1,13 +1,9 @@
 // src/components/slider/slider.ts
 import { pipe } from '../../core/compose/pipe';
 import { createBase, withElement } from '../../core/compose/component';
-import { withEvents, withLifecycle } from '../../core/compose/features';
-import { 
-  withStructure, 
-  withDisabled,
-  withAppearance,
-  withSlider
-} from './features';
+import { withEvents, withLifecycle, withTextLabel, withIcon } from '../../core/compose/features';
+import { withStructure, withSlider } from './features';
+import { withStates } from './features/states';
 import { withAPI } from './api';
 import { SliderConfig, SliderComponent } from './types';
 import { createBaseConfig, getElementConfig, getApiConfig } from './config';
@@ -21,22 +17,23 @@ const createSlider = (config: SliderConfig = {}): SliderComponent => {
   const baseConfig = createBaseConfig(config);
 
   try {
-    // First create the component with all required features
+    // Create the component with all required features
     const component = pipe(
       createBase,
       withEvents(),
       withElement(getElementConfig(baseConfig)),
+      withIcon(baseConfig),
+      withTextLabel(baseConfig),
       withStructure(baseConfig),
-      withDisabled(baseConfig),
-      withAppearance(baseConfig),
+      withStates(baseConfig),
       withSlider(baseConfig),
       withLifecycle()
     )(baseConfig);
     
-    // Then generate the API configuration using the component
+    // Generate the API configuration
     const apiOptions = getApiConfig(component);
     
-    // Finally, apply the API layer with the generated options
+    // Apply the API layer
     const slider = withAPI(apiOptions)(component);
 
     // Register event handlers from config