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

package/dist/custom-elements.json

@@ -5972,14 +5972,6 @@
               },
               "description": "Function to format the to- and from labels and value in the slider thumb tooltip."
             },
-            {
-              "kind": "field",
-              "name": "#thumbSize",
-              "privacy": "private",
-              "type": {
-                "text": "number"
-              }
-            },
             {
               "kind": "method",
               "name": "#syncSliderThumbs",
@@ -6029,16 +6021,6 @@
                 }
               ],
               "description": "We use CSS variables to fill the active track with a background color."
-            },
-            {
-              "kind": "method",
-              "name": "#getActiveRangeWidth",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              }
             }
           ],
           "attributes": [

package/dist/packages/slider/index.js

@@ -1,4 +1,4 @@
-var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{throw TypeError(a)};var s=(a,t,e,r)=>{for(var i=r>1?void 0:r?ke(t,e):t,c=a.length-1,m;c>=0;c--)(m=a[c])&&(i=(r?m(t,e,i):m(i))||i);return r&&i&&xe(t,e,i),i};var Q=(a,t,e)=>t.has(a)||ae("Cannot "+e);var ie=(a,t,e)=>(Q(a,t,"read from private field"),e?e.call(a):t.get(a)),j=(a,t,e)=>t.has(a)?ae("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(a):t.set(a,e),se=(a,t,e,r)=>(Q(a,t,"write to private field"),r?r.call(a,e):t.set(a,e),e),h=(a,t,e)=>(Q(a,t,"access private method"),e);var l=function(a,t,e,r){if(e==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof t=="function"?a!==t||!r:!t.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:t.get(a)},p=function(a,t,e,r,i){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t=="function"?a!==t||!i:!t.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?i.call(a,e):i?i.value=e:t.set(a,e),e};function R(a){var t,e,r,i,c,m,x,E,C,_,D,U,L,P,A,F,B,H,G;class we extends a{constructor(...o){var n,b,u;super(...o),t.add(this),this.internals=this.attachInternals(),e.set(this,!1),r.set(this,!1),i.set(this,!1),c.set(this,void 0),m.set(this,void 0),x.set(this,!0),C.set(this,""),_.set(this,()=>{p(this,i,!0,"f"),p(this,e,!0,"f"),l(this,t,"m",F).call(this)}),D.set(this,()=>{p(this,e,!1,"f"),l(this,t,"m",B).call(this,this.shouldFormValueUpdate()?l(this,C,"f"):""),!this.validity.valid&&l(this,i,"f")&&p(this,r,!0,"f");let z=l(this,t,"m",F).call(this);this.validationMessageCallback&&this.validationMessageCallback(z?this.internals.validationMessage:"")}),U.set(this,()=>{var z;l(this,x,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),p(this,x,!1,"f")),p(this,i,!0,"f"),p(this,r,!0,"f"),l(this,t,"m",F).call(this),(z=this===null||this===void 0?void 0:this.validationMessageCallback)===null||z===void 0||z.call(this,this.showError?this.internals.validationMessage:"")}),L.set(this,void 0),P.set(this,!1),A.set(this,Promise.resolve()),(n=this.addEventListener)===null||n===void 0||n.call(this,"focus",l(this,_,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"blur",l(this,D,"f")),(u=this.addEventListener)===null||u===void 0||u.call(this,"invalid",l(this,U,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let o=this.validators.map(u=>u.attribute).flat(),n=super.observedAttributes||[];return[...new Set([...n,...o])]}static getValidator(o){return this.validators.find(n=>n.attribute===o)||null}static getValidators(o){return this.validators.filter(n=>{var b;if(n.attribute===o||!((b=n.attribute)===null||b===void 0)&&b.includes(o))return!0})}get form(){return this.internals.form}get showError(){return l(this,t,"m",F).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(o,n,b){var u;(u=super.attributeChangedCallback)===null||u===void 0||u.call(this,o,n,b);let I=this.constructor.getValidators(o);I!=null&&I.length&&this.validationTarget&&this.setValue(l(this,C,"f"))}setValue(o){var n;p(this,r,!1,"f"),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,""),p(this,C,o,"f");let u=this.shouldFormValueUpdate()?o:null;this.internals.setFormValue(u),l(this,t,"m",B).call(this,u),this.valueChangedCallback&&this.valueChangedCallback(u),l(this,t,"m",F).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(o=>o(l(this,A,"f")))}formResetCallback(){var o,n;p(this,i,!1,"f"),p(this,r,!1,"f"),l(this,t,"m",F).call(this),(o=this.resetFormControl)===null||o===void 0||o.call(this),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,l(this,t,"m",F).call(this)?this.validationMessage:"")}}return e=new WeakMap,r=new WeakMap,i=new WeakMap,c=new WeakMap,m=new WeakMap,x=new WeakMap,C=new WeakMap,_=new WeakMap,D=new WeakMap,U=new WeakMap,L=new WeakMap,P=new WeakMap,A=new WeakMap,t=new WeakSet,E=function(){let o=this.getRootNode(),n=`${this.localName}[name="${this.getAttribute("name")}"]`;return o.querySelectorAll(n)},F=function(){if(this.hasAttribute("disabled"))return!1;let o=l(this,r,"f")||l(this,i,"f")&&!this.validity.valid&&!l(this,e,"f");return o&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),o},B=function(o){let n=this.constructor,b={},u=n.validators,z=[],I=u.some(w=>w.isValid instanceof Promise);l(this,P,"f")||(p(this,A,new Promise(w=>{p(this,L,w,"f")}),"f"),p(this,P,!0,"f")),l(this,c,"f")&&(l(this,c,"f").abort(),p(this,m,l(this,c,"f"),"f"));let N=new AbortController;p(this,c,N,"f");let S,oe=!1;u.length&&(u.forEach(w=>{let J=w.key||"customError",$=w.isValid(this,o,N.signal);$ instanceof Promise?(z.push($),$.then(K=>{K!=null&&(b[J]=!K,S=l(this,t,"m",G).call(this,w,o),l(this,t,"m",H).call(this,b,S))})):(b[J]=!$,this.validity[J]!==!$&&(oe=!0),!$&&!S&&(S=l(this,t,"m",G).call(this,w,o)))}),Promise.allSettled(z).then(()=>{var w;N!=null&&N.signal.aborted||(p(this,P,!1,"f"),(w=l(this,L,"f"))===null||w===void 0||w.call(this))}),(oe||!I)&&l(this,t,"m",H).call(this,b,S))},H=function(o,n){if(this.validationTarget)this.internals.setValidity(o,n,this.validationTarget),p(this,x,!1,"f");else{if(this.internals.setValidity(o,n),this.internals.validity.valid)return;p(this,x,!0,"f")}},G=function(o,n){if(this.validityCallback){let b=this.validityCallback(o.key||"customError");if(b)return b}return o.message instanceof Function?o.message(this,n):o.message},we}import{html as de,LitElement as ce,nothing as _e}from"lit";import{property as y}from"lit/decorators.js";import{css as ne}from"lit";var X=ne`
+var ue=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var te=d=>{throw TypeError(d)};var s=(d,r,e,o)=>{for(var i=o>1?void 0:o?me(r,e):r,t=d.length-1,v;t>=0;t--)(v=d[t])&&(i=(o?v(r,e,i):v(i))||i);return o&&i&&ue(r,e,i),i};var ve=(d,r,e)=>r.has(d)||te("Cannot "+e);var X=(d,r,e)=>r.has(d)?te("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(d):r.set(d,e);var b=(d,r,e)=>(ve(d,r,"access private method"),e);var l=function(d,r,e,o){if(e==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof r=="function"?d!==r||!o:!r.has(d))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?o:e==="a"?o.call(d):o?o.value:r.get(d)},p=function(d,r,e,o,i){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof r=="function"?d!==r||!i:!r.has(d))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?i.call(d,e):i?i.value=e:r.set(d,e),e};function S(d){var r,e,o,i,t,v,_,P,z,F,E,O,A,I,L,C,U,B,H;class ge extends d{constructor(...a){var n,h,g;super(...a),r.add(this),this.internals=this.attachInternals(),e.set(this,!1),o.set(this,!1),i.set(this,!1),t.set(this,void 0),v.set(this,void 0),_.set(this,!0),z.set(this,""),F.set(this,()=>{p(this,i,!0,"f"),p(this,e,!0,"f"),l(this,r,"m",C).call(this)}),E.set(this,()=>{p(this,e,!1,"f"),l(this,r,"m",U).call(this,this.shouldFormValueUpdate()?l(this,z,"f"):""),!this.validity.valid&&l(this,i,"f")&&p(this,o,!0,"f");let y=l(this,r,"m",C).call(this);this.validationMessageCallback&&this.validationMessageCallback(y?this.internals.validationMessage:"")}),O.set(this,()=>{var y;l(this,_,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),p(this,_,!1,"f")),p(this,i,!0,"f"),p(this,o,!0,"f"),l(this,r,"m",C).call(this),(y=this===null||this===void 0?void 0:this.validationMessageCallback)===null||y===void 0||y.call(this,this.showError?this.internals.validationMessage:"")}),A.set(this,void 0),I.set(this,!1),L.set(this,Promise.resolve()),(n=this.addEventListener)===null||n===void 0||n.call(this,"focus",l(this,F,"f")),(h=this.addEventListener)===null||h===void 0||h.call(this,"blur",l(this,E,"f")),(g=this.addEventListener)===null||g===void 0||g.call(this,"invalid",l(this,O,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let a=this.validators.map(g=>g.attribute).flat(),n=super.observedAttributes||[];return[...new Set([...n,...a])]}static getValidator(a){return this.validators.find(n=>n.attribute===a)||null}static getValidators(a){return this.validators.filter(n=>{var h;if(n.attribute===a||!((h=n.attribute)===null||h===void 0)&&h.includes(a))return!0})}get form(){return this.internals.form}get showError(){return l(this,r,"m",C).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(a,n,h){var g;(g=super.attributeChangedCallback)===null||g===void 0||g.call(this,a,n,h);let T=this.constructor.getValidators(a);T!=null&&T.length&&this.validationTarget&&this.setValue(l(this,z,"f"))}setValue(a){var n;p(this,o,!1,"f"),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,""),p(this,z,a,"f");let g=this.shouldFormValueUpdate()?a:null;this.internals.setFormValue(g),l(this,r,"m",U).call(this,g),this.valueChangedCallback&&this.valueChangedCallback(g),l(this,r,"m",C).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(a=>a(l(this,L,"f")))}formResetCallback(){var a,n;p(this,i,!1,"f"),p(this,o,!1,"f"),l(this,r,"m",C).call(this),(a=this.resetFormControl)===null||a===void 0||a.call(this),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,l(this,r,"m",C).call(this)?this.validationMessage:"")}}return e=new WeakMap,o=new WeakMap,i=new WeakMap,t=new WeakMap,v=new WeakMap,_=new WeakMap,z=new WeakMap,F=new WeakMap,E=new WeakMap,O=new WeakMap,A=new WeakMap,I=new WeakMap,L=new WeakMap,r=new WeakSet,P=function(){let a=this.getRootNode(),n=`${this.localName}[name="${this.getAttribute("name")}"]`;return a.querySelectorAll(n)},C=function(){if(this.hasAttribute("disabled"))return!1;let a=l(this,o,"f")||l(this,i,"f")&&!this.validity.valid&&!l(this,e,"f");return a&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),a},U=function(a){let n=this.constructor,h={},g=n.validators,y=[],T=g.some(f=>f.isValid instanceof Promise);l(this,I,"f")||(p(this,L,new Promise(f=>{p(this,A,f,"f")}),"f"),p(this,I,!0,"f")),l(this,t,"f")&&(l(this,t,"f").abort(),p(this,v,l(this,t,"f"),"f"));let j=new AbortController;p(this,t,j,"f");let N,re=!1;g.length&&(g.forEach(f=>{let G=f.key||"customError",$=f.isValid(this,a,j.signal);$ instanceof Promise?(y.push($),$.then(J=>{J!=null&&(h[G]=!J,N=l(this,r,"m",H).call(this,f,a),l(this,r,"m",B).call(this,h,N))})):(h[G]=!$,this.validity[G]!==!$&&(re=!0),!$&&!N&&(N=l(this,r,"m",H).call(this,f,a)))}),Promise.allSettled(y).then(()=>{var f;j!=null&&j.signal.aborted||(p(this,I,!1,"f"),(f=l(this,A,"f"))===null||f===void 0||f.call(this))}),(re||!T)&&l(this,r,"m",B).call(this,h,N))},B=function(a,n){if(this.validationTarget)this.internals.setValidity(a,n,this.validationTarget),p(this,_,!1,"f");else{if(this.internals.setValidity(a,n),this.internals.validity.valid)return;p(this,_,!0,"f")}},H=function(a,n){if(this.validityCallback){let h=this.validityCallback(a.key||"customError");if(h)return h}return a.message instanceof Function?a.message(this,n):a.message},ge}import{html as ie,LitElement as se,nothing as fe}from"lit";import{property as k}from"lit/decorators.js";import{css as oe}from"lit";var R=oe`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
   svg {
     pointer-events: none;
   }
-`,Pe=ne`*, :before, :after {
+`,Fe=oe`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,7 +2437,7 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
                     display: none
                 }
             }
-        `;import{css as ye}from"lit";var le=ye`
+        `;import{css as we}from"lit";var ae=we`
   .w-slider {
     position: relative;
     border: none;
@@ -2465,10 +2465,12 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
 
     /* 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 xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     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 xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     /* 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 xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     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,19 +2569,21 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     bottom: 0;
     grid-area: slider;
   }
-`;var T,g,V,he,be,W,pe,v=class extends R(ce){constructor(){super(...arguments);j(this,g);this.disabled=!1;this.invalid=!1;this.required=!1;j(this,T)}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"));se(this,T,Number.parseFloat(e.getPropertyValue("--w-slider-thumb-size").replace("px",""))),h(this,g,V).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"))&&h(this,g,V).call(this)}render(){return de`
-      <fieldset id="fieldset" class="w-slider" @input="${h(this,g,he)}" @slidervalidity="${h(this,g,be)}">
+`;var m,V,ne,le,K,u=class extends S(se){constructor(){super(...arguments);X(this,m);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)),b(this,m,V).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"))&&b(this,m,V).call(this)}render(){return ie`
+      <fieldset id="fieldset" class="w-slider" @input="${b(this,m,ne)}" @slidervalidity="${b(this,m,le)}">
         <legend class="w-slider__label">
           <slot id="label" name="label">${this.label}</slot>
         </legend>
         <slot class="w-slider__description" name="description"></slot>
-        ${this.markers?de`<div class="w-slider__markers"></div>`:_e}
-        <div class="w-slider__active-range"></div>
-        <slot class="w-slider__slider" @slotchange=${h(this,g,V)}></slot>
-        <slot class="w-slider__slider" name="from" @slotchange=${h(this,g,V)}></slot>
-        <slot class="w-slider__slider" name="to" @slotchange=${h(this,g,V)}></slot>
+        ${this.markers?ie`<div class="w-slider__markers"></div>`:fe}
+        <div class="w-slider__range">
+          <div class="w-slider__active-range"></div>
+        </div>
+        <slot class="w-slider__slider" @slotchange=${b(this,m,V)}></slot>
+        <slot class="w-slider__slider" name="from" @slotchange=${b(this,m,V)}></slot>
+        <slot class="w-slider__slider" name="to" @slotchange=${b(this,m,V)}></slot>
       </fieldset>
-    `}};T=new WeakMap,g=new WeakSet,V=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,h(this,g,W).call(this,r)},he=function(e){let r=e.target;h(this,g,W).call(this,r)},be=function(e){e.stopPropagation(),this.invalid=e.detail.invalid},W=function(e){var i,c;let r=e.slot;if(r){let m=h(this,g,pe).call(this),x=ie(this,T),E=x-m;m<=x&&this.style.setProperty("--thumb-offset",String(E))}if(r||this.style.setProperty("--from","0"),r==="from"){let m=(i=e.value)!=null?i:e.value=this.min;this.style.setProperty("--from",m)}if(!r||r==="to"){let m=(c=e.value)!=null?c:e.value=this.max;this.style.setProperty("--to",m)}},pe=function(){let e=window.getComputedStyle(this.shadowRoot.querySelector(".w-slider__active-range"),"::before").width;return Number.parseFloat(e.replace("px",""))},v.shadowRootOptions={...ce.shadowRootOptions,delegatesFocus:!0},v.styles=[X,le],s([y({reflect:!0})],v.prototype,"label",2),s([y({type:Boolean,reflect:!0})],v.prototype,"disabled",2),s([y({type:Boolean,reflect:!0})],v.prototype,"invalid",2),s([y({type:Boolean,reflect:!0})],v.prototype,"required",2),s([y({reflect:!0})],v.prototype,"min",2),s([y({reflect:!0})],v.prototype,"max",2),s([y({type:Number,reflect:!0})],v.prototype,"markers",2),s([y({type:Number,reflect:!0})],v.prototype,"step",2),s([y({reflect:!0})],v.prototype,"suffix",2),s([y({attribute:!1})],v.prototype,"formatter",2);customElements.get("w-slider")||customElements.define("w-slider",v);import{html as q,LitElement as me,nothing as ee}from"lit";import{property as M,query as ve,state as k}from"lit/decorators.js";import{classMap as Fe}from"lit/directives/class-map.js";import{ifDefined as re}from"lit/directives/if-defined.js";import{css as ze}from"lit";var ue=ze`
+    `}};m=new WeakSet,V=function(){let e=this.querySelectorAll("w-slider-thumb"),o=!1;for(let t of e.values())t.min=this.min,t.max=this.max,t.step=this.step,t.suffix=this.suffix,t.required=this.required,t.formatter=this.formatter,t.ariaLabel||(t.slot||(t.ariaLabel=this.label),t.slot==="from"&&(t.ariaLabel=`${this.label} min`),t.slot==="to"&&(t.ariaLabel=`${this.label} max`)),(t.slot==="from"||t.slot==="to")&&(o=!0),t.forceDisabled=this.disabled,t.forceInvalid=this.invalid,b(this,m,K).call(this,t);let i=this.shadowRoot.querySelector("fieldset");o?(i.style.setProperty("--active-range-inline-start-padding","var(--w-slider-thumb-size)"),i.style.setProperty("--active-range-inline-end-padding","var(--w-slider-thumb-size)")):i.style.setProperty("--active-range-border-radius","4px")},ne=function(e){let o=e.target;b(this,m,K).call(this,o)},le=function(e){e.stopPropagation(),this.invalid=e.detail.invalid},K=function(e){var i,t;let o=e.slot;if(o||this.style.setProperty("--from","0"),o==="from"){let v=(i=e.value)!=null?i:e.value=this.min;this.style.setProperty("--from",v)}if(!o||o==="to"){let v=(t=e.value)!=null?t:e.value=this.max;this.style.setProperty("--to",v)}},u.shadowRootOptions={...se.shadowRootOptions,delegatesFocus:!0},u.styles=[R,ae],s([k({reflect:!0})],u.prototype,"label",2),s([k({type:Boolean,reflect:!0})],u.prototype,"disabled",2),s([k({type:Boolean,reflect:!0})],u.prototype,"invalid",2),s([k({type:Boolean,reflect:!0})],u.prototype,"required",2),s([k({reflect:!0})],u.prototype,"min",2),s([k({reflect:!0})],u.prototype,"max",2),s([k({type:Number,reflect:!0})],u.prototype,"markers",2),s([k({type:Number,reflect:!0})],u.prototype,"step",2),s([k({reflect:!0})],u.prototype,"suffix",2),s([k({attribute:!1})],u.prototype,"formatter",2);customElements.get("w-slider")||customElements.define("w-slider",u);import{html as q,LitElement as he,nothing as Q}from"lit";import{property as M,query as be,state as x}from"lit/decorators.js";import{ifDefined as W}from"lit/directives/if-defined.js";import{css as xe}from"lit";var de=xe`
   .w-slider-thumb {
     position: relative;
     display: grid;
@@ -2582,6 +2600,7 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     background-color: transparent;
     grid-area: slider;
     height: 44px; /* touch target */
+    margin-left: 0;
     pointer-events: none; /* let clicks pass through for range slider where we place two inputs over each other */
   }
 
@@ -2591,14 +2610,6 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     height: var(--w-slider-track-height);
   }
 
-  .w-slider-thumb__range:hover::-webkit-slider-thumb {
-    background: var(--w-s-color-background-primary-hover);
-  }
-
-  .w-slider-thumb__range:hover::-moz-range-thumb {
-    background: var(--w-s-color-background-primary-hover);
-  }
-
   /*
     Use anchor positioning to place the tooltip target in relation to the slider thumb.
     We use a polyfill to bring support to older Safari, Firefox at time of writing.
@@ -2607,11 +2618,12 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     anchor-name: --thumb;
 
     appearance: none;
+    cursor: pointer;
     background: var(--w-s-color-background-primary);
     border-radius: 50%;
     height: var(--w-slider-thumb-size);
     margin-top: calc(-1 * calc(var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)));
-    pointer-events: auto;
+    pointer-events: initial;
     width: var(--w-slider-thumb-size);
     z-index: 1;
   }
@@ -2620,6 +2632,7 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     anchor-name: --thumb;
 
     appearance: none;
+    cursor: pointer;
     background: var(--w-s-color-background-primary);
     border-radius: 50%;
     border-color: transparent;
@@ -2628,32 +2641,54 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     pointer-events: initial;
     width: var(--w-slider-thumb-size);
     z-index: 1;
+
+    box-shadow: none;
   }
 
-  .w-slider-thumb__tooltip {
-    display: none;
-    position: absolute;
+  .w-slider-thumb__range:active::-webkit-slider-thumb,
+  .w-slider-thumb__range:hover::-webkit-slider-thumb {
+    background: var(--w-s-color-background-primary-hover);
+    box-shadow: var(--w-shadow-slider-handle-hover);
+  }
 
-    background-color: var(--w-s-color-background-inverted);
-    color: var(--w-s-color-text-inverted-static);
-    border-color: var(--w-s-color-background-inverted);
+  .w-slider-thumb__range:focus,
+  .w-slider-thumb__range:focus-visible {
+    outline: none;
+  }
 
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    white-space: nowrap;
-    z-index: 1;
+  .w-slider-thumb__range:focus-visible::-webkit-slider-thumb {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+    box-shadow: none;
+  }
 
-    position-anchor: --thumb;
+  .w-slider-thumb__range:active::-moz-range-thumb,
+  .w-slider-thumb__range:hover::-moz-range-thumb {
+    background: var(--w-s-color-background-primary-hover);
+    box-shadow: var(--w-shadow-slider-handle-hover);
+  }
 
-    bottom: calc(anchor(top) + 5px);
-    justify-self: anchor-center;
+  .w-slider-thumb__range:focus-visible::-moz-range-thumb {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+    box-shadow: none;
   }
 
-  .w-slider-thumb__tooltip--visible {
+  .w-slider-thumb__tooltip-target {
     display: block;
+    pointer-events: none;
+    position: absolute;
+    border: 2px solid transparent;
+    border-radius: 20px;
+    width: 8px;
+    height: 8px;
+    position-anchor: --thumb;
+    position-area: center; /* Position the tooltip target right on the range thumb */
   }
 
