@editora/ui-core 0.1.9 → 0.1.10

package/dist/slider.esm.js

@@ -0,0 +1,694 @@
+import { E as f } from "./ElementBase-909688f3.mjs";
+const x = `
+  :host {
+    --ui-slider-width: min(340px, 100%);
+    --ui-slider-track-size: 6px;
+    --ui-slider-track-radius: 999px;
+    --ui-slider-thumb-size: 18px;
+    --ui-slider-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 96%, transparent);
+    --ui-slider-text: var(--ui-color-text, #0f172a);
+    --ui-slider-muted: var(--ui-color-muted, #64748b);
+    --ui-slider-track: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 72%, transparent);
+    --ui-slider-fill: var(--ui-color-primary, #2563eb);
+    --ui-slider-focus: var(--ui-color-focus-ring, #2563eb);
+    --ui-slider-shadow:
+      none;
+    --ui-slider-thumb-shadow:
+      none;
+    --ui-slider-thumb-ring: 0 0 0 4px color-mix(in srgb, var(--ui-slider-focus) 18%, transparent);
+    --ui-slider-padding: 10px;
+    --ui-slider-radius: 14px;
+    --ui-slider-label-size: 13px;
+    --ui-slider-value-size: 12px;
+    --ui-slider-indicator-size: 10px;
+    --ui-slider-indicator-duration: 1.6s;
+    --ui-slider-indicator-glow: color-mix(in srgb, var(--ui-slider-fill) 24%, transparent);
+    color-scheme: light dark;
+    display: inline-grid;
+    inline-size: var(--ui-slider-width);
+    min-inline-size: min(220px, 100%);
+    box-sizing: border-box;
+    font-family: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .shell {
+    min-inline-size: 0;
+    display: grid;
+    gap: 8px;
+    color: var(--ui-slider-text);
+    background: var(--ui-slider-bg);
+    border: 1px solid color-mix(in srgb, var(--ui-color-border, #cbd5e1) 60%, transparent);
+    border-radius: var(--ui-slider-radius);
+    box-shadow: var(--ui-slider-shadow);
+    padding: var(--ui-slider-padding);
+  }
+
+  .meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 8px;
+  }
+
+  .meta[hidden],
+  .description[hidden],
+  .label[hidden],
+  .value[hidden],
+  .marks[hidden] {
+    display: none;
+  }
+
+  .label {
+    font-size: var(--ui-slider-label-size);
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+
+  .description {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--ui-slider-muted);
+  }
+
+  .value {
+    color: var(--ui-slider-muted);
+    font-size: var(--ui-slider-value-size);
+    line-height: 1.25;
+    white-space: nowrap;
+  }
+
+  .control {
+    min-inline-size: 0;
+    display: grid;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .track-wrap {
+    position: relative;
+    min-inline-size: 0;
+    block-size: max(var(--ui-slider-thumb-size), 24px);
+    display: grid;
+    align-items: center;
+  }
+
+  .track {
+    block-size: var(--ui-slider-track-size);
+    border-radius: var(--ui-slider-track-radius);
+    background: var(--ui-slider-track);
+  }
+
+  .range-fill {
+    position: absolute;
+    left: var(--ui-slider-start, 0%);
+    right: calc(100% - var(--ui-slider-end, 0%));
+    block-size: var(--ui-slider-track-size);
+    border-radius: var(--ui-slider-track-radius);
+    background: linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--ui-slider-fill) 86%, #ffffff 14%),
+      var(--ui-slider-fill)
+    );
+    pointer-events: none;
+  }
+
+  .track-indicator {
+    position: absolute;
+    top: 50%;
+    left: var(--ui-slider-end, 0%);
+    inline-size: var(--ui-slider-indicator-size);
+    block-size: var(--ui-slider-indicator-size);
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--ui-slider-fill) 92%, #ffffff 8%);
+    transform: translate(-50%, -50%);
+    box-shadow:
+      0 0 0 3px var(--ui-slider-indicator-glow),
+      0 2px 10px color-mix(in srgb, var(--ui-slider-fill) 34%, transparent);
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .track-indicator.start {
+    left: var(--ui-slider-start, 0%);
+  }
+
+  .track-indicator::after {
+    content: "";
+    position: absolute;
+    inset: -5px;
+    border-radius: inherit;
+    border: 1px solid color-mix(in srgb, var(--ui-slider-fill) 54%, transparent);
+    opacity: 0.4;
+    animation: ui-slider-indicator-pulse var(--ui-slider-indicator-duration) ease-out infinite;
+  }
+
+  .inputs {
+    position: absolute;
+    inset: 0;
+  }
+
+  input[type="range"] {
+    appearance: none;
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    background: transparent;
+    pointer-events: auto;
+    outline: none;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    appearance: none;
+    background: transparent;
+    block-size: var(--ui-slider-track-size);
+  }
+
+  input[type="range"]::-moz-range-track {
+    background: transparent;
+    block-size: var(--ui-slider-track-size);
+    border: none;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    inline-size: var(--ui-slider-thumb-size);
+    block-size: var(--ui-slider-thumb-size);
+    border-radius: 50%;
+    border: 1px solid color-mix(in srgb, var(--ui-slider-fill) 42%, transparent);
+    background: color-mix(in srgb, var(--ui-slider-fill) 94%, #ffffff 6%);
+    box-shadow: var(--ui-slider-thumb-shadow);
+    margin-top: calc((var(--ui-slider-track-size) - var(--ui-slider-thumb-size)) / 2);
+    cursor: pointer;
+    transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    inline-size: var(--ui-slider-thumb-size);
+    block-size: var(--ui-slider-thumb-size);
+    border-radius: 50%;
+    border: 1px solid color-mix(in srgb, var(--ui-slider-fill) 42%, transparent);
+    background: color-mix(in srgb, var(--ui-slider-fill) 94%, #ffffff 6%);
+    box-shadow: var(--ui-slider-thumb-shadow);
+    cursor: pointer;
+    transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
+  }
+
+  input[type="range"]:focus-visible::-webkit-slider-thumb {
+    box-shadow: var(--ui-slider-thumb-shadow), var(--ui-slider-thumb-ring);
+  }
+
+  input[type="range"]:focus-visible::-moz-range-thumb {
+    box-shadow: var(--ui-slider-thumb-shadow), var(--ui-slider-thumb-ring);
+  }
+
+  input[type="range"]:active::-webkit-slider-thumb,
+  input[type="range"]:active::-moz-range-thumb {
+    transform: scale(1.06);
+  }
+
+  .marks {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(100% + 6px);
+    display: block;
+    pointer-events: none;
+  }
+
+  .mark {
+    position: absolute;
+    transform: translateX(-50%);
+    display: grid;
+    justify-items: center;
+    gap: 4px;
+  }
+
+  .mark::before {
+    content: "";
+    inline-size: 1px;
+    block-size: 8px;
+    background: color-mix(in srgb, var(--ui-slider-track) 84%, var(--ui-slider-text));
+  }
+
+  .mark-label {
+    font-size: 10px;
+    color: var(--ui-slider-muted);
+    white-space: nowrap;
+  }
+
+  .shell[data-has-marks="true"] .control {
+    padding-bottom: 22px;
+  }
+
+  :host([disabled]) .shell {
+    opacity: 0.62;
+    box-shadow: none;
+  }
+
+  :host([disabled]) input[type="range"] {
+    pointer-events: none;
+  }
+
+  :host([disabled]) .track-indicator::after {
+    animation: none !important;
+  }
+
+  :host([size="sm"]) {
+    --ui-slider-track-size: 4px;
+    --ui-slider-thumb-size: 14px;
+    --ui-slider-padding: 8px;
+    --ui-slider-radius: 12px;
+  }
+
+  :host([size="lg"]) {
+    --ui-slider-track-size: 8px;
+    --ui-slider-thumb-size: 22px;
+    --ui-slider-padding: 12px;
+    --ui-slider-radius: 16px;
+  }
+
+  :host([variant="soft"]) {
+    --ui-slider-bg: color-mix(in srgb, var(--ui-slider-fill) 10%, var(--ui-color-surface, #ffffff));
+    --ui-slider-track: color-mix(in srgb, var(--ui-slider-fill) 20%, var(--ui-color-border, #cbd5e1));
+  }
+
+  :host([variant="glass"]) {
+    --ui-slider-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 74%, transparent);
+    --ui-slider-shadow:
+      0 8px 20px rgba(2, 6, 23, 0.14),
+      0 24px 48px rgba(2, 6, 23, 0.16);
+  }
+
+  :host([variant="contrast"]) {
+    --ui-slider-bg: #0f172a;
+    --ui-slider-text: #e2e8f0;
+    --ui-slider-muted: #93a4bd;
+    --ui-slider-track: #334155;
+    --ui-slider-fill: #93c5fd;
+    --ui-slider-focus: #93c5fd;
+    --ui-slider-thumb-shadow:
+      0 0 0 1px color-mix(in srgb, #93c5fd 36%, transparent),
+      0 4px 14px rgba(2, 6, 23, 0.42);
+    --ui-slider-shadow:
+      0 14px 34px rgba(2, 6, 23, 0.46),
+      0 30px 60px rgba(2, 6, 23, 0.42);
+  }
+
+  :host([variant="minimal"]) {
+    --ui-slider-bg: transparent;
+    --ui-slider-shadow: none;
+  }
+
+  :host([tone="success"]) {
+    --ui-slider-fill: var(--ui-color-success, #16a34a);
+  }
+
+  :host([tone="warning"]) {
+    --ui-slider-fill: var(--ui-color-warning, #d97706);
+  }
+
+  :host([tone="danger"]) {
+    --ui-slider-fill: var(--ui-color-danger, #dc2626);
+  }
+
+  :host([orientation="vertical"]) {
+    --ui-slider-width: auto;
+  }
+
+  :host([orientation="vertical"]) .control {
+    justify-items: center;
+  }
+
+  :host([orientation="vertical"]) .track-wrap {
+    inline-size: max(var(--ui-slider-thumb-size), 26px);
+    block-size: 200px;
+    margin-inline: auto;
+  }
+
+  :host([orientation="vertical"]) .track {
+    inline-size: var(--ui-slider-track-size);
+    block-size: 100%;
+    margin-inline: auto;
+  }
+
+  :host([orientation="vertical"]) .range-fill {
+    left: 50%;
+    transform: translateX(-50%);
+    inline-size: var(--ui-slider-track-size);
+    right: auto;
+    top: calc(100% - var(--ui-slider-end, 0%));
+    bottom: var(--ui-slider-start, 0%);
+    block-size: auto;
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--ui-slider-fill) 86%, #ffffff 14%),
+      var(--ui-slider-fill)
+    );
+  }
+
+  :host([orientation="vertical"]) .track-indicator {
+    left: 50%;
+    top: calc(100% - var(--ui-slider-end, 0%));
+    transform: translate(-50%, -50%);
+  }
+
+  :host([orientation="vertical"]) .track-indicator.start {
+    top: calc(100% - var(--ui-slider-start, 0%));
+    left: 50%;
+  }
+
+  :host([orientation="vertical"]) .inputs {
+    transform: rotate(-90deg);
+    transform-origin: center;
+    inset: auto;
+    left: 50%;
+    top: 50%;
+    width: 200px;
+    height: 26px;
+    translate: -50% -50%;
+  }
+
+  :host([orientation="vertical"]) .marks {
+    left: calc(100% + 8px);
+    right: auto;
+    top: 0;
+    bottom: 0;
+    width: 56px;
+  }
+
+  :host([orientation="vertical"]) .mark {
+    transform: translateY(50%);
+    left: 0 !important;
+    right: 0;
+    justify-items: start;
+  }
+
+  :host([orientation="vertical"]) .mark::before {
+    inline-size: 8px;
+    block-size: 1px;
+  }
+
+  :host([headless]) .shell {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .shell,
+    .track-indicator::after,
+    input[type="range"]::-webkit-slider-thumb,
+    input[type="range"]::-moz-range-thumb {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @keyframes ui-slider-indicator-pulse {
+    0% {
+      transform: scale(0.9);
+      opacity: 0.45;
+    }
+    70% {
+      transform: scale(1.25);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1.25);
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .shell {
+      border-width: 2px;
+      box-shadow: none;
+    }
+
+    .track,
+    .range-fill {
+      block-size: max(var(--ui-slider-track-size), 8px);
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-slider-bg: Canvas;
+      --ui-slider-text: CanvasText;
+      --ui-slider-muted: CanvasText;
+      --ui-slider-track: CanvasText;
+      --ui-slider-fill: Highlight;
+      --ui-slider-focus: Highlight;
+      --ui-slider-shadow: none;
+      --ui-slider-thumb-shadow: none;
+    }
+
+    .shell {
+      border-color: CanvasText;
+    }
+
+    .track-indicator {
+      background: Highlight;
+      box-shadow: none;
+    }
+
+    .track-indicator::after {
+      border-color: Highlight;
+      animation: none !important;
+    }
+
+    input[type="range"]::-webkit-slider-thumb,
+    input[type="range"]::-moz-range-thumb {
+      background: Highlight;
+      border-color: HighlightText;
+      box-shadow: none;
+    }
+  }
+`;
+function a(n, t) {
+  const e = Number(n);
+  return Number.isFinite(e) ? e : t;
+}
+function h(n, t, e) {
+  return Math.max(t, Math.min(e, n));
+}
+function b(n) {
+  return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function m(n, t, e) {
+  if (!n)
+    return [];
+  try {
+    const r = JSON.parse(n);
+    return Array.isArray(r) ? r.map((i) => typeof i == "number" ? { value: i } : i && typeof i == "object" && Number.isFinite(Number(i.value)) ? {
+      value: Number(i.value),
+      label: i.label != null ? String(i.label) : void 0
+    } : null).filter((i) => !!i).map((i) => ({ ...i, value: h(i.value, t, e) })) : [];
+  } catch {
+    return [];
+  }
+}
+function p(n, t = !1) {
+  if (n == null)
+    return t;
+  const e = String(n).toLowerCase();
+  return e !== "false" && e !== "0" && e !== "off";
+}
+function _(n, t, e, r, i, l, u) {
+  const s = Math.max(1, l - i), o = Math.round((t - i) / s * 100), d = Math.round((e - i) / s * 100), c = Math.round((r - i) / s * 100);
+  return n === "percent" ? u ? `${d}% – ${c}%` : `${o}%` : n === "range" ? u ? `${e} – ${r}` : `${t}` : `${t}`;
+}
+const v = /* @__PURE__ */ new Set([
+  "value",
+  "value-start",
+  "value-end",
+  "min",
+  "max",
+  "step",
+  "disabled",
+  "headless",
+  "orientation",
+  "size",
+  "variant",
+  "tone",
+  "show-value",
+  "format",
+  "name",
+  "name-start",
+  "name-end"
+]);
+class k extends f {
+  constructor() {
+    super(), this._startInput = null, this._endInput = null, this._valueEl = null, this._trackWrap = null, this._rangeMode = !1, this._value = 0, this._valueStart = 0, this._valueEnd = 0, this._onInput = this._onInput.bind(this), this._onChange = this._onChange.bind(this);
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "value-start",
+      "value-end",
+      "min",
+      "max",
+      "step",
+      "disabled",
+      "headless",
+      "range",
+      "orientation",
+      "size",
+      "variant",
+      "tone",
+      "show-value",
+      "format",
+      "label",
+      "description",
+      "marks",
+      "name",
+      "name-start",
+      "name-end"
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.root.addEventListener("input", this._onInput, !0), this.root.addEventListener("change", this._onChange, !0);
+  }
+  disconnectedCallback() {
+    this.root.removeEventListener("input", this._onInput, !0), this.root.removeEventListener("change", this._onChange, !0), super.disconnectedCallback();
+  }
+  attributeChangedCallback(t, e, r) {
+    if (e !== r) {
+      if (v.has(t) && this._trackWrap) {
+        this._syncFromAttributes(), this._syncDom();
+        return;
+      }
+      this.isConnected && this.requestRender();
+    }
+  }
+  get value() {
+    return this._rangeMode ? this._valueEnd : this._value;
+  }
+  set value(t) {
+    const e = Number(t);
+    Number.isFinite(e) && this.setAttribute("value", String(e));
+  }
+  get valueStart() {
+    return this._valueStart;
+  }
+  set valueStart(t) {
+    const e = Number(t);
+    Number.isFinite(e) && this.setAttribute("value-start", String(e));
+  }
+  get valueEnd() {
+    return this._valueEnd;
+  }
+  set valueEnd(t) {
+    const e = Number(t);
+    Number.isFinite(e) && this.setAttribute("value-end", String(e));
+  }
+  _syncFromAttributes() {
+    const t = a(this.getAttribute("min"), 0), e = Math.max(t, a(this.getAttribute("max"), 100)), r = Math.max(1e-4, a(this.getAttribute("step"), 1));
+    this._rangeMode = this.hasAttribute("range");
+    const i = a(this.getAttribute("value"), this._value || t), l = a(this.getAttribute("value-start"), this._valueStart || t), u = a(this.getAttribute("value-end"), this._valueEnd || i || t);
+    if (!this._rangeMode) {
+      this._value = h(i, t, e), this._valueStart = t, this._valueEnd = this._value;
+      return;
+    }
+    const s = h(Math.min(l, u), t, e), o = h(Math.max(l, u), t, e);
+    this._valueStart = Math.round(s / r) * r, this._valueEnd = Math.round(o / r) * r, this._value = this._valueEnd;
+  }
+  _detail() {
+    const t = a(this.getAttribute("min"), 0), e = Math.max(t, a(this.getAttribute("max"), 100)), r = Math.max(1e-4, a(this.getAttribute("step"), 1)), i = Math.max(1, e - t), l = (this._value - t) / i * 100, u = (this._valueStart - t) / i * 100, s = (this._valueEnd - t) / i * 100;
+    return {
+      value: this._rangeMode ? this._valueEnd : this._value,
+      valueStart: this._valueStart,
+      valueEnd: this._valueEnd,
+      range: this._rangeMode,
+      min: t,
+      max: e,
+      step: r,
+      percent: l,
+      percentStart: u,
+      percentEnd: s
+    };
+  }
+  _emit(t) {
+    this.dispatchEvent(
+      new CustomEvent(t, {
+        detail: this._detail(),
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _syncDom() {
+    const t = a(this.getAttribute("min"), 0), e = Math.max(t, a(this.getAttribute("max"), 100)), r = Math.max(1e-4, a(this.getAttribute("step"), 1)), i = p(this.getAttribute("disabled")) || this.hasAttribute("disabled"), l = this.getAttribute("format") || (this._rangeMode ? "range" : "percent"), u = p(this.getAttribute("show-value"), !0), s = Math.max(1, e - t), o = (this._valueStart - t) / s * 100, d = (this._valueEnd - t) / s * 100;
+    this._startInput && (this._startInput.min = String(t), this._startInput.max = String(e), this._startInput.step = String(r), this._startInput.value = String(this._rangeMode ? this._valueStart : this._value), this._startInput.disabled = i, this._startInput.name = this._rangeMode ? this.getAttribute("name-start") || this.getAttribute("name") || "" : this.getAttribute("name") || "", this._startInput.setAttribute("aria-valuemin", String(t)), this._startInput.setAttribute("aria-valuemax", String(e)), this._startInput.setAttribute("aria-valuenow", String(this._rangeMode ? this._valueStart : this._value))), this._endInput && (this._endInput.min = String(t), this._endInput.max = String(e), this._endInput.step = String(r), this._endInput.value = String(this._valueEnd), this._endInput.disabled = i, this._endInput.name = this.getAttribute("name-end") || this.getAttribute("name") || "", this._endInput.setAttribute("aria-valuemin", String(t)), this._endInput.setAttribute("aria-valuemax", String(e)), this._endInput.setAttribute("aria-valuenow", String(this._valueEnd))), this._trackWrap && (this._trackWrap.style.setProperty("--ui-slider-start", `${this._rangeMode ? o : 0}%`), this._trackWrap.style.setProperty("--ui-slider-end", `${d}%`)), this._valueEl && (this._valueEl.textContent = _(l, this._value, this._valueStart, this._valueEnd, t, e, this._rangeMode), u ? this._valueEl.removeAttribute("hidden") : this._valueEl.setAttribute("hidden", "")), this.setAttribute("aria-valuemin", String(t)), this.setAttribute("aria-valuemax", String(e)), this.setAttribute("aria-valuenow", String(this.value)), this.setAttribute("aria-orientation", this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal"), this.setAttribute("aria-disabled", i ? "true" : "false");
+  }
+  _updateFromInput(t) {
+    const e = a(this.getAttribute("min"), 0), r = Math.max(e, a(this.getAttribute("max"), 100)), i = Math.max(1e-4, a(this.getAttribute("step"), 1));
+    if (!this._rangeMode) {
+      this._value = h(a(t.value, this._value), e, r), this._valueStart = e, this._valueEnd = this._value, this.setAttribute("value", String(this._value));
+      return;
+    }
+    const l = h(a(t.value, t.classList.contains("start") ? this._valueStart : this._valueEnd), e, r);
+    t.classList.contains("start") ? this._valueStart = Math.min(l, this._valueEnd) : this._valueEnd = Math.max(l, this._valueStart), this._valueStart = Math.round(this._valueStart / i) * i, this._valueEnd = Math.round(this._valueEnd / i) * i, this._value = this._valueEnd, this.setAttribute("value-start", String(this._valueStart)), this.setAttribute("value-end", String(this._valueEnd)), this.setAttribute("value", String(this._valueEnd));
+  }
+  _onInput(t) {
+    if (p(this.getAttribute("disabled")) || this.hasAttribute("disabled"))
+      return;
+    const e = t.target;
+    !e || e.type !== "range" || (this._updateFromInput(e), this._syncDom(), this._emit("input"), this._emit("valuechange"));
+  }
+  _onChange(t) {
+    if (p(this.getAttribute("disabled")) || this.hasAttribute("disabled"))
+      return;
+    const e = t.target;
+    !e || e.type !== "range" || (this._updateFromInput(e), this._syncDom(), this._emit("change"));
+  }
+  _renderMarks(t, e) {
+    const r = m(this.getAttribute("marks"), t, e);
+    if (!r.length)
+      return '<div class="marks" part="marks" hidden></div>';
+    const i = Math.max(1, e - t), l = this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+    return `<div class="marks" part="marks">${r.map((s) => {
+      const o = (s.value - t) / i * 100, d = l === "vertical" ? `style="bottom:${o}%"` : `style="left:${o}%"`, c = s.label != null ? b(s.label) : String(s.value);
+      return `
+          <span class="mark" ${d}>
+            <span class="mark-label">${c}</span>
+          </span>
+        `;
+    }).join("")}</div>`;
+  }
+  render() {
+    this._syncFromAttributes();
+    const t = a(this.getAttribute("min"), 0), e = Math.max(t, a(this.getAttribute("max"), 100)), r = this.getAttribute("label") || "", i = this.getAttribute("description") || "", l = !!r || !!i, u = this._renderMarks(t, e), s = m(this.getAttribute("marks"), t, e).length > 0, o = b(r), d = b(i), c = o ? `${o} start` : "Slider value", g = o ? `${o} end` : "Slider end value";
+    this.setContent(`
+      <style>${x}</style>
+      <div class="shell" part="shell" role="group" data-has-marks="${s}">
+        <div class="meta" part="meta" ${l ? "" : "hidden"}>
+          <span class="label" part="label" ${r ? "" : "hidden"}>${o}</span>
+          <span class="value" part="value"></span>
+        </div>
+        <p class="description" part="description" ${i ? "" : "hidden"}>${d}</p>
+        <div class="control" part="control">
+          <div class="track-wrap" part="track-wrap">
+            <div class="track" part="track"></div>
+            <div class="range-fill" part="range"></div>
+            <span class="track-indicator start" part="indicator-start" ${this._rangeMode ? "" : "hidden"}></span>
+            <span class="track-indicator end" part="indicator-end"></span>
+            <div class="inputs" part="inputs">
+              <input class="start" type="range" aria-label="${c}" />
+              ${this._rangeMode ? `<input class="end" type="range" aria-label="${g}" />` : ""}
+            </div>
+            ${u}
+          </div>
+        </div>
+      </div>
+    `), this._startInput = this.root.querySelector("input.start"), this._endInput = this.root.querySelector("input.end"), this._valueEl = this.root.querySelector(".value"), this._trackWrap = this.root.querySelector(".track-wrap"), this._syncDom();
+  }
+  shouldRenderOnAttributeChange(t, e, r) {
+    return !v.has(t);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-slider") && customElements.define("ui-slider", k);
+export {
+  k as UISlider
+};