@warp-ds/elements 2.2.0-next.20 → 2.2.0-next.22

package/dist/packages/select/react.d.ts

@@ -1,2 +1,6 @@
-import { WarpSelect } from './index.js';
-export declare const Select: import("@lit/react").ReactWebComponent<WarpSelect, {}>;
+import { WarpSelect } from '.';
+export declare const Select: import("@lit/react").ReactWebComponent<WarpSelect, {
+    onChange: string;
+    onchange: string;
+}>;
+export declare const Option: import("@lit/react").ReactWebComponent<HTMLOptionElement, {}>;

package/dist/packages/select/react.js

@@ -1,8 +1,20 @@
-import React from 'react';
+import { LitElement } from 'lit';
 import { createComponent } from '@lit/react';
-import { WarpSelect } from './index.js';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
 export const Select = createComponent({
     tagName: 'w-select',
-    elementClass: WarpSelect,
+    elementClass: Component,
+    react: React,
+    events: {
+        onChange: 'change',
+        onchange: 'change',
+    },
+});
+export const Option = createComponent({
+    tagName: 'w-option',
+    elementClass: Component,
     react: React,
 });

package/dist/packages/select/select.react.stories.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { Select } from './react';
+declare const _default: {
+    title: string;
+    render(args: Omit<React.HTMLAttributes<import(".").WarpSelect>, "label" | "onchange" | "autoFocus" | "onChange" | "render" | "renderOptions" | "connectedCallback" | "disconnectedCallback" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "form" | "disabled" | "name" | "value" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "resetFormControl" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "invalid" | "optional" | "readOnly" | "hint" | "always" | "_options" | "_setValue" | "handleKeyDown"> & {
+        onChange?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+    } & Partial<Omit<import(".").WarpSelect, keyof HTMLElement>> & React.RefAttributes<import(".").WarpSelect>): React.JSX.Element;
+    component: import("@lit/react").ReactWebComponent<import(".").WarpSelect, {
+        onChange: string;
+        onchange: string;
+    }>;
+};
+export default _default;
+export type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const ChangeEvent: (args: any) => React.JSX.Element;

package/dist/packages/select/select.react.stories.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Select, Option } from './react';
+export default {
+    title: 'Forms/Select',
+    render(args) {
+        return (React.createElement(Select, { ...args },
+            React.createElement(Option, { value: "strawberries" }, "Strawberries"),
+            React.createElement(Option, { value: "raspberries", selected: true }, "Raspberries"),
+            React.createElement(Option, { value: "cloudberries" }, "Cloudberries")));
+    },
+    component: Select,
+};
+export const Default = {
+    args: {
+        label: 'Berries',
+    },
+};
+export const ChangeEvent = (args) => {
+    const [selectedValue, setSelectedValue] = useState('');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null,
+            "Selected Value: ",
+            selectedValue),
+        React.createElement(Select, { ...args, onChange: (e) => setSelectedValue(e.detail) },
+            React.createElement(Option, { value: "strawberries" }, "Strawberries"),
+            React.createElement(Option, { value: "raspberries", selected: true }, "Raspberries"),
+            React.createElement(Option, { value: "cloudberries" }, "Cloudberries"))));
+};

package/dist/packages/select/select.stories.js

@@ -1,6 +1,6 @@
-import { html } from 'lit';
 import { spread } from '@open-wc/lit-helpers';
 import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit';
 import { prespread } from '../../.storybook/utilities.js';
 import './index.js';
 const { events, args, argTypes } = getStorybookHelpers('w-select');