+  /* Uncomment this to debug the invisible anchor target */
+  /* .w-slider-thumb__tooltip-target { border-color: lime; } */
+
   .w-slider-thumb__from-marker,
   .w-slider-thumb__to-marker {
     margin-inline: 2px; /* visual alignment with input border, slider thumb */
@@ -2682,8 +2717,21 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
   }
 
-  :host([name='from']) .w-slider-thumb__range::-webkit-slider-thumb {
-    margin-left: calc(-1px * var(--thumb-offset) / 2);
+  :host([name='from']) .w-slider-thumb__range {
+    margin-left: var(--w-slider-thumb-size);
+  }
+
+  :host([name='to']) .w-slider-thumb__range {
+    margin-right: var(--w-slider-thumb-size);
+  }
+
+  :host([name='from']) .w-slider-thumb__range::-webkit-slider-thumb,
+  :host([name='from']) .w-slider-thumb__tooltip-target {
+    transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
+  }
+
+  :host([name='from']) .w-slider-thumb__range::-moz-range-thumb {
+    transform: translateX(calc(-1 * var(--w-slider-thumb-size) - 1px));
   }
 
   :host([name='to']) .w-slider-thumb__textfield {
@@ -2691,84 +2739,93 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
     grid-column: 3 / 4;
   }
 
+  :host([name='to']) .w-slider-thumb__tooltip-target,
   :host([name='to']) .w-slider-thumb__range::-webkit-slider-thumb {
-    margin-left: calc(1px * var(--thumb-offset) / 2);
+    transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
+  }
+
+  :host([name='to']) .w-slider-thumb__range::-moz-range-thumb {
+    transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
   }
-`;import{css as Ce}from"lit";var ge=Ce`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hidden{display:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`;var fe={};var f,Z,O,te,d=class extends R(me){constructor(){super(...arguments);j(this,f);this._invalid=!1;this._showTooltip=!1;this.anchorPositioningStyleElement=null}async connectedCallback(){var e;if(super.connectedCallback(),"anchorName"in document.documentElement.style)await this.updateComplete;else{let r=fe.url.substring(0,fe.url.lastIndexOf("/"));try{let[{default:i}]=await Promise.all([import(`${r}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent=`
+`;import{css as ke}from"lit";var ce=ke`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hidden{display:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`;var pe={};var w,Z,D,ee,c=class extends S(he){constructor(){super(...arguments);X(this,w);this._invalid=!1;this._showTooltip=!1;this.anchorPositioningStyleElement=null}async connectedCallback(){var e;if(super.connectedCallback(),"anchorName"in document.documentElement.style)await this.updateComplete;else{let o=pe.url.substring(0,pe.url.lastIndexOf("/"));try{let[{default:i}]=await Promise.all([import(`${o}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent=`
         /*
-         * The polyfill can only anchor to ::before and ::after pseudo elements.
+         * The polyfill can only anchor to ::before and ::after pseudo elements, not the pseudo element slider thumb.
          * We work around that by recreating a transparent version of the active range
          * so that we can position relative to that, without crossing the shadow root boundary.
          */
-        #anchor {
-          anchor-name: --polyfilled-thumb;
-
-          /* We have to compensate for the width of the thumb inside the track to find its center. */
-          --_value: var(--_to-as-percent-of-max);
-          --_offset-origin: 50; /* at this point the offset is zero */
-          --_thumb-offset-percent: calc(var(--_value) - var(--_offset-origin));
-          --_thumb-offset-pixels: calc(var(--w-slider-thumb-size) * calc(var(--_thumb-offset-percent) / 100));
-
+        .polyfill-range {
           align-self: center;
           background: transparent;
+          height: var(--w-slider-track-active-height);
           position: absolute;
+          padding-inline-start: var(--active-range-inline-start-padding, 0);
+          padding-inline-end: var(--active-range-inline-end-padding, 0);
           top: var(--_range-top);
-          height: var(--w-slider-track-active-height);
           left: 0;
           right: 0;
           grid-area: slider;
-          margin-left: calc(var(--_blank-values-before) * 1%);
-          width: calc(calc(var(--_filled-values) * 1%) - var(--_thumb-offset-pixels));
         }
 
-        #target {
-          position: absolute;
+        .polyfill-active-range {
+          anchor-name: --polyfilled-thumb;
+
+          box-sizing: content-box;
+          background: transparent;
+          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);
 
-          position-anchor: --polyfilled-thumb;
-          bottom: calc(anchor(top) + 16px);
-          left: anchor(--polyfilled-thumb right);
+          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));
         }
 
-        :host([name='from']) #anchor {
-          --_value: var(--_from-as-percent-of-max);
+        #target {
+          position: absolute;
+          top: anchor(--polyfilled-thumb top);
+          right: anchor(--polyfilled-thumb right);
+          margin-right: 12px;
+        }
 
-          margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--_thumb-offset-pixels));
-          width: calc(calc(var(--_filled-values) * 1%) - var(--w-slider-thumb-size));
+        :host([name='from']) .polyfill-active-range {
+          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));
         }
 
         :host([name='from']) #target {
           left: anchor(--polyfilled-thumb left);
+          margin-left: 38px;
         }
