slexkit 0.3.1 → 0.3.3

package/dist/components/slider.css

@@ -30,22 +30,71 @@
   font-weight: 600;
 }
 
+.slex-slider-control {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 1rem;
+}
+
+.slex-slider-track {
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--primary) 0%,
+    var(--primary) var(--slex-slider-progress, 0%),
+    var(--secondary) var(--slex-slider-progress, 0%),
+    var(--secondary) 100%
+  );
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
 .slex-slider {
+  position: relative;
+  z-index: 1;
   box-sizing: border-box;
+  display: block;
   width: 100%;
   height: 1rem;
+  margin: 0;
   padding: 0;
   border: 0;
   border-radius: 999px;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
+  color: transparent;
   accent-color: var(--primary);
   cursor: pointer;
   overflow: visible;
   transition: box-shadow 150ms ease, filter 150ms ease;
 }
 
+.slexkit-root .slex-slider-control input.slex-slider {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 1rem;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  box-shadow: none;
+  background: transparent;
+  color: transparent;
+  -webkit-appearance: none;
+  appearance: none;
+  overflow: visible;
+}
+
 .slex-slider:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 4px;
@@ -55,7 +104,7 @@
   box-sizing: border-box;
   width: 1rem;
   height: 1rem;
-  margin-top: -0.25rem;
+  margin-top: 0;
   border: 2px solid var(--primary);
   border-radius: 999px;
   background-color: var(--background);
