@lostgradient/cinder 0.1.0

package/dist/components/slider/index.js

@@ -0,0 +1,584 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/components/slider/index.ts
+import"@lostgradient/cinder/slider/styles";
+
+// src/components/slider/slider.svelte
+import"svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { untrack } from "svelte";
+
+// src/_internal/form-field-context.ts
+import { createContext } from "svelte";
+
+// src/_internal/optional-context.ts
+function optionalContext(getStrict) {
+  return () => {
+    try {
+      return getStrict();
+    } catch {
+      return;
+    }
+  };
+}
+
+// src/_internal/form-field-context.ts
+var [getFormFieldContextStrict, setFormFieldContextRaw] = createContext();
+function setFormFieldContext(context) {
+  setFormFieldContextRaw(context);
+}
+var getFormFieldContext = optionalContext(getFormFieldContextStrict);
+
+// src/utilities/class-names.ts
+function classNames(...parts) {
+  return parts.filter((part) => typeof part === "string" && part.length > 0).join(" ");
+}
+
+// ../../node_modules/esm-env/true.js
+var true_default = true;
+// src/utilities/dev-warn.ts
+function devWarn(message, ...args) {
+  if (!true_default)
+    return;
+  console.warn(message, ...args);
+}
+
+// src/components/slider/slider.svelte
+var root_1 = $.from_html(`<span class="cinder-sr-only"> </span> <span class="cinder-sr-only"> </span>`, 1);
+var root_3 = $.from_html(`<span class="cinder-slider__tick"></span>`);
+var root_2 = $.from_html(`<div class="cinder-slider__ticks" aria-hidden="true"></div>`);
+var root_4 = $.from_html(`<div class="cinder-slider__thumb" data-cinder-slider-thumb="low" role="slider" aria-orientation="horizontal"></div> <div class="cinder-slider__thumb" data-cinder-slider-thumb="high" role="slider" aria-orientation="horizontal"></div>`, 1);
+var root_5 = $.from_html(`<div class="cinder-slider__thumb" data-cinder-slider-thumb="single" role="slider" aria-orientation="horizontal"></div>`);
+var root_7 = $.from_html(`<input type="hidden"/> <input type="hidden"/>`, 1);
+var root_8 = $.from_html(`<input type="hidden"/>`);
+var root = $.from_html(`<div><!> <div class="cinder-slider__track" role="presentation"><div class="cinder-slider__range" aria-hidden="true"></div> <!> <!></div> <!></div>`);
+function Slider($$anchor, $$props) {
+  const sliderId = $.props_id();
+  $.push($$props, true);
+  let mode = $.prop($$props, "mode", 3, "single"), min = $.prop($$props, "min", 3, 0), max = $.prop($$props, "max", 3, 100), step = $.prop($$props, "step", 3, 1), disabledProp = $.prop($$props, "disabled", 3, false);
+  const formField = getFormFieldContext();
+  const disabled = $.derived(() => disabledProp() || (formField?.disabled ?? false));
+  const safeStep = $.derived(() => !Number.isFinite(step()) || step() <= 0 ? 1 : step());
+  const safePageStep = $.derived(() => {
+    if ($$props.pageStep === undefined)
+      return $.get(safeStep) * 10;
+    if (!Number.isFinite($$props.pageStep) || $$props.pageStep <= 0)
+      return $.get(safeStep) * 10;
+    return $$props.pageStep;
+  });
+  $.user_effect(() => {
+    if (!Number.isFinite(step()) || step() <= 0) {
+      devWarn(`[cinder/Slider] step must be a positive finite number — received ${step()}. Falling back to 1.`);
+    }
+    if ($$props.pageStep !== undefined && (!Number.isFinite($$props.pageStep) || $$props.pageStep <= 0)) {
+      devWarn(`[cinder/Slider] pageStep must be a positive finite number — received ${$$props.pageStep}. Falling back to ${$.get(safeStep) * 10}.`);
+    }
+  });
+  const tickList = $.derived(() => {
+    if (!$$props.ticks)
+      return null;
+    if (Array.isArray($$props.ticks)) {
+      return $$props.ticks.filter((t) => Number.isFinite(t) && t >= min() && t <= max()).sort((a, b) => a - b);
+    }
+    return null;
+  });
+  function decimalsFromStep(s) {
+    if (!Number.isFinite(s) || s <= 0)
+      return 0;
+    const text = String(s);
+    const dot = text.indexOf(".");
+    return dot >= 0 ? text.length - dot - 1 : 0;
+  }
+  function clampToBounds(raw) {
+    if (raw === Infinity)
+      return max();
+    if (raw === -Infinity || Number.isNaN(raw))
+      return min();
+    return Math.max(min(), Math.min(max(), raw));
+  }
+  function normalizeValueForMode(nextValue) {
+    if (mode() === "range") {
+      const [rawLow, rawHigh] = Array.isArray(nextValue) ? nextValue : [min(), max()];
+      const first = clampToBounds(rawLow);
+      const second = clampToBounds(rawHigh);
+      return first <= second ? [first, second] : [second, first];
+    }
+    return clampToBounds(Array.isArray(nextValue) ? nextValue[0] : nextValue);
+  }
+  let uncontrolledInternal = $.state($.proxy(untrack(() => normalizeValueForMode($$props.defaultValue ?? (mode() === "range" ? [min(), max()] : min())))));
+  const isControlled = $.derived(() => $$props.value !== undefined);
+  const currentValue = $.derived(() => normalizeValueForMode($$props.value !== undefined ? Array.isArray($$props.value) ? [$$props.value[0], $$props.value[1]] : $$props.value : $.get(uncontrolledInternal)));
+  const isRange = $.derived(() => mode() === "range");
+  const lowValue = $.derived(() => Array.isArray($.get(currentValue)) ? $.get(currentValue)[0] : $.get(currentValue));
+  const highValue = $.derived(() => Array.isArray($.get(currentValue)) ? $.get(currentValue)[1] : $.get(currentValue));
+  function snap(raw) {
+    const clamped = clampToBounds(raw);
+    if (clamped === min() || clamped === max())
+      return clamped;
+    if ($.get(tickList) && $.get(tickList).length > 0) {
+      let nearest = $.get(tickList)[0];
+      let nearestDelta = Math.abs(clamped - nearest);
+      for (const tick of $.get(tickList)) {
+        const delta = Math.abs(clamped - tick);
+        if (delta < nearestDelta) {
+          nearest = tick;
+          nearestDelta = delta;
+        }
+      }
+      return nearest;
+    }
+    const stepped = Math.round((clamped - min()) / $.get(safeStep)) * $.get(safeStep) + min();
+    const decimals = decimalsFromStep($.get(safeStep));
+    const rounded = Number(stepped.toFixed(decimals));
+    return clampToBounds(rounded);
+  }
+  function percentOf(numeric) {
+    if (max() === min())
+      return 0;
+    return (numeric - min()) / (max() - min()) * 100;
+  }
+  function commit(next) {
+    const normalized = normalizeValueForMode(next);
+    if (!$.get(isControlled)) {
+      $.set(uncontrolledInternal, Array.isArray(normalized) ? [normalized[0], normalized[1]] : normalized, true);
+    }
+    $$props.onchange?.(normalized);
+  }
+  function updateSingle(nextValue) {
+    commit(snap(nextValue));
+  }
+  function updateRange(thumb, nextValue) {
+    const snapped = snap(nextValue);
+    if (thumb === "low") {
+      commit([Math.min(snapped, $.get(highValue)), $.get(highValue)]);
+    } else {
+      commit([$.get(lowValue), Math.max(snapped, $.get(lowValue))]);
+    }
+  }
+  function neighborTick(current, direction) {
+    if (!$.get(tickList) || $.get(tickList).length === 0)
+      return current;
+    if (direction === 1) {
+      for (const tick of $.get(tickList))
+        if (tick > current)
+          return tick;
+      return $.get(tickList).at(-1) ?? current;
+    }
+    for (let index = $.get(tickList).length - 1;index >= 0; index--) {
+      const tick = $.get(tickList)[index];
+      if (tick < current)
+        return tick;
+    }
+    return $.get(tickList)[0] ?? current;
+  }
+  function tickPageJump(current, distance, direction) {
+    if (!$.get(tickList) || $.get(tickList).length === 0)
+      return current;
+    const target = current + direction * distance;
+    let candidate = neighborTick(current, direction);
+    while (true) {
+      const stepped = neighborTick(candidate, direction);
+      if (stepped === candidate)
+        break;
+      const passedTarget = direction === 1 ? stepped > target : stepped < target;
+      if (passedTarget)
+        break;
+      candidate = stepped;
+    }
+    return candidate;
+  }
+  function handleKey(event2, thumb) {
+    if ($.get(disabled))
+      return;
+    const current = thumb === "high" ? $.get(highValue) : $.get(lowValue);
+    const hasTickArray = $.get(tickList) !== null && $.get(tickList).length > 0;
+    let next = current;
+    switch (event2.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = hasTickArray ? neighborTick(current, 1) : current + $.get(safeStep);
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = hasTickArray ? neighborTick(current, -1) : current - $.get(safeStep);
+        break;
+      case "PageUp":
+        next = hasTickArray ? tickPageJump(current, $.get(safePageStep), 1) : current + $.get(safePageStep);
+        break;
+      case "PageDown":
+        next = hasTickArray ? tickPageJump(current, $.get(safePageStep), -1) : current - $.get(safePageStep);
+        break;
+      case "Home":
+        next = min();
+        break;
+      case "End":
+        next = max();
+        break;
+      default:
+        return;
+    }
+    event2.preventDefault();
+    if (thumb === "single") {
+      updateSingle(next);
+    } else {
+      $.set(activeThumbRecent, thumb, true);
+      updateRange(thumb, next);
+    }
+  }
+  let trackElement = $.state(undefined);
+  let activeThumb = $.state(null);
+  let activeThumbRecent = $.state(null);
+  function valueFromClientX(clientX) {
+    if (!$.get(trackElement))
+      return min();
+    const rect = $.get(trackElement).getBoundingClientRect();
+    if (rect.width === 0)
+      return min();
+    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    return min() + ratio * (max() - min());
+  }
+  function chooseNearestThumb(raw) {
+    const distanceLow = Math.abs(raw - $.get(lowValue));
+    const distanceHigh = Math.abs(raw - $.get(highValue));
+    if (distanceLow === distanceHigh) {
+      return raw < ($.get(lowValue) + $.get(highValue)) / 2 ? "low" : "high";
+    }
+    return distanceLow < distanceHigh ? "low" : "high";
+  }
+  function handleDocumentPointerMove(event2) {
+    if (!$.get(activeThumb))
+      return;
+    const raw = valueFromClientX(event2.clientX);
+    if ($.get(activeThumb) === "single") {
+      updateSingle(raw);
+    } else {
+      updateRange($.get(activeThumb), raw);
+    }
+  }
+  function handleDocumentPointerEnd() {
+    $.set(activeThumb, null);
+  }
+  function handleThumbPointerDown(event2, thumb) {
+    if ($.get(disabled))
+      return;
+    event2.preventDefault();
+    const target = event2.currentTarget;
+    if (target instanceof HTMLElement && document.activeElement !== target) {
+      target.focus();
+    }
+    $.set(activeThumb, thumb, true);
+    if (thumb === "low" || thumb === "high")
+      $.set(activeThumbRecent, thumb, true);
+  }
+  function handleTrackPointerDown(event2) {
+    if ($.get(disabled))
+      return;
+    const target = event2.target instanceof HTMLElement ? event2.target : null;
+    if (target?.dataset["cinderSliderThumb"] !== undefined)
+      return;
+    event2.preventDefault();
+    const raw = valueFromClientX(event2.clientX);
+    let activated;
+    if ($.get(isRange)) {
+      const which = chooseNearestThumb(raw);
+      updateRange(which, raw);
+      $.set(activeThumb, which, true);
+      $.set(activeThumbRecent, which, true);
+      activated = which;
+    } else {
+      updateSingle(raw);
+      $.set(activeThumb, "single");
+      activated = "single";
+    }
+    if ($.get(trackElement)) {
+      const thumb = $.get(trackElement).querySelector(`[data-cinder-slider-thumb="${activated}"]`);
+      if (thumb && document.activeElement !== thumb)
+        thumb.focus();
+    }
+  }
+  function accessibleNameFor(thumb) {
+    if (thumb === "single")
+      return $$props.label;
+    return `${$$props.label} — ${qualifierFor(thumb)}`;
+  }
+  function qualifierFor(thumb) {
+    return thumb === "low" ? "minimum value" : "maximum value";
+  }
+  const formFieldLabelId = $.derived(() => formField?.labelId);
+  const describedBy = $.derived(() => formField?.describedBy);
+  const ariaInvalidFromField = $.derived(() => formField?.invalid);
+  const lowQualifierId = `${sliderId}-low-label`;
+  const highQualifierId = `${sliderId}-high-label`;
+  function labelledByFor(thumb) {
+    if (!$.get(formFieldLabelId))
+      return;
+    if (thumb === "low")
+      return `${$.get(formFieldLabelId)} ${lowQualifierId}`;
+    if (thumb === "high")
+      return `${$.get(formFieldLabelId)} ${highQualifierId}`;
+    return $.get(formFieldLabelId);
+  }
+  function ariaLabelFor(thumb) {
+    return $.get(formFieldLabelId) ? undefined : accessibleNameFor(thumb);
+  }
+  const tickMarks = $.derived(() => {
+    if ($.get(tickList))
+      return $.get(tickList);
+    if ($$props.ticks !== true)
+      return [];
+    const out = [];
+    const decimals = decimalsFromStep($.get(safeStep));
+    for (let v = min();v <= max() + $.get(safeStep) / 2; v += $.get(safeStep)) {
+      const snapped = Number(v.toFixed(decimals));
+      if (snapped <= max())
+        out.push(snapped);
+    }
+    return out;
+  });
+  var div = root();
+  $.event("pointermove", $.document, function(...$$args) {
+    ($.get(activeThumb) ? handleDocumentPointerMove : null)?.apply(this, $$args);
+  });
+  $.event("pointerup", $.document, function(...$$args) {
+    ($.get(activeThumb) ? handleDocumentPointerEnd : null)?.apply(this, $$args);
+  });
+  $.event("pointercancel", $.document, function(...$$args) {
+    ($.get(activeThumb) ? handleDocumentPointerEnd : null)?.apply(this, $$args);
+  });
+  var node = $.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = root_1();
+      var span = $.first_child(fragment);
+      var text_1 = $.child(span, true);
+      $.reset(span);
+      var span_1 = $.sibling(span, 2);
+      var text_2 = $.child(span_1, true);
+      $.reset(span_1);
+      $.template_effect(($0, $1) => {
+        $.set_attribute(span, "id", lowQualifierId);
+        $.set_text(text_1, $0);
+        $.set_attribute(span_1, "id", highQualifierId);
+        $.set_text(text_2, $1);
+      }, [() => qualifierFor("low"), () => qualifierFor("high")]);
+      $.append($$anchor2, fragment);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(isRange))
+        $$render(consequent);
+    });
+  }
+  var div_1 = $.sibling(node, 2);
+  var div_2 = $.child(div_1);
+  let styles;
+  var node_1 = $.sibling(div_2, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var div_3 = root_2();
+      $.each(div_3, 20, () => $.get(tickMarks), (tick) => tick, ($$anchor3, tick) => {
+        var span_2 = root_3();
+        let styles_1;
+        $.template_effect(($0) => styles_1 = $.set_style(span_2, "", styles_1, $0), [
+          () => ({ "--_cinder-slider-tick": `${percentOf(tick) ?? ""}%` })
+        ]);
+        $.append($$anchor3, span_2);
+      });
+      $.reset(div_3);
+      $.append($$anchor2, div_3);
+    };
+    $.if(node_1, ($$render) => {
+      if ($.get(tickMarks).length > 0)
+        $$render(consequent_1);
+    });
+  }
+  var node_2 = $.sibling(node_1, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment_1 = root_4();
+      var div_4 = $.first_child(fragment_1);
+      let styles_2;
+      var div_5 = $.sibling(div_4, 2);
+      let styles_3;
+      $.template_effect(($0, $1, $2, $3, $4, $5, $6, $7) => {
+        $.set_attribute(div_4, "data-cinder-active", $.get(activeThumbRecent) === "low" || undefined);
+        $.set_attribute(div_4, "tabindex", $.get(disabled) ? -1 : 0);
+        $.set_attribute(div_4, "aria-label", $0);
+        $.set_attribute(div_4, "aria-labelledby", $1);
+        $.set_attribute(div_4, "aria-describedby", $.get(describedBy));
+        $.set_attribute(div_4, "aria-invalid", $.get(ariaInvalidFromField));
+        $.set_attribute(div_4, "aria-valuemin", min());
+        $.set_attribute(div_4, "aria-valuemax", $.get(highValue));
+        $.set_attribute(div_4, "aria-valuenow", $.get(lowValue));
+        $.set_attribute(div_4, "aria-valuetext", $2);
+        $.set_attribute(div_4, "aria-disabled", $.get(disabled) || undefined);
+        styles_2 = $.set_style(div_4, "", styles_2, $3);
+        $.set_attribute(div_5, "data-cinder-active", $.get(activeThumbRecent) === "high" || undefined);
+        $.set_attribute(div_5, "tabindex", $.get(disabled) ? -1 : 0);
+        $.set_attribute(div_5, "aria-label", $4);
+        $.set_attribute(div_5, "aria-labelledby", $5);
+        $.set_attribute(div_5, "aria-describedby", $.get(describedBy));
+        $.set_attribute(div_5, "aria-invalid", $.get(ariaInvalidFromField));
+        $.set_attribute(div_5, "aria-valuemin", $.get(lowValue));
+        $.set_attribute(div_5, "aria-valuemax", max());
+        $.set_attribute(div_5, "aria-valuenow", $.get(highValue));
+        $.set_attribute(div_5, "aria-valuetext", $6);
+        $.set_attribute(div_5, "aria-disabled", $.get(disabled) || undefined);
+        styles_3 = $.set_style(div_5, "", styles_3, $7);
+      }, [
+        () => ariaLabelFor("low"),
+        () => labelledByFor("low"),
+        () => $$props.valueText ? $$props.valueText($.get(lowValue)) : undefined,
+        () => ({
+          "--_cinder-slider-pos": `${percentOf($.get(lowValue)) ?? ""}%`
+        }),
+        () => ariaLabelFor("high"),
+        () => labelledByFor("high"),
+        () => $$props.valueText ? $$props.valueText($.get(highValue)) : undefined,
+        () => ({
+          "--_cinder-slider-pos": `${percentOf($.get(highValue)) ?? ""}%`
+        })
+      ]);
+      $.delegated("keydown", div_4, (event2) => handleKey(event2, "low"));
+      $.delegated("pointerdown", div_4, (event2) => handleThumbPointerDown(event2, "low"));
+      $.delegated("keydown", div_5, (event2) => handleKey(event2, "high"));
+      $.delegated("pointerdown", div_5, (event2) => handleThumbPointerDown(event2, "high"));
+      $.append($$anchor2, fragment_1);
+    };
+    var alternate = ($$anchor2) => {
+      var div_6 = root_5();
+      let styles_4;
+      $.template_effect(($0, $1, $2, $3) => {
+        $.set_attribute(div_6, "tabindex", $.get(disabled) ? -1 : 0);
+        $.set_attribute(div_6, "aria-label", $0);
+        $.set_attribute(div_6, "aria-labelledby", $1);
+        $.set_attribute(div_6, "aria-describedby", $.get(describedBy));
+        $.set_attribute(div_6, "aria-invalid", $.get(ariaInvalidFromField));
+        $.set_attribute(div_6, "aria-valuemin", min());
+        $.set_attribute(div_6, "aria-valuemax", max());
+        $.set_attribute(div_6, "aria-valuenow", $.get(lowValue));
+        $.set_attribute(div_6, "aria-valuetext", $2);
+        $.set_attribute(div_6, "aria-disabled", $.get(disabled) || undefined);
+        styles_4 = $.set_style(div_6, "", styles_4, $3);
+      }, [
+        () => ariaLabelFor("single"),
+        () => labelledByFor("single"),
+        () => $$props.valueText ? $$props.valueText($.get(lowValue)) : undefined,
+        () => ({
+          "--_cinder-slider-pos": `${percentOf($.get(lowValue)) ?? ""}%`
+        })
+      ]);
+      $.delegated("keydown", div_6, (event2) => handleKey(event2, "single"));
+      $.delegated("pointerdown", div_6, (event2) => handleThumbPointerDown(event2, "single"));
+      $.append($$anchor2, div_6);
+    };
+    $.if(node_2, ($$render) => {
+      if ($.get(isRange))
+        $$render(consequent_2);
+      else
+        $$render(alternate, -1);
+    });
+  }
+  $.reset(div_1);
+  $.bind_this(div_1, ($$value) => $.set(trackElement, $$value), () => $.get(trackElement));
+  var node_3 = $.sibling(div_1, 2);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var fragment_2 = $.comment();
+      var node_4 = $.first_child(fragment_2);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var fragment_3 = root_7();
+          var input = $.first_child(fragment_3);
+          $.remove_input_defaults(input);
+          var input_1 = $.sibling(input, 2);
+          $.remove_input_defaults(input_1);
+          $.template_effect(() => {
+            $.set_attribute(input, "name", `${$$props.name ?? ""}.min`);
+            $.set_value(input, $.get(lowValue));
+            $.set_attribute(input_1, "name", `${$$props.name ?? ""}.max`);
+            $.set_value(input_1, $.get(highValue));
+          });
+          $.append($$anchor3, fragment_3);
+        };
+        var alternate_1 = ($$anchor3) => {
+          var input_2 = root_8();
+          $.remove_input_defaults(input_2);
+          $.template_effect(() => {
+            $.set_attribute(input_2, "name", $$props.name);
+            $.set_value(input_2, $.get(lowValue));
+          });
+          $.append($$anchor3, input_2);
+        };
+        $.if(node_4, ($$render) => {
+          if ($.get(isRange))
+            $$render(consequent_3);
+          else
+            $$render(alternate_1, -1);
+        });
+      }
+      $.append($$anchor2, fragment_2);
+    };
+    $.if(node_3, ($$render) => {
+      if ($$props.name)
+        $$render(consequent_4);
+    });
+  }
+  $.reset(div);
+  $.template_effect(($0, $1) => {
+    $.set_class(div, 1, $0);
+    $.set_attribute(div, "data-cinder-disabled", $.get(disabled) || undefined);
+    styles = $.set_style(div_2, "", styles, $1);
+  }, [
+    () => $.clsx(classNames("cinder-slider", $.get(isRange) && "cinder-slider--range", $$props.class)),
+    () => ({
+      "--_cinder-slider-low": `${percentOf($.get(lowValue)) ?? ""}%`,
+      "--_cinder-slider-high": `${percentOf($.get(isRange) ? $.get(highValue) : $.get(lowValue)) ?? ""}%`
+    })
+  ]);
+  $.delegated("pointerdown", div_1, handleTrackPointerDown);
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["pointerdown", "keydown"]);
+
+// src/components/slider/index.ts
+var slider_default = Slider;
+export {
+  slider_default as default,
+  Slider
+};
+
+//# debugId=B22A5473034DBFEE64756E2164756E21