@editora/ui-core 0.1.9 → 0.1.10

package/dist/slider.cjs.js

@@ -0,0 +1,493 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-1b301e7f.js"),_=`
+  :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 c(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:c(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 k(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),h=Math.round((r-i)/s*100);return n==="percent"?u?`${d}% – ${h}%`:`${o}%`:n==="range"?u?`${e} – ${r}`:`${t}`:`${t}`}const v=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 g extends x.ElementBase{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=c(i,t,e),this._valueStart=t,this._valueEnd=this._value;return}const s=c(Math.min(l,u),t,e),o=c(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=k(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=c(a(t.value,this._value),e,r),this._valueStart=e,this._valueEnd=this._value,this.setAttribute("value",String(this._value));return}const l=c(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}%"`,h=s.label!=null?b(s.label):String(s.value);return`
+          <span class="mark" ${d}>
+            <span class="mark-label">${h}</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),h=o?`${o} start`:"Slider value",f=o?`${o} end`:"Slider end value";this.setContent(`
+      <style>${_}</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="${h}" />
+              ${this._rangeMode?`<input class="end" type="range" aria-label="${f}" />`:""}
+            </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",g);exports.UISlider=g;