@warp-ds/elements 2.4.0-next.4 → 2.4.0-next.5

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

@@ -1,242 +1,2624 @@
-// @warp-css;
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { FormControlMixin } from '@open-wc/form-control';
-import { html, LitElement, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { reset } from '../styles.js';
-import { wSliderThumbStyles } from './styles/w-slider-thumb.styles.js';
-import { styles as unoStyles } from './styles.js';
-import { i18n } from '@lingui/core';
-/**
- * Component to place inside a `<w-slider>`.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
- */
-class WarpSliderThumb extends FormControlMixin(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.invalid = false;
-        /** Set by `<w-slider>` */
-        this.allowValuesOutsideRange = false;
-        /** Set by `<w-slider>` */
-        this.suffix = '';
-        /** @internal */
-        this._showTooltip = false;
-        /** @internal */
-        this._inputHasFocus = false;
-        // capture the initial value using connectedCallback and #initialValue
-        this.#initialValue = null;
-        /**
-         * Reference to the anchor positioning style element used by the polyfill.
-         * @internal
-         */
-        this.anchorPositioningStyleElement = null;
-    }
-    static { this.shadowRootOptions = {
-        ...LitElement.shadowRootOptions,
-        delegatesFocus: true,
-    }; }
-    static { this.styles = [reset, unoStyles, wSliderThumbStyles]; }
-    // capture the initial value using connectedCallback and #initialValue
-    #initialValue;
-    resetFormControl() {
-        this.value = this.#initialValue;
-    }
-    #showTooltip() {
-        this._showTooltip = true;
-        this.shadowRoot.querySelector('w-attention').handleDone();
-    }
-    #hideTooltip() {
-        this._showTooltip = false;
-    }
-    // Synchronizes the range input's value with the form value
-    #syncRangeValue() {
-        if (!this.range)
-            return;
-        if (this.value === '') {
-            this.range.value = this.boundaryValue;
-        }
-        else if (this.value) {
-            this.range.value = this.value;
+var Ue=Object.create;var ie=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var Xe=Object.getPrototypeOf,qe=Object.prototype.hasOwnProperty;var ve=t=>{throw TypeError(t)};var fe=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var Ze=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of He(e))!qe.call(t,a)&&a!==r&&ie(t,a,{get:()=>e[a],enumerable:!(o=me(e,a))||o.enumerable});return t};var Be=(t,e,r)=>(r=t!=null?Ue(Xe(t)):{},Ze(e||!t||!t.__esModule?ie(r,"default",{value:t,enumerable:!0}):r,t));var m=(t,e,r,o)=>{for(var a=o>1?void 0:o?me(e,r):e,n=t.length-1,s;n>=0;n--)(s=t[n])&&(a=(o?s(e,r,a):s(a))||a);return o&&a&&ie(e,r,a),a};var se=(t,e,r)=>e.has(t)||ve("Cannot "+r);var we=(t,e,r)=>(se(t,e,"read from private field"),r?r.call(t):e.get(t)),ne=(t,e,r)=>e.has(t)?ve("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,r),xe=(t,e,r,o)=>(se(t,e,"write to private field"),o?o.call(t,r):e.set(t,r),r),p=(t,e,r)=>(se(t,e,"access private method"),r);var Ee=fe(L=>{"use strict";Object.defineProperty(L,"__esModule",{value:!0});L.errorMessages=L.ErrorType=void 0;var A;(function(t){t.MalformedUnicode="MALFORMED_UNICODE",t.MalformedHexadecimal="MALFORMED_HEXADECIMAL",t.CodePointLimit="CODE_POINT_LIMIT",t.OctalDeprecation="OCTAL_DEPRECATION",t.EndOfString="END_OF_STRING"})(A=L.ErrorType||(L.ErrorType={}));L.errorMessages=new Map([[A.MalformedUnicode,"malformed Unicode character escape sequence"],[A.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[A.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[A.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[A.EndOfString,"malformed escape sequence at end of string"]])});var Ve=fe($=>{"use strict";Object.defineProperty($,"__esModule",{value:!0});$.unraw=$.errorMessages=$.ErrorType=void 0;var _=Ee();Object.defineProperty($,"ErrorType",{enumerable:!0,get:function(){return _.ErrorType}});Object.defineProperty($,"errorMessages",{enumerable:!0,get:function(){return _.errorMessages}});function We(t){return!t.match(/[^a-f0-9]/i)?parseInt(t,16):NaN}function B(t,e,r){let o=We(t);if(Number.isNaN(o)||r!==void 0&&r!==t.length)throw new SyntaxError(_.errorMessages.get(e));return o}function Je(t){let e=B(t,_.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function Me(t,e){let r=B(t,_.ErrorType.MalformedUnicode,4);if(e!==void 0){let o=B(e,_.ErrorType.MalformedUnicode,4);return String.fromCharCode(r,o)}return String.fromCharCode(r)}function Qe(t){return t.charAt(0)==="{"&&t.charAt(t.length-1)==="}"}function er(t){if(!Qe(t))throw new SyntaxError(_.errorMessages.get(_.ErrorType.MalformedUnicode));let e=t.slice(1,-1),r=B(e,_.ErrorType.MalformedUnicode);try{return String.fromCodePoint(r)}catch(o){throw o instanceof RangeError?new SyntaxError(_.errorMessages.get(_.ErrorType.CodePointLimit)):o}}function rr(t,e=!1){if(e)throw new SyntaxError(_.errorMessages.get(_.ErrorType.OctalDeprecation));let r=parseInt(t,8);return String.fromCharCode(r)}var tr=new Map([["b","\b"],["f","\f"],["n",`
+`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function or(t){return tr.get(t)||t}var ar=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function Fe(t,e=!1){return t.replace(ar,function(r,o,a,n,s,i,d,g,k){if(o!==void 0)return"\\";if(a!==void 0)return Je(a);if(n!==void 0)return er(n);if(s!==void 0)return Me(s,i);if(d!==void 0)return Me(d);if(g==="0")return"\0";if(g!==void 0)return rr(g,!e);if(k!==void 0)return or(k);throw new SyntaxError(_.errorMessages.get(_.ErrorType.EndOfString))})}$.unraw=Fe;$.default=Fe});var u=function(t,e,r,o){if(r==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?t!==e||!o:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?o:r==="a"?o.call(t):o?o.value:e.get(t)},w=function(t,e,r,o,a){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?t!==e||!a:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?a.call(t,r):a?a.value=r:e.set(t,r),r};function ke(t){var e,r,o,a,n,s,i,d,g,k,z,F,y,E,M,v,T,Y,te;class Ye extends t{constructor(...l){var h,f,x;super(...l),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),o.set(this,!1),a.set(this,!1),n.set(this,void 0),s.set(this,void 0),i.set(this,!0),g.set(this,""),k.set(this,()=>{w(this,a,!0,"f"),w(this,r,!0,"f"),u(this,e,"m",v).call(this)}),z.set(this,()=>{w(this,r,!1,"f"),u(this,e,"m",T).call(this,this.shouldFormValueUpdate()?u(this,g,"f"):""),!this.validity.valid&&u(this,a,"f")&&w(this,o,!0,"f");let V=u(this,e,"m",v).call(this);this.validationMessageCallback&&this.validationMessageCallback(V?this.internals.validationMessage:"")}),F.set(this,()=>{var V;u(this,i,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),w(this,i,!1,"f")),w(this,a,!0,"f"),w(this,o,!0,"f"),u(this,e,"m",v).call(this),(V=this===null||this===void 0?void 0:this.validationMessageCallback)===null||V===void 0||V.call(this,this.showError?this.internals.validationMessage:"")}),y.set(this,void 0),E.set(this,!1),M.set(this,Promise.resolve()),(h=this.addEventListener)===null||h===void 0||h.call(this,"focus",u(this,k,"f")),(f=this.addEventListener)===null||f===void 0||f.call(this,"blur",u(this,z,"f")),(x=this.addEventListener)===null||x===void 0||x.call(this,"invalid",u(this,F,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let l=this.validators.map(x=>x.attribute).flat(),h=super.observedAttributes||[];return[...new Set([...h,...l])]}static getValidator(l){return this.validators.find(h=>h.attribute===l)||null}static getValidators(l){return this.validators.filter(h=>{var f;if(h.attribute===l||!((f=h.attribute)===null||f===void 0)&&f.includes(l))return!0})}get form(){return this.internals.form}get showError(){return u(this,e,"m",v).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(l,h,f){var x;(x=super.attributeChangedCallback)===null||x===void 0||x.call(this,l,h,f);let H=this.constructor.getValidators(l);H!=null&&H.length&&this.validationTarget&&this.setValue(u(this,g,"f"))}setValue(l){var h;w(this,o,!1,"f"),(h=this.validationMessageCallback)===null||h===void 0||h.call(this,""),w(this,g,l,"f");let x=this.shouldFormValueUpdate()?l:null;this.internals.setFormValue(x),u(this,e,"m",T).call(this,x),this.valueChangedCallback&&this.valueChangedCallback(x),u(this,e,"m",v).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(l=>l(u(this,M,"f")))}formResetCallback(){var l,h;w(this,a,!1,"f"),w(this,o,!1,"f"),u(this,e,"m",v).call(this),(l=this.resetFormControl)===null||l===void 0||l.call(this),(h=this.validationMessageCallback)===null||h===void 0||h.call(this,u(this,e,"m",v).call(this)?this.validationMessage:"")}}return r=new WeakMap,o=new WeakMap,a=new WeakMap,n=new WeakMap,s=new WeakMap,i=new WeakMap,g=new WeakMap,k=new WeakMap,z=new WeakMap,F=new WeakMap,y=new WeakMap,E=new WeakMap,M=new WeakMap,e=new WeakSet,d=function(){let l=this.getRootNode(),h=`${this.localName}[name="${this.getAttribute("name")}"]`;return l.querySelectorAll(h)},v=function(){if(this.hasAttribute("disabled"))return!1;let l=u(this,o,"f")||u(this,a,"f")&&!this.validity.valid&&!u(this,r,"f");return l&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),l},T=function(l){let h=this.constructor,f={},x=h.validators,V=[],H=x.some(C=>C.isValid instanceof Promise);u(this,E,"f")||(w(this,M,new Promise(C=>{w(this,y,C,"f")}),"f"),w(this,E,!0,"f")),u(this,n,"f")&&(u(this,n,"f").abort(),w(this,s,u(this,n,"f"),"f"));let X=new AbortController;w(this,n,X,"f");let q,ge=!1;x.length&&(x.forEach(C=>{let oe=C.key||"customError",R=C.isValid(this,l,X.signal);R instanceof Promise?(V.push(R),R.then(ae=>{ae!=null&&(f[oe]=!ae,q=u(this,e,"m",te).call(this,C,l),u(this,e,"m",Y).call(this,f,q))})):(f[oe]=!R,this.validity[oe]!==!R&&(ge=!0),!R&&!q&&(q=u(this,e,"m",te).call(this,C,l)))}),Promise.allSettled(V).then(()=>{var C;X!=null&&X.signal.aborted||(w(this,E,!1,"f"),(C=u(this,y,"f"))===null||C===void 0||C.call(this))}),(ge||!H)&&u(this,e,"m",Y).call(this,f,q))},Y=function(l,h){if(this.validationTarget)this.internals.setValidity(l,h,this.validationTarget),w(this,i,!1,"f");else{if(this.internals.setValidity(l,h),this.internals.validity.valid)return;w(this,i,!0,"f")}},te=function(l,h){if(this.validityCallback){let f=this.validityCallback(l.key||"customError");if(f)return f}return l.message instanceof Function?l.message(this,h):l.message},Ye}import{html as I,LitElement as Le,nothing as O}from"lit";import{property as P,query as De,state as S}from"lit/decorators.js";import{ifDefined as J}from"lit/directives/if-defined.js";import{css as ye}from"lit";var _e=ye`
+  *,
+  :before,
+  :after {
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 0;
+    border-color: var(--w-s-color-border);
+  }
+  html {
+    font-size: 62.5%;
+  }
+  body {
+    background-color: var(--w-s-color-background);
+    min-height: 100%;
+    margin: 0;
+    overflow-y: scroll;
+  }
+  body,
+  :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    -webkit-tap-highlight-color: transparent;
+    font-family: var(--w-font-family);
+    font-size: var(--w-font-size-m);
+    line-height: var(--w-line-height-m);
+    color: var(--w-s-color-text);
+  }
+  hr {
+    color: inherit;
+    border-top-width: 1px;
+    height: 0;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: 700;
+  }
+  a {
+    cursor: pointer;
+    color: var(--w-s-color-text-link);
+    text-decoration: none;
+  }
+  a:hover,
+  a:focus,
+  a:active {
+    text-decoration: underline;
+  }
+  a:focus-visible {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: 1px;
+  }
+  b,
+  strong {
+    font-weight: 700;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family:
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      Liberation Mono,
+      Courier New,
+      monospace;
+    font-size: 1em;
+  }
+  sub,
+  sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+  }
+  button,
+  select {
+    text-transform: none;
+  }
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+  summary {
+    display: list-item;
+  }
+  blockquote,
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  figure,
+  p,
+  pre {
+    margin: 0;
+  }
+  fieldset {
+    margin: 0;
+    padding: 0;
+  }
+  legend {
+    padding: 0;
+  }
+  ol,
+  ul,
+  menu {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  textarea {
+    resize: vertical;
+  }
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1;
+    color: var(--w-s-color-text-placeholder);
+  }
+  button,
+  [role='button'] {
+    cursor: pointer;
+  }
+  :disabled {
+    cursor: default;
+  }
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    vertical-align: middle;
+    display: block;
+  }
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+  h1 {
+    font-size: var(--w-font-size-xxl);
+    line-height: var(--w-line-height-xxl);
+  }
+  h2 {
+    font-size: var(--w-font-size-xl);
+    line-height: var(--w-line-height-xl);
+  }
+  h3 {
+    font-size: var(--w-font-size-l);
+    line-height: var(--w-line-height-l);
+  }
+  h4 {
+    font-size: var(--w-font-size-m);
+    line-height: var(--w-line-height-m);
+  }
+  h5 {
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+  }
+  dt,
+  dd {
+    margin: 0 16px;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  ul,
+  ol,
+  dl,
+  p,
+  blockquote {
+    margin: 0 0 8px;
+  }
+  [hidden] {
+    display: none !important;
+  }
+  [tabindex='-1']:focus:not(:focus-visible) {
+    outline: none;
+  }
+  legend {
+    float: left;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    display: table;
+  }
+  legend + * {
+    clear: both;
+  }
+  fieldset {
+    border: 0;
+    min-width: 0;
+    margin: 0;
+    padding: 0.01em 0 0;
+  }
+  body:not(:-moz-handler-blocked) fieldset {
+    display: table-cell;
+  }
+  svg {
+    pointer-events: none;
+  }
+`,xr=ye`*, :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
         }