-      `,await i({roots:[this.shadowRoot],elements:[this.anchorPositioningStyleElement]})}catch(i){console.error(new Error("Error registering the CSS anchor positioning polyfill. The UI will look broken.",{cause:i}))}}this.range.value=(e=this.value)!=null?e:this.max}updated(e){if(e.has("value")&&(this.setValue(this.value),!("anchorName"in document.documentElement.style))){let r=this.shadowRoot.querySelector("#target"),i=getComputedStyle(r).getPropertyValue("width"),c=Number.parseFloat(i.replace("px",""))/2;r.style.setProperty("margin-left",`-${c}px`)}e.has("_invalid")&&this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:this._invalid}}))}render(){return q`
+      `,await i({roots:[this.shadowRoot],elements:[this.anchorPositioningStyleElement]})}catch(i){console.error(new Error("Error registering the CSS anchor positioning polyfill. The UI will look broken.",{cause:i}))}}this.range.value=(e=this.value)!=null?e:this.max}updated(e){e.has("value")&&this.setValue(this.value),e.has("_invalid")&&this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:this._invalid}}))}render(){return q`
       <div class="w-slider-thumb">
         <label for="range">${this.label}</label>
-        ${"anchorName"in document.documentElement.style?ee:q`<div id="anchor"></div>`}
+        ${"anchorName"in document.documentElement.style?Q:q`<div class="polyfill-range"><div class="polyfill-active-range"></div></div>`}
         <input
           id="range"
           aria-label="${this.ariaLabel}"
