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

package/dist/packages/slider/slider-thumb.js

@@ -1,4 +1,4 @@
-var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var G=s=>{throw TypeError(s)};var d=(s,e,o,t)=>{for(var a=t>1?void 0:t?ne(e,o):e,b=s.length-1,m;b>=0;b--)(m=s[b])&&(a=(t?m(e,o,a):m(a))||a);return t&&a&&ie(e,o,a),a};var se=(s,e,o)=>e.has(s)||G("Cannot "+o);var B=(s,e,o)=>e.has(s)?G("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(s):e.set(s,o);var x=(s,e,o)=>(se(s,e,"access private method"),o);var n=function(s,e,o,t){if(o==="a"&&!t)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?s!==e||!t:!e.has(s))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?t:o==="a"?t.call(s):t?t.value:e.get(s)},h=function(s,e,o,t,a){if(t==="m")throw new TypeError("Private method is not writable");if(t==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?s!==e||!a:!e.has(s))throw new TypeError("Cannot write private member to an object whose class did not declare it");return t==="a"?a.call(s,o):a?a.value=o:e.set(s,o),o};function W(s){var e,o,t,a,b,m,k,F,y,w,X,T,Y,E,j,_,A,S,Z;class ae extends s{constructor(...r){var i,c,p;super(...r),e.add(this),this.internals=this.attachInternals(),o.set(this,!1),t.set(this,!1),a.set(this,!1),b.set(this,void 0),m.set(this,void 0),k.set(this,!0),y.set(this,""),w.set(this,()=>{h(this,a,!0,"f"),h(this,o,!0,"f"),n(this,e,"m",_).call(this)}),X.set(this,()=>{h(this,o,!1,"f"),n(this,e,"m",A).call(this,this.shouldFormValueUpdate()?n(this,y,"f"):""),!this.validity.valid&&n(this,a,"f")&&h(this,t,!0,"f");let f=n(this,e,"m",_).call(this);this.validationMessageCallback&&this.validationMessageCallback(f?this.internals.validationMessage:"")}),T.set(this,()=>{var f;n(this,k,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),h(this,k,!1,"f")),h(this,a,!0,"f"),h(this,t,!0,"f"),n(this,e,"m",_).call(this),(f=this===null||this===void 0?void 0:this.validationMessageCallback)===null||f===void 0||f.call(this,this.showError?this.internals.validationMessage:"")}),Y.set(this,void 0),E.set(this,!1),j.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",n(this,w,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"blur",n(this,X,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",n(this,T,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let r=this.validators.map(p=>p.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...r])]}static getValidator(r){return this.validators.find(i=>i.attribute===r)||null}static getValidators(r){return this.validators.filter(i=>{var c;if(i.attribute===r||!((c=i.attribute)===null||c===void 0)&&c.includes(r))return!0})}get form(){return this.internals.form}get showError(){return n(this,e,"m",_).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(r,i,c){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,r,i,c);let V=this.constructor.getValidators(r);V!=null&&V.length&&this.validationTarget&&this.setValue(n(this,y,"f"))}setValue(r){var i;h(this,t,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),h(this,y,r,"f");let p=this.shouldFormValueUpdate()?r:null;this.internals.setFormValue(p),n(this,e,"m",A).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),n(this,e,"m",_).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(r=>r(n(this,j,"f")))}formResetCallback(){var r,i;h(this,a,!1,"f"),h(this,t,!1,"f"),n(this,e,"m",_).call(this),(r=this.resetFormControl)===null||r===void 0||r.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,n(this,e,"m",_).call(this)?this.validationMessage:"")}}return o=new WeakMap,t=new WeakMap,a=new WeakMap,b=new WeakMap,m=new WeakMap,k=new WeakMap,y=new WeakMap,w=new WeakMap,X=new WeakMap,T=new WeakMap,Y=new WeakMap,E=new WeakMap,j=new WeakMap,e=new WeakSet,F=function(){let r=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return r.querySelectorAll(i)},_=function(){if(this.hasAttribute("disabled"))return!1;let r=n(this,t,"f")||n(this,a,"f")&&!this.validity.valid&&!n(this,o,"f");return r&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),r},A=function(r){let i=this.constructor,c={},p=i.validators,f=[],V=p.some(g=>g.isValid instanceof Promise);n(this,E,"f")||(h(this,j,new Promise(g=>{h(this,Y,g,"f")}),"f"),h(this,E,!0,"f")),n(this,b,"f")&&(n(this,b,"f").abort(),h(this,m,n(this,b,"f"),"f"));let M=new AbortController;h(this,b,M,"f");let P,H=!1;p.length&&(p.forEach(g=>{let R=g.key||"customError",z=g.isValid(this,r,M.signal);z instanceof Promise?(f.push(z),z.then(D=>{D!=null&&(c[R]=!D,P=n(this,e,"m",Z).call(this,g,r),n(this,e,"m",S).call(this,c,P))})):(c[R]=!z,this.validity[R]!==!z&&(H=!0),!z&&!P&&(P=n(this,e,"m",Z).call(this,g,r)))}),Promise.allSettled(f).then(()=>{var g;M!=null&&M.signal.aborted||(h(this,E,!1,"f"),(g=n(this,Y,"f"))===null||g===void 0||g.call(this))}),(H||!V)&&n(this,e,"m",S).call(this,c,P))},S=function(r,i){if(this.validationTarget)this.internals.setValidity(r,i,this.validationTarget),h(this,k,!1,"f");else{if(this.internals.setValidity(r,i),this.internals.validity.valid)return;h(this,k,!0,"f")}},Z=function(r,i){if(this.validityCallback){let c=this.validityCallback(r.key||"customError");if(c)return c}return r.message instanceof Function?r.message(this,i):r.message},ae}import{html as I,LitElement as re,nothing as U}from"lit";import{property as C,query as oe,state as v}from"lit/decorators.js";import{classMap as ce}from"lit/directives/class-map.js";import{ifDefined as q}from"lit/directives/if-defined.js";import{css as J}from"lit";var K=J`
+var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var H=s=>{throw TypeError(s)};var d=(s,e,o,n)=>{for(var t=n>1?void 0:n?ne(e,o):e,b=s.length-1,m;b>=0;b--)(m=s[b])&&(t=(n?m(e,o,t):m(t))||t);return n&&t&&ie(e,o,t),t};var se=(s,e,o)=>e.has(s)||H("Cannot "+o);var B=(s,e,o)=>e.has(s)?H("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(s):e.set(s,o);var f=(s,e,o)=>(se(s,e,"access private method"),o);var i=function(s,e,o,n){if(o==="a"&&!n)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?s!==e||!n:!e.has(s))throw new TypeError("Cannot read private member from an object whose class did not declare it");return o==="m"?n:o==="a"?n.call(s):n?n.value:e.get(s)},h=function(s,e,o,n,t){if(n==="m")throw new TypeError("Private method is not writable");if(n==="a"&&!t)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?s!==e||!t:!e.has(s))throw new TypeError("Cannot write private member to an object whose class did not declare it");return n==="a"?t.call(s,o):t?t.value=o:e.set(s,o),o};function W(s){var e,o,n,t,b,m,x,E,k,_,z,L,j,$,I,y,S,T,Z;class ae extends s{constructor(...r){var a,c,p;super(...r),e.add(this),this.internals=this.attachInternals(),o.set(this,!1),n.set(this,!1),t.set(this,!1),b.set(this,void 0),m.set(this,void 0),x.set(this,!0),k.set(this,""),_.set(this,()=>{h(this,t,!0,"f"),h(this,o,!0,"f"),i(this,e,"m",y).call(this)}),z.set(this,()=>{h(this,o,!1,"f"),i(this,e,"m",S).call(this,this.shouldFormValueUpdate()?i(this,k,"f"):""),!this.validity.valid&&i(this,t,"f")&&h(this,n,!0,"f");let w=i(this,e,"m",y).call(this);this.validationMessageCallback&&this.validationMessageCallback(w?this.internals.validationMessage:"")}),L.set(this,()=>{var w;i(this,x,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),h(this,x,!1,"f")),h(this,t,!0,"f"),h(this,n,!0,"f"),i(this,e,"m",y).call(this),(w=this===null||this===void 0?void 0:this.validationMessageCallback)===null||w===void 0||w.call(this,this.showError?this.internals.validationMessage:"")}),j.set(this,void 0),$.set(this,!1),I.set(this,Promise.resolve()),(a=this.addEventListener)===null||a===void 0||a.call(this,"focus",i(this,_,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"blur",i(this,z,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",i(this,L,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let r=this.validators.map(p=>p.attribute).flat(),a=super.observedAttributes||[];return[...new Set([...a,...r])]}static getValidator(r){return this.validators.find(a=>a.attribute===r)||null}static getValidators(r){return this.validators.filter(a=>{var c;if(a.attribute===r||!((c=a.attribute)===null||c===void 0)&&c.includes(r))return!0})}get form(){return this.internals.form}get showError(){return i(this,e,"m",y).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(r,a,c){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,r,a,c);let M=this.constructor.getValidators(r);M!=null&&M.length&&this.validationTarget&&this.setValue(i(this,k,"f"))}setValue(r){var a;h(this,n,!1,"f"),(a=this.validationMessageCallback)===null||a===void 0||a.call(this,""),h(this,k,r,"f");let p=this.shouldFormValueUpdate()?r:null;this.internals.setFormValue(p),i(this,e,"m",S).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),i(this,e,"m",y).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(r=>r(i(this,I,"f")))}formResetCallback(){var r,a;h(this,t,!1,"f"),h(this,n,!1,"f"),i(this,e,"m",y).call(this),(r=this.resetFormControl)===null||r===void 0||r.call(this),(a=this.validationMessageCallback)===null||a===void 0||a.call(this,i(this,e,"m",y).call(this)?this.validationMessage:"")}}return o=new WeakMap,n=new WeakMap,t=new WeakMap,b=new WeakMap,m=new WeakMap,x=new WeakMap,k=new WeakMap,_=new WeakMap,z=new WeakMap,L=new WeakMap,j=new WeakMap,$=new WeakMap,I=new WeakMap,e=new WeakSet,E=function(){let r=this.getRootNode(),a=`${this.localName}[name="${this.getAttribute("name")}"]`;return r.querySelectorAll(a)},y=function(){if(this.hasAttribute("disabled"))return!1;let r=i(this,n,"f")||i(this,t,"f")&&!this.validity.valid&&!i(this,o,"f");return r&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),r},S=function(r){let a=this.constructor,c={},p=a.validators,w=[],M=p.some(u=>u.isValid instanceof Promise);i(this,$,"f")||(h(this,I,new Promise(u=>{h(this,j,u,"f")}),"f"),h(this,$,!0,"f")),i(this,b,"f")&&(i(this,b,"f").abort(),h(this,m,i(this,b,"f"),"f"));let Y=new AbortController;h(this,b,Y,"f");let P,G=!1;p.length&&(p.forEach(u=>{let D=u.key||"customError",C=u.isValid(this,r,Y.signal);C instanceof Promise?(w.push(C),C.then(R=>{R!=null&&(c[D]=!R,P=i(this,e,"m",Z).call(this,u,r),i(this,e,"m",T).call(this,c,P))})):(c[D]=!C,this.validity[D]!==!C&&(G=!0),!C&&!P&&(P=i(this,e,"m",Z).call(this,u,r)))}),Promise.allSettled(w).then(()=>{var u;Y!=null&&Y.signal.aborted||(h(this,$,!1,"f"),(u=i(this,j,"f"))===null||u===void 0||u.call(this))}),(G||!M)&&i(this,e,"m",T).call(this,c,P))},T=function(r,a){if(this.validationTarget)this.internals.setValidity(r,a,this.validationTarget),h(this,x,!1,"f");else{if(this.internals.setValidity(r,a),this.internals.validity.valid)return;h(this,x,!0,"f")}},Z=function(r,a){if(this.validityCallback){let c=this.validityCallback(r.key||"customError");if(c)return c}return r.message instanceof Function?r.message(this,a):r.message},ae}import{html as X,LitElement as re,nothing as U}from"lit";import{property as F,query as oe,state as v}from"lit/decorators.js";import{ifDefined as q}from"lit/directives/if-defined.js";import{css as J}from"lit";var K=J`
   *,
   :before,
   :after {
@@ -2454,6 +2454,7 @@ var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var G=s=>{th
     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 */
   }
 
@@ -2463,14 +2464,6 @@ var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var G=s=>{th
     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.
@@ -2479,11 +2472,12 @@ var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var G=s=>{th
     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;
   }
@@ -2492,6 +2486,7 @@ var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var G=s=>{th
     anchor-name: --thumb;
 
     appearance: none;
+    cursor: pointer;
     background: var(--w-s-color-background-primary);
     border-radius: 50%;
     border-color: transparent;
@@ -2500,32 +2495,54 @@ var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var G=s=>{th
     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 */
@@ -2554,8 +2571,21 @@ var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var G=s=>{th
     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 {
@@ -2563,58 +2593,67 @@ var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var G=s=>{th
     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));
   }
-`;import{css as de}from"lit";var ee=de`*,: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 te={};var u,N,L,O,l=class extends W(re){constructor(){super(...arguments);B(this,u);this._invalid=!1;this._showTooltip=!1;this.anchorPositioningStyleElement=null}async connectedCallback(){var o;if(super.connectedCallback(),"anchorName"in document.documentElement.style)await this.updateComplete;else{let t=te.url.substring(0,te.url.lastIndexOf("/"));try{let[{default:a}]=await Promise.all([import(`${t}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent=`
+
+  :host([name='to']) .w-slider-thumb__range::-moz-range-thumb {
+    transform: translateX(calc(var(--w-slider-thumb-size) - 1px));
+  }
+`;import{css as de}from"lit";var ee=de`*,: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 te={};var g,N,A,O,l=class extends W(re){constructor(){super(...arguments);B(this,g);this._invalid=!1;this._showTooltip=!1;this.anchorPositioningStyleElement=null}async connectedCallback(){var o;if(super.connectedCallback(),"anchorName"in document.documentElement.style)await this.updateComplete;else{let n=te.url.substring(0,te.url.lastIndexOf("/"));try{let[{default:t}]=await Promise.all([import(`${n}/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;
 