@@ -69,16 +118,10 @@
 .slex-slider::-webkit-slider-runnable-track {
   box-sizing: border-box;
   width: 100%;
-  height: 0.5rem;
+  height: 1rem;
   border: 0;
   border-radius: 999px;
-  background: linear-gradient(
-    to right,
-    var(--primary) 0%,
-    var(--primary) var(--slex-slider-progress, 0%),
-    var(--secondary) var(--slex-slider-progress, 0%),
-    var(--secondary) 100%
-  );
+  background: transparent;
 }
 
 .slex-slider::-moz-range-thumb {
@@ -114,16 +157,16 @@
 }
 
 .slex-slider::-moz-range-track {
-  height: 0.5rem;
+  height: 1rem;
   border: 0;
   border-radius: 999px;
-  background: var(--secondary);
+  background: transparent;
 }
 
 .slex-slider::-moz-range-progress {
-  height: 0.5rem;
+  height: 1rem;
   border-radius: 999px;
-  background: var(--primary);
+  background: transparent;
 }
 
 .slex-slider-label-text {

package/dist/components/slider.js

@@ -34,7 +34,7 @@ import {
 import { register } from "../runtime.js";
 
 // src/components/svelte/input/Slider.svelte
-var root = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <input type="range" class="slex-slider"/></div>`);
+var root = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <div class="slex-slider-control"><span class="slex-slider-track" aria-hidden="true"></span> <input type="range" class="slex-slider"/></div></div>`);
 function Slider($$anchor, $$props) {
   push($$props, true);
   let p = state(proxy({}));
@@ -134,30 +134,32 @@ function Slider($$anchor, $$props) {
   }
   reset(span_2);
   reset(div_1);
-  var input_1 = sibling(div_1, 2);
+  var div_2 = sibling(div_1, 2);
+  var input_1 = sibling(child(div_2), 2);
   remove_input_defaults(input_1);
+  reset(div_2);
   reset(div);
   template_effect(($0, $1, $2, $3, $4, $5, $6, $7, $8) => {
     set_attribute(div, "data-orientation", $0);
     set_text(text_1, $1);
     set_text(text_2, $2);
-    set_attribute(input_1, "min", $3);
-    set_attribute(input_1, "max", $4);
-    set_attribute(input_1, "step", $5);
-    set_value(input_1, $6);
+    set_style(div_2, $3);
+    set_attribute(input_1, "min", $4);
+    set_attribute(input_1, "max", $5);
+    set_attribute(input_1, "step", $6);
+    set_value(input_1, $7);
     input_1.disabled = !!get(p).disabled;
-    set_attribute(input_1, "aria-label", $7);
-    set_style(input_1, $8);
+    set_attribute(input_1, "aria-label", $8);
   }, [
     () => text2(get(p).orientation, "horizontal"),
     () => text2(get(p).label ?? $$props.componentName),
     () => text2(get(value) ?? 0),
+    () => `--slex-slider-progress: ${sliderProgress(get(value), get(p).min, get(p).max)}`,
     () => Number(get(p).min ?? 0),
     () => Number(get(p).max ?? 100),
     () => Number(get(p).step ?? 1),
     () => Number(get(value) ?? 0),
-    () => text2(get(p)["aria-label"] ?? get(p).ariaLabel ?? get(p).label ?? $$props.componentName),
-    () => `--slex-slider-progress: ${sliderProgress(get(value), get(p).min, get(p).max)}`
+    () => text2(get(p)["aria-label"] ?? get(p).ariaLabel ?? get(p).label ?? $$props.componentName)
   ]);
   delegated("pointerdown", input_1, grabSlider);
   delegated("input", input_1, (event) => choose(Number(event.target.value)));

package/dist/components/text-input.css

@@ -56,11 +56,40 @@
   transition: border-color 150ms ease, box-shadow 150ms ease;
 }
 
+.slexkit-root .slex-input-control input.slex-input {
+  box-sizing: border-box;
+  display: block;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.5625rem;
+  height: auto;
+  margin: 0;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--input);
+  border-radius: var(--radius);
+  box-shadow: none;
+  background: var(--background);
+  background-clip: padding-box;
+  color: var(--foreground);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .slex-input-control[data-has-unit="true"] .slex-input {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
+.slexkit-root .slex-input-control[data-has-unit="true"] input.slex-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 .slex-input-unit {
   box-sizing: border-box;
   display: inline-flex;

package/dist/runtime.cjs

@@ -468,19 +468,31 @@ function configureComponentScope(options) {
 function createComponentAccessor(read) {
   const subscribers = new Set;
   let current = read();
-  const accessor = () => current;
-  accessor.subscribe = (run) => {
-    subscribers.add(run);
-    run(current);
-    const stop = createEffect(() => {
+  let stopEffect;
+  const start = () => {
+    if (stopEffect)
+      return;
+    stopEffect = createEffect(() => {
       current = read();
-      for (const subscriber of subscribers)
+      for (const subscriber of Array.from(subscribers))
         subscriber(current);
       flushDom?.();
     });
+  };
+  const accessor = () => current;
+  accessor.subscribe = (run) => {
+    const wasIdle = subscribers.size === 0;
+    subscribers.add(run);
+    if (wasIdle)
+      start();
+    else
+      run(current);
     return () => {
       subscribers.delete(run);
-      stop();
+      if (subscribers.size === 0) {
+        stopEffect?.();
+        stopEffect = undefined;
+      }
     };
   };
   return accessor;
@@ -1331,9 +1343,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
   const renderer = getRenderer(type);
   if (!renderer)
     return;
-  const forWrapper = (container.ownerDocument || document).createElement("div");
-  forWrapper.className = "slexkit-for-wrapper";
-  container.appendChild(forWrapper);
+  const doc = container.ownerDocument || document;
+  const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+  const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+  container.append(startAnchor, endAnchor);
   const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
   const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
   const $keyProp = props.$key;
@@ -1346,8 +1359,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     disposedSlots.add(slot);
     leavingSlots.delete(slot);
     callHook(g, name, "onUnmount");
-    disposeComponent(slot.el);
-    slot.el.remove();
+    if (slot.el) {
+      disposeComponent(slot.el);
+      slot.el.remove();
+    }
     if (slot.dispose)
       slot.dispose();
   };
@@ -1372,12 +1387,16 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
       }
     }
     for (const slot of deletedSlots) {
-      container.appendChild(slot.el);
       leavingSlots.add(slot);
+      if (!slot.el) {
+        disposeSlot(slot);
+        continue;
+      }
       applyLeaveAnimation(slot.el, slot.props, () => {
         disposeSlot(slot);
       });
     }
+    let cursor = startAnchor;
     arr.forEach((item, index) => {
       item = asReactiveValue(item, g);
       const keyVal = newKeys[index];
@@ -1405,20 +1424,22 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
         const indexSignal = createSignal(index);
         const revisionSignal = createSignal(0);
         slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-        if (slot.el) {
-          applyEnterAnimation(slot.el, slot.props);
-          callHook(g, name, "onMount");
+        if (!slot.el) {
+          disposeSlot(slot);
+          return;
         }
+        applyEnterAnimation(slot.el, slot.props);
+        callHook(g, name, "onMount");
         slotMap.set(keyVal, slot);
       }
-      const refChild = forWrapper.children[index];
-      if (slot.el && refChild !== slot.el) {
-        forWrapper.insertBefore(slot.el, refChild ?? null);
+      const nextChild = cursor.nextSibling;
+      if (slot.el && nextChild !== slot.el) {
+        container.insertBefore(slot.el, nextChild ?? endAnchor);
+      }
+      if (slot.el) {
+        cursor = slot.el;
       }
     });
-    while (forWrapper.children.length > arr.length) {
-      forWrapper.lastChild.remove();
-    }
   });
   onCleanup(() => {
     for (const slot of Array.from(slotMap.values()))
@@ -1426,7 +1447,8 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     slotMap.clear();
     for (const slot of Array.from(leavingSlots))
       disposeSlot(slot);
-    forWrapper.remove();
+    startAnchor.remove();
+    endAnchor.remove();
   });
 }
 function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -1803,7 +1825,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.1";
+var SLEXKIT_VERSION = "0.3.3";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {

package/dist/runtime.js

@@ -396,19 +396,31 @@ function configureComponentScope(options) {
 function createComponentAccessor(read) {
   const subscribers = new Set;
   let current = read();
-  const accessor = () => current;
-  accessor.subscribe = (run) => {
-    subscribers.add(run);
-    run(current);
-    const stop = createEffect(() => {
+  let stopEffect;
+  const start = () => {
+    if (stopEffect)
+      return;
+    stopEffect = createEffect(() => {
       current = read();
-      for (const subscriber of subscribers)
+      for (const subscriber of Array.from(subscribers))
         subscriber(current);
       flushDom?.();
     });
+  };
+  const accessor = () => current;
+  accessor.subscribe = (run) => {
+    const wasIdle = subscribers.size === 0;
+    subscribers.add(run);
+    if (wasIdle)
+      start();
+    else
+      run(current);
     return () => {
       subscribers.delete(run);
-      stop();
+      if (subscribers.size === 0) {
+        stopEffect?.();
+        stopEffect = undefined;
+      }
     };
   };
   return accessor;
@@ -1259,9 +1271,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
   const renderer = getRenderer(type);
   if (!renderer)
     return;
-  const forWrapper = (container.ownerDocument || document).createElement("div");
-  forWrapper.className = "slexkit-for-wrapper";
-  container.appendChild(forWrapper);
+  const doc = container.ownerDocument || document;
+  const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+  const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+  container.append(startAnchor, endAnchor);
   const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
   const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
   const $keyProp = props.$key;
@@ -1274,8 +1287,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     disposedSlots.add(slot);
     leavingSlots.delete(slot);
     callHook(g, name, "onUnmount");
-    disposeComponent(slot.el);
-    slot.el.remove();
+    if (slot.el) {
+      disposeComponent(slot.el);
+      slot.el.remove();
+    }
     if (slot.dispose)
       slot.dispose();
   };
@@ -1300,12 +1315,16 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
       }
     }
     for (const slot of deletedSlots) {
-      container.appendChild(slot.el);
       leavingSlots.add(slot);
+      if (!slot.el) {
+        disposeSlot(slot);
+        continue;
+      }
       applyLeaveAnimation(slot.el, slot.props, () => {
         disposeSlot(slot);
       });
     }
+    let cursor = startAnchor;
     arr.forEach((item, index) => {
       item = asReactiveValue(item, g);
       const keyVal = newKeys[index];
@@ -1333,20 +1352,22 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
         const indexSignal = createSignal(index);
         const revisionSignal = createSignal(0);
         slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-        if (slot.el) {
-          applyEnterAnimation(slot.el, slot.props);
-          callHook(g, name, "onMount");
+        if (!slot.el) {
+          disposeSlot(slot);
+          return;
         }
+        applyEnterAnimation(slot.el, slot.props);
+        callHook(g, name, "onMount");
         slotMap.set(keyVal, slot);
       }
-      const refChild = forWrapper.children[index];
-      if (slot.el && refChild !== slot.el) {
-        forWrapper.insertBefore(slot.el, refChild ?? null);
+      const nextChild = cursor.nextSibling;
+      if (slot.el && nextChild !== slot.el) {
+        container.insertBefore(slot.el, nextChild ?? endAnchor);
+      }
+      if (slot.el) {
+        cursor = slot.el;
       }
     });
-    while (forWrapper.children.length > arr.length) {
-      forWrapper.lastChild.remove();
-    }
   });
   onCleanup(() => {
     for (const slot of Array.from(slotMap.values()))
@@ -1354,7 +1375,8 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     slotMap.clear();
     for (const slot of Array.from(leavingSlots))
       disposeSlot(slot);
-    forWrapper.remove();
+    startAnchor.remove();
+    endAnchor.remove();
   });
 }
 function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -1731,7 +1753,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.1";
+var SLEXKIT_VERSION = "0.3.3";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {

package/dist/slexkit.cjs

@@ -490,19 +490,31 @@ function configureComponentScope(options) {
 function createComponentAccessor(read) {
   const subscribers = new Set;
   let current = read();
-  const accessor = () => current;
-  accessor.subscribe = (run) => {
-    subscribers.add(run);
-    run(current);
-    const stop = createEffect(() => {
+  let stopEffect;
+  const start = () => {
+    if (stopEffect)
+      return;
+    stopEffect = createEffect(() => {
       current = read();
-      for (const subscriber of subscribers)
+      for (const subscriber of Array.from(subscribers))
         subscriber(current);
       flushDom?.();
     });
+  };
+  const accessor = () => current;
+  accessor.subscribe = (run) => {
+    const wasIdle = subscribers.size === 0;
+    subscribers.add(run);
+    if (wasIdle)
+      start();
+    else
+      run(current);
     return () => {
       subscribers.delete(run);
-      stop();
+      if (subscribers.size === 0) {
+        stopEffect?.();
+        stopEffect = undefined;
+      }
     };
   };
   return accessor;
@@ -1353,9 +1365,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
   const renderer = getRenderer(type);
   if (!renderer)
     return;
-  const forWrapper = (container.ownerDocument || document).createElement("div");
-  forWrapper.className = "slexkit-for-wrapper";
-  container.appendChild(forWrapper);
+  const doc = container.ownerDocument || document;
+  const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+  const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+  container.append(startAnchor, endAnchor);
   const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
   const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
   const $keyProp = props.$key;
@@ -1368,8 +1381,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     disposedSlots.add(slot);
     leavingSlots.delete(slot);
     callHook(g, name, "onUnmount");
-    disposeComponent(slot.el);
-    slot.el.remove();
+    if (slot.el) {
+      disposeComponent(slot.el);
+      slot.el.remove();
+    }
     if (slot.dispose)
       slot.dispose();
   };
@@ -1394,12 +1409,16 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
       }
     }
     for (const slot of deletedSlots) {
-      container.appendChild(slot.el);
       leavingSlots.add(slot);
+      if (!slot.el) {
+        disposeSlot(slot);
+        continue;
+      }
       applyLeaveAnimation(slot.el, slot.props, () => {
         disposeSlot(slot);
       });
     }
+    let cursor = startAnchor;
     arr.forEach((item, index) => {
       item = asReactiveValue(item, g);
       const keyVal = newKeys[index];
@@ -1427,20 +1446,22 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
         const indexSignal = createSignal(index);
         const revisionSignal = createSignal(0);
         slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-        if (slot.el) {
-          applyEnterAnimation(slot.el, slot.props);
-          callHook(g, name, "onMount");
+        if (!slot.el) {
+          disposeSlot(slot);
+          return;
         }
+        applyEnterAnimation(slot.el, slot.props);
+        callHook(g, name, "onMount");
         slotMap.set(keyVal, slot);
       }
-      const refChild = forWrapper.children[index];
-      if (slot.el && refChild !== slot.el) {
-        forWrapper.insertBefore(slot.el, refChild ?? null);
+      const nextChild = cursor.nextSibling;
+      if (slot.el && nextChild !== slot.el) {
+        container.insertBefore(slot.el, nextChild ?? endAnchor);
+      }
+      if (slot.el) {
+        cursor = slot.el;
       }
     });
-    while (forWrapper.children.length > arr.length) {
-      forWrapper.lastChild.remove();
-    }
   });
   onCleanup(() => {
     for (const slot of Array.from(slotMap.values()))
@@ -1448,7 +1469,8 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     slotMap.clear();
     for (const slot of Array.from(leavingSlots))
       disposeSlot(slot);
-    forWrapper.remove();
+    startAnchor.remove();
+    endAnchor.remove();
   });
 }
 function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -1825,7 +1847,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.1";
+var SLEXKIT_VERSION = "0.3.3";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {
@@ -12232,7 +12254,7 @@ function Row($$anchor, $$props) {
 }
 
 // src/components/svelte/input/Slider.svelte
-var root5 = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <input type="range" class="slex-slider"/></div>`);
+var root5 = from_html(`<div class="slex-slider-field"><div class="slex-slider-label"><span class="slex-slider-label-text"><!> <span> </span></span> <span class="slex-slider-value"> <!></span></div> <div class="slex-slider-control"><span class="slex-slider-track" aria-hidden="true"></span> <input type="range" class="slex-slider"/></div></div>`);
 function Slider($$anchor, $$props) {
   push($$props, true);
   let p = state(proxy({}));
@@ -12332,30 +12354,32 @@ function Slider($$anchor, $$props) {
   }
   reset(span_2);
   reset(div_1);
-  var input_1 = sibling(div_1, 2);
+  var div_2 = sibling(div_1, 2);
+  var input_1 = sibling(child(div_2), 2);
   remove_input_defaults(input_1);
+  reset(div_2);
   reset(div);
   template_effect(($0, $1, $2, $3, $4, $5, $6, $7, $8) => {
     set_attribute2(div, "data-orientation", $0);
     set_text(text_1, $1);
     set_text(text_2, $2);
-    set_attribute2(input_1, "min", $3);
-    set_attribute2(input_1, "max", $4);
-    set_attribute2(input_1, "step", $5);
-    set_value(input_1, $6);
+    set_style(div_2, $3);
+    set_attribute2(input_1, "min", $4);
+    set_attribute2(input_1, "max", $5);
+    set_attribute2(input_1, "step", $6);
+    set_value(input_1, $7);
     input_1.disabled = !!get2(p).disabled;
-    set_attribute2(input_1, "aria-label", $7);
-    set_style(input_1, $8);
+    set_attribute2(input_1, "aria-label", $8);
   }, [
     () => text2(get2(p).orientation, "horizontal"),
     () => text2(get2(p).label ?? $$props.componentName),
     () => text2(get2(value) ?? 0),
+    () => `--slex-slider-progress: ${sliderProgress(get2(value), get2(p).min, get2(p).max)}`,
     () => Number(get2(p).min ?? 0),
     () => Number(get2(p).max ?? 100),
     () => Number(get2(p).step ?? 1),
     () => Number(get2(value) ?? 0),
-    () => text2(get2(p)["aria-label"] ?? get2(p).ariaLabel ?? get2(p).label ?? $$props.componentName),
-    () => `--slex-slider-progress: ${sliderProgress(get2(value), get2(p).min, get2(p).max)}`
+    () => text2(get2(p)["aria-label"] ?? get2(p).ariaLabel ?? get2(p).label ?? $$props.componentName)
   ]);
   delegated("pointerdown", input_1, grabSlider);
   delegated("input", input_1, (event2) => choose(Number(event2.target.value)));