mtrl 0.8.0-next.36 → 0.8.0-next.37

package/README.md

@@ -137,6 +137,17 @@ Button progress and card action buttons retain their dynamic imports in ESM.
 Enable code splitting in your application build to load those features on demand.
 The CommonJS compatibility bundle includes them eagerly.
 
+Slider decoration uses DOM tracks and CSS backgrounds for ticks; it no longer
+creates a canvas or subscribes to theme changes. Its public slider API and
+accessible handles remain. Themes and per-slider colour overrides apply through
+CSS. Custom styling that targets the former `.mtrl-slider-canvas` element must be
+updated. Run `bun run slider:check` after building for slider geometry, keyboard,
+pointer, resize, and lifecycle checks. For comparison with a previous canvas
+build, pass `--reference=/path/to/reference` to `scripts/check-slider.ts`; that
+directory must contain an ESM `slider.js` exporting `createSlider` and its full
+`styles.css`. Comparison screenshots and measurements go to `analysis/slider-dom`.
+CSS rounded corners differ slightly from the previous canvas curves.
+
 ### Checking distribution size
 
 ```bash

package/dist/README.md

@@ -137,6 +137,17 @@ Button progress and card action buttons retain their dynamic imports in ESM.
 Enable code splitting in your application build to load those features on demand.
 The CommonJS compatibility bundle includes them eagerly.
 
+Slider decoration uses DOM tracks and CSS backgrounds for ticks; it no longer
+creates a canvas or subscribes to theme changes. Its public slider API and
+accessible handles remain. Themes and per-slider colour overrides apply through
+CSS. Custom styling that targets the former `.mtrl-slider-canvas` element must be
+updated. Run `bun run slider:check` after building for slider geometry, keyboard,
+pointer, resize, and lifecycle checks. For comparison with a previous canvas
+build, pass `--reference=/path/to/reference` to `scripts/check-slider.ts`; that
+directory must contain an ESM `slider.js` exporting `createSlider` and its full
+`styles.css`. Comparison screenshots and measurements go to `analysis/slider-dom`.
+CSS rounded corners differ slightly from the previous canvas curves.
+
 ### Checking distribution size
 
 ```bash

package/dist/components/slider/features/controller.js

@@ -54,41 +54,9 @@ export const withController = (config) => (component) => {
         const range = state.max - state.min;
         return range === 0 ? 0 : ((value - state.min) / range) * 100;
     };