-    }
-    #handleValidity(error) {
-        this.dispatchEvent(new CustomEvent('slidervalidity', {
-            bubbles: true,
-            detail: { invalid: error, slot: this.slot },
-        }));
-    }
-    async updateFieldAfterValidation() {
-        const input = this.shadowRoot.querySelector('w-textfield');
-        await this.#handleValueChange(input.value, true);
-    }
-    async #handleValueChange(value, isFromTextInput) {
-        let valueNum = Number.parseInt(value);
-        if (this.allowValuesOutsideRange && !isFromTextInput && this.step) {
-            const valueIsCloseToSliderEdge = (this.slot === 'to' && valueNum >= Number(this.max) - 1) ||
-                (this.slot === 'from' && valueNum <= Number(this.min) + 1);
-            if (!valueIsCloseToSliderEdge) {
-                const multiplier = 1 / this.step;
-                valueNum = Math.round(valueNum * multiplier) / multiplier;
-                value = valueNum.toString();
+
+            .h4, .t4 {
+                font-weight: 700;
+                font-size: var(--w-font-size-m);
+                line-height: var(--w-line-height-m)
+            }
+
+            .t3 {
+                font-weight: 700;
+                font-size: var(--w-font-size-l);
+                line-height: var(--w-line-height-l)
+            }
+
+            @media (min-width: 480px) {
+                .sm\\:h3 {
+                    font-weight: 700;
+                    font-size: var(--w-font-size-l);
+                    line-height: var(--w-line-height-l)
+                }
+            }
+
+            .text-center {
+                text-align: center
+            }
+
+            .before\\:text-center:before {
+                text-align: center
+            }
+
+            .text-left {
+                text-align: left
+            }
+
+            .text-right {
+                text-align: right
+            }
+
+            .align-middle {
+                vertical-align: middle
+            }
+
+            .animate-inprogress {
+                background-image: linear-gradient(135deg, rgba(0, 0, 0, .05) 25%, transparent 0, transparent 50%, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .05) 75%, transparent 0, transparent) !important;
+                background-size: 30px 30px;
+                animation: animate-inprogress 3s linear infinite
+            }
+
+            @keyframes animate-inprogress {
+                0% {
+                    background-position: 0 0
+                }
+                to {
+                    background-position: 60px 0
+                }
+            }
+
+            .\\[--w-modal-max-height\\:80\\%\\] {
+                --w-modal-max-height: 80%
+            }
+
+            .\\[--w-modal-width\\:640px\\] {
+                --w-modal-width: 640px
+            }
+
+            .focus\\:\\[--w-outline-offset\\:-2px\\]:focus {
+                --w-outline-offset: -2px
+            }
+
+            .backdrop-blur {
+                -webkit-backdrop-filter: blur(4px);
+                backdrop-filter: blur(4px)
+            }
+
+            .peer:checked ~ .peer-checked\\:before\\:bg-center:before {
+                background-position: center
+            }
+
+            .hover\\:bg-clip-padding:hover {
+                -webkit-background-clip: padding-box;
+                background-clip: padding-box
+            }
+
+            .bg-transparent, .group\\/steph:first-child .group-first\\/steph\\:bg-transparent, .group\\/steph:last-child .group-last\\/steph\\:bg-transparent {
+                background-color: transparent
+            }
+
+            .bg-\\[--w-black\\/25\\] {
+                background-color: rgba(var(--w-rgb-black), .25)
+            }
+
+            .bg-\\[--w-black\\/70\\], .bg-\\[var\\(--w-black\\)\\/70\\] {
+                background-color: rgba(var(--w-rgb-black), .7)
+            }
+
+            .bg-\\[--w-color-badge-info-background\\] {
+                background-color: var(--w-color-badge-info-background)
+            }
+
+            .bg-\\[--w-color-badge-negative-background\\] {
+                background-color: var(--w-color-badge-negative-background)
+            }
+
+            .bg-\\[--w-color-badge-neutral-background\\] {
+                background-color: var(--w-color-badge-neutral-background)
+            }
+
+            .bg-\\[--w-color-badge-positive-background\\] {
+                background-color: var(--w-color-badge-positive-background)
+            }
+
+            .bg-\\[--w-color-badge-sponsored-background\\] {
+                background-color: var(--w-color-badge-sponsored-background)
+            }
+
+            .bg-\\[--w-color-badge-warning-background\\] {
+                background-color: var(--w-color-badge-warning-background)
+            }
+
+            .bg-\\[--w-color-button-primary-background\\] {
+                background-color: var(--w-color-button-primary-background)
+            }
+
+            .bg-\\[--w-color-buttongroup-utility-background-selected\\] {
+                background-color: var(--w-color-buttongroup-utility-background-selected)
+            }
+
+            .bg-\\[--w-color-callout-background\\] {
+                background-color: var(--w-color-callout-background)
+            }
+
+            .bg-\\[--w-color-pill-suggestion-background\\] {
+                background-color: var(--w-color-pill-suggestion-background)
+            }
+
+            .bg-\\[--w-color-switch-track-background\\] {
+                background-color: var(--w-color-switch-track-background)
+            }
+
+            .bg-\\[--w-s-color-surface-elevated-100\\] {
+                background-color: var(--w-s-color-surface-elevated-100)
+            }
+
+            .bg-\\[--w-s-color-surface-elevated-300\\] {
+                background-color: var(--w-s-color-surface-elevated-300)
+            }
+
+            .bg-\\[--w-s-icon-selected\\] {
+                background-color: var(--w-s-icon-selected)
+            }
+
+            .group:hover .group-hover\\:bg-\\[--w-color-switch-track-background-hover\\] {
+                background-color: var(--w-color-switch-track-background-hover)
+            }
+
+            .hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover {
+                background-color: var(--w-color-button-pill-background-hover)
+            }
+
+            .hover\\:bg-\\[--w-color-button-primary-background-hover\\]:hover {
+                background-color: var(--w-color-button-primary-background-hover)
+            }
+
+            .hover\\:bg-\\[--w-color-buttongroup-utility-background-hover\\]:hover {
+                background-color: var(--w-color-buttongroup-utility-background-hover)
+            }
+
+            .hover\\:bg-\\[--w-color-pill-suggestion-background-hover\\]:hover {
+                background-color: var(--w-color-pill-suggestion-background-hover)
+            }
+
+            .hover\\:bg-\\[--w-s-icon-subtle\\]:hover {
+                background-color: var(--w-s-icon-subtle)
+            }
+
+            .hover\\:bg-\\[var\\(--w-black\\)\\/85\\]:hover {
+                background-color: rgba(var(--w-rgb-black), .85)
+            }
+
+            .active\\:bg-\\[--w-color-button-pill-background-active\\]:active {
+                background-color: var(--w-color-button-pill-background-active)
+            }
+
+            .active\\:bg-\\[--w-color-button-primary-background-active\\]:active {
+                background-color: var(--w-color-button-primary-background-active)
+            }
+
+            .active\\:bg-\\[--w-color-buttongroup-utility-background-selected\\]:active {
+                background-color: var(--w-color-buttongroup-utility-background-selected)
+            }
+
+            .active\\:bg-\\[--w-color-pill-suggestion-background-active\\]:active {
+                background-color: var(--w-color-pill-suggestion-background-active)
+            }
+
+            .active\\:bg-\\[var\\(--w-black\\)\\]:active {
+                background-color: var(--w-black)
+            }
+
+            .peer:checked ~ .peer-checked\\:before\\:bg-\\[url\\(var\\(--w-icon-toggle-checked\\)\\)\\]:before {
+                background-image: var(--w-icon-toggle-checked)
+            }
+
+            .appearance-none {
+                -moz-appearance: none;
+                appearance: none;
+                -webkit-appearance: none
+            }
+
+            .will-change-height {
+                will-change: height
+            }
+
+            .border, .border-1 {
+                border-width: 1px
+            }
+
+            .border-b {
+                border-bottom-width: 1px
+            }
+
+            .before\\:border:before {
+                border-width: 1px
+            }
+
+            .border-0 {
+                border-width: 0
+            }
+
+            .border-2 {
+                border-width: 2px
+            }
+
+            .border-b-0 {
+                border-bottom-width: 0
+            }
+
+            .border-b-4 {
+                border-bottom-width: 4px
+            }
+
+            .border-l-4 {
+                border-left-width: 4px
+            }
+
+            .border-r-0, .group:not(:last-of-type) .group-not-last-of-type\\:border-r-0 {
+                border-right-width: 0
+            }
+
+            .peer:checked ~ .peer-checked\\:before\\:border-\\[6\\]:before {
+                border-width: .6rem
+            }
+
+            .border-transparent {
+                border-color: transparent
+            }
+
+            .border-\\[--w-color-buttongroup-utility-border\\] {
+                border-color: var(--w-color-buttongroup-utility-border)
+            }
+
+            .border-\\[--w-color-callout-border\\] {
+                border-color: var(--w-color-callout-border)
+            }
+
+            .border-\\[--w-s-color-background-inverted\\] {
+                border-color: var(--w-s-color-background-inverted)
+            }
+
+            .border-\\[--w-s-color-surface-elevated-300\\] {
+                border-color: var(--w-s-color-surface-elevated-300)
+            }
+
+            .active\\:border-\\[--w-color-buttongroup-utility-border-selected\\]:active {
+                border-color: var(--w-color-buttongroup-utility-border-selected)
+            }
+
+            .divide-x > * + * {
+                --w-divide-x-reverse: 0;
+                border-left-width: calc(1px * calc(1 - var(--w-divide-x-reverse)));
+                border-right-width: calc(1px * var(--w-divide-x-reverse))
+            }
+
+            .divide-y > * + * {
+                --w-divide-y-reverse: 0;
+                border-top-width: calc(1px * calc(1 - var(--w-divide-y-reverse)));
+                border-bottom-width: calc(1px * var(--w-divide-y-reverse))
+            }
+
+            .rounded-4 {
+                border-radius: 4px
+            }
+
+            .rounded-8 {
+                border-radius: 8px
+            }
+
+            .rounded-full {
+                border-radius: 9999px
+            }
+
+            .before\\:rounded-2:before {
+                border-radius: 2px
+            }
+
+            .before\\:rounded-full:before {
+                border-radius: 9999px
+            }
+
+            .rounded-b-0 {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0
+            }
+
+            .rounded-bl-0 {
+                border-bottom-left-radius: 0
+            }
+
+            .rounded-br-0 {
+                border-bottom-right-radius: 0
+            }
+
+            .rounded-l-0 {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0
+            }
+
+            .rounded-l-full {
+                border-top-left-radius: 9999px;
+                border-bottom-left-radius: 9999px
+            }
+
+            .rounded-r-0 {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0
+            }
+
+            .rounded-r-full {
+                border-top-right-radius: 9999px;
+                border-bottom-right-radius: 9999px
+            }
+
+            .rounded-tl-0 {
+                border-top-left-radius: 0
+            }
+
+            .rounded-tl-4 {
+                border-top-left-radius: 4px
+            }
+
+            .rounded-tr-0 {
+                border-top-right-radius: 0
+            }
+
+            .group:first-of-type .group-first-of-type\\:rounded-bl-8 {
+                border-bottom-left-radius: 8px
+            }
+
+            .group:first-of-type .group-first-of-type\\:rounded-tl-8 {
+                border-top-left-radius: 8px
+            }
+
+            .first\\:rounded-lb-4:first-child {
+                border-bottom-left-radius: 4px
+            }
+
+            .first\\:rounded-lt-4:first-child {
+                border-top-left-radius: 4px
+            }
+
+            .first\\:rounded-rt-4:first-child {
+                border-top-right-radius: 4px
+            }
+
+            .group:last-of-type .group-last-of-type\\:rounded-br-8 {
+                border-bottom-right-radius: 8px
+            }
+
+            .group:last-of-type .group-last-of-type\\:rounded-tr-8 {
+                border-top-right-radius: 8px
+            }
+
+            .last\\:rounded-lb-4:last-child {
+                border-bottom-left-radius: 4px
+            }
+
+            .last\\:rounded-rb-4:last-child {
+                border-bottom-right-radius: 4px
+            }
+
+            .last\\:rounded-rt-4:last-child {
+                border-top-right-radius: 4px
+            }
+
+            .caret-current {
+                caret-color: currentColor
+            }
+
+            .opacity-25 {
+                opacity: 25%
+            }
+
+            .block {
+                display: block
+            }
+
+            .before\\:block:before {
+                display: block
+            }
+
+            .inline-block {
+                display: inline-block
+            }
+
+            .inline {
+                display: inline
+            }
+
+            .flex, .open\\:flex[open] {
+                display: flex
+            }
+
+            .inline-flex {
+                display: inline-flex
+            }
+
+            .grid {
+                display: grid
+            }
+
+            .inline-grid {
+                display: inline-grid
+            }
+
+            .hidden, .group\\/stepv:last-child .group-last\\/stepv\\:hidden {
+                display: none
+            }
+
+            .before\\:hidden:before {
+                display: none
+            }
+
+            .hover\\:underline:hover {
+                text-decoration-line: underline
+            }
+
+            .focus\\:underline:focus {
+                text-decoration-line: underline
+            }
+
+            .focus-visible\\:underline:focus-visible {
+                text-decoration-line: underline
+            }
+
+            .active\\:underline:active {
+                text-decoration-line: underline
+            }
+
+            .hover\\:no-underline:hover {
+                text-decoration: none
+            }
+
+            .focus\\:no-underline:focus {
+                text-decoration: none
+            }
+
+            .active\\:no-underline:active {
+                text-decoration: none
+            }
+
+            .flex-1 {
+                flex: 1 1 0%
+            }
+
+            .shrink {
+                flex-shrink: 1
+            }
+
+            .shrink-0 {
+                flex-shrink: 0
+            }
+
+            .shrink-0\\! {
+                flex-shrink: 0 !important
+            }
+
+            .grow, .grow-1 {
+                flex-grow: 1
+            }
+
+            .basis-auto {
+                flex-basis: auto
+            }
+
+            .flex-col {
+                flex-direction: column
+            }
+
+            .focus-within\\:focusable:focus-within {
+                outline: 2px solid var(--w-s-color-border-focus);
+                outline-offset: var(--w-outline-offset, 1px)
+            }
+
+            .focusable:focus, .focusable:focus-visible {
+                outline: 2px solid var(--w-s-color-border-focus);
+                outline-offset: var(--w-outline-offset, 1px)
+            }
+
+            .focusable:not(:focus-visible) {
+                outline: none
+            }
+
+            .peer:focus ~ .peer-focus\\:focusable, .peer:focus-visible ~ .peer-focus\\:focusable {
+                outline: 2px solid var(--w-s-color-border-focus);
+                outline-offset: var(--w-outline-offset, 1px)
+            }
+
+            .peer:not(:focus-visible) ~ .peer-focus\\:focusable {
+                outline: none
+            }
+
+            .focusable-inset {
+                --w-outline-offset: -3px
+            }
+
+            .gap-12 {
+                gap: 1.2rem
+            }
+
+            .gap-8 {
+                gap: .8rem
+            }
+
+            .gap-x-16 {
+                column-gap: 1.6rem
+            }
+
+            .gap-y-16 {
+                row-gap: 1.6rem
+            }
+
+            .row-span-2 {
+                grid-row: span 2/span 2
+            }
+
+            .col-span-2 {
+                grid-column: span 2/span 2
+            }
+
+            .col-span-3 {
+                grid-column: span 3/span 3
+            }
+
+            .row-start-1 {
+                grid-row-start: 1
+            }
+
+            .row-start-2 {
+                grid-row-start: 2
+            }
+
+            .col-start-2 {
+                grid-column-start: 2
+            }
+
+            .auto-rows-auto {
+                grid-auto-rows: auto
+            }
+
+            .grid-flow-col {
+                grid-auto-flow: column
+            }
+
+            .grid-rows-\\[20px_auto\\] {
+                grid-template-rows:20px auto
+            }
+
+            .grid-rows-\\[auto_20px\\] {
+                grid-template-rows:auto 20px
+            }
+
+            .grid-cols-\\[1fr_20px_1fr\\] {
+                grid-template-columns:1fr 20px 1fr
+            }
+
+            .grid-cols-\\[1fr_20px\\] {
+                grid-template-columns:1fr 20px
+            }
+
+            .grid-cols-\\[20px_1fr\\] {
+                grid-template-columns:20px 1fr
+            }
+
+            .grid-cols-\\[auto_1fr_auto\\] {
+                grid-template-columns:auto 1fr auto
+            }
+
+            .grid-cols-1 {
+                grid-template-columns:repeat(1, minmax(0, 1fr))
+            }
+
+            .grid-cols-2 {
+                grid-template-columns:repeat(2, minmax(0, 1fr))
+            }
+
+            .grid-cols-3 {
+                grid-template-columns:repeat(3, minmax(0, 1fr))
+            }
+
+            .grid-cols-4 {
+                grid-template-columns:repeat(4, minmax(0, 1fr))
+            }
+
+            .grid-cols-5 {
+                grid-template-columns:repeat(5, minmax(0, 1fr))
+            }
+
+            .grid-cols-6 {
+                grid-template-columns:repeat(6, minmax(0, 1fr))
+            }
+
+            .grid-cols-7 {
+                grid-template-columns:repeat(7, minmax(0, 1fr))
+            }
+
+            .grid-cols-8 {
+                grid-template-columns:repeat(8, minmax(0, 1fr))
+            }
+
+            .grid-cols-9 {
+                grid-template-columns:repeat(9, minmax(0, 1fr))
+            }
+
+            .overflow-hidden {
+                overflow: hidden
+            }
+
+            .overflow-x-hidden {
+                overflow-x: hidden
+            }
+
+            .overflow-y-auto {
+                overflow-y: auto
+            }
+
+            .list-none {
+                list-style-type: none
+            }
+
+            .outline-\\[--w-s-color-border-negative\\]\\! {
+                outline-color: var(--w-s-color-border-negative) !important
+            }
+
+            .outline-none {
+                outline: 2px solid transparent;
+                outline-offset: 2px
+            }
+
+            .focus\\:outline-none:focus {
+                outline: 2px solid transparent;
+                outline-offset: 2px
+            }
+
+            .items-start {
+                align-items: flex-start
+            }
+
+            .items-end {
+                align-items: flex-end
+            }
+
+            .items-center {
+                align-items: center
+            }
+
+            .self-center {
+                align-self: center
+            }
+
+            .inset-0 {
+                top: 0rem;
+                right: 0rem;
+                bottom: 0rem;
+                left: 0rem
+            }
+
+            .-bottom-0 {
+                bottom: -0rem
+            }
+
+            .bottom-0 {
+                bottom: 0rem
+            }
+
+            .bottom-10 {
+                bottom: 1rem
+            }
+
+            .bottom-16 {
+                bottom: 1.6rem
+            }
+
+            .left-0 {
+                left: 0rem
+            }
+
+            .left-4 {
+                left: .4rem
+            }
+
+            .right-0 {
+                right: 0rem
+            }
+
+            .right-8 {
+                right: .8rem
+            }
+
+            .top-\\[1\\.92rem\\] {
+                top: 1.92rem
+            }
+
+            .top-0 {
+                top: 0rem
+            }
+
+            .top-20 {
+                top: 2rem
+            }
+
+            .top-4 {
+                top: .4rem
+            }
+
+            .top-8 {
+                top: .8rem
+            }
+
+            .before\\:bottom-0:before {
+                bottom: 0rem
+            }
+
+            .before\\:left-0:before {
+                left: 0rem
+            }
+
+            .before\\:right-0:before {
+                right: 0rem
+            }
+
+            .before\\:top-2:before {
+                top: .2rem
+            }
+
+            .-bottom-\\[8px\\] {
+                bottom: -8px
+            }
+
+            .-left-\\[8px\\] {
+                left: -8px
+            }
+
+            .-right-\\[8px\\] {
+                right: -8px
+            }
+
+            .-top-\\[8px\\] {
+                top: -8px
+            }
+
+            .top-\\[19px\\] {
+                top: 19px
+            }
+
+            .top-\\[30\\%\\] {
+                top: 30%
+            }
+
+            .justify-end {
+                justify-content: flex-end
+            }
+
+            .justify-center {
+                justify-content: center
+            }
+
+            .justify-between {
+                justify-content: space-between
+            }
+
+            .justify-items-center {
+                justify-items: center
+            }
+
+            .justify-self-start {
+                justify-self: start
+            }
+
+            .justify-self-end {
+                justify-self: end
+            }
+
+            .justify-self-center {
+                justify-self: center
+            }
+
+            .absolute {
+                position: absolute
+            }
+
+            .fixed {
+                position: fixed
+            }
+
+            .relative {
+                position: relative
+            }
+
+            .open\\:fixed[open] {
+                position: fixed
+            }
+
+            .before\\:absolute:before {
+                position: absolute
+            }
+
+            .z-10, .peer:checked ~ .peer-checked\\:z-10 {
+                z-index: 10
+            }
+
+            .z-30 {
+                z-index: 30
+            }
+
+            .z-50 {
+                z-index: 50
+            }
+
+            .hover\\:z-30:hover {
+                z-index: 30
+            }
+
+            .\\!s-bg-selected {
+                background-color: var(--w-s-color-background-selected) !important
+            }
+
+            .s-bg {
+                background-color: var(--w-s-color-background)
+            }
+
+            .s-bg-disabled {
+                background-color: var(--w-s-color-background-disabled)
+            }
+
+            .s-bg-disabled-subtle {
+                background-color: var(--w-s-color-background-disabled-subtle)
+            }
+
+            .s-bg-info-subtle {
+                background-color: var(--w-s-color-background-info-subtle)
+            }
+
+            .s-bg-inverted {
+                background-color: var(--w-s-color-background-inverted)
+            }
+
+            .s-bg-negative {
+                background-color: var(--w-s-color-background-negative)
+            }
+
+            .s-bg-negative-subtle {
+                background-color: var(--w-s-color-background-negative-subtle)
+            }
+
+            .s-bg-positive-subtle {
+                background-color: var(--w-s-color-background-positive-subtle)
+            }
+
+            .s-bg-primary, .peer:checked ~ .peer-checked\\:s-bg-primary {
+                background-color: var(--w-s-color-background-primary)
+            }
+
+            .s-bg-selected {
+                background-color: var(--w-s-color-background-selected)
+            }
+
+            .s-bg-subtle {
+                background-color: var(--w-s-color-background-subtle)
+            }
+
+            .s-bg-warning-subtle {
+                background-color: var(--w-s-color-background-warning-subtle)
+            }
+
+            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-bg-negative-hover:before {
+                background-color: var(--w-s-color-background-negative-hover)
+            }
+
+            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-bg-primary-hover:before {
+                background-color: var(--w-s-color-background-primary-hover)
+            }
+
+            .peer:checked ~ .peer-checked\\:before\\:s-bg-disabled:before {
+                background-color: var(--w-s-color-background-disabled)
+            }
+
+            .peer:checked ~ .peer-checked\\:before\\:s-bg-negative:before {
+                background-color: var(--w-s-color-background-negative)
+            }
+
+            .peer:checked ~ .peer-checked\\:before\\:s-bg-primary:before {
+                background-color: var(--w-s-color-background-primary)
+            }
+
+            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-bg-disabled:before {
+                background-color: var(--w-s-color-background-disabled)
+            }
+
+            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-bg-negative:before {
+                background-color: var(--w-s-color-background-negative)
+            }
+
+            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-bg-primary:before {
+                background-color: var(--w-s-color-background-primary)
+            }
+
+            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-bg-negative-hover:hover:before {
+                background-color: var(--w-s-color-background-negative-hover)
+            }
+
+            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-bg-primary-hover:hover:before {
+                background-color: var(--w-s-color-background-primary-hover)
+            }
+
+            .\\!hover\\:s-bg-selected-hover:hover {
+                background-color: var(--w-s-color-background-selected-hover) !important
+            }
+
+            .group:hover .group-hover\\:s-bg-primary-hover {
+                background-color: var(--w-s-color-background-primary-hover)
+            }
+
+            .hover\\:before\\:s-bg-hover:hover:before {
+                background-color: var(--w-s-color-background-hover)
+            }
+
+            .hover\\:before\\:s-bg-negative-subtle-hover:hover:before {
+                background-color: var(--w-s-color-background-negative-subtle-hover)
+            }
+
+            .hover\\:s-bg-hover:hover {
+                background-color: var(--w-s-color-background-hover)
+            }
+
+            .hover\\:s-bg-negative-hover:hover {
+                background-color: var(--w-s-color-background-negative-hover)
+            }
+
+            .hover\\:s-bg-negative-subtle-hover:hover {
+                background-color: var(--w-s-color-background-negative-subtle-hover)
+            }
+
+            .hover\\:s-bg-primary-hover:hover {
+                background-color: var(--w-s-color-background-primary-hover)
+            }
+
+            .hover\\:s-bg-selected-hover:hover {
+                background-color: var(--w-s-color-background-selected-hover)
+            }
+
+            .peer:hover:not(:checked) ~ .peer-hover\\:peer-not-checked\\:s-bg-hover {
+                background-color: var(--w-s-color-background-hover)
+            }
+
+            .peer:hover ~ .peer-hover\\:before\\:s-bg-hover:before {
+                background-color: var(--w-s-color-background-hover)
+            }
+
+            .peer:hover ~ .peer-hover\\:before\\:s-bg-negative-subtle:before {
+                background-color: var(--w-s-color-background-negative-subtle)
+            }
+
+            .focus\\:s-bg-primary-hover:focus {
+                background-color: var(--w-s-color-background-primary-hover)
+            }
+
+            .\\!active\\:s-bg-selected-active:active {
+                background-color: var(--w-s-color-background-selected-active) !important
+            }
+
+            .active\\:s-bg-active:active {
+                background-color: var(--w-s-color-background-active)
+            }
+
+            .active\\:s-bg-negative-active:active {
+                background-color: var(--w-s-color-background-negative-active)
+            }
+
+            .active\\:s-bg-negative-subtle-active:active {
+                background-color: var(--w-s-color-background-negative-subtle-active)
+            }
+
+            .active\\:s-bg-primary-active:active {
+                background-color: var(--w-s-color-background-primary-active)
+            }
+
+            .active\\:s-bg-selected-active:active {
+                background-color: var(--w-s-color-background-selected-active)
+            }
+
+            .before\\:s-bg-disabled-subtle:before {
+                background-color: var(--w-s-color-background-disabled-subtle)
+            }
+
+            .before\\:s-bg:before {
+                background-color: var(--w-s-color-background)
+            }
+
+            .s-text {
+                color: var(--w-s-color-text)
+            }
+
+            .s-text-disabled {
+                color: var(--w-s-color-text-disabled)
+            }
+
+            .s-text-inverted, .peer:checked ~ .peer-checked\\:s-text-inverted {
+                color: var(--w-s-color-text-inverted)
+            }
+
+            .s-text-inverted-static {
+                color: var(--w-s-color-text-inverted-static)
+            }
+
+            .s-text-link {
+                color: var(--w-s-color-text-link)
+            }
+
+            .s-text-negative {
+                color: var(--w-s-color-text-negative)
+            }
+
+            .s-text-subtle {
+                color: var(--w-s-color-text-subtle)
+            }
+
+            .hover\\:s-text-link:hover {
+                color: var(--w-s-color-text-link)
+            }
+
+            .active\\:s-text:active {
+                color: var(--w-s-color-text)
+            }
+
+            .placeholder\\:s-text-placeholder::placeholder {
+                color: var(--w-s-color-text-placeholder)
+            }
+
+            .s-icon {
+                color: var(--w-s-color-icon)
+            }
+
+            .s-icon-info {
+                color: var(--w-s-color-icon-info)
+            }
+
+            .s-icon-inverted {
+                color: var(--w-s-color-icon-inverted)
+            }
+
+            .s-icon-negative {
+                color: var(--w-s-color-icon-negative)
+            }
+
+            .s-icon-positive {
+                color: var(--w-s-color-icon-positive)
+            }
+
+            .s-icon-warning {
+                color: var(--w-s-color-icon-warning)
+            }
+
+            .hover\\:s-icon-hover:hover {
+                color: var(--w-s-color-icon-hover)
+            }
+
+            .active\\:s-icon-active:active {
+                color: var(--w-s-color-icon-active)
+            }
+
+            .before\\:s-icon-inverted:before {
+                color: var(--w-s-color-icon-inverted)
+            }
+
+            .s-border {
+                border-color: var(--w-s-color-border)
+            }
+
+            .s-border-disabled {
+                border-color: var(--w-s-color-border-disabled)
+            }
+
+            .s-border-info-subtle {
+                border-color: var(--w-s-color-border-info-subtle)
+            }
+
+            .s-border-l-info {
+                border-left-color: var(--w-s-color-border-info)
+            }
+
+            .s-border-l-negative {
+                border-left-color: var(--w-s-color-border-negative)
+            }
+
+            .s-border-l-positive {
+                border-left-color: var(--w-s-color-border-positive)
+            }
+
+            .s-border-l-warning {
+                border-left-color: var(--w-s-color-border-warning)
+            }
+
+            .s-border-negative {
+                border-color: var(--w-s-color-border-negative)
+            }
+
+            .s-border-negative-subtle {
+                border-color: var(--w-s-color-border-negative-subtle)
+            }
+
+            .s-border-positive-subtle {
+                border-color: var(--w-s-color-border-positive-subtle)
+            }
+
+            .s-border-primary, .peer:checked ~ .peer-checked\\:s-border-primary {
+                border-color: var(--w-s-color-border-primary)
+            }
+
+            .s-border-selected {
+                border-color: var(--w-s-color-border-selected)
+            }
+
+            .s-border-warning-subtle {
+                border-color: var(--w-s-color-border-warning-subtle)
+            }
+
+            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-border-negative-hover:before {
+                border-color: var(--w-s-color-border-negative-hover)
+            }
+
+            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-border-primary-hover:before {
+                border-color: var(--w-s-color-border-primary-hover)
+            }
+
+            .peer:checked:hover ~ .peer-checked\\:peer-hover\\:before\\:s-border-selected-hover:before {
+                border-color: var(--w-s-color-border-selected-hover)
+            }
+
+            .peer:checked ~ .peer-checked\\:before\\:s-border-disabled:before {
+                border-color: var(--w-s-color-border-disabled)
+            }
+
+            .peer:checked ~ .peer-checked\\:before\\:s-border-negative:before {
+                border-color: var(--w-s-color-border-negative)
+            }
+
+            .peer:checked ~ .peer-checked\\:before\\:s-border-primary:before {
+                border-color: var(--w-s-color-border-primary)
+            }
+
+            .peer:checked ~ .peer-checked\\:before\\:s-border-selected:before {
+                border-color: var(--w-s-color-border-selected)
+            }
+
+            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-border-disabled:before {
+                border-color: var(--w-s-color-border-disabled)
+            }
+
+            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-border-negative:before {
+                border-color: var(--w-s-color-border-negative)
+            }
+
+            .peer:indeterminate ~ .peer-indeterminate\\:before\\:s-border-primary:before {
+                border-color: var(--w-s-color-border-primary)
+            }
+
+            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-border-negative-hover:hover:before {
+                border-color: var(--w-s-color-border-negative-hover)
+            }
+
+            .peer:indeterminate ~ .peer-indeterminate\\:hover\\:before\\:s-border-primary-hover:hover:before {
+                border-color: var(--w-s-color-border-primary-hover)
+            }
+
+            .group:hover .group-hover\\:s-border-selected-hover {
+                border-color: var(--w-s-color-border-selected-hover)
+            }
+
+            .hover\\:before\\:s-border-negative-hover:hover:before {
+                border-color: var(--w-s-color-border-negative-hover)
+            }
+
+            .hover\\:before\\:s-border-primary:hover:before {
+                border-color: var(--w-s-color-border-primary)
+            }
+
+            .hover\\:s-border-disabled:hover {
+                border-color: var(--w-s-color-border-disabled)
+            }
+
+            .hover\\:s-border-hover:hover {
+                border-color: var(--w-s-color-border-hover)
+            }
+
+            .hover\\:s-border-negative-hover:hover {
+                border-color: var(--w-s-color-border-negative-hover)
+            }
+
+            .hover\\:s-border-primary-hover:hover {
+                border-color: var(--w-s-color-border-primary-hover)
+            }
+
+            .hover\\:s-border-primary:hover {
+                border-color: var(--w-s-color-border-primary)
+            }
+
+            .hover\\:s-border-selected-hover:hover {
+                border-color: var(--w-s-color-border-selected-hover)
+            }
+
+            .peer:hover ~ .peer-hover\\:before\\:s-border-negative-hover:before {
+                border-color: var(--w-s-color-border-negative-hover)
+            }
+
+            .peer:hover ~ .peer-hover\\:before\\:s-border-primary:before {
+                border-color: var(--w-s-color-border-primary)
+            }
+
+            .focus\\:s-border-primary-hover:focus {
+                border-color: var(--w-s-color-border-primary-hover)
+            }
+
+            .active\\:s-border-active:active {
+                border-color: var(--w-s-color-border-active)
+            }
+
+            .active\\:s-border-disabled:active {
+                border-color: var(--w-s-color-border-disabled)
+            }
+
+            .active\\:s-border-primary-active:active {
+                border-color: var(--w-s-color-border-primary-active)
+            }
+
+            .active\\:s-border-selected-active:active {
+                border-color: var(--w-s-color-border-selected-active)
+            }
+
+            .active\\:s-border-selected:active {
+                border-color: var(--w-s-color-border-selected)
+            }
+
+            .group:active .group-active\\:s-border-active {
+                border-color: var(--w-s-color-border-active)
+            }
+
+            .group:active .group-active\\:s-border-selected-active {
+                border-color: var(--w-s-color-border-selected-active)
+            }
+
+            .before\\:s-border-disabled:before {
+                border-color: var(--w-s-color-border-disabled)
+            }
+
+            .before\\:s-border-negative:before {
+                border-color: var(--w-s-color-border-negative)
+            }
+
+            .s-surface-sunken {
+                background-color: var(--w-s-color-surface-sunken)
+            }
+
+            .s-surface-elevated-200 {
+                background-color: var(--w-s-color-surface-elevated-200);
+                box-shadow: var(--w-s-shadow-surface-elevated-200)
+            }
+
+            .hover\\:s-surface-elevated-200-hover:hover {
+                background-color: var(--w-s-color-surface-elevated-200-hover);
+                box-shadow: var(--w-s-shadow-surface-elevated-200-hover)
+            }
+
+            .active\\:s-surface-elevated-200-active:active {
+                background-color: var(--w-s-color-surface-elevated-200-active);
+                box-shadow: var(--w-s-shadow-surface-elevated-200-active)
+            }
+
+            .drop-shadow-m {
+                filter: drop-shadow(rgba(64, 64, 64, .24) 0 3px 8px) drop-shadow(rgba(64, 64, 64, .16) 0 3px 6px)
+            }
+
+            .shadow-m {
+                box-shadow: var(--w-shadow-m)
+            }
+
+            .shadow-s {
+                box-shadow: var(--w-shadow-s)
+            }
+
+            .shadow-\\[--w-shadow-slider\\] {
+                box-shadow: var(--w-shadow-slider)
+            }
+
+            .hover\\:shadow-\\[--w-shadow-slider-handle-hover\\]:hover {
+                box-shadow: var(--w-shadow-slider-handle-hover)
+            }
+
+            .focus\\:shadow-\\[--w-shadow-slider-handle-hover\\]:focus {
+                box-shadow: var(--w-shadow-slider-handle-hover)
+            }
+
+            .active\\:shadow-\\[--w-shadow-slider-handle-active\\]:active {
+                box-shadow: var(--w-shadow-slider-handle-active)
+            }
+
+            .h-0 {
+                height: 0rem
+            }
+
+            .h-16 {
+                height: 1.6rem
+            }
+
+            .h-2 {
+                height: .2rem
+            }
+
+            .h-20 {
+                height: 2rem
+            }
+
+            .h-24 {
+                height: 2.4rem
+            }
+
+            .h-4 {
+                height: .4rem
+            }
+
+            .h-44 {
+                height: 4.4rem
+            }
+
+            .h-6 {
+                height: .6rem
+            }
+
+            .h-8 {
+                height: .8rem
+            }
+
+            .h-full {
+                height: 100%
+            }
+
+            .h-unset {
+                height: unset
+            }
+
+            .max-h-unset {
+                max-height: unset
+            }
+
+            .max-w-full {
+                max-width: 100%
+            }
+
+            .max-w-max {
+                max-width: max-content
+            }
+
+            .max-w-unset {
+                max-width: unset
+            }
+
+            .min-h-32 {
+                min-height: 3.2rem
+            }
+
+            .min-h-40 {
+                min-height: 4rem
+            }
+
+            .min-w-16 {
+                min-width: 1.6rem
+            }
+
+            .min-w-32 {
+                min-width: 3.2rem
+            }
+
+            .w-16 {
+                width: 1.6rem
+            }
+
+            .w-2 {
+                width: .2rem
+            }
+
+            .w-20 {
+                width: 2rem
+            }
+
+            .w-24 {
+                width: 2.4rem
+            }
+
+            .w-32 {
+                width: 3.2rem
+            }
+
+            .w-40 {
+                width: 4rem
+            }
+
+            .w-44 {
+                width: 4.4rem
+            }
+
+            .w-8 {
+                width: .8rem
+            }
+
+            .w-full {
+                width: 100%
+            }
+
+            .w-max {
+                width: max-content
+            }
+
+            .w-unset {
+                width: unset
+            }
+
+            .before\\:h-20:before {
+                height: 2rem
+            }
+
+            .before\\:h-full:before {
+                height: 100%
+            }
+
+            .before\\:w-20:before {
+                width: 2rem
+            }
+
+            .before\\:w-32:before {
+                width: 3.2rem
+            }
+
+            .h-\\[--w-modal-height\\] {
+                height: var(--w-modal-height)
+            }
+
+            .h-\\[14px\\] {
+                height: 14px
+            }
+
+            .h-\\[16px\\] {
+                height: 16px
+            }
+
+            .max-h-\\[--w-modal-max-height\\] {
+                max-height: var(--w-modal-max-height)
+            }
+
+            .min-h-\\[--w-modal-min-height\\] {
+                min-height: var(--w-modal-min-height)
+            }
+
+            .min-h-\\[32px\\] {
+                min-height: 32px
+            }
+
+            .min-h-\\[40px\\] {
+                min-height: 40px
+            }
+
+            .min-h-\\[42\\] {
+                min-height: 4.2rem
+            }
+
+            .min-h-\\[44px\\] {
+                min-height: 44px
+            }
+
+            .min-w-\\[32px\\] {
+                min-width: 32px
+            }
+
+            .min-w-\\[40px\\] {
+                min-width: 40px
+            }
+
+            .min-w-\\[44px\\] {
+                min-width: 44px
+            }
+
+            .w-\\[--w-modal-width\\] {
+                width: var(--w-modal-width)
+            }
+
+            .w-\\[14px\\] {
+                width: 14px
+            }
+
+            .w-\\[16px\\] {
+                width: 16px
+            }
+
+            .space-x-8 > :not([hidden]) ~ :not([hidden]) {
+                --w-space-x-reverse: 0;
+                margin-left: calc(.8rem * calc(1 - var(--w-space-x-reverse)));
+                margin-right: calc(.8rem * var(--w-space-x-reverse))
+            }
+
+            .space-y-16 > :not([hidden]) ~ :not([hidden]) {
+                --w-space-y-reverse: 0;
+                margin-top: calc(1.6rem * calc(1 - var(--w-space-y-reverse)));
+                margin-bottom: calc(1.6rem * var(--w-space-y-reverse))
+            }
+
+            .m-0 {
+                margin: 0rem
+            }
+
+            .m-auto {
+                margin: auto
+            }
+
+            .-mx-16 {
+                margin-left: -1.6rem;
+                margin-right: -1.6rem
+            }
+
+            .mx-0 {
+                margin-left: 0rem;
+                margin-right: 0rem
+            }
+
+            .mx-8 {
+                margin-left: .8rem;
+                margin-right: .8rem
+            }
+
+            .mx-auto {
+                margin-left: auto;
+                margin-right: auto
+            }
+
+            .-mb-1 {
+                margin-bottom: -.1rem
+            }
+
+            .-ml-8 {
+                margin-left: -.8rem
+            }
+
+            .-mr-1 {
+                margin-right: -.1rem
+            }
+
+            .-mr-8 {
+                margin-right: -.8rem
+            }
+
+            .-mt-2 {
+                margin-top: -.2rem
+            }
+
+            .-mt-4 {
+                margin-top: -.4rem
+            }
+
+            .last-child\\:mb-0 > :last-child, .mb-0 {
+                margin-bottom: 0rem
+            }
+
+            .mb-32 {
+                margin-bottom: 3.2rem
+            }
+
+            .ml-8 {
+                margin-left: .8rem
+            }
+
+            .ml-auto {
+                margin-left: auto
+            }
+
+            .mr-8 {
+                margin-right: .8rem
+            }
+
+            .mt-16 {
+                margin-top: 1.6rem
+            }
+
+            .mt-4 {
+                margin-top: .4rem
+            }
+
+            .group:not(:first-child) .group-not-first\\:-ml-2 {
+                margin-left: -.2rem
+            }
+
+            .last\\:mb-0:last-child {
+                margin-bottom: 0rem
+            }
+
+            .last\\:mr-0:last-child {
+                margin-right: 0rem
+            }
+
+            .m-\\[8px\\] {
+                margin: 8px
+            }
+
+            .p-0 {
+                padding: 0rem
+            }
+
+            .p-16 {
+                padding: 1.6rem
+            }
+
+            .p-4 {
+                padding: .4rem
+            }
+
+            .p-8 {
+                padding: .8rem
+            }
+
+            .px-0 {
+                padding-left: 0rem;
+                padding-right: 0rem
+            }
+
+            .px-1 {
+                padding-left: .1rem;
+                padding-right: .1rem
+            }
+
+            .px-12 {
+                padding-left: 1.2rem;
+                padding-right: 1.2rem
+            }
+
+            .px-14 {
+                padding-left: 1.4rem;
+                padding-right: 1.4rem
             }
-        }
-        // Update validation state
-        // Check that the user hasn't typed in a value beyond max or min
-        const maxNum = Number.parseInt(this.max);
-        const minNum = Number.parseInt(this.min);
-        if (!this.allowValuesOutsideRange && (valueNum > maxNum || valueNum < minNum)) {
-            this.#handleValidity(i18n.t({
-                id: 'slider.error.out_of_bounds',
-                message: 'Value must be between {min} and {max}',
-                values: {
-                    min: `${this.min} ${this.suffix}`.trim(),
-                    max: `${this.max} ${this.suffix}`.trim(),
-                },
-            }));
-            return { shouldCancel: true };
-        }
-        if (value === '') {
-            if (this.required) {
-                this.#handleValidity(i18n.t({
-                    id: 'slider.error.required',
-                    message: 'This field is required',
-                }));
-            }
-            // To not bork when input field is empty
-            return { shouldCancel: true };
-        }
-        this.value = value;
-        const valueIsAtTheSliderEdge = value === this.max || value === this.min;
-        // Stop a range slider's from value from reaching past the to value and vice versa
-        // by updating the other component's min and max values.
-        // Skip this check when typing in textfield with allowValuesOutsideRange enabled
-        let shouldCancel = false;
-        if (this.slot) {
-            const toThumb = this.parentElement.querySelector('w-slider-thumb[slot="to"]');
-            const fromThumb = this.parentElement.querySelector('w-slider-thumb[slot="from"]');
-            const toValue = toThumb.textfield.value || this.max;
-            const fromValue = fromThumb.textfield.value || this.min;
-            const numericToValue = Number.parseInt(toValue);
-            const numericFromValue = Number.parseInt(fromValue);
-            const numberOverLapError = i18n.t({
-                id: 'slider.error.overlap',
-                message: 'The maximum value cannot be less than the minimum',
-            });
-            if (this.slot === 'from') {
-                // Check that the from value is not about to be dragged past the --to value
-                const toBoundary = this.allowValuesOutsideRange && numericToValue > maxNum
-                    ? numericToValue
-                    : Math.min(numericToValue, this.allowValuesOutsideRange ? maxNum - 1 : maxNum);
-                if (valueNum > toBoundary) {
-                    shouldCancel = true;
-                    // The user might have moved the slider so fast that this.value is far away from overlapping.
-                    // Set it to be equal to the to/from value, depending on what slider the user's moving.
-                    if (this.allowValuesOutsideRange && valueIsAtTheSliderEdge) {
-                        this.value = String(toBoundary);
-                    }
-                    else {
-                        this.value = toValue;
-                    }
-                    if (isFromTextInput) {
-                        this.#handleValidity(numberOverLapError);
-                        // Don't override the user's input in the textfield
-                        await this.updateComplete;
-                        this.textfield.value = value;
-                    }
+
+            .px-16 {
+                padding-left: 1.6rem;
+                padding-right: 1.6rem
+            }
+
+            .px-8 {
+                padding-left: .8rem;
+                padding-right: .8rem
+            }
+
+            .py-0 {
+                padding-top: 0rem;
+                padding-bottom: 0rem
+            }
+
+            .py-1 {
+                padding-top: .1rem;
+                padding-bottom: .1rem
+            }
+
+            .py-10 {
+                padding-top: 1rem;
+                padding-bottom: 1rem
+            }
+
+            .py-12 {
+                padding-top: 1.2rem;
+                padding-bottom: 1.2rem
+            }
+
+            .py-2 {
+                padding-top: .2rem;
+                padding-bottom: .2rem
+            }
+
+            .py-4 {
+                padding-top: .4rem;
+                padding-bottom: .4rem
+            }
+
+            .py-6 {
+                padding-top: .6rem;
+                padding-bottom: .6rem
+            }
+
+            .py-8 {
+                padding-top: .8rem;
+                padding-bottom: .8rem
+            }
+
+            .pb-0 {
+                padding-bottom: 0rem
+            }
+
+            .pb-32 {
+                padding-bottom: 3.2rem
+            }
+
+            .pb-4 {
+                padding-bottom: .4rem
+            }
+
+            .pb-8 {
+                padding-bottom: .8rem
+            }
+
+            .pl-0 {
+                padding-left: 0rem
+            }
+
+            .pl-1 {
+                padding-left: .1rem
+            }
+
+            .pl-12 {
+                padding-left: 1.2rem
+            }
+
+            .pl-28 {
+                padding-left: 2.8rem
+            }
+
+            .pl-4 {
+                padding-left: .4rem
+            }
+
+            .pl-8 {
+                padding-left: .8rem
+            }
+
+            .pr-12 {
+                padding-right: 1.2rem
+            }
+
+            .pr-14 {
+                padding-right: 1.4rem
+            }
+
+            .pr-2 {
+                padding-right: .2rem
+            }
+
+            .pr-32 {
+                padding-right: 3.2rem
+            }
+
+            .pr-40 {
+                padding-right: 4rem
+            }
+
+            .pt-0 {
+                padding-top: 0rem
+            }
+
+            .pt-1 {
+                padding-top: .1rem
+            }
+
+            .pt-16 {
+                padding-top: 1.6rem
+            }
+
+            .pt-24 {
+                padding-top: 2.4rem
+            }
+
+            .pt-8 {
+                padding-top: .8rem
+            }
+
+            .group\\/step:last-child .group-last\\/step\\:last\\:pb-0:last-child {
+                padding-bottom: 0rem
+            }
+
+            .last\\:pb-1:last-child {
+                padding-bottom: .1rem
+            }
+
+            .last\\:pr-1:last-child {
+                padding-right: .1rem
+            }
+
+            .p-\\[8px\\] {
+                padding: 8px
+            }
+
+            .px-\\[15px\\] {
+                padding-left: 15px;
+                padding-right: 15px
+            }
+
+            .px-\\[8px\\] {
+                padding-left: 8px;
+                padding-right: 8px
+            }
+
+            .py-\\[11px\\] {
+                padding-top: 11px;
+                padding-bottom: 11px
+            }
+
+            .py-\\[5px\\] {
+                padding-top: 5px;
+                padding-bottom: 5px
+            }
+
+            .py-\\[7px\\] {
+                padding-top: 7px;
+                padding-bottom: 7px
+            }
+
+            .pl-\\[var\\(--w-prefix-width\\,_40px\\)\\] {
+                padding-left: var(--w-prefix-width, 40px)
+            }
+
+            .invisible {
+                visibility: hidden
+            }
+
+            .backface-hidden {
+                backface-visibility: hidden
+            }
+
+            .break-words {
+                overflow-wrap: break-word
+            }
+
+            .before\\:content-\\[\\"–\\"\\]:before {
+                content: "–"
+            }
+
+            .before\\:content-\\[\\"\\"\\]:before {
+                content: ""
+            }
+
+            .cursor-default {
+                cursor: default
+            }
+
+            .cursor-pointer {
+                cursor: pointer
+            }
+
+            .antialiased {
+                -webkit-font-smoothing: antialiased;
+                -moz-osx-font-smoothing: grayscale;
+                font-smoothing: grayscale
+            }
+
+            .font-bold {
+                font-weight: 700
+            }
+
+            .before\\:font-bold:before {
+                font-weight: 700
+            }
+
+            .font-normal {
+                font-weight: 400
+            }
+
+            .pointer-events-auto {
+                pointer-events: auto
+            }
+
+            .pointer-events-none {
+                pointer-events: none
+            }
+
+            .before\\:pointer-events-none:before {
+                pointer-events: none
+            }
+
+            .pb-safe-\\[32\\] {
+                padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px))
+            }
+
+            .sr-only {
+                position: absolute;
+                width: 1px;
+                height: 1px;
+                padding: 0;
+                margin: -1px;
+                overflow: hidden;
+                clip: rect(0, 0, 0, 0);
+                white-space: nowrap;
+                border-width: 0
+            }
+
+            .touch-pan-y {
+                touch-action: pan-y
+            }
+
+            .select-none {
+                -webkit-user-select: none;
+                user-select: none
+            }
+
+            .translate-x-20 {
+                --w-translate-x: 2rem;
+                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
+            }
+
+            .translate-z-0 {
+                --w-translate-z: 0rem;
+                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
+            }
+
+            .-rotate-180, .part-\\[w-icon-chevron-down-16-part\\]\\:-rotate-180::part(w-icon-chevron-down-16-part) {
+                --w-rotate-x: 0;
+                --w-rotate-y: 0;
+                --w-rotate-z: 0;
+                --w-rotate: -180deg;
+                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
+            }
+
+            .part-\\[w-icon-chevron-up-16-part\\]\\:rotate-180::part(w-icon-chevron-up-16-part), .rotate-180 {
+                --w-rotate-x: 0;
+                --w-rotate-y: 0;
+                --w-rotate-z: 0;
+                --w-rotate: 180deg;
+                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
+            }
+
+            .rotate-90 {
+                --w-rotate-x: 0;
+                --w-rotate-y: 0;
+                --w-rotate-z: 0;
+                --w-rotate: 90deg;
+                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
+            }
+
+            .part-\\[w-icon-chevron-down-16-part\\]\\:transform::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:transform::part(w-icon-chevron-up-16-part), .transform {
+                transform: translate(var(--w-translate-x)) translateY(var(--w-translate-y)) translateZ(var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
+            }
+
+            .part-\\[w-icon-chevron-down-16-part\\]\\:transform-gpu::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:transform-gpu::part(w-icon-chevron-up-16-part), .transform-gpu {
+                transform: translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z)) rotate(var(--w-rotate)) rotateX(var(--w-rotate-x)) rotateY(var(--w-rotate-y)) rotate(var(--w-rotate-z)) skew(var(--w-skew-x)) skewY(var(--w-skew-y)) scaleX(var(--w-scale-x)) scaleY(var(--w-scale-y)) scaleZ(var(--w-scale-z))
+            }
+
+            .part-\\[w-icon-chevron-down-16-part\\]\\:transition-transform::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:transition-transform::part(w-icon-chevron-up-16-part), .transition-transform {
+                transition-property: transform;
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+                transition-duration: .15s
+            }
+
+            .transition-300 {
+                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+                transition-duration: .3s
+            }
+
+            .transition-all {
+                transition-property: all;
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+                transition-duration: .15s
+            }
+
+            .transition-colors {
+                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+                transition-duration: .15s
+            }
+
+            .transition-shadow {
+                transition-property: box-shadow;
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+                transition-duration: .15s
+            }
+
+            .before\\:transition-all:before {
+                transition-property: all;
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+                transition-duration: .15s
+            }
+
+            .duration-300 {
+                transition-duration: .3s
+            }
+
+            .ease-in-out, .part-\\[w-icon-chevron-down-16-part\\]\\:ease-in-out::part(w-icon-chevron-down-16-part), .part-\\[w-icon-chevron-up-16-part\\]\\:ease-in-out::part(w-icon-chevron-up-16-part) {
+                transition-timing-function: cubic-bezier(.4, 0, .2, 1)
+            }
+
+            .text-m {
+                font-size: var(--w-font-size-m);
+                line-height: var(--w-line-height-m)
+            }
+
+            .text-s {
+                font-size: var(--w-font-size-s);
+                line-height: var(--w-line-height-s)
+            }
+
+            .text-xs {
+                font-size: var(--w-font-size-xs);
+                line-height: var(--w-line-height-xs)
+            }
+
+            .leading-m {
+                line-height: var(--w-line-height-m)
+            }
+
+            .before\\:leading-xs:before {
+                line-height: var(--w-line-height-xs)
+            }
+
+            .leading-\\[24\\] {
+                line-height: 2.4rem
+            }
+
+            @media (max-width: 479.9px) {
+                .lt-sm\\:rounded-b-0 {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0
                 }
             }
