@warp-ds/elements 2.2.0-next.27 → 2.2.0-next.28

package/dist/packages/slider/slider.js

@@ -1,4 +1,4 @@
-var ie=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var U=a=>{throw TypeError(a)};var u=(a,o,e,r)=>{for(var n=r>1?void 0:r?se(o,e):o,p=a.length-1,g;p>=0;p--)(g=a[p])&&(n=(r?g(o,e,n):g(n))||n);return r&&n&&ie(o,e,n),n};var R=(a,o,e)=>o.has(a)||U("Cannot "+e);var B=(a,o,e)=>(R(a,o,"read from private field"),e?e.call(a):o.get(a)),L=(a,o,e)=>o.has(a)?U("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(a):o.set(a,e),G=(a,o,e,r)=>(R(a,o,"write to private field"),r?r.call(a,e):o.set(a,e),e),m=(a,o,e)=>(R(a,o,"access private method"),e);var s=function(a,o,e,r){if(e==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?a!==o||!r:!o.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?r:e==="a"?r.call(a):r?r.value:o.get(a)},d=function(a,o,e,r,n){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?a!==o||!n:!o.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?n.call(a,e):n?n.value=e:o.set(a,e),e};function D(a){var o,e,r,n,p,g,f,P,z,j,A,X,S,C,T,k,Z,I,$;class ae extends a{constructor(...t){var i,l,c;super(...t),o.add(this),this.internals=this.attachInternals(),e.set(this,!1),r.set(this,!1),n.set(this,!1),p.set(this,void 0),g.set(this,void 0),f.set(this,!0),z.set(this,""),j.set(this,()=>{d(this,n,!0,"f"),d(this,e,!0,"f"),s(this,o,"m",k).call(this)}),A.set(this,()=>{d(this,e,!1,"f"),s(this,o,"m",Z).call(this,this.shouldFormValueUpdate()?s(this,z,"f"):""),!this.validity.valid&&s(this,n,"f")&&d(this,r,!0,"f");let x=s(this,o,"m",k).call(this);this.validationMessageCallback&&this.validationMessageCallback(x?this.internals.validationMessage:"")}),X.set(this,()=>{var x;s(this,f,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),d(this,f,!1,"f")),d(this,n,!0,"f"),d(this,r,!0,"f"),s(this,o,"m",k).call(this),(x=this===null||this===void 0?void 0:this.validationMessageCallback)===null||x===void 0||x.call(this,this.showError?this.internals.validationMessage:"")}),S.set(this,void 0),C.set(this,!1),T.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",s(this,j,"f")),(l=this.addEventListener)===null||l===void 0||l.call(this,"blur",s(this,A,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"invalid",s(this,X,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let t=this.validators.map(c=>c.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...t])]}static getValidator(t){return this.validators.find(i=>i.attribute===t)||null}static getValidators(t){return this.validators.filter(i=>{var l;if(i.attribute===t||!((l=i.attribute)===null||l===void 0)&&l.includes(t))return!0})}get form(){return this.internals.form}get showError(){return s(this,o,"m",k).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(t,i,l){var c;(c=super.attributeChangedCallback)===null||c===void 0||c.call(this,t,i,l);let V=this.constructor.getValidators(t);V!=null&&V.length&&this.validationTarget&&this.setValue(s(this,z,"f"))}setValue(t){var i;d(this,r,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),d(this,z,t,"f");let c=this.shouldFormValueUpdate()?t:null;this.internals.setFormValue(c),s(this,o,"m",Z).call(this,c),this.valueChangedCallback&&this.valueChangedCallback(c),s(this,o,"m",k).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(t=>t(s(this,T,"f")))}formResetCallback(){var t,i;d(this,n,!1,"f"),d(this,r,!1,"f"),s(this,o,"m",k).call(this),(t=this.resetFormControl)===null||t===void 0||t.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,s(this,o,"m",k).call(this)?this.validationMessage:"")}}return e=new WeakMap,r=new WeakMap,n=new WeakMap,p=new WeakMap,g=new WeakMap,f=new WeakMap,z=new WeakMap,j=new WeakMap,A=new WeakMap,X=new WeakMap,S=new WeakMap,C=new WeakMap,T=new WeakMap,o=new WeakSet,P=function(){let t=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return t.querySelectorAll(i)},k=function(){if(this.hasAttribute("disabled"))return!1;let t=s(this,r,"f")||s(this,n,"f")&&!this.validity.valid&&!s(this,e,"f");return t&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),t},Z=function(t){let i=this.constructor,l={},c=i.validators,x=[],V=c.some(v=>v.isValid instanceof Promise);s(this,C,"f")||(d(this,T,new Promise(v=>{d(this,S,v,"f")}),"f"),d(this,C,!0,"f")),s(this,p,"f")&&(s(this,p,"f").abort(),d(this,g,s(this,p,"f"),"f"));let M=new AbortController;d(this,p,M,"f");let Y,O=!1;c.length&&(c.forEach(v=>{let q=v.key||"customError",y=v.isValid(this,t,M.signal);y instanceof Promise?(x.push(y),y.then(N=>{N!=null&&(l[q]=!N,Y=s(this,o,"m",$).call(this,v,t),s(this,o,"m",I).call(this,l,Y))})):(l[q]=!y,this.validity[q]!==!y&&(O=!0),!y&&!Y&&(Y=s(this,o,"m",$).call(this,v,t)))}),Promise.allSettled(x).then(()=>{var v;M!=null&&M.signal.aborted||(d(this,C,!1,"f"),(v=s(this,S,"f"))===null||v===void 0||v.call(this))}),(O||!V)&&s(this,o,"m",I).call(this,l,Y))},I=function(t,i){if(this.validationTarget)this.internals.setValidity(t,i,this.validationTarget),d(this,f,!1,"f");else{if(this.internals.setValidity(t,i),this.internals.validity.valid)return;d(this,f,!0,"f")}},$=function(t,i){if(this.validityCallback){let l=this.validityCallback(t.key||"customError");if(l)return l}return t.message instanceof Function?t.message(this,i):t.message},ae}import{html as Q,LitElement as ee,nothing as le}from"lit";import{property as w}from"lit/decorators.js";import{css as H}from"lit";var J=H`
+var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var N=l=>{throw TypeError(l)};var u=(l,r,e,t)=>{for(var n=t>1?void 0:t?re(r,e):r,a=l.length-1,v;a>=0;a--)(v=l[a])&&(n=(t?v(r,e,n):v(n))||n);return t&&n&&ee(r,e,n),n};var oe=(l,r,e)=>r.has(l)||N("Cannot "+e);var R=(l,r,e)=>r.has(l)?N("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(l):r.set(l,e);var m=(l,r,e)=>(oe(l,r,"access private method"),e);var s=function(l,r,e,t){if(e==="a"&&!t)throw new TypeError("Private accessor was defined without a getter");if(typeof r=="function"?l!==r||!t:!r.has(l))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?t:e==="a"?t.call(l):t?t.value:r.get(l)},c=function(l,r,e,t,n){if(t==="m")throw new TypeError("Private method is not writable");if(t==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof r=="function"?l!==r||!n:!r.has(l))throw new TypeError("Cannot write private member to an object whose class did not declare it");return t==="a"?n.call(l,e):n?n.value=e:r.set(l,e),e};function W(l){var r,e,t,n,a,v,k,K,z,P,j,S,E,C,T,x,A,X,Z;class Q extends l{constructor(...o){var i,d,b;super(...o),r.add(this),this.internals=this.attachInternals(),e.set(this,!1),t.set(this,!1),n.set(this,!1),a.set(this,void 0),v.set(this,void 0),k.set(this,!0),z.set(this,""),P.set(this,()=>{c(this,n,!0,"f"),c(this,e,!0,"f"),s(this,r,"m",x).call(this)}),j.set(this,()=>{c(this,e,!1,"f"),s(this,r,"m",A).call(this,this.shouldFormValueUpdate()?s(this,z,"f"):""),!this.validity.valid&&s(this,n,"f")&&c(this,t,!0,"f");let f=s(this,r,"m",x).call(this);this.validationMessageCallback&&this.validationMessageCallback(f?this.internals.validationMessage:"")}),S.set(this,()=>{var f;s(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),c(this,k,!1,"f")),c(this,n,!0,"f"),c(this,t,!0,"f"),s(this,r,"m",x).call(this),(f=this===null||this===void 0?void 0:this.validationMessageCallback)===null||f===void 0||f.call(this,this.showError?this.internals.validationMessage:"")}),E.set(this,void 0),C.set(this,!1),T.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",s(this,P,"f")),(d=this.addEventListener)===null||d===void 0||d.call(this,"blur",s(this,j,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"invalid",s(this,S,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let o=this.validators.map(b=>b.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...o])]}static getValidator(o){return this.validators.find(i=>i.attribute===o)||null}static getValidators(o){return this.validators.filter(i=>{var d;if(i.attribute===o||!((d=i.attribute)===null||d===void 0)&&d.includes(o))return!0})}get form(){return this.internals.form}get showError(){return s(this,r,"m",x).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(o,i,d){var b;(b=super.attributeChangedCallback)===null||b===void 0||b.call(this,o,i,d);let V=this.constructor.getValidators(o);V!=null&&V.length&&this.validationTarget&&this.setValue(s(this,z,"f"))}setValue(o){var i;c(this,t,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),c(this,z,o,"f");let b=this.shouldFormValueUpdate()?o:null;this.internals.setFormValue(b),s(this,r,"m",A).call(this,b),this.valueChangedCallback&&this.valueChangedCallback(b),s(this,r,"m",x).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(o=>o(s(this,T,"f")))}formResetCallback(){var o,i;c(this,n,!1,"f"),c(this,t,!1,"f"),s(this,r,"m",x).call(this),(o=this.resetFormControl)===null||o===void 0||o.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,s(this,r,"m",x).call(this)?this.validationMessage:"")}}return e=new WeakMap,t=new WeakMap,n=new WeakMap,a=new WeakMap,v=new WeakMap,k=new WeakMap,z=new WeakMap,P=new WeakMap,j=new WeakMap,S=new WeakMap,E=new WeakMap,C=new WeakMap,T=new WeakMap,r=new WeakSet,K=function(){let o=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return o.querySelectorAll(i)},x=function(){if(this.hasAttribute("disabled"))return!1;let o=s(this,t,"f")||s(this,n,"f")&&!this.validity.valid&&!s(this,e,"f");return o&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),o},A=function(o){let i=this.constructor,d={},b=i.validators,f=[],V=b.some(p=>p.isValid instanceof Promise);s(this,C,"f")||(c(this,T,new Promise(p=>{c(this,E,p,"f")}),"f"),c(this,C,!0,"f")),s(this,a,"f")&&(s(this,a,"f").abort(),c(this,v,s(this,a,"f"),"f"));let M=new AbortController;c(this,a,M,"f");let Y,q=!1;b.length&&(b.forEach(p=>{let I=p.key||"customError",y=p.isValid(this,o,M.signal);y instanceof Promise?(f.push(y),y.then($=>{$!=null&&(d[I]=!$,Y=s(this,r,"m",Z).call(this,p,o),s(this,r,"m",X).call(this,d,Y))})):(d[I]=!y,this.validity[I]!==!y&&(q=!0),!y&&!Y&&(Y=s(this,r,"m",Z).call(this,p,o)))}),Promise.allSettled(f).then(()=>{var p;M!=null&&M.signal.aborted||(c(this,C,!1,"f"),(p=s(this,E,"f"))===null||p===void 0||p.call(this))}),(q||!V)&&s(this,r,"m",X).call(this,d,Y))},X=function(o,i){if(this.validationTarget)this.internals.setValidity(o,i,this.validationTarget),c(this,k,!1,"f");else{if(this.internals.setValidity(o,i),this.internals.validity.valid)return;c(this,k,!0,"f")}},Z=function(o,i){if(this.validityCallback){let d=this.validityCallback(o.key||"customError");if(d)return d}return o.message instanceof Function?o.message(this,i):o.message},Q}import{html as G,LitElement as D,nothing as ae}from"lit";import{property as w}from"lit/decorators.js";import{css as O}from"lit";var U=O`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var ie=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var U=a=>{th
   svg {
     pointer-events: none;
   }
-`,ge=H`*, :before, :after {
+`,de=O`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,7 +2437,7 @@ var ie=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var U=a=>{th
                     display: none
                 }
             }
-        `;import{css as ne}from"lit";var K=ne`
+        `;import{css as te}from"lit";var B=te`
   .w-slider {
     position: relative;
     border: none;
@@ -2465,10 +2465,12 @@ var ie=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var U=a=>{th
 
     /* The --min value can be non-zero, f. ex. choosing a year from 1950 to 2025. Normalize the values so we start at 0 and run to max - min. */
     --_value-range: calc(var(--max) - var(--min));
-    --_from-in-range: max(calc(var(--from) - var(--min)), 0);
+
+    /** Round up to the nearest --step, which defaults to 1 (https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step) */
+    --_from-in-range: round(up, max(calc(var(--from) - var(--min)), 0), var(--step, 1));
 
     /* limit to maximum value in range so typing a value larger than max doesn't explode layouts */
-    --_to-in-range: min(calc(var(--to) - var(--min)), var(--_value-range));
+    --_to-in-range: round(up, min(calc(var(--to) - var(--min)), var(--_value-range)), var(--step, 1));
 
     /* Position the starting point of the fill in the case of a non-zero --from value in a range slider.
      * In other words, given a width of 100% how many percent should be left unfilled/blank
@@ -2501,17 +2503,36 @@ var ie=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var U=a=>{th
     grid-area: description;
   }
 
-  .w-slider__active-range {
+  .w-slider__range {
     align-self: center;
     background: var(--w-slider-track-background);
     border-radius: 4px;
+    height: var(--w-slider-track-active-height);
     position: absolute;
+    /* For range sliders to avoid overlapping the slider thumbs we transform them to
+    be visually to the left and right of their respective input[type="range"]. This
+    padding is here so the active-range element is the same width as the input fields. */
+    padding-inline-start: var(--active-range-inline-start-padding, 0);
+    padding-inline-end: var(--active-range-inline-end-padding, 0);
     top: var(--_range-top);
     left: 0;
     right: 0;
     grid-area: slider;
   }
 
+  .w-slider__active-range {
+    box-sizing: content-box;
+    background: var(--w-slider-track-active-background);
+    height: var(--w-slider-track-active-height);
+
+    border-start-start-radius: var(--active-range-border-radius, 0);
+    border-end-start-radius: var(--active-range-border-radius, 0);
+
+    margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--active-range-inline-start-padding, 0px));
+    width: calc(calc(var(--_filled-values) * 1%) + var(--active-range-inline-end-padding, 0px));
+    z-index: 1;
+  }
+
   .w-slider__markers {
     --_marker-height: 7px;
     --_marker-width: 1px;
@@ -2521,9 +2542,14 @@ var ie=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var U=a=>{th
     /* Creates a linear gradient with --_marker-width wide markers
        followed by enough transparent that we can repeat the gradient
        along the X axis and have markers visible where we want them. */
-    background: linear-gradient(to right, var(--w-slider-marker-color) var(--_marker-width), rgba(0, 0, 0, 0) 1px) repeat-x;
+    background: linear-gradient(
+      to right,
+      var(--w-slider-marker-color) var(--_marker-width),
+      rgba(0, 0, 0, 0) 1px calc(100% - 1px),
+      var(--w-slider-marker-color) 100%
+    ) repeat-x;
     --_step-width-as-percent: calc(var(--markers) / var(--_value-range) * 100);
-    background-size: calc(var(--_step-width-as-percent) * 1% - 0.1%) var(--_marker-height);
+    background-size: calc(var(--_step-width-as-percent) * 1%) var(--_marker-height);
 
     background-position: bottom 0 left 8px right 8px;
     position: absolute;
@@ -2532,17 +2558,7 @@ var ie=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var U=a=>{th
     right: 1px;
     grid-area: slider;
     height: var(--_marker-height);
-  }
-
-  .w-slider__active-range::before {
-    background: var(--w-slider-track-active-background);
-    border-radius: 4px;
-    content: '';
-    display: block;
-    height: var(--w-slider-track-active-height);
-
-    margin-left: calc(var(--_blank-values-before) * 1%);
-    width: calc(var(--_filled-values) * 1%);
+    margin-inline: var(--w-slider-thumb-offset);
   }
 
   slot::slotted(w-slider-thumb) {
@@ -2553,17 +2569,19 @@ var ie=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var U=a=>{th
     bottom: 0;
     grid-area: slider;
   }
-`;var E,b,_,re,oe,W,te,h=class extends D(ee){constructor(){super(...arguments);L(this,b);this.disabled=!1;this.invalid=!1;this.required=!1;L(this,E)}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.style.setProperty("--min",this.min),this.style.setProperty("--max",this.max),this.markers&&this.style.setProperty("--markers",String(this.markers));let e=getComputedStyle(this.shadowRoot.querySelector(".w-slider"));G(this,E,Number.parseFloat(e.getPropertyValue("--w-slider-thumb-size").replace("px",""))),m(this,b,_).call(this)}updated(e){(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("min")||e.has("step")||e.has("max")||e.has("suffix")||e.has("formatter"))&&m(this,b,_).call(this)}render(){return Q`
-      <fieldset id="fieldset" class="w-slider" @input="${m(this,b,re)}" @slidervalidity="${m(this,b,oe)}">
+`;var g,_,H,J,L,h=class extends W(D){constructor(){super(...arguments);R(this,g);this.disabled=!1;this.invalid=!1;this.required=!1}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this.step&&this.style.setProperty("--step",String(this.step)),this.style.setProperty("--min",this.min),this.style.setProperty("--max",this.max),this.markers&&this.style.setProperty("--markers",String(this.markers)),m(this,g,_).call(this)}updated(e){(e.has("disabled")||e.has("invalid")||e.has("required")||e.has("min")||e.has("step")||e.has("max")||e.has("suffix")||e.has("formatter"))&&m(this,g,_).call(this)}render(){return G`
+      <fieldset id="fieldset" class="w-slider" @input="${m(this,g,H)}" @slidervalidity="${m(this,g,J)}">
         <legend class="w-slider__label">
           <slot id="label" name="label">${this.label}</slot>
         </legend>
         <slot class="w-slider__description" name="description"></slot>
-        ${this.markers?Q`<div class="w-slider__markers"></div>`:le}
-        <div class="w-slider__active-range"></div>
-        <slot class="w-slider__slider" @slotchange=${m(this,b,_)}></slot>
-        <slot class="w-slider__slider" name="from" @slotchange=${m(this,b,_)}></slot>
-        <slot class="w-slider__slider" name="to" @slotchange=${m(this,b,_)}></slot>
+        ${this.markers?G`<div class="w-slider__markers"></div>`:ae}
+        <div class="w-slider__range">
+          <div class="w-slider__active-range"></div>
+        </div>
+        <slot class="w-slider__slider" @slotchange=${m(this,g,_)}></slot>
+        <slot class="w-slider__slider" name="from" @slotchange=${m(this,g,_)}></slot>
+        <slot class="w-slider__slider" name="to" @slotchange=${m(this,g,_)}></slot>
       </fieldset>
-    `}};E=new WeakMap,b=new WeakSet,_=function(){let e=this.querySelectorAll("w-slider-thumb");for(let r of e.values())r.min=this.min,r.max=this.max,r.step=this.step,r.suffix=this.suffix,r.required=this.required,r.formatter=this.formatter,r.ariaLabel||(r.slot||(r.ariaLabel=this.label),r.slot==="from"&&(r.ariaLabel=`${this.label} min`),r.slot==="to"&&(r.ariaLabel=`${this.label} max`)),r.forceDisabled=this.disabled,r.forceInvalid=this.invalid,m(this,b,W).call(this,r)},re=function(e){let r=e.target;m(this,b,W).call(this,r)},oe=function(e){e.stopPropagation(),this.invalid=e.detail.invalid},W=function(e){var n,p;let r=e.slot;if(r){let g=m(this,b,te).call(this),f=B(this,E),P=f-g;g<=f&&this.style.setProperty("--thumb-offset",String(P))}if(r||this.style.setProperty("--from","0"),r==="from"){let g=(n=e.value)!=null?n:e.value=this.min;this.style.setProperty("--from",g)}if(!r||r==="to"){let g=(p=e.value)!=null?p:e.value=this.max;this.style.setProperty("--to",g)}},te=function(){let e=window.getComputedStyle(this.shadowRoot.querySelector(".w-slider__active-range"),"::before").width;return Number.parseFloat(e.replace("px",""))},h.shadowRootOptions={...ee.shadowRootOptions,delegatesFocus:!0},h.styles=[J,K],u([w({reflect:!0})],h.prototype,"label",2),u([w({type:Boolean,reflect:!0})],h.prototype,"disabled",2),u([w({type:Boolean,reflect:!0})],h.prototype,"invalid",2),u([w({type:Boolean,reflect:!0})],h.prototype,"required",2),u([w({reflect:!0})],h.prototype,"min",2),u([w({reflect:!0})],h.prototype,"max",2),u([w({type:Number,reflect:!0})],h.prototype,"markers",2),u([w({type:Number,reflect:!0})],h.prototype,"step",2),u([w({reflect:!0})],h.prototype,"suffix",2),u([w({attribute:!1})],h.prototype,"formatter",2);customElements.get("w-slider")||customElements.define("w-slider",h);export{h as WarpSlider};
+    `}};g=new WeakSet,_=function(){let e=this.querySelectorAll("w-slider-thumb"),t=!1;for(let a of e.values())a.min=this.min,a.max=this.max,a.step=this.step,a.suffix=this.suffix,a.required=this.required,a.formatter=this.formatter,a.ariaLabel||(a.slot||(a.ariaLabel=this.label),a.slot==="from"&&(a.ariaLabel=`${this.label} min`),a.slot==="to"&&(a.ariaLabel=`${this.label} max`)),(a.slot==="from"||a.slot==="to")&&(t=!0),a.forceDisabled=this.disabled,a.forceInvalid=this.invalid,m(this,g,L).call(this,a);let n=this.shadowRoot.querySelector("fieldset");t?(n.style.setProperty("--active-range-inline-start-padding","var(--w-slider-thumb-size)"),n.style.setProperty("--active-range-inline-end-padding","var(--w-slider-thumb-size)")):n.style.setProperty("--active-range-border-radius","4px")},H=function(e){let t=e.target;m(this,g,L).call(this,t)},J=function(e){e.stopPropagation(),this.invalid=e.detail.invalid},L=function(e){var n,a;let t=e.slot;if(t||this.style.setProperty("--from","0"),t==="from"){let v=(n=e.value)!=null?n:e.value=this.min;this.style.setProperty("--from",v)}if(!t||t==="to"){let v=(a=e.value)!=null?a:e.value=this.max;this.style.setProperty("--to",v)}},h.shadowRootOptions={...D.shadowRootOptions,delegatesFocus:!0},h.styles=[U,B],u([w({reflect:!0})],h.prototype,"label",2),u([w({type:Boolean,reflect:!0})],h.prototype,"disabled",2),u([w({type:Boolean,reflect:!0})],h.prototype,"invalid",2),u([w({type:Boolean,reflect:!0})],h.prototype,"required",2),u([w({reflect:!0})],h.prototype,"min",2),u([w({reflect:!0})],h.prototype,"max",2),u([w({type:Number,reflect:!0})],h.prototype,"markers",2),u([w({type:Number,reflect:!0})],h.prototype,"step",2),u([w({reflect:!0})],h.prototype,"suffix",2),u([w({attribute:!1})],h.prototype,"formatter",2);customElements.get("w-slider")||customElements.define("w-slider",h);export{h as WarpSlider};
 //# sourceMappingURL=slider.js.map