-          aria-describedby="${re(this.ariaDescription?"aria-description":void 0)}"
+          aria-describedby="${W(this.ariaDescription?"aria-description":void 0)}"
           class="w-slider-thumb__range"
           type="range"
           .value="${this.value}"
           min="${this.min}"
           max="${this.max}"
           name="${this.name}"
-          step="${re(this.step?this.step:void 0)}"
+          step="${W(this.step?this.step:void 0)}"
           ?disabled="${this.disabled||this.forceDisabled}"
-          @mousedown="${h(this,f,Z)}"
-          @mouseup="${h(this,f,O)}"
-          @touchstart="${h(this,f,Z)}"
-          @touchend="${h(this,f,O)}"
-          @focus="${h(this,f,Z)}"
-          @blur="${h(this,f,O)}"
-          @input="${h(this,f,te)}" />
+          @mousedown="${b(this,w,Z)}"
+          @mouseup="${b(this,w,D)}"
+          @touchstart="${b(this,w,Z)}"
+          @touchend="${b(this,w,D)}"
+          @focus="${b(this,w,Z)}"
+          @blur="${b(this,w,D)}"
+          @input="${b(this,w,ee)}" />
 
         <span class="w-slider-thumb__from-marker">${this.formatter?this.formatter(this.min):this.min} ${this.suffix}</span>
         <span class="w-slider-thumb__to-marker">${this.formatter?this.formatter(this.max):this.max} ${this.suffix}</span>
 
         <w-textfield
           aria-label="${this.ariaLabel}"