@@ -9,7 +9,7 @@ const meta = {
     render(args) {
         return html `
       <w-select ${spread(prespread(args))}>
-        <option value="strawberries">Strawberries</option>
+        <w-option value="strawberries">Strawberries</w-option>
         <option value="raspberries" selected>Raspberries</option>
         <option value="cloudberries">Cloudberries</option>
       </w-select>

package/dist/packages/select/select.test.js

@@ -1,5 +1,5 @@
-import { html } from 'lit';
 import { userEvent } from '@vitest/browser/context';
+import { html } from 'lit';
 import { expect, test } from 'vitest';
 import { render } from 'vitest-browser-lit';
 import './index.js';

package/dist/packages/select/styles.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export const styles = css `*,: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}.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}.block,.before\\:block:before{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:none}.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{border-color:var(--w-s-color-border)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.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)}.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}.pointer-events-none,.before\\:pointer-events-none:before{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)}`;
+export const styles = css `*,: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}.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}.block,.before\\:block:before{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:none}.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}.pointer-events-none,.before\\:pointer-events-none:before{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)}`;

package/dist/packages/slider/Slider.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import { createComponent } from '@lit/react';
+import React from 'react';
 import { WarpSlider } from './slider.js';
 export const Slider = createComponent({
     tagName: 'w-slider',

package/dist/packages/slider/SliderThumb.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import { createComponent } from '@lit/react';
+import React from 'react';
 import { WarpSliderThumb } from './slider-thumb.js';
 export const SliderThumb = createComponent({
     tagName: 'w-slider-thumb',

package/dist/packages/slider/index.js

@@ -1,4 +1,4 @@
-var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{throw TypeError(a)};var s=(a,o,e,r)=>{for(var i=r>1?void 0:r?ke(o,e):o,c=a.length-1,m;c>=0;c--)(m=a[c])&&(i=(r?m(o,e,i):m(i))||i);return r&&i&&xe(o,e,i),i};var Q=(a,o,e)=>o.has(a)||ae("Cannot "+e);var ie=(a,o,e)=>(Q(a,o,"read from private field"),e?e.call(a):o.get(a)),j=(a,o,e)=>o.has(a)?ae("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(a):o.set(a,e),se=(a,o,e,r)=>(Q(a,o,"write to private field"),r?r.call(a,e):o.set(a,e),e),h=(a,o,e)=>(Q(a,o,"access private method"),e);import{html as de,LitElement as ce,nothing as _e}from"lit";var l=function(a,o,e,r){if(e==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o=="function"?a!==o||!r:!o.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?r:e==="a"?r.call(a):r?r.value:o.get(a)},p=function(a,o,e,r,i){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof o=="function"?a!==o||!i:!o.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?i.call(a,e):i?i.value=e:o.set(a,e),e};function R(a){var o,e,r,i,c,m,x,E,C,_,D,U,L,P,A,F,B,H,G;class we extends a{constructor(...t){var n,b,u;super(...t),o.add(this),this.internals=this.attachInternals(),e.set(this,!1),r.set(this,!1),i.set(this,!1),c.set(this,void 0),m.set(this,void 0),x.set(this,!0),C.set(this,""),_.set(this,()=>{p(this,i,!0,"f"),p(this,e,!0,"f"),l(this,o,"m",F).call(this)}),D.set(this,()=>{p(this,e,!1,"f"),l(this,o,"m",B).call(this,this.shouldFormValueUpdate()?l(this,C,"f"):""),!this.validity.valid&&l(this,i,"f")&&p(this,r,!0,"f");let z=l(this,o,"m",F).call(this);this.validationMessageCallback&&this.validationMessageCallback(z?this.internals.validationMessage:"")}),U.set(this,()=>{var z;l(this,x,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),p(this,x,!1,"f")),p(this,i,!0,"f"),p(this,r,!0,"f"),l(this,o,"m",F).call(this),(z=this===null||this===void 0?void 0:this.validationMessageCallback)===null||z===void 0||z.call(this,this.showError?this.internals.validationMessage:"")}),L.set(this,void 0),P.set(this,!1),A.set(this,Promise.resolve()),(n=this.addEventListener)===null||n===void 0||n.call(this,"focus",l(this,_,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"blur",l(this,D,"f")),(u=this.addEventListener)===null||u===void 0||u.call(this,"invalid",l(this,U,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let t=this.validators.map(u=>u.attribute).flat(),n=super.observedAttributes||[];return[...new Set([...n,...t])]}static getValidator(t){return this.validators.find(n=>n.attribute===t)||null}static getValidators(t){return this.validators.filter(n=>{var b;if(n.attribute===t||!((b=n.attribute)===null||b===void 0)&&b.includes(t))return!0})}get form(){return this.internals.form}get showError(){return l(this,o,"m",F).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(t,n,b){var u;(u=super.attributeChangedCallback)===null||u===void 0||u.call(this,t,n,b);let I=this.constructor.getValidators(t);I!=null&&I.length&&this.validationTarget&&this.setValue(l(this,C,"f"))}setValue(t){var n;p(this,r,!1,"f"),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,""),p(this,C,t,"f");let u=this.shouldFormValueUpdate()?t:null;this.internals.setFormValue(u),l(this,o,"m",B).call(this,u),this.valueChangedCallback&&this.valueChangedCallback(u),l(this,o,"m",F).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(t=>t(l(this,A,"f")))}formResetCallback(){var t,n;p(this,i,!1,"f"),p(this,r,!1,"f"),l(this,o,"m",F).call(this),(t=this.resetFormControl)===null||t===void 0||t.call(this),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,l(this,o,"m",F).call(this)?this.validationMessage:"")}}return e=new WeakMap,r=new WeakMap,i=new WeakMap,c=new WeakMap,m=new WeakMap,x=new WeakMap,C=new WeakMap,_=new WeakMap,D=new WeakMap,U=new WeakMap,L=new WeakMap,P=new WeakMap,A=new WeakMap,o=new WeakSet,E=function(){let t=this.getRootNode(),n=`${this.localName}[name="${this.getAttribute("name")}"]`;return t.querySelectorAll(n)},F=function(){if(this.hasAttribute("disabled"))return!1;let t=l(this,r,"f")||l(this,i,"f")&&!this.validity.valid&&!l(this,e,"f");return t&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),t},B=function(t){let n=this.constructor,b={},u=n.validators,z=[],I=u.some(w=>w.isValid instanceof Promise);l(this,P,"f")||(p(this,A,new Promise(w=>{p(this,L,w,"f")}),"f"),p(this,P,!0,"f")),l(this,c,"f")&&(l(this,c,"f").abort(),p(this,m,l(this,c,"f"),"f"));let N=new AbortController;p(this,c,N,"f");let S,te=!1;u.length&&(u.forEach(w=>{let J=w.key||"customError",$=w.isValid(this,t,N.signal);$ instanceof Promise?(z.push($),$.then(K=>{K!=null&&(b[J]=!K,S=l(this,o,"m",G).call(this,w,t),l(this,o,"m",H).call(this,b,S))})):(b[J]=!$,this.validity[J]!==!$&&(te=!0),!$&&!S&&(S=l(this,o,"m",G).call(this,w,t)))}),Promise.allSettled(z).then(()=>{var w;N!=null&&N.signal.aborted||(p(this,P,!1,"f"),(w=l(this,L,"f"))===null||w===void 0||w.call(this))}),(te||!I)&&l(this,o,"m",H).call(this,b,S))},H=function(t,n){if(this.validationTarget)this.internals.setValidity(t,n,this.validationTarget),p(this,x,!1,"f");else{if(this.internals.setValidity(t,n),this.internals.validity.valid)return;p(this,x,!0,"f")}},G=function(t,n){if(this.validityCallback){let b=this.validityCallback(t.key||"customError");if(b)return b}return t.message instanceof Function?t.message(this,n):t.message},we}import{property as y}from"lit/decorators.js";import{css as ne}from"lit";var X=ne`
+var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{throw TypeError(a)};var s=(a,t,e,r)=>{for(var i=r>1?void 0:r?ke(t,e):t,c=a.length-1,m;c>=0;c--)(m=a[c])&&(i=(r?m(t,e,i):m(i))||i);return r&&i&&xe(t,e,i),i};var Q=(a,t,e)=>t.has(a)||ae("Cannot "+e);var ie=(a,t,e)=>(Q(a,t,"read from private field"),e?e.call(a):t.get(a)),j=(a,t,e)=>t.has(a)?ae("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(a):t.set(a,e),se=(a,t,e,r)=>(Q(a,t,"write to private field"),r?r.call(a,e):t.set(a,e),e),h=(a,t,e)=>(Q(a,t,"access private method"),e);var l=function(a,t,e,r){if(e==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof t=="function"?a!==t||!r:!t.has(a))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?r:e==="a"?r.call(a):r?r.value:t.get(a)},p=function(a,t,e,r,i){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t=="function"?a!==t||!i:!t.has(a))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?i.call(a,e):i?i.value=e:t.set(a,e),e};function R(a){var t,e,r,i,c,m,x,E,C,_,D,U,L,P,A,F,B,H,G;class we extends a{constructor(...o){var n,b,u;super(...o),t.add(this),this.internals=this.attachInternals(),e.set(this,!1),r.set(this,!1),i.set(this,!1),c.set(this,void 0),m.set(this,void 0),x.set(this,!0),C.set(this,""),_.set(this,()=>{p(this,i,!0,"f"),p(this,e,!0,"f"),l(this,t,"m",F).call(this)}),D.set(this,()=>{p(this,e,!1,"f"),l(this,t,"m",B).call(this,this.shouldFormValueUpdate()?l(this,C,"f"):""),!this.validity.valid&&l(this,i,"f")&&p(this,r,!0,"f");let z=l(this,t,"m",F).call(this);this.validationMessageCallback&&this.validationMessageCallback(z?this.internals.validationMessage:"")}),U.set(this,()=>{var z;l(this,x,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),p(this,x,!1,"f")),p(this,i,!0,"f"),p(this,r,!0,"f"),l(this,t,"m",F).call(this),(z=this===null||this===void 0?void 0:this.validationMessageCallback)===null||z===void 0||z.call(this,this.showError?this.internals.validationMessage:"")}),L.set(this,void 0),P.set(this,!1),A.set(this,Promise.resolve()),(n=this.addEventListener)===null||n===void 0||n.call(this,"focus",l(this,_,"f")),(b=this.addEventListener)===null||b===void 0||b.call(this,"blur",l(this,D,"f")),(u=this.addEventListener)===null||u===void 0||u.call(this,"invalid",l(this,U,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let o=this.validators.map(u=>u.attribute).flat(),n=super.observedAttributes||[];return[...new Set([...n,...o])]}static getValidator(o){return this.validators.find(n=>n.attribute===o)||null}static getValidators(o){return this.validators.filter(n=>{var b;if(n.attribute===o||!((b=n.attribute)===null||b===void 0)&&b.includes(o))return!0})}get form(){return this.internals.form}get showError(){return l(this,t,"m",F).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(o,n,b){var u;(u=super.attributeChangedCallback)===null||u===void 0||u.call(this,o,n,b);let I=this.constructor.getValidators(o);I!=null&&I.length&&this.validationTarget&&this.setValue(l(this,C,"f"))}setValue(o){var n;p(this,r,!1,"f"),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,""),p(this,C,o,"f");let u=this.shouldFormValueUpdate()?o:null;this.internals.setFormValue(u),l(this,t,"m",B).call(this,u),this.valueChangedCallback&&this.valueChangedCallback(u),l(this,t,"m",F).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(o=>o(l(this,A,"f")))}formResetCallback(){var o,n;p(this,i,!1,"f"),p(this,r,!1,"f"),l(this,t,"m",F).call(this),(o=this.resetFormControl)===null||o===void 0||o.call(this),(n=this.validationMessageCallback)===null||n===void 0||n.call(this,l(this,t,"m",F).call(this)?this.validationMessage:"")}}return e=new WeakMap,r=new WeakMap,i=new WeakMap,c=new WeakMap,m=new WeakMap,x=new WeakMap,C=new WeakMap,_=new WeakMap,D=new WeakMap,U=new WeakMap,L=new WeakMap,P=new WeakMap,A=new WeakMap,t=new WeakSet,E=function(){let o=this.getRootNode(),n=`${this.localName}[name="${this.getAttribute("name")}"]`;return o.querySelectorAll(n)},F=function(){if(this.hasAttribute("disabled"))return!1;let o=l(this,r,"f")||l(this,i,"f")&&!this.validity.valid&&!l(this,e,"f");return o&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),o},B=function(o){let n=this.constructor,b={},u=n.validators,z=[],I=u.some(w=>w.isValid instanceof Promise);l(this,P,"f")||(p(this,A,new Promise(w=>{p(this,L,w,"f")}),"f"),p(this,P,!0,"f")),l(this,c,"f")&&(l(this,c,"f").abort(),p(this,m,l(this,c,"f"),"f"));let N=new AbortController;p(this,c,N,"f");let S,oe=!1;u.length&&(u.forEach(w=>{let J=w.key||"customError",$=w.isValid(this,o,N.signal);$ instanceof Promise?(z.push($),$.then(K=>{K!=null&&(b[J]=!K,S=l(this,t,"m",G).call(this,w,o),l(this,t,"m",H).call(this,b,S))})):(b[J]=!$,this.validity[J]!==!$&&(oe=!0),!$&&!S&&(S=l(this,t,"m",G).call(this,w,o)))}),Promise.allSettled(z).then(()=>{var w;N!=null&&N.signal.aborted||(p(this,P,!1,"f"),(w=l(this,L,"f"))===null||w===void 0||w.call(this))}),(oe||!I)&&l(this,t,"m",H).call(this,b,S))},H=function(o,n){if(this.validationTarget)this.internals.setValidity(o,n,this.validationTarget),p(this,x,!1,"f");else{if(this.internals.setValidity(o,n),this.internals.validity.valid)return;p(this,x,!0,"f")}},G=function(o,n){if(this.validityCallback){let b=this.validityCallback(o.key||"customError");if(b)return b}return o.message instanceof Function?o.message(this,n):o.message},we}import{html as de,LitElement as ce,nothing as _e}from"lit";import{property as y}from"lit/decorators.js";import{css as ne}from"lit";var X=ne`
   *,
   :before,
   :after {
@@ -2565,7 +2565,7 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
         <slot class="w-slider__slider" name="from" @slotchange=${h(this,g,V)}></slot>
         <slot class="w-slider__slider" name="to" @slotchange=${h(this,g,V)}></slot>
       </fieldset>
-    `}};T=new WeakMap,g=new WeakSet,V=function(){let e=this.querySelectorAll("w-slider-thumb");for(let r of e.values())r.min=this.min,r.max=this.max,r.step=this.step,r.suffix=this.suffix,r.required=this.required,r.formatter=this.formatter,r.ariaLabel||(r.slot||(r.ariaLabel=this.label),r.slot==="from"&&(r.ariaLabel=`${this.label} min`),r.slot==="to"&&(r.ariaLabel=`${this.label} max`)),r.forceDisabled=this.disabled,r.forceInvalid=this.invalid,h(this,g,W).call(this,r)},he=function(e){let r=e.target;h(this,g,W).call(this,r)},be=function(e){e.stopPropagation(),this.invalid=e.detail.invalid},W=function(e){var i,c;let r=e.slot;if(r){let m=h(this,g,pe).call(this),x=ie(this,T),E=x-m;m<=x&&this.style.setProperty("--thumb-offset",String(E))}if(r||this.style.setProperty("--from","0"),r==="from"){let m=(i=e.value)!=null?i:e.value=this.min;this.style.setProperty("--from",m)}if(!r||r==="to"){let m=(c=e.value)!=null?c:e.value=this.max;this.style.setProperty("--to",m)}},pe=function(){let e=window.getComputedStyle(this.shadowRoot.querySelector(".w-slider__active-range"),"::before").width;return Number.parseFloat(e.replace("px",""))},v.shadowRootOptions={...ce.shadowRootOptions,delegatesFocus:!0},v.styles=[X,le],s([y()],v.prototype,"label",2),s([y({type:Boolean,reflect:!0})],v.prototype,"disabled",2),s([y({type:Boolean,reflect:!0})],v.prototype,"invalid",2),s([y({type:Boolean,reflect:!0})],v.prototype,"required",2),s([y({reflect:!0})],v.prototype,"min",2),s([y({reflect:!0})],v.prototype,"max",2),s([y({type:Number})],v.prototype,"markers",2),s([y({type:Number})],v.prototype,"step",2),s([y()],v.prototype,"suffix",2),s([y({attribute:!1})],v.prototype,"formatter",2);customElements.get("w-slider")||customElements.define("w-slider",v);import{html as q,LitElement as me,nothing as ee}from"lit";import{property as M,query as ve,state as k}from"lit/decorators.js";import{classMap as Fe}from"lit/directives/class-map.js";import{ifDefined as re}from"lit/directives/if-defined.js";import{css as ze}from"lit";var ue=ze`
+    `}};T=new WeakMap,g=new WeakSet,V=function(){let e=this.querySelectorAll("w-slider-thumb");for(let r of e.values())r.min=this.min,r.max=this.max,r.step=this.step,r.suffix=this.suffix,r.required=this.required,r.formatter=this.formatter,r.ariaLabel||(r.slot||(r.ariaLabel=this.label),r.slot==="from"&&(r.ariaLabel=`${this.label} min`),r.slot==="to"&&(r.ariaLabel=`${this.label} max`)),r.forceDisabled=this.disabled,r.forceInvalid=this.invalid,h(this,g,W).call(this,r)},he=function(e){let r=e.target;h(this,g,W).call(this,r)},be=function(e){e.stopPropagation(),this.invalid=e.detail.invalid},W=function(e){var i,c;let r=e.slot;if(r){let m=h(this,g,pe).call(this),x=ie(this,T),E=x-m;m<=x&&this.style.setProperty("--thumb-offset",String(E))}if(r||this.style.setProperty("--from","0"),r==="from"){let m=(i=e.value)!=null?i:e.value=this.min;this.style.setProperty("--from",m)}if(!r||r==="to"){let m=(c=e.value)!=null?c:e.value=this.max;this.style.setProperty("--to",m)}},pe=function(){let e=window.getComputedStyle(this.shadowRoot.querySelector(".w-slider__active-range"),"::before").width;return Number.parseFloat(e.replace("px",""))},v.shadowRootOptions={...ce.shadowRootOptions,delegatesFocus:!0},v.styles=[X,le],s([y({reflect:!0})],v.prototype,"label",2),s([y({type:Boolean,reflect:!0})],v.prototype,"disabled",2),s([y({type:Boolean,reflect:!0})],v.prototype,"invalid",2),s([y({type:Boolean,reflect:!0})],v.prototype,"required",2),s([y({reflect:!0})],v.prototype,"min",2),s([y({reflect:!0})],v.prototype,"max",2),s([y({type:Number,reflect:!0})],v.prototype,"markers",2),s([y({type:Number,reflect:!0})],v.prototype,"step",2),s([y({reflect:!0})],v.prototype,"suffix",2),s([y({attribute:!1})],v.prototype,"formatter",2);customElements.get("w-slider")||customElements.define("w-slider",v);import{html as q,LitElement as me,nothing as ee}from"lit";import{property as M,query as ve,state as k}from"lit/decorators.js";import{classMap as Fe}from"lit/directives/class-map.js";import{ifDefined as re}from"lit/directives/if-defined.js";import{css as ze}from"lit";var ue=ze`
   .w-slider-thumb {
     position: relative;
     display: grid;
@@ -2694,7 +2694,7 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
   :host([name='to']) .w-slider-thumb__range::-webkit-slider-thumb {
     margin-left: calc(1px * var(--thumb-offset) / 2);
   }
-`;import{css as Ce}from"lit";var ge=Ce`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hidden{display:none}.static{position:static}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`;var fe={};var f,Z,O,oe,d=class extends R(me){constructor(){super(...arguments);j(this,f);this._invalid=!1;this._showTooltip=!1;this.anchorPositioningStyleElement=null}async connectedCallback(){var e;if(super.connectedCallback(),"anchorName"in document.documentElement.style)await this.updateComplete;else{let r=fe.url.substring(0,fe.url.lastIndexOf("/"));try{let[{default:i}]=await Promise.all([import(`${r}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent=`
+`;import{css as Ce}from"lit";var ge=Ce`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hidden{display:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}`;var fe={};var f,Z,O,te,d=class extends R(me){constructor(){super(...arguments);j(this,f);this._invalid=!1;this._showTooltip=!1;this.anchorPositioningStyleElement=null}async connectedCallback(){var e;if(super.connectedCallback(),"anchorName"in document.documentElement.style)await this.updateComplete;else{let r=fe.url.substring(0,fe.url.lastIndexOf("/"));try{let[{default:i}]=await Promise.all([import(`${r}/oddbird-css-anchor-positioning.js`),this.updateComplete]);this.anchorPositioningStyleElement||(this.anchorPositioningStyleElement=document.createElement("style"),this.shadowRoot.prepend(this.anchorPositioningStyleElement)),this.anchorPositioningStyleElement.textContent=`
         /*
          * The polyfill can only anchor to ::before and ::after pseudo elements.
          * We work around that by recreating a transparent version of the active range
@@ -2761,7 +2761,7 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
           @touchend="${h(this,f,O)}"
           @focus="${h(this,f,Z)}"
           @blur="${h(this,f,O)}"
-          @input="${h(this,f,oe)}" />
+          @input="${h(this,f,te)}" />
 
         <span class="w-slider-thumb__from-marker">${this.formatter?this.formatter(this.min):this.min} ${this.suffix}</span>
         <span class="w-slider-thumb__to-marker">${this.formatter?this.formatter(this.max):this.max} ${this.suffix}</span>
@@ -2776,7 +2776,7 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
           .formatter=${this.formatter}
           .value="${this.value}"
           ?invalid="${this.forceInvalid||this._invalid}"
-          @input="${h(this,f,oe)}">
+          @input="${h(this,f,te)}">
           ${this.suffix?q`<w-affix slot="suffix" label="${this.suffix}"></w-affix>`:ee}
         </w-textfield>
 
@@ -2787,5 +2787,5 @@ var xe=Object.defineProperty;var ke=Object.getOwnPropertyDescriptor;var ae=a=>{t
         <!-- aria-description is still not recommended for general use, so make a visually hidden element and refer to it with aria-describedby -->
         <span class="sr-only" id="aria-description">${this.ariaDescription}</span>
       </div>
-    `}};f=new WeakSet,Z=function(){this._showTooltip=!0},O=function(){this._showTooltip=!1},oe=function(e){let r=e.currentTarget.tagName==="W-TEXTFIELD";if(e instanceof CustomEvent)return;let i=e.currentTarget.value;if(i==="")return this.required&&(this._invalid=!0),!1;r&&this._invalid&&(this._invalid=!1);let c=Number.parseInt(i),m=Number.parseInt(this.max),x=Number.parseInt(this.min);(c>m||c<x)&&(this._invalid=!0);let E=!1;if(this.slot){let C=getComputedStyle(this);if(this.slot==="from"){let _=C.getPropertyValue("--to");if(c>Number.parseInt(_)){if(r)return this._invalid=!0,!1;E=!0,this.value=_}}else{let _=C.getPropertyValue("--from");if(c<Number.parseInt(_)){if(r)return this._invalid=!0,!1;E=!0,this.value=_}}}return E?(e.preventDefault(),this.range.value=this.value,!1):(this.value=i,!0)},d.shadowRootOptions={...me.shadowRootOptions,delegatesFocus:!0},d.styles=[X,ge,ue],s([M({attribute:"aria-label"})],d.prototype,"ariaLabel",2),s([M({attribute:"aria-description"})],d.prototype,"ariaDescription",2),s([M()],d.prototype,"label",2),s([M()],d.prototype,"name",2),s([M({reflect:!0})],d.prototype,"value",2),s([M({type:Boolean,reflect:!0})],d.prototype,"disabled",2),s([k()],d.prototype,"markers",2),s([k()],d.prototype,"required",2),s([k()],d.prototype,"step",2),s([k()],d.prototype,"min",2),s([k()],d.prototype,"max",2),s([k()],d.prototype,"suffix",2),s([k()],d.prototype,"forceDisabled",2),s([k()],d.prototype,"forceInvalid",2),s([k()],d.prototype,"formatter",2),s([ve('input[type="range"]')],d.prototype,"range",2),s([ve("w-textfield")],d.prototype,"textfield",2),s([k()],d.prototype,"_invalid",2),s([k()],d.prototype,"_showTooltip",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",d);export{v as WarpSlider,d as WarpSliderThumb};
+    `}};f=new WeakSet,Z=function(){this._showTooltip=!0},O=function(){this._showTooltip=!1},te=function(e){let r=e.currentTarget.tagName==="W-TEXTFIELD";if(e instanceof CustomEvent)return;let i=e.currentTarget.value;if(i==="")return this.required&&(this._invalid=!0),!1;r&&this._invalid&&(this._invalid=!1);let c=Number.parseInt(i),m=Number.parseInt(this.max),x=Number.parseInt(this.min);(c>m||c<x)&&(this._invalid=!0);let E=!1;if(this.slot){let C=getComputedStyle(this);if(this.slot==="from"){let _=C.getPropertyValue("--to");if(c>Number.parseInt(_)){if(r)return this._invalid=!0,!1;E=!0,this.value=_}}else{let _=C.getPropertyValue("--from");if(c<Number.parseInt(_)){if(r)return this._invalid=!0,!1;E=!0,this.value=_}}}return E?(e.preventDefault(),this.range.value=this.value,!1):(this.value=i,!0)},d.shadowRootOptions={...me.shadowRootOptions,delegatesFocus:!0},d.styles=[X,ge,ue],s([M({attribute:"aria-label",reflect:!0})],d.prototype,"ariaLabel",2),s([M({attribute:"aria-description",reflect:!0})],d.prototype,"ariaDescription",2),s([M({reflect:!0})],d.prototype,"label",2),s([M({reflect:!0})],d.prototype,"name",2),s([M({reflect:!0})],d.prototype,"value",2),s([M({type:Boolean,reflect:!0})],d.prototype,"disabled",2),s([k()],d.prototype,"markers",2),s([k()],d.prototype,"required",2),s([k()],d.prototype,"step",2),s([k()],d.prototype,"min",2),s([k()],d.prototype,"max",2),s([k()],d.prototype,"suffix",2),s([k()],d.prototype,"forceDisabled",2),s([k()],d.prototype,"forceInvalid",2),s([k()],d.prototype,"formatter",2),s([ve('input[type="range"]')],d.prototype,"range",2),s([ve("w-textfield")],d.prototype,"textfield",2),s([k()],d.prototype,"_invalid",2),s([k()],d.prototype,"_showTooltip",2);customElements.get("w-slider-thumb")||customElements.define("w-slider-thumb",d);export{v as WarpSlider,d as WarpSliderThumb};
 //# sourceMappingURL=index.js.map