@warp-ds/elements 2.10.0-next.6 → 2.10.0-next.8

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.10.0-next.5",
+  "version": "2.10.0-next.7",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -20,7 +20,7 @@
               "name": "size",
               "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
               "value": {
-                "type": "'small' | 'medium' | 'large' | string",
+                "type": "'small' | 'medium' | 'large' | `${number}px`",
                 "default": "\"medium\""
               }
             },
@@ -41,7 +41,7 @@
               {
                 "name": "size",
                 "description": "Size: small, medium, large or pixel value (e.g. \"32px\").",
-                "type": "'small' | 'medium' | 'large' | string"
+                "type": "'small' | 'medium' | 'large' | `${number}px`"
               },
               {
                 "name": "locale",

package/eik/index.js

@@ -101,7 +101,7 @@ const le={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:w},de=(e=le
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-function Bd(e,t,r){return e?t(e):r?.(e)}customElements.get("w-radio-group")||customElements.define("w-radio-group",Ld);const Wd=JSON.parse('{"select.label.optional":["(valgfrit)"]}'),Hd=JSON.parse('{"select.label.optional":["(optional)"]}'),Yd=JSON.parse('{"select.label.optional":["(vapaaehtoinen)"]}'),Xd=JSON.parse('{"select.label.optional":["(valgfritt)"]}'),Ud=JSON.parse('{"select.label.optional":["(valfritt)"]}'),Jd=a`*,:after,:before{--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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.opacity-25{opacity:.25}.before\\:block:before,.block{display:block}.before\\:hidden:before{display:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:0}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.bottom-0{bottom:0}.right-0{right:0}.before\\:bottom-0:before{bottom:0}.before\\:right-0:before{right:0}.top-\\[30\\%\\]{top:30%}.absolute{position:absolute}.relative{position:relative}.static{position:static}.before\\:absolute:before{position:absolute}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.s-icon{color:var(--w-s-color-icon)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-disabled:hover{border-color:var(--w-s-color-border-disabled)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-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)}.h-full{height:100%}.w-32{width:3.2rem}.w-full{width:100%}.before\\:h-full:before{height:100%}.before\\:w-32:before{width:3.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-32{padding-right:3.2rem}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.before\\:pointer-events-none:before,.pointer-events-none{pointer-events:none}.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)}`;var Kd=function(e,t,r,o){var i,a=arguments.length,n=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(n=(a<3?i(n):a>3?i(t,r,n):i(t,r))||n);return a>3&&n&&Object.defineProperty(t,r,n),n};const Zd="block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current",Qd="s-text s-bg pl-8 border-1 s-border-strong hover:s-border-strong-hover active:s-border-active",Gd="s-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none",ec="s-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!",tc="s-text bg-transparent pl-0 border-0 pointer-events-none before:hidden",rc="relative",oc="relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none ",ic="block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer",ac="opacity-25",nc="antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",sc="pl-8 font-normal text-s s-text-subtle",lc="text-xs mt-4 block",dc="s-text-subtle",cc="s-text-negative";class hc extends(ze(ne)){#e;#J;#A;static{this.styles=[De,Jd,a`select:has(option[value=""]):not(:has(option[selected])),select:has(option[value=""][selected]){color:var(--w-s-color-text-placeholder)}`]}constructor(){super(),this.autoFocus=!1,this.autofocus=!1,this.invalid=!1,this.always=!1,this.optional=!1,this.disabled=!1,this.readOnly=!1,this.readonly=!1,this.#e=null,this.#J=()=>this.#K(),this._setValue=e=>{this.value=e,this.setValue(e)},ft(Hd,Xd,Yd,Wd,Ud)}resetFormControl(){this.value=this.#e}#P(){return Array.from(this.children).filter(e=>"option"===e.tagName.toLowerCase()||"w-option"===e.tagName.toLowerCase())}#Z(){return this.shadowRoot?.querySelector("select")}#Q(){return this.#P().some(e=>e.hasAttribute("selected"))}#G(e){const t=this.#Z();if(!t)return;let r=!1;for(const o of Array.from(t.options)){const t=!r&&o.value===e;o.selected=t,o.toggleAttribute("selected",t),t&&(r=!0)}}#K({allowDefaultFirstOption:e=!1}={}){const t=this.#Z();if(!t)return;const r=t.value;if(!r||r===this.value)return;!e&&!this.value&&!this.#Q()&&0===t.selectedIndex||(this._setValue(r),this.#G(r))}#ee({syncValueFromSelected:e=!1}={}){let t;const r=this.#P().map(r=>{const o=r.getAttribute("value")??"",i=r.textContent??"",a=r.hasAttribute("selected"),n=r.hasAttribute("disabled");return e&&void 0===t&&a&&(t=o),q`<option value="${o}" ?selected="${a}" ?disabled="${n}">${i}</option>`});this._options=r,e&&void 0!==t&&t!==this.value&&this._setValue(t)}connectedCallback(){super.connectedCallback(),this.#e=this.value,(this.autofocus||this.autoFocus)&&this.shadowRoot.querySelector("select").focus(),this.#ee({syncValueFromSelected:!0}),this.ownerDocument?.defaultView?.addEventListener("pageshow",this.#J),this.#A=new MutationObserver(()=>{this.#ee({syncValueFromSelected:!0})}),this.#A.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["selected","disabled","value"]})}disconnectedCallback(){super.disconnectedCallback(),this.ownerDocument?.defaultView?.removeEventListener("pageshow",this.#J),this.#A?.disconnect()}firstUpdated(){this.value&&this.#G(this.value),this.#K({allowDefaultFirstOption:!1})}formStateRestoreCallback(e,t){if("string"==typeof e&&e)return this._setValue(e),void this.#G(e);this.#K({allowDefaultFirstOption:!0})}willUpdate(e){e.has("value")&&this.setValue(this.value)}updated(e){if(e.has("value")){const e=this.#Z();e&&e.value!==this.value&&(e.value=this.value??""),this.#G(this.value??"")}}handleKeyDown(e){!this.readonly&&!this.readOnly||" "!==e.key&&"ArrowDown"!==e.key&&"ArrowUp"!==e.key||e.preventDefault(),"Enter"===e.key&&this.internals.form&&this.internals.form.requestSubmit()}get#te(){return Ee([Zd,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&Qd,this.invalid&&ec,this.disabled&&Gd,(this.readonly||this.readOnly)&&tc])}get#re(){return Ee([lc,this.invalid?cc:dc])}get#W(){return Ee([ic,this.disabled&&ac])}get#oe(){return"select_id"}get#ie(){return this.helpText||this.hint?`${this.#oe}__hint`:void 0}onChange(e){const t=e.currentTarget.value;e.stopPropagation(),this._setValue(t),this.#G(t),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))}render(){return q`<div class="${rc}">${Bd(this.label,()=>q`<label class="${nc}" for="${this.#oe}">${this.label} ${Bd(this.optional,()=>q`<span class="${sc}">${ut._({id:"select.label.optional",message:"(optional)",comment:"Shown behind label when marked as optional"})}</span>`)}</label>`)}<div class="${oc}"><select class="${this.#te}" id="${this.#oe}" ?disabled="${this.disabled}" aria-readonly="${this.readonly}" aria-describedby="${Ae(this.#ie)}" aria-invalid="${Ae(this.invalid)}" aria-errormessage="${Ae(this.invalid&&this.#ie)}" @keydown="${this.handleKeyDown}" @change="${this.onChange}">${this._options}</select><div class="${this.#W}"><w-icon name="ChevronDown" size="small" locale="${vt()}" class="flex"></w-icon></div></div>${Bd(this.helpText||this.always||this.invalid,()=>q`<div id="${this.#ie}" class="${this.#re}">${this.helpText||this.hint}</div>`)}</div>`}}Kd([ce({attribute:"auto-focus",type:Boolean,reflect:!0})],hc.prototype,"autoFocus",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"autofocus",void 0),Kd([ce({attribute:"help-text",reflect:!0})],hc.prototype,"helpText",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"invalid",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"always",void 0),Kd([ce({reflect:!0})],hc.prototype,"hint",void 0),Kd([ce({reflect:!0})],hc.prototype,"label",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"optional",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"disabled",void 0),Kd([ce({attribute:"read-only",type:Boolean,reflect:!0})],hc.prototype,"readOnly",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"readonly",void 0),Kd([ce({attribute:!1,state:!0})],hc.prototype,"_options",void 0),Kd([ce({reflect:!0})],hc.prototype,"name",void 0),Kd([ce({reflect:!0})],hc.prototype,"value",void 0),customElements.get("w-select")||customElements.define("w-select",hc);const uc=a`*,:after,:before{--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}`,pc=a`.w-slider-thumb{position:relative;display:grid;pointer-events:none;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;margin-left:0;pointer-events:none}.w-slider-thumb__range::-webkit-slider-runnable-track{box-shadow:none;color:var(--w-s-color-text);height:var(--w-slider-track-height)}.w-slider-thumb__range::-webkit-slider-thumb{anchor-name:--thumb;appearance:none;cursor:pointer;background:var(--w-slider-thumb-background);border-radius:50%;height:var(--w-slider-thumb-size,28px);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,28px);z-index:1}.w-slider-thumb__range[disabled]::-webkit-slider-thumb{cursor:auto}.w-slider-thumb__range::-moz-range-thumb{anchor-name:--thumb;appearance:none;cursor:pointer;background:var(--w-slider-thumb-background);border-radius:50%;border-color:transparent;height:var(--w-slider-thumb-size,28px);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,28px);z-index:1;box-shadow:none}.w-slider-thumb__range[disabled]::-moz-range-thumb{cursor:auto}.w-slider-thumb__range:active::-webkit-slider-thumb,.w-slider-thumb__range:hover::-webkit-slider-thumb{background:var(--w-slider-thumb-background);box-shadow:var(--w-shadow-slider-handle-hover)}.w-slider-thumb__range:focus,.w-slider-thumb__range:focus-visible{outline:0}.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}.w-slider-thumb__from-marker,.w-slider-thumb__to-marker{margin-inline:2px;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}:host([slot=from]) .w-slider-thumb__textfield{grid-column:1/2}:host([slot=from]) .w-slider-thumb__range{margin-left:var(--w-slider-thumb-size,28px)}:host([slot=to]) .w-slider-thumb__range{margin-right:var(--w-slider-thumb-size,28px)}:host([slot=from]) .w-slider-thumb__tooltip-target{transform:translateX(calc(-1 * var(--transform-offset,0) - 1px))}:host([slot=from]) .w-slider-thumb__range::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--w-slider-thumb-size,28px) - 1px))}:host([slot=from]) .w-slider-thumb__range::-moz-range-thumb{transform:translateX(calc(-1 * var(--w-slider-thumb-size,28px) - 1px))}:host([slot=to]) .w-slider-thumb__textfield{grid-row:3/4;grid-column:3/4}:host([slot=to]) .w-slider-thumb__tooltip-target{transform:translateX(calc(var(--transform-offset,0) - 1px))}:host([slot=to]) .w-slider-thumb__range::-webkit-slider-thumb{transform:translateX(calc(var(--w-slider-thumb-size,28px) - 1px))}:host([slot=to]) .w-slider-thumb__range::-moz-range-thumb{transform:translateX(calc(var(--w-slider-thumb-size,28px) - 1px))}w-textfield{--w-textfield-placeholder-color-text:var(--w-s-color-text)}`;var bc=function(e,t,r,o){var i,a=arguments.length,n=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(n=(a<3?i(n):a>3?i(t,r,n):i(t,r))||n);return a>3&&n&&Object.defineProperty(t,r,n),n};class gc extends(ze(ne)){constructor(){super(...arguments),this.disabled=!1,this.invalid=!1,this.openEnded=!1,this.suffix="",this._showTooltip=!1,this._inputHasFocus=!1,this._hiddenTextfield=!1,this.#e=null,this.anchorPositioningStyleElement=null}static{this.shadowRootOptions={...ne.shadowRootOptions,delegatesFocus:!0}}static{this.styles=[De,uc,pc]}#e;resetFormControl(){this.value=this.#e,this.dispatchEvent(new CustomEvent("thumbreset",{bubbles:!0}))}#ae(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()}#ne(){this._showTooltip=!1}#se(){this.range&&(""===this.value?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))}#le(e){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:e,slot:this.slot}}))}async updateFieldAfterValidation(){const e=this.shadowRoot.querySelector("w-textfield");await this.#de(e.value,!0)}async#de(e,t){const r=this.suffix??"";let o=Number.parseInt(e);if(this.openEnded&&!t&&this.step){if(!("to"===this.slot&&o>=Number(this.max)-1||"from"===this.slot&&o<=Number(this.min)+1)){const t=1/this.step;o=Math.round(o*t)/t,e=o.toString()}}const i=Number.parseInt(this.max),a=Number.parseInt(this.min);if(!this.openEnded&&(o>i||o<a))return this.#le(ut.t({id:"slider.error.out_of_bounds",message:"Value must be between {min} and {max}",values:{min:`${this.min} ${r}`.trim(),max:`${this.max} ${r}`.trim()}})),{shouldCancel:!0};""===e&&this.required&&this.#le(ut.t({id:"slider.error.required",message:"This field is required"})),this.value=e;const n=e===this.max||e===this.min;let s=!1;if(this.slot){const r=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),l=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),d=r.textfield.value||this.max,c=l.textfield.value||this.min,h=Number.parseInt(d),u=Number.parseInt(c),p=ut.t({id:"slider.error.overlap",message:"The maximum value cannot be less than the minimum"});if("from"===this.slot){const r=this.openEnded&&h>i?h:Math.min(h,this.openEnded?i-1:i);o>r&&(s=!0,this.openEnded&&n?this.value=String(r):this.value=d,t&&(this.#le(p),await this.updateComplete,this.textfield.value=e))}else{const r=this.openEnded&&u<a?u:Math.max(Number.parseInt(c),this.openEnded?a+1:a);o<r&&(s=!0,this.openEnded&&n?this.value=String(r):this.value=c,t&&(this.#le(p),await this.updateComplete,this.textfield.value=e))}}return s?{shouldCancel:!0}:(this.#le(""),this.range.value=Math.min(Math.max(Number(e),Number(this.min)),Number(this.max)).toString(),this.value=this.openEnded&&!t&&n?"":e,this.shadowRoot.querySelector("w-attention").handleDone(),{shouldCancel:!1})}async#N(e){const t="W-TEXTFIELD"===e.currentTarget.tagName;if(e instanceof CustomEvent)return;const r=e.currentTarget.value;return!(await this.#de(r,t)).shouldCancel||(e.preventDefault(),!1)}async#ce(e){if("Enter"===e.key&&this.internals.form)return void this.internals.form.requestSubmit();if(!this.openEnded)return;if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;const t=Number(this.range.value),r=this.step||1;let o;o="ArrowLeft"===e.key?t-r:t+r,o=Math.min(Math.max(o,Number(this.min)),Number(this.max));(await this.#de(o.toString(),!1)).shouldCancel&&e.preventDefault()}async#he(e){if("Enter"===e.key&&this.internals.form)return void this.internals.form.requestSubmit();if(this.textfield.value)return;let t="";"from"===this.slot?"ArrowUp"===e.key?t=String(Number(this.min)+1)||"1":"ArrowDown"===e.key&&(t=String(Number(this.min))||"0"):"ArrowUp"===e.key?t=String(Number(this.max))||"100":"ArrowDown"===e.key&&(t=String(Number(this.max)-1)||"99"),t&&(e.preventDefault(),await this.#de(t,!0))}async connectedCallback(){if(super.connectedCallback(),this.#e=this.value,this.setValue(this.value),this.slot&&!this.ariaDescription&&("from"===this.slot?this.ariaDescription=ut.t({id:"slider.label.from",comment:"Accessible label for the 'from value' input field in a range slider",message:"From"}):"to"===this.slot&&(this.ariaDescription=ut.t({id:"slider.label.to",comment:"Accessible label for the 'to value' input field in a range slider",message:"To"}))),"anchorName"in document.documentElement.style)await this.updateComplete;else{const e=import.meta.url.substring(0,import.meta.url.lastIndexOf("/"));try{const[{default:t}]=await Promise.all([import(`${e}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent="\n        /*\n         * The polyfill can only anchor to ::before and ::after pseudo elements, not the pseudo element slider thumb.\n         * We work around that by recreating a transparent version of the active range\n         * so that we can position relative to that, without crossing the shadow root boundary.\n         */\n        .polyfill-range {\n          align-self: center;\n          background: transparent;\n          height: var(--w-slider-track-active-height);\n          position: absolute;\n          padding-inline-start: var(--active-range-inline-start-padding, 0);\n          padding-inline-end: var(--active-range-inline-end-padding, 0);\n          top: var(--_range-top);\n          left: 0;\n          right: 0;\n          grid-area: slider;\n        }\n\n        .polyfill-active-range {\n          anchor-name: --polyfilled-thumb;\n\n          box-sizing: content-box;\n          background: transparent;\n          height: var(--w-slider-track-active-height);\n\n          border-start-start-radius: var(--active-range-border-radius, 0);\n          border-end-start-radius: var(--active-range-border-radius, 0);\n\n          margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--active-range-inline-start-padding, 0px));\n          width: calc(calc(var(--_filled-values) * 1%) + var(--active-range-inline-end-padding, 0px));\n        }\n\n        #target {\n          position: absolute;\n          top: anchor(--polyfilled-thumb top);\n          right: anchor(--polyfilled-thumb right);\n          margin-right: 12px;\n        }\n\n        :host([name='from']) .polyfill-active-range {\n          margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--active-range-inline-start-padding, 0px));\n          width: calc(calc(var(--_filled-values) * 1%) + var(--active-range-inline-end-padding, 0px));\n        }\n\n        :host([name='from']) #target {\n          left: anchor(--polyfilled-thumb left);\n          margin-left: 38px;\n        }\n      ",await t({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}))}}const e=window.navigator.userAgent;/WebKit/.test(e)&&!/Chrome/.test(e)&&this.tooltipTarget&&this.tooltipTarget.style.setProperty("--transform-offset","var(--w-slider-thumb-size, 28px)"),this.#se()}get boundaryValue(){return"from"===this.slot?this.min:this.max}get textFieldDisplayValue(){return this._inputHasFocus?""!==this.value?this.value:this.range?.value?Math.min(Math.max(Number(this.range.value),Number(this.min)+1),Number(this.max)-1).toString():"":this.value}get tooltipDisplayValue(){let e=0;return e=this.tooltipFormatter?this.tooltipFormatter(this.value,this.slot):this.valueFormatter?this.valueFormatter(this.value,this.slot):""===this.value?this.range?.value??this.boundaryValue:this.value||0,e}get ariaDescriptionText(){let e="";const t=this.ariaDescription||"",r=""===this.value;return this.openEnded&&r&&(e="from"===this.slot?ut.t({id:"slider.placeholder.from",message:"Min"}):ut.t({id:"slider.placeholder.to",message:"Max"})),e?`${e}, ${t}`:t}updated(e){e.has("openEnded")&&this.openEnded&&!this.placeholder&&("to"===this.slot||""===this.slot?this.placeholder=ut.t({id:"slider.placeholder.to",message:"Max",comment:"Max as in short for Maximum"}):"from"===this.slot&&(this.placeholder=ut.t({id:"slider.placeholder.from",message:"Min",comment:"Min as in short for Minimum"}))),e.has("value")&&(void 0===this.#e&&void 0!==this.value&&(this.#e=this.value),this.setValue(this.value),this.#se())}render(){const e=this.placeholder&&!this.value;return q`<div class="w-slider-thumb">${"anchorName"in document.documentElement.style?W:q`<div class="polyfill-range"><div class="polyfill-active-range"></div></div>`} <input id="range" aria-label="${this.ariaLabel}" aria-describedby="${Ae(this.ariaDescription?"aria-description":void 0)}" class="w-slider-thumb__range" type="range" .value="${this.value}" min="${this.min}" max="${this.max}" step="${Ae(!this.openEnded&&this.step?this.step:void 0)}" ?disabled="${this.disabled}" @mousedown="${this.#ae}" @mouseup="${this.#ne}" @touchstart="${this.#ae}" @touchend="${this.#ne}" @focus="${this.#ae}" @blur="${this.#ne}" @input="${this.#N}" @keydown="${this.#ce}"> ${"from"!==this.slot&&this.slot?W:q`<span class="sr-only">${ut.t({id:"slider.label.from",message:"From"})+" "+(this.labelFormatter?this.labelFormatter("from"):this.min)+", "+ut.t({id:"slider.label.to",message:"To"})+" "+(this.labelFormatter?this.labelFormatter("to"):this.max)}</span>`} <span aria-hidden="true" class="w-slider-thumb__from-marker">${this.labelFormatter?this.labelFormatter("from"):this.min} </span><span aria-hidden="true" class="w-slider-thumb__to-marker">${this.labelFormatter?this.labelFormatter("to"):this.max}</span><w-textfield aria-label="${this.ariaLabel}" aria-description="${Ae(this.ariaDescriptionText)}" class="${ye({"w-slider-thumb__textfield":!0,"sr-only":this._hiddenTextfield})}" type="number" tabindex="${this._hiddenTextfield?-1:W}" placeholder="${this.placeholder}" .value="${this.textFieldDisplayValue}" .formatter="${this.valueFormatter&&!e?e=>this.valueFormatter(e,this.slot):W}" min="${this.openEnded?W:this.min}" max="${this.openEnded?W:this.max}" step="${Ae(this.step)}" ?invalid="${Boolean(this.invalid)}" @input="${this.#N}" @keydown="${this.#he}" ?disabled="${this.disabled}">${this.suffix?q`<w-affix slot="suffix" label="${this.suffix??""}"></w-affix>`:W}</w-textfield><w-attention tooltip placement="top" flip distance="24" .show="${this._showTooltip}"><output id="target" class="w-slider-thumb__tooltip-target" slot="target"></output> <span slot="message">${this.tooltipDisplayValue}${this.suffix?q` ${this.suffix??""}`:W}</span></w-attention><span class="sr-only" id="aria-description">${this.ariaDescriptionText}</span></div>`}}bc([ce({attribute:"aria-label"})],gc.prototype,"ariaLabel",void 0),bc([ce({attribute:"aria-description"})],gc.prototype,"ariaDescription",void 0),bc([ce({reflect:!0})],gc.prototype,"name",void 0),bc([ce({reflect:!0})],gc.prototype,"value",void 0),bc([ce({type:Boolean,reflect:!0})],gc.prototype,"disabled",void 0),bc([ce({type:Boolean,reflect:!0})],gc.prototype,"invalid",void 0),bc([ce({attribute:!1,reflect:!1})],gc.prototype,"openEnded",void 0),bc([ce({reflect:!0})],gc.prototype,"placeholder",void 0),bc([he()],gc.prototype,"markers",void 0),bc([he()],gc.prototype,"required",void 0),bc([he()],gc.prototype,"step",void 0),bc([he()],gc.prototype,"min",void 0),bc([he()],gc.prototype,"max",void 0),bc([he()],gc.prototype,"suffix",void 0),bc([ce({attribute:!1})],gc.prototype,"valueFormatter",void 0),bc([ce({attribute:!1})],gc.prototype,"tooltipFormatter",void 0),bc([ce({attribute:!1})],gc.prototype,"labelFormatter",void 0),bc([pe('input[type="range"]')],gc.prototype,"range",void 0),bc([pe(".w-slider-thumb__tooltip-target")],gc.prototype,"tooltipTarget",void 0),bc([pe("w-textfield")],gc.prototype,"textfield",void 0),bc([he()],gc.prototype,"_showTooltip",void 0),bc([he()],gc.prototype,"_inputHasFocus",void 0),bc([he()],gc.prototype,"_hiddenTextfield",void 0),customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",gc);const mc=JSON.parse('{"slider.error.out_of_bounds":["Værdien skal være mellem ",["min"]," og ",["max"]],"slider.error.overlap":["Maksimumværdien må ikke være mindre end minimumværdien"],"slider.error.required":["Dette felt er påkrævet"],"slider.label.from":["From"],"slider.label.to":["To"],"slider.placeholder.from":["Min"],"slider.placeholder.to":["Max"]}'),vc=JSON.parse('{"slider.error.out_of_bounds":["Value must be between ",["min"]," and ",["max"]],"slider.error.overlap":["The maximum value cannot be less than the minimum"],"slider.error.required":["This field is required"],"slider.label.from":["From"],"slider.label.to":["To"],"slider.placeholder.from":["Min"],"slider.placeholder.to":["Max"]}'),fc=JSON.parse('{"slider.error.out_of_bounds":["Arvon on oltava välillä ",["min"]," - ",["max"]],"slider.error.overlap":["Maksimiarvo ei voi olla pienempi kuin minimiarvo"],"slider.error.required":["Tämä kenttä on pakollinen"],"slider.label.from":["From"],"slider.label.to":["To"],"slider.placeholder.from":["Min"],"slider.placeholder.to":["Max"]}'),wc=JSON.parse('{"slider.error.out_of_bounds":["Verdien må være mellom ",["min"]," og ",["max"]],"slider.error.overlap":["Maksimumsverdien kan ikke være mindre enn minimumsverdien"],"slider.error.required":["Dette feltet er påkrevd"],"slider.label.from":["From"],"slider.label.to":["To"],"slider.placeholder.from":["Min"],"slider.placeholder.to":["Max"]}'),yc=JSON.parse('{"slider.error.out_of_bounds":["Värdet måste vara mellan ",["min"]," och ",["max"]],"slider.error.overlap":["Maxvärdet kan inte vara mindre än minimivärdet"],"slider.error.required":["Detta fält är obligatoriskt"],"slider.label.from":["From"],"slider.label.to":["To"],"slider.placeholder.from":["Min"],"slider.placeholder.to":["Max"]}'),xc=a`.w-slider{position:relative;border:none;padding:0;margin:0;display:grid;width:100%;grid-template-areas:"label" "description" "slider" "error";grid-template-columns:1fr;--w-slider-track-background:var(--w-s-color-background-disabled-subtle);--w-slider-track-active-background:var(--w-s-color-background-primary);--w-slider-track-height:4px;--w-slider-track-active-height:6px;--w-slider-thumb-background:var(--w-s-color-background-primary);--w-slider-thumb-background-hover:var(
+function Bd(e,t,r){return e?t(e):r?.(e)}customElements.get("w-radio-group")||customElements.define("w-radio-group",Ld);const Wd=JSON.parse('{"select.label.optional":["(valgfrit)"]}'),Hd=JSON.parse('{"select.label.optional":["(optional)"]}'),Yd=JSON.parse('{"select.label.optional":["(vapaaehtoinen)"]}'),Xd=JSON.parse('{"select.label.optional":["(valgfritt)"]}'),Ud=JSON.parse('{"select.label.optional":["(valfritt)"]}'),Jd=a`*,:after,:before{--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}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.appearance-none{-webkit-appearance:none;appearance:none}.border-0{border-width:0}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.opacity-25{opacity:.25}.before\\:block:before,.block{display:block}.before\\:hidden:before{display:none}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:0}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.bottom-0{bottom:0}.right-0{right:0}.before\\:bottom-0:before{bottom:0}.before\\:right-0:before{right:0}.top-\\[30\\%\\]{top:30%}.absolute{position:absolute}.relative{position:relative}.static{position:static}.before\\:absolute:before{position:absolute}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.s-icon{color:var(--w-s-color-icon)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-disabled:hover{border-color:var(--w-s-color-border-disabled)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-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)}.h-full{height:100%}.w-32{width:3.2rem}.w-full{width:100%}.before\\:h-full:before{height:100%}.before\\:w-32:before{width:3.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-32{padding-right:3.2rem}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.before\\:pointer-events-none:before,.pointer-events-none{pointer-events:none}.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)}`;var Kd=function(e,t,r,o){var i,a=arguments.length,n=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(n=(a<3?i(n):a>3?i(t,r,n):i(t,r))||n);return a>3&&n&&Object.defineProperty(t,r,n),n};const Zd="block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current",Qd="s-text s-bg pl-8 border-1 s-border-strong hover:s-border-strong-hover active:s-border-active",Gd="s-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none",ec="s-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!",tc="s-text bg-transparent pl-0 border-0 pointer-events-none before:hidden",rc="relative",oc="relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none ",ic="block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer",ac="opacity-25",nc="antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",sc="pl-8 font-normal text-s s-text-subtle",lc="text-xs mt-4 block",dc="s-text-subtle",cc="s-text-negative";class hc extends(ze(ne)){#e;#J;#A;static{this.styles=[De,Jd,a`select:has(option[value=""]):not(:has(option[selected])),select:has(option[value=""][selected]){color:var(--w-s-color-text-placeholder)}`]}constructor(){super(),this.autoFocus=!1,this.autofocus=!1,this.invalid=!1,this.always=!1,this.optional=!1,this.disabled=!1,this.readOnly=!1,this.readonly=!1,this.#e=null,this.#J=()=>this.#K(),this._setValue=e=>{this.value=e,this.setValue(e)},ft(Hd,Xd,Yd,Wd,Ud)}resetFormControl(){this.value=this.#e}#P(){return Array.from(this.children).filter(e=>"option"===e.tagName.toLowerCase()||"w-option"===e.tagName.toLowerCase())}#Z(){return this.shadowRoot?.querySelector("select")}#Q(){return this.#P().some(e=>e.hasAttribute("selected"))}#G(e){const t=this.#Z();if(!t)return;let r=!1;for(const o of Array.from(t.options)){const t=!r&&o.value===e;o.selected=t,o.toggleAttribute("selected",t),t&&(r=!0)}}#K({allowDefaultFirstOption:e=!1}={}){const t=this.#Z();if(!t)return;const r=t.value;if(!r||r===this.value)return;!e&&!this.value&&!this.#Q()&&0===t.selectedIndex||(this._setValue(r),this.#G(r))}#ee({syncValueFromSelected:e=!1}={}){let t;const r=this.#P().map(r=>{const o=r.getAttribute("value")??"",i=r.textContent??"",a=r.hasAttribute("selected"),n=r.hasAttribute("disabled");return e&&void 0===t&&a&&(t=o),q`<option value="${o}" ?selected="${a}" ?disabled="${n}">${i}</option>`});this._options=r,e&&void 0!==t&&t!==this.value&&this._setValue(t)}connectedCallback(){super.connectedCallback(),this.#e=this.value,(this.autofocus||this.autoFocus)&&this.shadowRoot.querySelector("select").focus(),this.#ee({syncValueFromSelected:!0}),this.ownerDocument?.defaultView?.addEventListener("pageshow",this.#J),this.#A=new MutationObserver(()=>{this.#ee({syncValueFromSelected:!0})}),this.#A.observe(this,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["selected","disabled","value"]})}disconnectedCallback(){super.disconnectedCallback(),this.ownerDocument?.defaultView?.removeEventListener("pageshow",this.#J),this.#A?.disconnect()}firstUpdated(){this.value&&this.#G(this.value),this.#K({allowDefaultFirstOption:!1})}formStateRestoreCallback(e,t){if("string"==typeof e&&e)return this._setValue(e),void this.#G(e);this.#K({allowDefaultFirstOption:!0})}willUpdate(e){e.has("value")&&this.setValue(this.value)}updated(e){if(e.has("value")){const e=this.#Z();e&&e.value!==this.value&&(e.value=this.value??""),this.#G(this.value??"")}}handleKeyDown(e){!this.readonly&&!this.readOnly||" "!==e.key&&"ArrowDown"!==e.key&&"ArrowUp"!==e.key||e.preventDefault(),"Enter"===e.key&&this.internals.form&&this.internals.form.requestSubmit()}get#te(){return Ee([Zd,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&Qd,this.invalid&&ec,this.disabled&&Gd,(this.readonly||this.readOnly)&&tc])}get#re(){return Ee([lc,this.invalid?cc:dc])}get#W(){return Ee([ic,this.disabled&&ac])}get#oe(){return"select_id"}get#ie(){return this.helpText||this.hint?`${this.#oe}__hint`:void 0}onChange(e){const t=e.currentTarget.value;e.stopPropagation(),this._setValue(t),this.#G(t),this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))}render(){return q`<div class="${rc}">${Bd(this.label,()=>q`<label class="${nc}" for="${this.#oe}">${this.label} ${Bd(this.optional,()=>q`<span class="${sc}">${ut._({id:"select.label.optional",message:"(optional)",comment:"Shown behind label when marked as optional"})}</span>`)}</label>`)}<div class="${oc}"><select class="${this.#te}" id="${this.#oe}" ?disabled="${this.disabled}" aria-readonly="${this.readonly}" aria-describedby="${Ae(this.#ie)}" aria-invalid="${Ae(this.invalid)}" aria-errormessage="${Ae(this.invalid&&this.#ie)}" @keydown="${this.handleKeyDown}" @change="${this.onChange}">${this._options}</select><div class="${this.#W}"><w-icon name="ChevronDown" size="small" locale="${vt()}" class="flex"></w-icon></div></div>${Bd(this.helpText||this.always||this.invalid,()=>q`<div id="${this.#ie}" class="${this.#re}">${this.helpText||this.hint}</div>`)}</div>`}}Kd([ce({attribute:"auto-focus",type:Boolean,reflect:!0})],hc.prototype,"autoFocus",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"autofocus",void 0),Kd([ce({attribute:"help-text",reflect:!0})],hc.prototype,"helpText",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"invalid",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"always",void 0),Kd([ce({reflect:!0})],hc.prototype,"hint",void 0),Kd([ce({reflect:!0})],hc.prototype,"label",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"optional",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"disabled",void 0),Kd([ce({attribute:"read-only",type:Boolean,reflect:!0})],hc.prototype,"readOnly",void 0),Kd([ce({type:Boolean,reflect:!0})],hc.prototype,"readonly",void 0),Kd([ce({attribute:!1,state:!0})],hc.prototype,"_options",void 0),Kd([ce({reflect:!0})],hc.prototype,"name",void 0),Kd([ce({reflect:!0})],hc.prototype,"value",void 0),customElements.get("w-select")||customElements.define("w-select",hc);const uc=a`*,:after,:before{--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}`,pc=a`.w-slider-thumb{position:relative;display:grid;pointer-events:none;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;margin-left:0;pointer-events:none}.w-slider-thumb__range::-webkit-slider-runnable-track{box-shadow:none;color:var(--w-s-color-text);height:var(--w-slider-track-height)}.w-slider-thumb__range::-webkit-slider-thumb{anchor-name:--thumb;appearance:none;cursor:pointer;background:var(--w-slider-thumb-background);border-radius:50%;height:var(--w-slider-thumb-size,28px);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,28px);z-index:1}.w-slider-thumb__range[disabled]::-webkit-slider-thumb{cursor:auto}.w-slider-thumb__range::-moz-range-thumb{anchor-name:--thumb;appearance:none;cursor:pointer;background:var(--w-slider-thumb-background);border-radius:50%;border-color:transparent;height:var(--w-slider-thumb-size,28px);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,28px);z-index:1;box-shadow:none}.w-slider-thumb__range[disabled]::-moz-range-thumb{cursor:auto}.w-slider-thumb__range:active::-webkit-slider-thumb,.w-slider-thumb__range:hover::-webkit-slider-thumb{background:var(--w-slider-thumb-background);box-shadow:var(--w-shadow-slider-handle-hover)}.w-slider-thumb__range:focus,.w-slider-thumb__range:focus-visible{outline:0}.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}.w-slider-thumb__from-marker,.w-slider-thumb__to-marker{margin-inline:2px;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}:host([slot=from]) .w-slider-thumb__textfield{grid-column:1/2}:host([slot=from]) .w-slider-thumb__range{margin-left:var(--w-slider-thumb-size,28px)}:host([slot=to]) .w-slider-thumb__range{margin-right:var(--w-slider-thumb-size,28px)}:host([slot=from]) .w-slider-thumb__tooltip-target{transform:translateX(calc(-1 * var(--transform-offset,0) - 1px))}:host([slot=from]) .w-slider-thumb__range::-webkit-slider-thumb{transform:translateX(calc(-1 * var(--w-slider-thumb-size,28px) - 1px))}:host([slot=from]) .w-slider-thumb__range::-moz-range-thumb{transform:translateX(calc(-1 * var(--w-slider-thumb-size,28px) - 1px))}:host([slot=to]) .w-slider-thumb__textfield{grid-row:3/4;grid-column:3/4}:host([slot=to]) .w-slider-thumb__tooltip-target{transform:translateX(calc(var(--transform-offset,0) - 1px))}:host([slot=to]) .w-slider-thumb__range::-webkit-slider-thumb{transform:translateX(calc(var(--w-slider-thumb-size,28px) - 1px))}:host([slot=to]) .w-slider-thumb__range::-moz-range-thumb{transform:translateX(calc(var(--w-slider-thumb-size,28px) - 1px))}w-textfield{--w-textfield-placeholder-color-text:var(--w-s-color-text)}`;var bc=function(e,t,r,o){var i,a=arguments.length,n=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(n=(a<3?i(n):a>3?i(t,r,n):i(t,r))||n);return a>3&&n&&Object.defineProperty(t,r,n),n};class gc extends(ze(ne)){constructor(){super(...arguments),this.disabled=!1,this.invalid=!1,this.openEnded=!1,this.suffix="",this._showTooltip=!1,this._inputHasFocus=!1,this._hiddenTextfield=!1,this.#e=null,this.anchorPositioningStyleElement=null}static{this.shadowRootOptions={...ne.shadowRootOptions,delegatesFocus:!0}}static{this.styles=[De,uc,pc]}#e;resetFormControl(){this.value=this.#e,this.dispatchEvent(new CustomEvent("thumbreset",{bubbles:!0}))}#ae(){this._showTooltip=!0,this.shadowRoot.querySelector("w-attention").handleDone()}#ne(){this._showTooltip=!1}#se(){this.range&&(""===this.value?this.range.value=this.boundaryValue:this.value&&(this.range.value=this.value))}#le(e){this.dispatchEvent(new CustomEvent("slidervalidity",{bubbles:!0,detail:{invalid:e,slot:this.slot}}))}async updateFieldAfterValidation(){const e=this.shadowRoot.querySelector("w-textfield");await this.#de(e.value,!0)}async#de(e,t){const r=this.suffix??"";let o=Number.parseInt(e);if(this.openEnded&&!t&&this.step){if(!("to"===this.slot&&o>=Number(this.max)-1||"from"===this.slot&&o<=Number(this.min)+1)){const t=1/this.step;o=Math.round(o*t)/t,e=o.toString()}}const i=Number.parseInt(this.max),a=Number.parseInt(this.min);if(!this.openEnded&&(o>i||o<a))return this.#le(ut.t({id:"slider.error.out_of_bounds",message:"Value must be between {min} and {max}",values:{min:`${this.min} ${r}`.trim(),max:`${this.max} ${r}`.trim()}})),{shouldCancel:!0};""===e&&this.required&&this.#le(ut.t({id:"slider.error.required",message:"This field is required"})),this.value=e;const n=e===this.max||e===this.min;let s=!1;if(this.slot){const r=this.parentElement.querySelector('w-slider-thumb[slot="to"]'),l=this.parentElement.querySelector('w-slider-thumb[slot="from"]'),d=r.textfield.value||this.max,c=l.textfield.value||this.min,h=Number.parseInt(d),u=Number.parseInt(c),p=ut.t({id:"slider.error.overlap",message:"The maximum value cannot be less than the minimum"});if("from"===this.slot){const r=this.openEnded&&h>i?h:Math.min(h,this.openEnded?i-1:i);o>r&&(s=!0,this.openEnded&&n?this.value=String(r):this.value=d,t&&(this.#le(p),await this.updateComplete,this.textfield.value=e))}else{const r=this.openEnded&&u<a?u:Math.max(Number.parseInt(c),this.openEnded?a+1:a);o<r&&(s=!0,this.openEnded&&n?this.value=String(r):this.value=c,t&&(this.#le(p),await this.updateComplete,this.textfield.value=e))}}return s?{shouldCancel:!0}:(this.#le(""),this.range.value=Math.min(Math.max(Number(e),Number(this.min)),Number(this.max)).toString(),this.value=this.openEnded&&!t&&n?"":e,this.shadowRoot.querySelector("w-attention").handleDone(),{shouldCancel:!1})}async#N(e){const t="W-TEXTFIELD"===e.currentTarget.tagName;if(e instanceof CustomEvent)return;const r=e.currentTarget.value;return!(await this.#de(r,t)).shouldCancel||(e.preventDefault(),!1)}async#ce(e){if("Enter"===e.key&&this.internals.form)return void this.internals.form.requestSubmit();if(!this.openEnded)return;if("ArrowLeft"!==e.key&&"ArrowRight"!==e.key)return;const t=Number(this.range.value),r=this.step||1;let o;o="ArrowLeft"===e.key?t-r:t+r,o=Math.min(Math.max(o,Number(this.min)),Number(this.max));(await this.#de(o.toString(),!1)).shouldCancel&&e.preventDefault()}async#he(e){if("Enter"===e.key&&this.internals.form)return void this.internals.form.requestSubmit();if(this.textfield.value)return;let t="";"from"===this.slot?"ArrowUp"===e.key?t=String(Number(this.min)+1)||"1":"ArrowDown"===e.key&&(t=String(Number(this.min))||"0"):"ArrowUp"===e.key?t=String(Number(this.max))||"100":"ArrowDown"===e.key&&(t=String(Number(this.max)-1)||"99"),t&&(e.preventDefault(),await this.#de(t,!0))}async connectedCallback(){if(super.connectedCallback(),this.#e=this.value,this.setValue(this.value),this.slot&&!this.ariaDescription&&("from"===this.slot?this.ariaDescription=ut.t({id:"slider.label.from",comment:"Accessible label for the 'from value' input field in a range slider",message:"From"}):"to"===this.slot&&(this.ariaDescription=ut.t({id:"slider.label.to",comment:"Accessible label for the 'to value' input field in a range slider",message:"To"}))),"anchorName"in document.documentElement.style)await this.updateComplete;else{const e=import.meta.url.substring(0,import.meta.url.lastIndexOf("/"));try{const[{default:t}]=await Promise.all([import(`${e}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent="\n        /*\n         * The polyfill can only anchor to ::before and ::after pseudo elements, not the pseudo element slider thumb.\n         * We work around that by recreating a transparent version of the active range\n         * so that we can position relative to that, without crossing the shadow root boundary.\n         */\n        .polyfill-range {\n          align-self: center;\n          background: transparent;\n          height: var(--w-slider-track-active-height);\n          position: absolute;\n          padding-inline-start: var(--active-range-inline-start-padding, 0);\n          padding-inline-end: var(--active-range-inline-end-padding, 0);\n          top: var(--_range-top);\n          left: 0;\n          right: 0;\n          grid-area: slider;\n        }\n\n        .polyfill-active-range {\n          anchor-name: --polyfilled-thumb;\n\n          box-sizing: content-box;\n          background: transparent;\n          height: var(--w-slider-track-active-height);\n\n          border-start-start-radius: var(--active-range-border-radius, 0);\n          border-end-start-radius: var(--active-range-border-radius, 0);\n\n          margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--active-range-inline-start-padding, 0px));\n          width: calc(calc(var(--_filled-values) * 1%) + var(--active-range-inline-end-padding, 0px));\n        }\n\n        #target {\n          position: absolute;\n          top: anchor(--polyfilled-thumb top);\n          right: anchor(--polyfilled-thumb right);\n          margin-right: 12px;\n        }\n\n        :host([name='from']) .polyfill-active-range {\n          margin-left: calc(calc(var(--_blank-values-before) * 1%) - var(--active-range-inline-start-padding, 0px));\n          width: calc(calc(var(--_filled-values) * 1%) + var(--active-range-inline-end-padding, 0px));\n        }\n\n        :host([name='from']) #target {\n          left: anchor(--polyfilled-thumb left);\n          margin-left: 38px;\n        }\n      ",await t({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}))}}const e=window.navigator.userAgent;/WebKit/.test(e)&&!/Chrome/.test(e)&&this.tooltipTarget&&this.tooltipTarget.style.setProperty("--transform-offset","var(--w-slider-thumb-size, 28px)"),this.#se()}get boundaryValue(){return"from"===this.slot?this.min:this.max}get textFieldDisplayValue(){return this._inputHasFocus?""!==this.value?this.value:this.range?.value?Math.min(Math.max(Number(this.range.value),Number(this.min)+1),Number(this.max)-1).toString():"":this.value}get tooltipDisplayValue(){let e=0;return e=this.tooltipFormatter?this.tooltipFormatter(this.value,this.slot):this.valueFormatter?this.valueFormatter(this.value,this.slot):""===this.value?this.range?.value??this.boundaryValue:this.value||0,e}get ariaDescriptionText(){let e="";const t=this.ariaDescription||"",r=""===this.value;return this.openEnded&&r&&(e="from"===this.slot?ut.t({id:"slider.placeholder.from",message:"Min"}):ut.t({id:"slider.placeholder.to",message:"Max"})),e?`${e}, ${t}`:t}updated(e){if(e.has("openEnded")&&this.openEnded&&!this.placeholder&&("to"===this.slot||""===this.slot?this.placeholder=ut.t({id:"slider.placeholder.to",message:"Max",comment:"Max as in short for Maximum"}):"from"===this.slot&&(this.placeholder=ut.t({id:"slider.placeholder.from",message:"Min",comment:"Min as in short for Minimum"}))),e.has("value")){void 0===this.#e&&void 0!==this.value&&(this.#e=this.value),this.setValue(this.value),this.#se();const t=e.get("value");""===this.value&&t&&this.dispatchEvent(new CustomEvent("thumbreset",{bubbles:!0}))}}render(){const e=this.placeholder&&!this.value;return q`<div class="w-slider-thumb">${"anchorName"in document.documentElement.style?W:q`<div class="polyfill-range"><div class="polyfill-active-range"></div></div>`} <input id="range" aria-label="${this.ariaLabel}" aria-describedby="${Ae(this.ariaDescription?"aria-description":void 0)}" class="w-slider-thumb__range" type="range" .value="${this.value}" min="${this.min}" max="${this.max}" step="${Ae(!this.openEnded&&this.step?this.step:void 0)}" ?disabled="${this.disabled}" @mousedown="${this.#ae}" @mouseup="${this.#ne}" @touchstart="${this.#ae}" @touchend="${this.#ne}" @focus="${this.#ae}" @blur="${this.#ne}" @input="${this.#N}" @keydown="${this.#ce}"> ${"from"!==this.slot&&this.slot?W:q`<span class="sr-only">${ut.t({id:"slider.label.from",message:"From"})+" "+(this.labelFormatter?this.labelFormatter("from"):this.min)+", "+ut.t({id:"slider.label.to",message:"To"})+" "+(this.labelFormatter?this.labelFormatter("to"):this.max)}</span>`} <span aria-hidden="true" class="w-slider-thumb__from-marker">${this.labelFormatter?this.labelFormatter("from"):this.min} </span><span aria-hidden="true" class="w-slider-thumb__to-marker">${this.labelFormatter?this.labelFormatter("to"):this.max}</span><w-textfield aria-label="${this.ariaLabel}" aria-description="${Ae(this.ariaDescriptionText)}" class="${ye({"w-slider-thumb__textfield":!0,"sr-only":this._hiddenTextfield})}" type="number" tabindex="${this._hiddenTextfield?-1:W}" placeholder="${this.placeholder}" .value="${this.textFieldDisplayValue}" .formatter="${this.valueFormatter&&!e?e=>this.valueFormatter(e,this.slot):W}" min="${this.openEnded?W:this.min}" max="${this.openEnded?W:this.max}" step="${Ae(this.step)}" ?invalid="${Boolean(this.invalid)}" @input="${this.#N}" @keydown="${this.#he}" ?disabled="${this.disabled}">${this.suffix?q`<w-affix slot="suffix" label="${this.suffix??""}"></w-affix>`:W}</w-textfield><w-attention tooltip placement="top" flip distance="24" .show="${this._showTooltip}"><output id="target" class="w-slider-thumb__tooltip-target" slot="target"></output> <span slot="message">${this.tooltipDisplayValue}${this.suffix?q` ${this.suffix??""}`:W}</span></w-attention><span class="sr-only" id="aria-description">${this.ariaDescriptionText}</span></div>`}}bc([ce({attribute:"aria-label"})],gc.prototype,"ariaLabel",void 0),bc([ce({attribute:"aria-description"})],gc.prototype,"ariaDescription",void 0),bc([ce({reflect:!0})],gc.prototype,"name",void 0),bc([ce({reflect:!0})],gc.prototype,"value",void 0),bc([ce({type:Boolean,reflect:!0})],gc.prototype,"disabled",void 0),bc([ce({type:Boolean,reflect:!0})],gc.prototype,"invalid",void 0),bc([ce({attribute:!1,reflect:!1})],gc.prototype,"openEnded",void 0),bc([ce({reflect:!0})],gc.prototype,"placeholder",void 0),bc([he()],gc.prototype,"markers",void 0),bc([he()],gc.prototype,"required",void 0),bc([he()],gc.prototype,"step",void 0),bc([he()],gc.prototype,"min",void 0),bc([he()],gc.prototype,"max",void 0),bc([he()],gc.prototype,"suffix",void 0),bc([ce({attribute:!1})],gc.prototype,"valueFormatter",void 0),bc([ce({attribute:!1})],gc.prototype,"tooltipFormatter",void 0),bc([ce({attribute:!1})],gc.prototype,"labelFormatter",void 0),bc([pe('input[type="range"]')],gc.prototype,"range",void 0),bc([pe(".w-slider-thumb__tooltip-target")],gc.prototype,"tooltipTarget",void 0),bc([pe("w-textfield")],gc.prototype,"textfield",void 0),bc([he()],gc.prototype,"_showTooltip",void 0),bc([he()],gc.prototype,"_inputHasFocus",void 0),bc([he()],gc.prototype,"_hiddenTextfield",void 0),customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",gc);const mc=JSON.parse('{"slider.error.out_of_bounds":["Værdien skal være mellem ",["min"]," og ",["max"]],"slider.error.overlap":["Maksimumværdien må ikke være mindre end minimumværdien"],"slider.error.required":["Dette felt er påkrævet"],"slider.label.from":["From"],"slider.label.to":["To"],"slider.placeholder.from":["Min"],"slider.placeholder.to":["Max"]}'),vc=JSON.parse('{"slider.error.out_of_bounds":["Value must be between ",["min"]," and ",["max"]],"slider.error.overlap":["The maximum value cannot be less than the minimum"],"slider.error.required":["This field is required"],"slider.label.from":["From"],"slider.label.to":["To"],"slider.placeholder.from":["Min"],"slider.placeholder.to":["Max"]}'),fc=JSON.parse('{"slider.error.out_of_bounds":["Arvon on oltava välillä ",["min"]," - ",["max"]],"slider.error.overlap":["Maksimiarvo ei voi olla pienempi kuin minimiarvo"],"slider.error.required":["Tämä kenttä on pakollinen"],"slider.label.from":["From"],"slider.label.to":["To"],"slider.placeholder.from":["Min"],"slider.placeholder.to":["Max"]}'),wc=JSON.parse('{"slider.error.out_of_bounds":["Verdien må være mellom ",["min"]," og ",["max"]],"slider.error.overlap":["Maksimumsverdien kan ikke være mindre enn minimumsverdien"],"slider.error.required":["Dette feltet er påkrevd"],"slider.label.from":["From"],"slider.label.to":["To"],"slider.placeholder.from":["Min"],"slider.placeholder.to":["Max"]}'),yc=JSON.parse('{"slider.error.out_of_bounds":["Värdet måste vara mellan ",["min"]," och ",["max"]],"slider.error.overlap":["Maxvärdet kan inte vara mindre än minimivärdet"],"slider.error.required":["Detta fält är obligatoriskt"],"slider.label.from":["From"],"slider.label.to":["To"],"slider.placeholder.from":["Min"],"slider.placeholder.to":["Max"]}'),xc=a`.w-slider{position:relative;border:none;padding:0;margin:0;display:grid;width:100%;grid-template-areas:"label" "description" "slider" "error";grid-template-columns:1fr;--w-slider-track-background:var(--w-s-color-background-disabled-subtle);--w-slider-track-active-background:var(--w-s-color-background-primary);--w-slider-track-height:4px;--w-slider-track-active-height:6px;--w-slider-thumb-background:var(--w-s-color-background-primary);--w-slider-thumb-background-hover:var(
       --w-s-color-background-primary-hover
     );--w-slider-thumb-size:28px;--w-slider-thumb-offset:calc(var(--w-slider-thumb-size) / 2);--w-slider-marker-color:var(--w-s-color-border);--_range-top:calc(
       var(--w-slider-thumb-size) / 2 +

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.10.0-next.6",
+  "version": "2.10.0-next.8",
   "packageManager": "pnpm@11.1.0",
   "description": "Custom elements for Warp",
   "exports": {