-          aria-description="${re(this.ariaDescription)}"
+          aria-description="${W(this.ariaDescription)}"
           class="w-slider-thumb__textfield"
           type="number"
           min="${this.min}"
@@ -2776,16 +2833,19 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
           .formatter=${this.formatter}
           .value="${this.value}"
           ?invalid="${this.forceInvalid||this._invalid}"
-          @input="${h(this,f,te)}">
-          ${this.suffix?q`<w-affix slot="suffix" label="${this.suffix}"></w-affix>`:ee}
+          @input="${b(this,w,ee)}">
+          ${this.suffix?q`<w-affix slot="suffix" label="${this.suffix}"></w-affix>`:Q}
         </w-textfield>
 
-        <div id="target" class="${Fe({"w-slider-thumb__tooltip":!0,"w-slider-thumb__tooltip--visible":this._showTooltip})}">
-          ${this.value?this.formatter?this.formatter(this.value):this.value:0}${this.suffix?q`&nbsp;${this.suffix}`:ee}
-        </div>
+        <w-attention tooltip placement="top" flip distance="24" .show="${this._showTooltip}">
+          <output id="target" class="w-slider-thumb__tooltip-target" slot="target"></output>
+          <span slot="message">
+            ${this.value?this.formatter?this.formatter(this.value):this.value:0}${this.suffix?q`&nbsp;${this.suffix}`:Q}
+          </span>
+        </w-attention>
 
         <!-- aria-description is still not recommended for general use, so make a visually hidden element and refer to it with aria-describedby -->
         <span class="sr-only" id="aria-description">${this.ariaDescription}</span>
       </div>