-          position-anchor: --polyfilled-thumb;
-          bottom: calc(anchor(top) + 16px);
-          left: anchor(--polyfilled-thumb right);
+          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);
+
+          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 a({roots:[this.shadowRoot],elements:[this.anchorPositioningStyleElement]})}catch(a){console.error(new Error("Error registering the CSS anchor positioning polyfill. The UI will look broken.",{cause:a}))}}this.range.value=(o=this.value)!=null?o:this.max}updated(o){if(o.has("value")&&(this.setValue(this.value),!("anchorName"in document.documentElement.style))){let t=this.shadowRoot.querySelector("#target"),a=getComputedStyle(t).getPropertyValue("width"),b=Number.parseFloat(a.replace("px",""))/2;t.style.setProperty("margin-left",`-${b}px`)}o.has("_invalid")&&this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:this._invalid}}))}render(){return I`
+      `,await t({roots:[this.shadowRoot],elements:[this.anchorPositioningStyleElement]})}catch(t){console.error(new Error("Error registering the CSS anchor positioning polyfill. The UI will look broken.",{cause:t}))}}this.range.value=(o=this.value)!=null?o:this.max}updated(o){o.has("value")&&this.setValue(this.value),o.has("_invalid")&&this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:this._invalid}}))}render(){return X`
       <div class="w-slider-thumb">
         <label for="range">${this.label}</label>
-        ${"anchorName"in document.documentElement.style?U:I`<div id="anchor"></div>`}
+        ${"anchorName"in document.documentElement.style?U:X`<div class="polyfill-range"><div class="polyfill-active-range"></div></div>`}
         <input
           id="range"
           aria-label="${this.ariaLabel}"
@@ -2627,13 +2666,13 @@ var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var G=s=>{th
           name="${this.name}"
           step="${q(this.step?this.step:void 0)}"
           ?disabled="${this.disabled||this.forceDisabled}"
-          @mousedown="${x(this,u,N)}"
-          @mouseup="${x(this,u,L)}"
-          @touchstart="${x(this,u,N)}"
-          @touchend="${x(this,u,L)}"
-          @focus="${x(this,u,N)}"
-          @blur="${x(this,u,L)}"
-          @input="${x(this,u,O)}" />
+          @mousedown="${f(this,g,N)}"
+          @mouseup="${f(this,g,A)}"
+          @touchstart="${f(this,g,N)}"
+          @touchend="${f(this,g,A)}"
+          @focus="${f(this,g,N)}"
+          @blur="${f(this,g,A)}"
+          @input="${f(this,g,O)}" />
 
         <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>
@@ -2648,16 +2687,19 @@ var ie=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var G=s=>{th
           .formatter=${this.formatter}
           .value="${this.value}"
           ?invalid="${this.forceInvalid||this._invalid}"
-          @input="${x(this,u,O)}">
-          ${this.suffix?I`<w-affix slot="suffix" label="${this.suffix}"></w-affix>`:U}
+          @input="${f(this,g,O)}">
+          ${this.suffix?X`<w-affix slot="suffix" label="${this.suffix}"></w-affix>`:U}
         </w-textfield>
 
-        <div id="target" class="${ce({"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?I`&nbsp;${this.suffix}`:U}
-        </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?X`&nbsp;${this.suffix}`:U}
+          </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>
-    `}};u=new WeakSet,N=function(){this._showTooltip=!0},L=function(){this._showTooltip=!1},O=function(o){let t=o.currentTarget.tagName==="W-TEXTFIELD";if(o instanceof CustomEvent)return;let a=o.currentTarget.value;if(a==="")return this.required&&(this._invalid=!0),!1;t&&this._invalid&&(this._invalid=!1);let b=Number.parseInt(a),m=Number.parseInt(this.max),k=Number.parseInt(this.min);(b>m||b<k)&&(this._invalid=!0);let F=!1;if(this.slot){let y=getComputedStyle(this);if(this.slot==="from"){let w=y.getPropertyValue("--to");if(b>Number.parseInt(w)){if(t)return this._invalid=!0,!1;F=!0,this.value=w}}else{let w=y.getPropertyValue("--from");if(b<Number.parseInt(w)){if(t)return this._invalid=!0,!1;F=!0,this.value=w}}}return F?(o.preventDefault(),this.range.value=this.value,!1):(this.value=a,!0)},l.shadowRootOptions={...re.shadowRootOptions,delegatesFocus:!0},l.styles=[K,ee,Q],d([C({attribute:"aria-label",reflect:!0})],l.prototype,"ariaLabel",2),d([C({attribute:"aria-description",reflect:!0})],l.prototype,"ariaDescription",2),d([C({reflect:!0})],l.prototype,"label",2),d([C({reflect:!0})],l.prototype,"name",2),d([C({reflect:!0})],l.prototype,"value",2),d([C({type:Boolean,reflect:!0})],l.prototype,"disabled",2),d([v()],l.prototype,"markers",2),d([v()],l.prototype,"required",2),d([v()],l.prototype,"step",2),d([v()],l.prototype,"min",2),d([v()],l.prototype,"max",2),d([v()],l.prototype,"suffix",2),d([v()],l.prototype,"forceDisabled",2),d([v()],l.prototype,"forceInvalid",2),d([v()],l.prototype,"formatter",2),d([oe('input[type="range"]')],l.prototype,"range",2),d([oe("w-textfield")],l.prototype,"textfield",2),d([v()],l.prototype,"_invalid",2),d([v()],l.prototype,"_showTooltip",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",l);export{l as WarpSliderThumb};
+    `}};g=new WeakSet,N=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},A=function(){this._showTooltip=!1},O=function(o){let n=o.currentTarget.tagName==="W-TEXTFIELD";if(o instanceof CustomEvent)return;let t=o.currentTarget.value;if(t==="")return this.required&&(this._invalid=!0),!1;this._invalid&&(this._invalid=!1);let b=Number.parseInt(t),m=Number.parseInt(this.max),x=Number.parseInt(this.min);(b>m||b<x)&&(this._invalid=!0);let E=!1;if(this.slot){let k=getComputedStyle(this),_=k.getPropertyValue("--to"),z=k.getPropertyValue("--from");if(n&&(b>Number.parseInt(_)||b<Number.parseInt(z)))return this._invalid=!0,!1;this.slot==="from"?b>Number.parseInt(_)&&(E=!0,this.value=_):b<Number.parseInt(z)&&(E=!0,this.value=z)}return E?(o.preventDefault(),this.range.value=this.value,!1):(this.value=t,this.shadowRoot.querySelector("w-attention").handleDone(),!0)},l.shadowRootOptions={...re.shadowRootOptions,delegatesFocus:!0},l.styles=[K,ee,Q],d([F({attribute:"aria-label",reflect:!0})],l.prototype,"ariaLabel",2),d([F({attribute:"aria-description",reflect:!0})],l.prototype,"ariaDescription",2),d([F({reflect:!0})],l.prototype,"label",2),d([F({reflect:!0})],l.prototype,"name",2),d([F({reflect:!0})],l.prototype,"value",2),d([F({type:Boolean,reflect:!0})],l.prototype,"disabled",2),d([v()],l.prototype,"markers",2),d([v()],l.prototype,"required",2),d([v()],l.prototype,"step",2),d([v()],l.prototype,"min",2),d([v()],l.prototype,"max",2),d([v()],l.prototype,"suffix",2),d([v()],l.prototype,"forceDisabled",2),d([v()],l.prototype,"forceInvalid",2),d([v()],l.prototype,"formatter",2),d([oe('input[type="range"]')],l.prototype,"range",2),d([oe("w-textfield")],l.prototype,"textfield",2),d([v()],l.prototype,"_invalid",2),d([v()],l.prototype,"_showTooltip",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",l);export{l as WarpSliderThumb};
 //# sourceMappingURL=slider-thumb.js.map