-            else {
-                // Check that the to value is not about to be dragged past the --from value
-                const fromBoundary = this.allowValuesOutsideRange && numericFromValue < minNum
-                    ? numericFromValue
-                    : Math.max(Number.parseInt(fromValue), this.allowValuesOutsideRange ? minNum + 1 : minNum);
-                if (valueNum < fromBoundary) {
-                    shouldCancel = true;
-                    // The user might have moved the slider so fast that this.value is far away from overlapping.
-                    // Set it to be equal to the to/from value, depending on what slider the user's moving.
-                    if (this.allowValuesOutsideRange && valueIsAtTheSliderEdge) {
-                        this.value = String(fromBoundary);
-                    }
-                    else {
-                        this.value = fromValue;
-                    }
-                    if (isFromTextInput) {
-                        this.#handleValidity(numberOverLapError);
-                        // Don't override the user's input in the textfield
-                        await this.updateComplete;
-                        this.textfield.value = value;
-                    }
+            @media (min-width: 480px) {
+                .sm\\:border-b-0 {
+                    border-bottom-width: 0
+                }
+
+                .sm\\:rounded-8 {
+                    border-radius: 8px
+                }
+
+                .sm\\:rounded-b-8 {
+                    border-bottom-left-radius: 8px;
+                    border-bottom-right-radius: 8px
+                }
+
+                .sm\\:gap-16 {
+                    gap: 1.6rem
+                }
+
+                .sm\\:place-content-center {
+                    place-content: center
+                }
+
+                .sm\\:place-items-center {
+                    place-items: center
+                }
+
+                .sm\\:h-24 {
+                    height: 2.4rem
+                }
+
+                .sm\\:min-h-48 {
+                    min-height: 4.8rem
+                }
+
+                .sm\\:w-24 {
+                    width: 2.4rem
+                }
+
+                .sm\\:min-h-\\[32px\\] {
+                    min-height: 32px
+                }
+
+                .sm\\:min-h-\\[44px\\] {
+                    min-height: 44px
+                }
+
+                .sm\\:min-h-\\[45\\] {
+                    min-height: 4.5rem
+                }
+
+                .sm\\:min-w-\\[32px\\] {
+                    min-width: 32px
+                }
+
+                .sm\\:min-w-\\[44px\\] {
+                    min-width: 44px
+                }
+
+                .sm\\:mx-0 {
+                    margin-left: 0rem;
+                    margin-right: 0rem
+                }
+
+                .sm\\:mx-16 {
+                    margin-left: 1.6rem;
+                    margin-right: 1.6rem
+                }
+
+                .sm\\:-ml-12 {
+                    margin-left: -1.2rem
+                }
+
+                .sm\\:-mr-12 {
+                    margin-right: -1.2rem
+                }
+
+                .sm\\:-mt-8 {
+                    margin-top: -.8rem
+                }
+
+                .sm\\:px-32 {
+                    padding-left: 3.2rem;
+                    padding-right: 3.2rem
+                }
+
+                .sm\\:py-0 {
+                    padding-top: 0rem;
+                    padding-bottom: 0rem
+                }
+
+                .sm\\:pb-32 {
+                    padding-bottom: 3.2rem
+                }
+
+                .sm\\:pt-24 {
+                    padding-top: 2.4rem
+                }
+
+                .sm\\:pt-32 {
+                    padding-top: 3.2rem
                 }
             }
-        }
-        if (shouldCancel) {
-            return { shouldCancel: true };
-        }
-        this.#handleValidity('');
-        this.range.value = Math.min(Math.max(Number(value), Number(this.min)), Number(this.max)).toString();
-        this.value = this.allowValuesOutsideRange && !isFromTextInput && valueIsAtTheSliderEdge ? '' : value;
-        this.shadowRoot.querySelector('w-attention').handleDone();
-        return { shouldCancel: false };
-    }
-    async #onInput(e) {
-        const isFromTextInput = e.currentTarget.tagName === 'W-TEXTFIELD';
-        if (e instanceof CustomEvent)
-            return; // We rely on the InputEvent event that fires right after the CustomEvent
-        const value = e.currentTarget.value;
-        const result = await this.#handleValueChange(value, isFromTextInput);
-        if (result.shouldCancel) {
-            e.preventDefault();
-            // Needed to stop slider from moving independendtly of the value when we cancel the event
-            return false;
-        }
-        return true;
-    }
-    async #onRangeSliderKeyDown(e) {
-        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
-            return;
-        const currentValue = Number(this.range.value);
-        const stepValue = this.step || 1;
-        let newValue;
-        if (e.key === 'ArrowLeft') {
-            newValue = currentValue - stepValue;
-        }
-        else {
-            newValue = currentValue + stepValue;
-        }
-        newValue = Math.min(Math.max(newValue, Number(this.min)), Number(this.max));
-        const result = await this.#handleValueChange(newValue.toString(), false);
-        if (result.shouldCancel) {
-            e.preventDefault();
-        }
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        this.#initialValue = this.value;
-        this.setValue(this.value);
-        if (!('anchorName' in document.documentElement.style)) {
-            // Load the polyfill for CSS anchor positioning by @oddbird for browsers without native support.
-            const dirname = import.meta.url.substring(0, import.meta.url.lastIndexOf('/'));
-            try {
-                const [{ default: polyfill }] = await Promise.all([
-                    import(
-                    /* @vite-ignore */
-                    `${dirname}/oddbird-css-anchor-positioning.js`),
-                    this.updateComplete,
-                ]);
-                // We need to work around a limitation in the polyfill. It doesn't support constructed stylesheets.
-                // This is based on the approach in Fluent UI: https://github.com/microsoft/fluentui/pull/32852/files#diff-7b316dca1b4391eae93d5edf48e9689e83d39f1c82cb3f8d61450dfad6f3c59eR73
-                if (!this.anchorPositioningStyleElement) {
-                    this.anchorPositioningStyleElement = document.createElement('style');
-                    this.shadowRoot.prepend(this.anchorPositioningStyleElement);
+            @media (min-width: 768px) {
+                .md\\:block {
+                    display: block
+                }
+
+                .md\\:hidden {
+                    display: none
                 }
-                this.anchorPositioningStyleElement.textContent = `
+            }
+        `;import{css as Ge}from"lit";var Ce=Ge`
+  .w-slider-thumb {
+    position: relative;
+    display: grid;
+    pointer-events: none; /* For range inputs we position two of these on top of each other. Let clicks go through the top one. */
+    grid-template-areas:
+      "slider slider slider"
+      "frommarker . tomarker"
+      "fromtextfield . totextfield";
+    grid-template-columns: 1fr 24px 1fr;
+  }
+
+  .w-slider-thumb__range {
+    appearance: none;
+    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 */
+  }
+
+  .w-slider-thumb__range::-webkit-slider-runnable-track {
+    box-shadow: none;
+    color: var(--w-s-color-text);
+    height: var(--w-slider-track-height);
+  }
+
+  /*
+    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.
+   */
+  .w-slider-thumb__range::-webkit-slider-thumb {
+    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: initial;
+    width: var(--w-slider-thumb-size);
+    z-index: 1;
+  }
+
+  .w-slider-thumb__range::-moz-range-thumb {
+    anchor-name: --thumb;
+
+    appearance: none;
+    cursor: pointer;
+    background: var(--w-s-color-background-primary);
+    border-radius: 50%;
+    border-color: transparent;
+    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: initial;
+    width: var(--w-slider-thumb-size);
+    z-index: 1;
+
+    box-shadow: none;
+  }
+
+  .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);
+  }
+
+  .w-slider-thumb__range:focus,
+  .w-slider-thumb__range:focus-visible {
+    outline: none;
+  }
+
+  .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;
+  }
+
+  .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);
+  }
+
+  .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-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 */
+    color: var(--w-s-color-text-subtle);
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+  }
+
+  .w-slider-thumb__from-marker {
+    grid-area: frommarker;
+  }
+
+  .w-slider-thumb__to-marker {
+    grid-area: tomarker;
+    text-align: right;
+  }
+
+  .w-slider-thumb__textfield {
+    margin-top: 12px;
+    pointer-events: auto;
+    grid-row: 3 / 4;
+    grid-column: 1 / 3; /* Single sliders should have the text field use the fromtextfield _and_ gap portion of the CSS grid. */
+  }
+
+  :host([name="from"]) .w-slider-thumb__textfield {
+    grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
+  }
+
+  :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 {
+    grid-row: 3 / 4;
+    grid-column: 3 / 4;
+  }
+
+  :host([name="to"]) .w-slider-thumb__tooltip-target,
+  :host([name="to"]) .w-slider-thumb__range::-webkit-slider-thumb {
+    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 Ke}from"lit";var ze=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 Se=Be(Ve(),1);var N=t=>typeof t=="string",ir=t=>typeof t=="function",$e=new Map,Ne="en";function he(t){return[...Array.isArray(t)?t:[t],Ne]}function ue(t,e,r){let o=he(t);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return G(()=>K("date",o,r),()=>new Intl.DateTimeFormat(o,a)).format(N(e)?new Date(e):e)}function sr(t,e,r){let o;if(r||(r="default"),typeof r=="string")switch(o={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":o.timeZoneName="short";break;case"short":delete o.second}else o=r;return ue(t,e,o)}function le(t,e,r){let o=he(t);return G(()=>K("number",o,r),()=>new Intl.NumberFormat(o,r)).format(e)}function Oe(t,e,r,{offset:o=0,...a}){var i,d;let n=he(t),s=e?G(()=>K("plural-ordinal",n),()=>new Intl.PluralRules(n,{type:"ordinal"})):G(()=>K("plural-cardinal",n),()=>new Intl.PluralRules(n,{type:"cardinal"}));return(d=(i=a[r])!=null?i:a[s.select(r-o)])!=null?d:a.other}function G(t,e){let r=t(),o=$e.get(r);return o||(o=e(),$e.set(r,o)),o}function K(t,e,r){let o=e.join("-");return`${t}-${o}-${JSON.stringify(r)}`}var Pe=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,Te="%__lingui_octothorpe__%",nr=(t,e,r={})=>{let o=e||t,a=s=>typeof s=="object"?s:r[s],n=(s,i)=>{let d=Object.keys(r).length?a("number"):void 0,g=le(o,s,d);return i.replace(new RegExp(Te,"g"),g)};return{plural:(s,i)=>{let{offset:d=0}=i,g=Oe(o,!1,s,i);return n(s-d,g)},selectordinal:(s,i)=>{let{offset:d=0}=i,g=Oe(o,!0,s,i);return n(s-d,g)},select:lr,number:(s,i)=>le(o,s,a(i)||{style:i}),date:(s,i)=>ue(o,s,a(i)||i),time:(s,i)=>sr(o,s,a(i)||i)}},lr=(t,e)=>{var r;return(r=e[t])!=null?r:e.other};function dr(t,e,r){return(o={},a)=>{let n=nr(e,r,a),s=(d,g=!1)=>Array.isArray(d)?d.reduce((k,z)=>{if(z==="#"&&g)return k+Te;if(N(z))return k+z;let[F,y,E]=z,M={};y==="plural"||y==="selectordinal"||y==="select"?Object.entries(E).forEach(([T,Y])=>{M[T]=s(Y,y==="plural"||y==="selectordinal")}):M=E;let v;if(y){let T=n[y];v=T(o[F],M)}else v=o[F];return v==null?k:k+v},""):d,i=s(t);return N(i)&&Pe.test(i)?(0,Se.unraw)(i):N(i)?i:i?String(i):""}}var cr=Object.defineProperty,hr=(t,e,r)=>e in t?cr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,ur=(t,e,r)=>(hr(t,typeof e!="symbol"?e+"":e,r),r),de=class{constructor(){ur(this,"_events",{})}on(e,r){var a;var o;return(a=(o=this._events)[e])!=null||(o[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let o=this._getListeners(e);if(!o)return;let a=o.indexOf(r);~a&&o.splice(a,1)}emit(e,...r){let o=this._getListeners(e);o&&o.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},br=Object.defineProperty,pr=(t,e,r)=>e in t?br(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,D=(t,e,r)=>(pr(t,typeof e!="symbol"?e+"":e,r),r),ce=class extends de{constructor(e){var r;super(),D(this,"_locale",""),D(this,"_locales"),D(this,"_localeData",{}),D(this,"_messages",{}),D(this,"_missing"),D(this,"_messageCompiler"),D(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((r=e.locale)!=null?r:Ne,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,r){let o=this._localeData[e];o?Object.assign(o,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(o=>this._loadLocaleData(o,e[o])),this.emit("change")}_load(e,r){let o=this._messages[e];o?Object.assign(o,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([o,a])=>this._load(o,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:o}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=o,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,o){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=o==null?void 0:o.message;e||(e=""),N(e)||(r=e.values||r,a=e.message,e=e.id);let n=this.messages[e],s=n===void 0,i=this._missing;if(i&&s)return ir(i)?i(this._locale,e):i;s&&this.emit("missing",{id:e,locale:this._locale});let d=n||a||e;return N(d)&&(this._messageCompiler?d=this._messageCompiler(d):console.warn(`Uncompiled message detected! Message:
+
+> ${d}
+
+That means you use raw catalog or your catalog doesn't have a translation for the message and fallback was used.
+ICU features such as interpolation and plurals will not work properly for that message. 
+
+Please compile your catalog first. 
+`)),N(d)&&Pe.test(d)?JSON.parse(`"${d}"`):N(d)?d:dr(d,this._locale,this._locales)(r,o==null?void 0:o.formats)}date(e,r){return ue(this._locales||this._locale,e,r)}number(e,r){return le(this._locales||this._locale,e,r)}};function gr(t={}){return new ce(t)}var W=gr();var Re={};var Z,c,Q,ee,be,j,re,pe,Ae,Ie,je,b=class extends ke(Le){constructor(){super(...arguments);ne(this,c);this.invalid=!1;this.allowValuesOutsideRange=!1;this.suffix="";this._showTooltip=!1;this._inputHasFocus=!1;ne(this,Z,null);this.anchorPositioningStyleElement=null}resetFormControl(){this.value=we(this,Z)}async updateFieldAfterValidation(){let r=this.shadowRoot.querySelector("w-textfield");await p(this,c,re).call(this,r.value,!0)}async connectedCallback(){if(super.connectedCallback(),xe(this,Z,this.value),this.setValue(this.value),"anchorName"in document.documentElement.style)await this.updateComplete;else{let r=Re.url.substring(0,Re.url.lastIndexOf("/"));try{let[{default:o}]=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=`
         /*
          * 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
@@ -285,132 +2667,59 @@ class WarpSliderThumb extends FormControlMixin(LitElement) {
           left: anchor(--polyfilled-thumb left);
           margin-left: 38px;
         }
-      `;
-                await polyfill({
-                    roots: [this.shadowRoot],
-                    elements: [this.anchorPositioningStyleElement],
-                });
-            }
-            catch (e) {
-                console.error(new Error('Error registering the CSS anchor positioning polyfill. The UI will look broken.', { cause: e }));
-            }
-        }
-        else {
-            await this.updateComplete;
-        }
-        this.#syncRangeValue();
-    }
-    #onTextFieldFocus(e) {
-        // Safari fires the focus event we register on `w-textfield` also when the range input
-        // is focused. This breaks the input masking. Rely on the custom event that is also
-        // fired by w-textfield on focus.
-        if (e instanceof CustomEvent && e.type === 'focus') {
-            this._inputHasFocus = true;
-        }
-    }
-    #onTextFieldBlur(e) {
-        if (e instanceof CustomEvent && e.type === 'blur') {
-            this._inputHasFocus = false;
-        }
-    }
-    // The boundary value for this thumb (min for 'from', max for 'to' or default)
-    get boundaryValue() {
-        return this.slot === 'from' ? this.min : this.max;
-    }
-    /** Value to display in the textfield (shows boundary when focused on empty value) */
-    get textFieldDisplayValue() {
-        if (this._inputHasFocus) {
-            // When focused, show the range's clamped value if the form value is empty (slider at boundary)
-            // This allows users to see and edit the actual min/max value
-            if (this.value !== '') {
-                return this.value;
-            }
-            if (!this.range?.value) {
-                return '';
-            }
-            return Math.min(Math.max(Number(this.range.value), Number(this.min) + 1), Number(this.max) - 1).toString();
-        }
-        // When not focused, display the value as-is:
-        // - Empty string if slider set it to empty (at boundary)
-        // - Actual value if user typed it (even if it equals min/max)
-        return this.value;
-    }
-    /** Value to display in the tooltip */
-    get tooltipDisplayValue() {
-        if (this.formatter) {
-            return this.formatter(this.value, this.slot);
-        }
-        if (this.value === '') {
-            return this.range?.value ?? this.boundaryValue;
-        }
-        return this.value || 0;
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('value')) {
-            this.setValue(this.value);
-            this.#syncRangeValue();
-        }
-    }
-    render() {
-        return html `
+      `,await o({roots:[this.shadowRoot],elements:[this.anchorPositioningStyleElement]})}catch(o){console.error(new Error("Error registering the CSS anchor positioning polyfill. The UI will look broken.",{cause:o}))}}p(this,c,be).call(this)}get boundaryValue(){return this.slot==="from"?this.min:this.max}get textFieldDisplayValue(){var r;return this._inputHasFocus?this.value!==""?this.value:(r=this.range)!=null&&r.value?Math.min(Math.max(Number(this.range.value),Number(this.min)+1),Number(this.max)-1).toString():"":this.value}get tooltipDisplayValue(){var r,o;return this.formatter?this.formatter(this.value,this.slot):this.value===""?(o=(r=this.range)==null?void 0:r.value)!=null?o:this.boundaryValue:this.value||0}updated(r){r.has("value")&&(this.setValue(this.value),p(this,c,be).call(this))}render(){return I`
       <div class="w-slider-thumb">
         <label for="range">${this.label}</label>
-        ${!('anchorName' in document.documentElement.style)
-            ? html `<div class="polyfill-range">
+        ${"anchorName"in document.documentElement.style?O:I`<div class="polyfill-range">
               <div class="polyfill-active-range"></div>
-            </div>`
-            : nothing}
+            </div>`}
         <input
           id="range"
           aria-label="${this.ariaLabel}"
-          aria-describedby="${ifDefined(this.ariaDescription ? 'aria-description' : undefined)}"
+          aria-describedby="${J(this.ariaDescription?"aria-description":void 0)}"
           class="w-slider-thumb__range"
           type="range"
           .value="${this.value}"
           aria-valuetext="${this.tooltipDisplayValue}"
           min="${this.min}"
           max="${this.max}"
-          step="${ifDefined(!this.allowValuesOutsideRange && this.step ? this.step : undefined)}"
+          step="${J(!this.allowValuesOutsideRange&&this.step?this.step:void 0)}"
           ?disabled="${this.disabled}"
-          @mousedown="${this.#showTooltip}"
-          @mouseup="${this.#hideTooltip}"
-          @touchstart="${this.#showTooltip}"
-          @touchend="${this.#hideTooltip}"
-          @focus="${this.#showTooltip}"
-          @blur="${this.#hideTooltip}"
-          @input="${this.#onInput}"
-          @keydown="${this.allowValuesOutsideRange ? this.#onRangeSliderKeyDown : nothing}"
+          @mousedown="${p(this,c,Q)}"
+          @mouseup="${p(this,c,ee)}"
+          @touchstart="${p(this,c,Q)}"
+          @touchend="${p(this,c,ee)}"
+          @focus="${p(this,c,Q)}"
+          @blur="${p(this,c,ee)}"
+          @input="${p(this,c,pe)}"
+          @keydown="${this.allowValuesOutsideRange?p(this,c,Ae):O}"
         />
 
-        ${this.slot === 'from'
-            ? html `<span class="w-slider-thumb__from-marker"
-              >${this.formatter ? this.formatter(this.allowValuesOutsideRange ? '' : this.min, 'from') : this.min}
+        ${this.slot==="from"?I`<span class="w-slider-thumb__from-marker"
+              >${this.formatter?this.formatter(this.allowValuesOutsideRange?"":this.min,"from"):this.min}
               ${this.suffix}</span
-            >`
-            : nothing}
-        ${this.slot === 'to'
-            ? html `<span class="w-slider-thumb__to-marker"
-              >${this.formatter ? this.formatter(this.allowValuesOutsideRange ? '' : this.max, 'to') : this.max}
+            >`:O}
+        ${this.slot==="to"?I`<span class="w-slider-thumb__to-marker"
+              >${this.formatter?this.formatter(this.allowValuesOutsideRange?"":this.max,"to"):this.max}
               ${this.suffix}</span
-            >`
-            : nothing}
+            >`:O}
 
         <w-textfield
           aria-label="${this.ariaLabel}"
-          aria-description="${ifDefined(this.ariaDescription)}"
+          aria-description="${J(this.ariaDescription)}"
           class="w-slider-thumb__textfield"
           type="number"
-          .formatter=${this.formatter ? (value) => this.formatter(value, this.slot) : nothing}
+          .formatter=${this.formatter?r=>this.formatter(r,this.slot):O}
           .value="${this.textFieldDisplayValue}"
-          min="${this.allowValuesOutsideRange ? nothing : this.min}"
-          max="${this.allowValuesOutsideRange ? nothing : this.max}"
-          step="${ifDefined(this.step)}"
-          ?invalid="${Boolean(this.invalid)}"
-          @input="${this.#onInput}"
-          @focus="${this.#onTextFieldFocus}"
-          @blur="${this.#onTextFieldBlur}"
+          min="${this.allowValuesOutsideRange?O:this.min}"
+          max="${this.allowValuesOutsideRange?O:this.max}"
+          step="${J(this.step)}"
+          ?invalid="${!!this.invalid}"
+          @input="${p(this,c,pe)}"
+          @focus="${p(this,c,Ie)}"
+          @blur="${p(this,c,je)}"
         >
-          ${this.suffix ? html `<w-affix slot="suffix" label="${this.suffix}"></w-affix>` : nothing}
+          ${this.suffix?I`<w-affix slot="suffix" label="${this.suffix}"></w-affix>`:O}
         </w-textfield>
 
         <w-attention
@@ -426,7 +2735,7 @@ class WarpSliderThumb extends FormControlMixin(LitElement) {
             slot="target"
           ></output>
           <span slot="message">
-            ${this.tooltipDisplayValue}${this.suffix ? html `&nbsp;${this.suffix}` : nothing}
+            ${this.tooltipDisplayValue}${this.suffix?I`&nbsp;${this.suffix}`:O}
           </span>
         </w-attention>
 
@@ -435,67 +2744,5 @@ class WarpSliderThumb extends FormControlMixin(LitElement) {
           >${this.ariaDescription}</span
         >
       </div>
-    `;
-    }
-}
-__decorate([
-    property({ attribute: 'aria-label', reflect: true })
-], WarpSliderThumb.prototype, "ariaLabel", void 0);
-__decorate([
-    property({ attribute: 'aria-description', reflect: true })
-], WarpSliderThumb.prototype, "ariaDescription", void 0);
-__decorate([
-    property({ reflect: true })
-], WarpSliderThumb.prototype, "label", void 0);
-__decorate([
-    property({ reflect: true })
-], WarpSliderThumb.prototype, "name", void 0);
-__decorate([
-    property({ reflect: true })
-], WarpSliderThumb.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpSliderThumb.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpSliderThumb.prototype, "invalid", void 0);
-__decorate([
-    property({ attribute: false, reflect: false })
-], WarpSliderThumb.prototype, "allowValuesOutsideRange", void 0);
-__decorate([
-    state()
-], WarpSliderThumb.prototype, "markers", void 0);
-__decorate([
-    state()
-], WarpSliderThumb.prototype, "required", void 0);
-__decorate([
-    state()
-], WarpSliderThumb.prototype, "step", void 0);
-__decorate([
-    state()
-], WarpSliderThumb.prototype, "min", void 0);
-__decorate([
-    state()
-], WarpSliderThumb.prototype, "max", void 0);
-__decorate([
-    state()
-], WarpSliderThumb.prototype, "suffix", void 0);
-__decorate([
-    state()
-], WarpSliderThumb.prototype, "formatter", void 0);
-__decorate([
-    query('input[type="range"]')
-], WarpSliderThumb.prototype, "range", void 0);
-__decorate([
-    query('w-textfield')
-], WarpSliderThumb.prototype, "textfield", void 0);
-__decorate([
-    state()
-], WarpSliderThumb.prototype, "_showTooltip", void 0);
-__decorate([
-    state()
-], WarpSliderThumb.prototype, "_inputHasFocus", void 0);
-if (!customElements.get('w-slider-thumb')) {
-    customElements.define('w-slider-thumb', WarpSliderThumb);
-}
-export { WarpSliderThumb };
+    `}};Z=new WeakMap,c=new WeakSet,Q=function(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()},ee=function(){this._showTooltip=!1},be=function(){this.range&&(this.value===""?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))},j=function(r){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:r,slot:this.slot}}))},re=async function(r,o){let a=Number.parseInt(r);if(this.allowValuesOutsideRange&&!o&&this.step&&!(this.slot==="to"&&a>=Number(this.max)-1||this.slot==="from"&&a<=Number(this.min)+1)){let k=1/this.step;a=Math.round(a*k)/k,r=a.toString()}let n=Number.parseInt(this.max),s=Number.parseInt(this.min);if(!this.allowValuesOutsideRange&&(a>n||a<s))return p(this,c,j).call(this,W.t({id:"slider.error.out_of_bounds",message:"Value must be between {min} and {max}",values:{min:`${this.min} ${this.suffix}`.trim(),max:`${this.max} ${this.suffix}`.trim()}})),{shouldCancel:!0};if(r==="")return this.required&&p(this,c,j).call(this,W.t({id:"slider.error.required",message:"This field is required"})),{shouldCancel:!0};this.value=r;let i=r===this.max||r===this.min,d=!1;if(this.slot){let g=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),k=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),z=g.textfield.value||this.max,F=k.textfield.value||this.min,y=Number.parseInt(z),E=Number.parseInt(F),M=W.t({id:"slider.error.overlap",message:"The maximum value cannot be less than the minimum"});if(this.slot==="from"){let v=this.allowValuesOutsideRange&&y>n?y:Math.min(y,this.allowValuesOutsideRange?n-1:n);a>v&&(d=!0,this.allowValuesOutsideRange&&i?this.value=String(v):this.value=z,o&&(p(this,c,j).call(this,M),await this.updateComplete,this.textfield.value=r))}else{let v=this.allowValuesOutsideRange&&E<s?E:Math.max(Number.parseInt(F),this.allowValuesOutsideRange?s+1:s);a<v&&(d=!0,this.allowValuesOutsideRange&&i?this.value=String(v):this.value=F,o&&(p(this,c,j).call(this,M),await this.updateComplete,this.textfield.value=r))}}return d?{shouldCancel:!0}:(p(this,c,j).call(this,""),this.range.value=Math.min(Math.max(Number(r),Number(this.min)),Number(this.max)).toString(),this.value=this.allowValuesOutsideRange&&!o&&i?"":r,this.shadowRoot.querySelector("w-attention").handleDone(),{shouldCancel:!1})},pe=async function(r){let o=r.currentTarget.tagName==="W-TEXTFIELD";if(r instanceof CustomEvent)return;let a=r.currentTarget.value;return(await p(this,c,re).call(this,a,o)).shouldCancel?(r.preventDefault(),!1):!0},Ae=async function(r){if(r.key!=="ArrowLeft"&&r.key!=="ArrowRight")return;let o=Number(this.range.value),a=this.step||1,n;r.key==="ArrowLeft"?n=o-a:n=o+a,n=Math.min(Math.max(n,Number(this.min)),Number(this.max)),(await p(this,c,re).call(this,n.toString(),!1)).shouldCancel&&r.preventDefault()},Ie=function(r){r instanceof CustomEvent&&r.type==="focus"&&(this._inputHasFocus=!0)},je=function(r){r instanceof CustomEvent&&r.type==="blur"&&(this._inputHasFocus=!1)},b.shadowRootOptions={...Le.shadowRootOptions,delegatesFocus:!0},b.styles=[_e,ze,Ce],m([P({attribute:"aria-label",reflect:!0})],b.prototype,"ariaLabel",2),m([P({attribute:"aria-description",reflect:!0})],b.prototype,"ariaDescription",2),m([P({reflect:!0})],b.prototype,"label",2),m([P({reflect:!0})],b.prototype,"name",2),m([P({reflect:!0})],b.prototype,"value",2),m([P({type:Boolean,reflect:!0})],b.prototype,"disabled",2),m([P({type:Boolean,reflect:!0})],b.prototype,"invalid",2),m([P({attribute:!1,reflect:!1})],b.prototype,"allowValuesOutsideRange",2),m([S()],b.prototype,"markers",2),m([S()],b.prototype,"required",2),m([S()],b.prototype,"step",2),m([S()],b.prototype,"min",2),m([S()],b.prototype,"max",2),m([S()],b.prototype,"suffix",2),m([S()],b.prototype,"formatter",2),m([De('input[type="range"]')],b.prototype,"range",2),m([De("w-textfield")],b.prototype,"textfield",2),m([S()],b.prototype,"_showTooltip",2),m([S()],b.prototype,"_inputHasFocus",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",b);export{b as WarpSliderThumb};
+//# sourceMappingURL=slider-thumb.js.map