-    `}};f=new WeakSet,Z=function(){this._showTooltip=!0},O=function(){this._showTooltip=!1},te=function(e){let r=e.currentTarget.tagName==="W-TEXTFIELD";if(e instanceof CustomEvent)return;let i=e.currentTarget.value;if(i==="")return this.required&&(this._invalid=!0),!1;r&&this._invalid&&(this._invalid=!1);let c=Number.parseInt(i),m=Number.parseInt(this.max),x=Number.parseInt(this.min);(c>m||c<x)&&(this._invalid=!0);let E=!1;if(this.slot){let C=getComputedStyle(this);if(this.slot==="from"){let _=C.getPropertyValue("--to");if(c>Number.parseInt(_)){if(r)return this._invalid=!0,!1;E=!0,this.value=_}}else{let _=C.getPropertyValue("--from");if(c<Number.parseInt(_)){if(r)return this._invalid=!0,!1;E=!0,this.value=_}}}return E?(e.preventDefault(),this.range.value=this.value,!1):(this.value=i,!0)},d.shadowRootOptions={...me.shadowRootOptions,delegatesFocus:!0},d.styles=[X,ge,ue],s([M({attribute:"aria-label",reflect:!0})],d.prototype,"ariaLabel",2),s([M({attribute:"aria-description",reflect:!0})],d.prototype,"ariaDescription",2),s([M({reflect:!0})],d.prototype,"label",2),s([M({reflect:!0})],d.prototype,"name",2),s([M({reflect:!0})],d.prototype,"value",2),s([M({type:Boolean,reflect:!0})],d.prototype,"disabled",2),s([k()],d.prototype,"markers",2),s([k()],d.prototype,"required",2),s([k()],d.prototype,"step",2),s([k()],d.prototype,"min",2),s([k()],d.prototype,"max",2),s([k()],d.prototype,"suffix",2),s([k()],d.prototype,"forceDisabled",2),s([k()],d.prototype,"forceInvalid",2),s([k()],d.prototype,"formatter",2),s([ve('input[type="range"]')],d.prototype,"range",2),s([ve("w-textfield")],d.prototype,"textfield",2),s([k()],d.prototype,"_invalid",2),s([k()],d.prototype,"_showTooltip",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",d);export{v as WarpSlider,d as WarpSliderThumb};
+    `}};w=new WeakSet,Z=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},D=function(){this._showTooltip=!1},ee=function(e){let o=e.currentTarget.tagName==="W-TEXTFIELD";if(e instanceof CustomEvent)return;let i=e.currentTarget.value;if(i==="")return this.required&&(this._invalid=!0),!1;this._invalid&&(this._invalid=!1);let t=Number.parseInt(i),v=Number.parseInt(this.max),_=Number.parseInt(this.min);(t>v||t<_)&&(this._invalid=!0);let P=!1;if(this.slot){let z=getComputedStyle(this),F=z.getPropertyValue("--to"),E=z.getPropertyValue("--from");if(o&&(t>Number.parseInt(F)||t<Number.parseInt(E)))return this._invalid=!0,!1;this.slot==="from"?t>Number.parseInt(F)&&(P=!0,this.value=F):t<Number.parseInt(E)&&(P=!0,this.value=E)}return P?(e.preventDefault(),this.range.value=this.value,!1):(this.value=i,this.shadowRoot.querySelector("w-attention").handleDone(),!0)},c.shadowRootOptions={...he.shadowRootOptions,delegatesFocus:!0},c.styles=[R,ce,de],s([M({attribute:"aria-label",reflect:!0})],c.prototype,"ariaLabel",2),s([M({attribute:"aria-description",reflect:!0})],c.prototype,"ariaDescription",2),s([M({reflect:!0})],c.prototype,"label",2),s([M({reflect:!0})],c.prototype,"name",2),s([M({reflect:!0})],c.prototype,"value",2),s([M({type:Boolean,reflect:!0})],c.prototype,"disabled",2),s([x()],c.prototype,"markers",2),s([x()],c.prototype,"required",2),s([x()],c.prototype,"step",2),s([x()],c.prototype,"min",2),s([x()],c.prototype,"max",2),s([x()],c.prototype,"suffix",2),s([x()],c.prototype,"forceDisabled",2),s([x()],c.prototype,"forceInvalid",2),s([x()],c.prototype,"formatter",2),s([be('input[type="range"]')],c.prototype,"range",2),s([be("w-textfield")],c.prototype,"textfield",2),s([x()],c.prototype,"_invalid",2),s([x()],c.prototype,"_showTooltip",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",c);export{u as WarpSlider,c as WarpSliderThumb};
 //# sourceMappingURL=index.js.map