-    const getTrackDimensions = () => {
-        const components = getComponents();
-        const { handle, container } = components;
-        if (!handle || !container)
-            return null;
-        try {
-            const handleRect = handle.getBoundingClientRect();
-            const containerRect = container.getBoundingClientRect();
-            const handleSize = handleRect.width || SLIDER_MEASUREMENTS.HANDLE_SIZE;
-            const trackSize = containerRect.width;
-            const edgeConstraint = (SLIDER_MEASUREMENTS.EDGE_PADDING / trackSize) * 100;
-            const paddingPixels = state.activeHandle ? 6 : 8;
-            const paddingPercent = (paddingPixels / trackSize) * 100;
-            return { handleSize, trackSize, edgeConstraint, paddingPercent };
-        }
-        catch (error) {
-            console.warn("Error calculating track dimensions:", error);
-            return {
-                handleSize: SLIDER_MEASUREMENTS.HANDLE_SIZE,
-                trackSize: 200,
-                edgeConstraint: 3,
-                paddingPercent: 4,
-            };
-        }
-    };
-    const mapValueToVisualPercent = (valuePercent, trackSize = 200) => {
-        const edgeConstraint = (SLIDER_MEASUREMENTS.EDGE_PADDING / trackSize) * 100;
-        const minEdge = edgeConstraint;
-        const maxEdge = 100 - edgeConstraint;
-        const visualRange = maxEdge - minEdge;
-        if (valuePercent <= 0)
-            return minEdge;
-        if (valuePercent >= 100)
-            return maxEdge;
-        return minEdge + (valuePercent / 100) * visualRange;
+    const visualPosition = (percent) => {
+        const ratio = Math.min(1, Math.max(0, percent / 100));
+        return `calc(${ratio * 100}% + ${SLIDER_MEASUREMENTS.EDGE_PADDING * (1 - 2 * ratio)}px)`;
     };
     const getValueFromPosition = (position) => {
         const components = getComponents();
@@ -123,25 +91,17 @@ export const withController = (config) => (component) => {
         const { handle, container, valueBubble, secondHandle, secondValueBubble } = components;
         if (!handle || !container)
             return;
-        const dims = getTrackDimensions();
-        if (!dims)
-            return;
-        const { trackSize } = dims;
-        const percent = getPercentage(state.value);
-        const adjustedPercent = mapValueToVisualPercent(percent, trackSize);
-        handle.style.left = `${adjustedPercent}%`;
+        handle.style.left = visualPosition(getPercentage(state.value));
         handle.style.transform = "translate(-50%, -50%)";
         if (valueBubble) {
-            valueBubble.style.left = `${adjustedPercent}%`;
+            valueBubble.style.left = visualPosition(getPercentage(state.value));
             valueBubble.style.transform = "translateX(-50%)";
         }
         if (config.range && secondHandle && state.secondValue !== null) {
-            const secondPercent = getPercentage(state.secondValue);
-            const adjustedSecondPercent = mapValueToVisualPercent(secondPercent, trackSize);
-            secondHandle.style.left = `${adjustedSecondPercent}%`;
+            secondHandle.style.left = visualPosition(getPercentage(state.secondValue));
             secondHandle.style.transform = "translate(-50%, -50%)";
             if (secondValueBubble) {
-                secondValueBubble.style.left = `${adjustedSecondPercent}%`;
+                secondValueBubble.style.left = visualPosition(getPercentage(state.secondValue));
                 secondValueBubble.style.transform = "translateX(-50%)";
             }
         }
@@ -174,8 +134,8 @@ export const withController = (config) => (component) => {
         try {
             updateHandlePositions();
             updateValueBubbles();
-            if (component.drawCanvas) {
-                component.drawCanvas(state);
+            if (component.renderTracks) {
+                component.renderTracks(state);
             }
         }
         catch (error) {
@@ -307,6 +267,7 @@ export const withController = (config) => (component) => {
             },
             setStep(step) {
                 state.step = step;
+                render();
                 component.element.classList[step > 0 ? "add" : "remove"](`${component.getClass("slider")}--discrete`);
                 if (config.ticks || config.tickLabels) {
                     generateTicks();

package/dist/components/slider/features/index.d.ts

@@ -1,5 +1,5 @@
 export { withRange } from "./range.js";
 export { withStates } from "./states.js";
 export { withController } from "./controller.js";
-export { withCanvas } from "./canvas.js";
+export { withTracks } from "./tracks.js";
 export { withDom } from "./dom.js";

package/dist/components/slider/features/index.js

@@ -1,5 +1,5 @@
 export { withRange } from "./range.js";
 export { withStates } from "./states.js";
 export { withController } from "./controller.js";
-export { withCanvas } from "./canvas.js";
+export { withTracks } from "./tracks.js";
 export { withDom } from "./dom.js";

package/dist/components/slider/features/states.js

@@ -1,6 +1,8 @@
 import { SLIDER_COLORS } from "../types.js";
 import { SLIDER_SIZES } from "../constants.js";
 export const withStates = (config) => (component) => {
+    const handle = component.handle ?? component.structure?.handle;
+    const secondHandle = component.secondHandle ?? component.structure?.secondHandle;
     const isDisabled = config.disabled === true;
     let initialization = null;
     if (isDisabled) {
@@ -11,31 +13,31 @@ export const withStates = (config) => (component) => {
     function disableComponent() {
         component.element.classList.add(`${component.getClass("slider")}--disabled`);
         component.element.setAttribute("aria-disabled", "true");
-        if (component.structure?.handle) {
-            component.structure.handle.tabIndex = -1;
-            component.structure.handle.setAttribute("aria-disabled", "true");
+        if (handle) {
+            handle.tabIndex = -1;
+            handle.setAttribute("aria-disabled", "true");
         }
-        if (config.range && component.structure?.secondHandle) {
-            component.structure.secondHandle.tabIndex = -1;
-            component.structure.secondHandle.setAttribute("aria-disabled", "true");
+        if (config.range && secondHandle) {
+            secondHandle.tabIndex = -1;
+            secondHandle.setAttribute("aria-disabled", "true");
         }
-        if (component.drawCanvas) {
-            component.drawCanvas();
+        if (component.renderTracks) {
+            component.renderTracks();
         }
     }
     function enableComponent() {
         component.element.classList.remove(`${component.getClass("slider")}--disabled`);
         component.element.setAttribute("aria-disabled", "false");
-        if (component.structure?.handle) {
-            component.structure.handle.tabIndex = 0;
-            component.structure.handle.setAttribute("aria-disabled", "false");
+        if (handle) {
+            handle.tabIndex = 0;
+            handle.setAttribute("aria-disabled", "false");
         }
-        if (config.range && component.structure?.secondHandle) {
-            component.structure.secondHandle.tabIndex = 0;
-            component.structure.secondHandle.setAttribute("aria-disabled", "false");
+        if (config.range && secondHandle) {
+            secondHandle.tabIndex = 0;
+            secondHandle.setAttribute("aria-disabled", "false");
         }
-        if (component.drawCanvas) {
-            component.drawCanvas();
+        if (component.renderTracks) {
+            component.renderTracks();
         }
     }
     function getActiveColor() {
@@ -105,9 +107,7 @@ export const withStates = (config) => (component) => {
             },
             showTicks(show) {
                 config.ticks = show;
-                if (component.slider) {
-                    component.slider.regenerateTicks();
-                }
+                component.renderTracks?.();
                 return this;
             },
             showCurrentValue(show) {

package/dist/components/slider/features/tracks.d.ts

@@ -0,0 +1,13 @@
+import { SliderConfig } from "../types.js";
+import { SliderSize } from "../constants.js";
+export declare const getTrackHeight: (size?: SliderSize) => number;
+/**
+ * Gets the handle height based on the slider size
+ */
+export declare const getHandleHeight: (size?: SliderSize) => number;
+/**
+ * Gets the external track radius based on the slider size
+ */
+export declare const getExternalTrackRadius: (size?: SliderSize) => number;
+/** Decorative tracks and ticks. Handles and controller retain interaction ownership. */
+export declare const withTracks: (config: SliderConfig) => (component: any) => any;

package/dist/components/slider/features/tracks.js

@@ -0,0 +1,174 @@
+import { SLIDER_SIZES, SLIDER_MEASUREMENTS } from "../constants.js";
+export const getTrackHeight = (size) => {
+    if (typeof size === "number") {
+        return Math.max(size, SLIDER_SIZES.XS);
+    }
+    if (typeof size === "string" && size in SLIDER_SIZES) {
+        return SLIDER_SIZES[size];
+    }
+    return SLIDER_SIZES.XS;
+};
+export const getHandleHeight = (size) => {
+    const trackHeight = getTrackHeight(size);
+    if (trackHeight <= SLIDER_SIZES.S) {
+        return SLIDER_MEASUREMENTS.SMALL_HANDLE_HEIGHT;
+    }
+    return trackHeight + SLIDER_MEASUREMENTS.HANDLE_HEIGHT_OFFSET;
+};
+export const getExternalTrackRadius = (size) => {
+    const trackHeight = getTrackHeight(size);
+    if (trackHeight <= SLIDER_SIZES.S) {
+        return SLIDER_MEASUREMENTS.SMALL_TRACK_EXTERNAL_RADIUS;
+    }
+    return trackHeight * SLIDER_MEASUREMENTS.LARGE_TRACK_RADIUS_RATIO;
+};
+export const withTracks = (config) => (component) => {
+    const container = component.container;
+    const element = (name, parent) => {
+        const node = document.createElement("div");
+        node.className = component.getClass(`slider-${name}`);
+        parent.append(node);
+        return node;
+    };
+    const visual = element("visual", container);
+    visual.setAttribute("aria-hidden", "true");
+    const track = element("track", visual);
+    const segments = Array.from({ length: 3 }, () => element("segment", track));
+    const ticks = [element("ticks", visual), element("ticks", visual)];
+    ticks[1].classList.add(component.getClass("slider-ticks--active"));
+    const dot = element("dot", visual);
+    let destroyed = false;
+    let size = config.size ?? "XS";
+    let state = {
+        value: config.value ?? 0, secondValue: config.secondValue ?? null,
+        min: config.min ?? 0, max: config.max ?? 100, step: config.step ?? 1,
+    };
+    const render = (next) => {
+        if (destroyed)
+            return;
+        if (next)
+            state = { ...next };
+        const width = container.getBoundingClientRect().width || 200;
+        const height = getTrackHeight(size);
+        const edge = SLIDER_MEASUREMENTS.EDGE_PADDING;
+        const position = (value) => edge + Math.min(1, Math.max(0, state.max === state.min ? 0 : (value - state.min) / (state.max - state.min))) * Math.max(0, width - 2 * edge);
+        const first = position(state.value);
+        const second = position(state.secondValue ?? state.max);
+        const zero = position(0);
+        const gap = SLIDER_MEASUREMENTS.HANDLE_GAP;
+        const reduction = SLIDER_MEASUREMENTS.HANDLE_GAP_PRESSED_REDUCTION;
+        const firstGap = gap - (state.pressed && (!config.range || state.activeHandle === "first") ? reduction : 0);
+        const secondGap = gap - (state.pressed && state.activeHandle === "second" ? reduction : 0);
+        const parts = [];
+        let activeStart = 0, activeEnd = first;
+        if (config.centered) {
+            activeStart = Math.min(zero, first);
+            activeEnd = Math.max(zero, first);
+            const centerGap = SLIDER_MEASUREMENTS.CENTER_GAP / 2;
+            if (Math.abs(first - zero) < firstGap) {
+                parts.push([0, first - firstGap, false], [zero, zero, true], [first + firstGap, width, false]);
+            }
+            else if (state.value >= 0) {
+                parts.push([0, zero - centerGap, false], [zero + centerGap, first - firstGap, true], [first + firstGap, width, false]);
+            }
+            else {
+                parts.push([0, first - firstGap, false], [first + firstGap, zero - centerGap, true], [zero + centerGap, width, false]);
+            }
+        }
+        else if (config.range && state.secondValue !== null) {
+            activeStart = Math.min(first, second);
+            activeEnd = Math.max(first, second);
+            const lowGap = first <= second ? firstGap : secondGap;
+            const highGap = first <= second ? secondGap : firstGap;
+            const start = activeStart + lowGap, end = activeEnd - highGap;
+            parts.push([0, activeStart - lowGap, false], [start, end - start > height ? end : start, true], [activeEnd + highGap, width, false]);
+        }
+        else {
+            parts.push([0, 0, false], [0, first - firstGap, true], [first + firstGap, width, false]);
+        }
+        segments.forEach((segment, index) => {
+            const [start, end, active] = parts[index] ?? [0, 0, false];
+            segment.style.left = `${start}px`;
+            segment.style.width = `${Math.max(0, end - start)}px`;
+            segment.classList.toggle(component.getClass("slider-segment--active"), active);
+        });
+        const discrete = !!config.ticks && state.step > 0 && state.max > state.min;
+        ticks.forEach(tick => { tick.hidden = !discrete; });
+        dot.hidden = !!config.ticks;
+        if (discrete) {
+            const spacing = (width - 2 * edge) * state.step / (state.max - state.min);
+            const last = position(state.min + Math.floor((state.max - state.min) / state.step) * state.step);
+            const holes = [state.value, ...(config.range && state.secondValue !== null ? [state.secondValue] : [])]
+                .filter(value => Math.abs((value - state.min) / state.step - Math.round((value - state.min) / state.step)) < 0.1)
+                .map(value => position(state.min + Math.round((value - state.min) / state.step) * state.step))
+                .sort((a, b) => a - b);
+            const mask = (intervals) => {
+                const merged = [];
+                for (const [start, end] of intervals.sort((a, b) => a[0] - b[0])) {
+                    const previous = merged[merged.length - 1];
+                    if (previous && start <= previous[1])
+                        previous[1] = Math.max(previous[1], end);
+                    else
+                        merged.push([start, end]);
+                }
+                const stops = merged.flatMap(([start, end]) => [`black ${start}px`, `transparent ${start}px`, `transparent ${end}px`, `black ${end}px`]);
+                return stops.length ? `linear-gradient(to right, black 0px, ${stops.join(",")}, black 100%)` : "none";
+            };
+            ticks.forEach((tick, index) => {
+                tick.style.backgroundSize = `${Math.max(spacing, 0.01)}px 100%`;
+                tick.style.backgroundPosition = `${edge - spacing / 2}px center`;
+                tick.style.maskImage = mask([
+                    ...holes.map(x => [x - 2, x + 2]),
+                    ...(index === 0 ? [[activeStart - 2, activeEnd + 2]] : []),
+                ]);
+            });
+            ticks[0].style.clipPath = `inset(0 ${Math.max(0, width - last - 2)}px 0 0)`;
+            ticks[1].style.clipPath = `inset(0 ${Math.max(0, width - Math.min(last + 2, activeEnd + 2))}px 0 ${Math.max(0, activeStart - 2)}px)`;
+        }
+    };
+    const setSize = (next) => {
+        if (destroyed)
+            return;
+        size = next;
+        const handleHeight = getHandleHeight(size);
+        container.style.height = `${Math.max(handleHeight, SLIDER_MEASUREMENTS.MIN_HEIGHT)}px`;
+        track.style.height = `${getTrackHeight(size)}px`;
+        track.style.borderRadius = `${getExternalTrackRadius(size)}px`;
+        for (const handle of [component.handle, component.secondHandle]) {
+            if (handle)
+                handle.style.height = `${handleHeight}px`;
+        }
+        render();
+    };
+    component.renderTracks = render;
+    component.setSize = setSize;
+    component.getSize = () => size;
+    const setColor = component.appearance.setColor;
+    component.appearance.setColor = (color) => {
+        if (destroyed)
+            return;
+        setColor.call(component.appearance, color);
+        config.color = color;
+    };
+    setSize(size);
+    const resize = () => {
+        if (!destroyed)
+            render();
+    };
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(resize) : null;
+    if (observer)
+        observer.observe(container);
+    else
+        window.addEventListener("resize", resize);
+    const destroy = component.lifecycle.destroy;
+    component.lifecycle.destroy = () => {
+        if (destroyed)
+            return;
+        destroyed = true;
+        observer?.disconnect();
+        if (!observer)
+            window.removeEventListener("resize", resize);
+        destroy.call(component.lifecycle);
+    };
+    return component;
+};

package/dist/components/slider/slider.d.ts

@@ -6,7 +6,7 @@ import { SliderConfig, SliderComponent } from "./types.js";
  * 1. Base component - Creates the foundation with event system
  * 2. Feature enhancement - Adds specific capabilities (range, icons)
  * 3. DOM creation - Creates DOM elements directly using optimized createElement
- * 4. Canvas rendering - Uses canvas for visual elements, keeping handles as DOM
+ * 4. Track rendering - Uses decorative DOM and CSS alongside accessible handles
  * 5. State management - Handles visual states and appearance
  * 6. Controller - Manages behavior, events, and UI rendering
  * 7. Lifecycle - Handles component lifecycle events

package/dist/components/slider/slider.js

@@ -1,13 +1,13 @@
 import { pipe } from "../../core/compose/pipe.js";
 import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withLifecycle, withIcon, withTextLabel, } from "../../core/compose/features/index.js";
-import { withRange, withStates, withController, withCanvas, withDom, } from "./features/index.js";
+import { withRange, withStates, withController, withTracks, withDom, } from "./features/index.js";
 import { withAPI } from "./api.js";
 import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
 const createSlider = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
-        const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withRange(baseConfig), withDom(baseConfig), withTextLabel(baseConfig), withIcon(baseConfig), withLifecycle(), withStates(baseConfig), withCanvas(baseConfig), withController(baseConfig))(baseConfig);
+        const component = pipe(createBase, withEvents(), withElement(getElementConfig(baseConfig)), withRange(baseConfig), withDom(baseConfig), withTextLabel(baseConfig), withIcon(baseConfig), withLifecycle(), withStates(baseConfig), withTracks(baseConfig), withController(baseConfig))(baseConfig);
         const apiOptions = getApiConfig(component);
         const slider = withAPI(apiOptions)(component);
         if (baseConfig.on && typeof slider.on === "function") {