@warp-ds/elements 2.3.0-next.24 → 2.3.0-next.26

package/dist/packages/slider/slider.stories.js

@@ -186,7 +186,7 @@ export const OverUnder = {
           min="1950"
           max="2025"
           data-testid="overunder"
-          allow-values-outside-range="true"
+          allow-values-outside-range
         >
           <w-slider-thumb
             slot="from"
@@ -303,7 +303,7 @@ export const TestCase = {
           min="0"
           max="700000"
           data-testid="overunder"
-          allow-values-outside-range="true"
+          allow-values-outside-range
           step="10000"
         >
           <w-slider-thumb

package/dist/packages/slider/slider.test.js

@@ -81,3 +81,31 @@ test('deleting from number input works as expected', async () => {
     await userEvent.type(page.getByRole('spinbutton').last(), '{Backspace}');
     await expect.element(page.getByRole('spinbutton').last()).not.toHaveValue();
 });
+test('can reset slider by resetting surrounding form', async () => {
+    render(html `
+    <form>
+      <w-slider label="Slider from 0 - 10" min="0" max="10">
+        <p slot="description">If you want to slide between 0 and 10, this slider has you covered.</p>
+        <w-slider-thumb name="zero-ten" value="3"></w-slider-thumb>
+      </w-slider>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const wSlider = document.querySelector('w-slider');
+    const wSliderThumb = wSlider.querySelector('w-slider-thumb');
+    // sanity
+    expect(form).not.toBeNull();
+    expect(wSlider).not.toBeNull();
+    expect(wSliderThumb).not.toBeNull();
+    expect(wSliderThumb.value).toBe('3');
+    expect(Object.fromEntries(new FormData(form).entries())['zero-ten']).toBe('3');
+    wSliderThumb.value = '5';
+    await wSliderThumb.updateComplete;
+    expect(wSliderThumb.value).toBe('5');
+    expect(Object.fromEntries(new FormData(form).entries())['zero-ten']).toBe('5');
+    // Reset the form
+    form.reset();
+    await wSliderThumb.updateComplete;
+    expect(wSliderThumb.value).toBe('3');
+    expect(Object.fromEntries(new FormData(form).entries())['zero-ten']).toBe('3');
+});

package/dist/packages/switch/index.d.ts

@@ -1,6 +1,10 @@
 import { LitElement } from 'lit';
-export declare class WarpSwitch extends LitElement {
-    value: boolean;
+declare const WarpSwitch_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+export declare class WarpSwitch extends WarpSwitch_base {
+    #private;
+    name: string;
+    value: string;
+    checked: boolean;
     disabled: boolean;
     static styles: import("lit").CSSResult[];
     /** @internal */
@@ -11,5 +15,9 @@ export declare class WarpSwitch extends LitElement {
     get _handleClasses(): string;
     /** @internal */
     _handleClick(): void;
+    connectedCallback(): void;
+    willUpdate(changedProperties: any): void;
+    resetFormControl(): void;
     render(): import("lit").TemplateResult<1>;
 }
+export {};

package/dist/packages/switch/index.js

@@ -1,4 +1,4 @@
-var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r)=>{for(var o=r>1?void 0:r?u(t,n):t,l=a.length-1,s;l>=0;l--)(s=a[l])&&(o=(r?s(t,n,o):s(o))||o);return r&&o&&h(t,n,o),o};var d=function(){for(var a=[],t=arguments.length;t--;)a[t]=arguments[t];return a.reduce(function(n,r){return n.concat(typeof r=="string"?r:Array.isArray(r)?d.apply(void 0,r):typeof r=="object"&&r?Object.keys(r).map(function(o){return r[o]?o:""}):"")},[]).join(" ")};import{html as m,LitElement as f}from"lit";import{property as v}from"lit/decorators.js";import{css as b}from"lit";var p=b`
+var K=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var $=t=>{throw TypeError(t)};var F=(t,e,a,o)=>{for(var n=o>1?void 0:o?Q(e,a):e,p=t.length-1,w;p>=0;p--)(w=t[p])&&(n=(o?w(e,a,n):w(n))||n);return o&&n&&K(e,a,n),n};var N=(t,e,a)=>e.has(t)||$("Cannot "+a);var U=(t,e,a)=>(N(t,e,"read from private field"),a?a.call(t):e.get(t)),L=(t,e,a)=>e.has(t)?$("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,a),G=(t,e,a,o)=>(N(t,e,"write to private field"),o?o.call(t,a):e.set(t,a),a);var Y=function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return t.reduce(function(a,o){return a.concat(typeof o=="string"?o:Array.isArray(o)?Y.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(n){return o[n]?n:""}):"")},[]).join(" ")};var s=function(t,e,a,o){if(a==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?t!==e||!o:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return a==="m"?o:a==="a"?o.call(t):o?o.value:e.get(t)},d=function(t,e,a,o,n){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!n)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?t!==e||!n:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?n.call(t,a):n?n.value=a:e.set(t,a),a};function I(t){var e,a,o,n,p,w,m,H,k,X,A,Z,M,x,E,v,P,T,S;class J extends t{constructor(...r){var i,l,c;super(...r),e.add(this),this.internals=this.attachInternals(),a.set(this,!1),o.set(this,!1),n.set(this,!1),p.set(this,void 0),w.set(this,void 0),m.set(this,!0),k.set(this,""),X.set(this,()=>{d(this,n,!0,"f"),d(this,a,!0,"f"),s(this,e,"m",v).call(this)}),A.set(this,()=>{d(this,a,!1,"f"),s(this,e,"m",P).call(this,this.shouldFormValueUpdate()?s(this,k,"f"):""),!this.validity.valid&&s(this,n,"f")&&d(this,o,!0,"f");let g=s(this,e,"m",v).call(this);this.validationMessageCallback&&this.validationMessageCallback(g?this.internals.validationMessage:"")}),Z.set(this,()=>{var g;s(this,m,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),d(this,m,!1,"f")),d(this,n,!0,"f"),d(this,o,!0,"f"),s(this,e,"m",v).call(this),(g=this===null||this===void 0?void 0:this.validationMessageCallback)===null||g===void 0||g.call(this,this.showError?this.internals.validationMessage:"")}),M.set(this,void 0),x.set(this,!1),E.set(this,Promise.resolve()),(i=this.addEventListener)===null||i===void 0||i.call(this,"focus",s(this,X,"f")),(l=this.addEventListener)===null||l===void 0||l.call(this,"blur",s(this,A,"f")),(c=this.addEventListener)===null||c===void 0||c.call(this,"invalid",s(this,Z,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let r=this.validators.map(c=>c.attribute).flat(),i=super.observedAttributes||[];return[...new Set([...i,...r])]}static getValidator(r){return this.validators.find(i=>i.attribute===r)||null}static getValidators(r){return this.validators.filter(i=>{var l;if(i.attribute===r||!((l=i.attribute)===null||l===void 0)&&l.includes(r))return!0})}get form(){return this.internals.form}get showError(){return s(this,e,"m",v).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(r,i,l){var c;(c=super.attributeChangedCallback)===null||c===void 0||c.call(this,r,i,l);let z=this.constructor.getValidators(r);z!=null&&z.length&&this.validationTarget&&this.setValue(s(this,k,"f"))}setValue(r){var i;d(this,o,!1,"f"),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,""),d(this,k,r,"f");let c=this.shouldFormValueUpdate()?r:null;this.internals.setFormValue(c),s(this,e,"m",P).call(this,c),this.valueChangedCallback&&this.valueChangedCallback(c),s(this,e,"m",v).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(r=>r(s(this,E,"f")))}formResetCallback(){var r,i;d(this,n,!1,"f"),d(this,o,!1,"f"),s(this,e,"m",v).call(this),(r=this.resetFormControl)===null||r===void 0||r.call(this),(i=this.validationMessageCallback)===null||i===void 0||i.call(this,s(this,e,"m",v).call(this)?this.validationMessage:"")}}return a=new WeakMap,o=new WeakMap,n=new WeakMap,p=new WeakMap,w=new WeakMap,m=new WeakMap,k=new WeakMap,X=new WeakMap,A=new WeakMap,Z=new WeakMap,M=new WeakMap,x=new WeakMap,E=new WeakMap,e=new WeakSet,H=function(){let r=this.getRootNode(),i=`${this.localName}[name="${this.getAttribute("name")}"]`;return r.querySelectorAll(i)},v=function(){if(this.hasAttribute("disabled"))return!1;let r=s(this,o,"f")||s(this,n,"f")&&!this.validity.valid&&!s(this,a,"f");return r&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),r},P=function(r){let i=this.constructor,l={},c=i.validators,g=[],z=c.some(h=>h.isValid instanceof Promise);s(this,x,"f")||(d(this,E,new Promise(h=>{d(this,M,h,"f")}),"f"),d(this,x,!0,"f")),s(this,p,"f")&&(s(this,p,"f").abort(),d(this,w,s(this,p,"f"),"f"));let _=new AbortController;d(this,p,_,"f");let C,W=!1;c.length&&(c.forEach(h=>{let O=h.key||"customError",f=h.isValid(this,r,_.signal);f instanceof Promise?(g.push(f),f.then(D=>{D!=null&&(l[O]=!D,C=s(this,e,"m",S).call(this,h,r),s(this,e,"m",T).call(this,l,C))})):(l[O]=!f,this.validity[O]!==!f&&(W=!0),!f&&!C&&(C=s(this,e,"m",S).call(this,h,r)))}),Promise.allSettled(g).then(()=>{var h;_!=null&&_.signal.aborted||(d(this,x,!1,"f"),(h=s(this,M,"f"))===null||h===void 0||h.call(this))}),(W||!z)&&s(this,e,"m",T).call(this,l,C))},T=function(r,i){if(this.validationTarget)this.internals.setValidity(r,i,this.validationTarget),d(this,m,!1,"f");else{if(this.internals.setValidity(r,i),this.internals.validity.valid)return;d(this,m,!0,"f")}},S=function(r,i){if(this.validityCallback){let l=this.validityCallback(r.key||"customError");if(l)return l}return r.message instanceof Function?r.message(this,i):r.message},J}import{html as re,LitElement as oe}from"lit";import{property as j}from"lit/decorators.js";import{css as R}from"lit";var q=R`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r
   svg {
     pointer-events: none;
   }
-`,z=b`*, :before, :after {
+`,le=R`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,12 +2437,12 @@ var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r
                     display: none
                 }
             }
-        `;import{css as w}from"lit";var g=w`*,: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}.bg-\\[--w-s-color-border-strong\\]{background-color:var(--w-s-color-border-strong)}.group:hover .group-hover\\:bg-\\[--w-s-color-border-strong-hover\\]{background-color:var(--w-s-color-border-strong-hover)}.border{border-width:1px}.rounded-full{border-radius:9999px}.block{display:block}.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}.left-0{left:0}.left-4{left:.4rem}.top-0{top:0}.top-4{top:.4rem}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.group:hover .group-hover\\:s-bg-hover{background-color:var(--w-s-color-background-hover)}.group:hover .group-hover\\:s-bg-primary-hover{background-color:var(--w-s-color-background-primary-hover)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.group:hover .group-hover\\:s-border-strong-hover{border-color:var(--w-s-color-border-strong-hover)}.h-16{height:1.6rem}.h-24{height:2.4rem}.h-full{height:100%}.w-16{width:1.6rem}.w-44{width:4.4rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.pointer-events-none{pointer-events:none}.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}.translate-x-20{--w-translate-x:2rem;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}`;var e={base:"block relative h-24 w-44 cursor-pointer group focusable rounded-full",disabled:"pointer-events-none",track:"absolute top-0 left-0 h-full w-full rounded-full transition-colors",trackActive:"s-bg-primary group-hover:s-bg-primary-hover",trackInactive:"s-bg border s-border-strong group-hover:s-bg-hover group-hover:s-border-strong-hover",trackDisabledOn:"s-bg-disabled",trackDisabledOff:"s-bg-disabled-subtle border s-border-disabled",handle:"absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform",handleSelected:"translate-x-20",handleActive:"s-bg",handleNotDisabled:"bg-[--w-s-color-border-strong] group-hover:bg-[--w-s-color-border-strong-hover]",handleDisabledOn:"s-bg-disabled-subtle",handleDisabledOff:"s-bg-disabled",a11y:"sr-only"},i=class extends f{constructor(){super(...arguments);this.value=!1;this.disabled=!1}get _baseClasses(){return d([e.base,this.disabled&&e.disabled])}get _trackClasses(){return d([e.track,this.disabled?this.value?e.trackDisabledOn:e.trackDisabledOff:this.value?e.trackActive:e.trackInactive])}get _handleClasses(){return d([e.handle,this.value&&e.handleSelected,this.disabled?this.value?e.handleDisabledOn:e.handleDisabledOff:this.value?e.handleActive:e.handleNotDisabled])}_handleClick(){this.disabled||(this.value=!this.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0})))}render(){return m`
+        `;import{css as ee}from"lit";var B=ee`*,: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}.bg-\\[--w-s-color-border-strong\\]{background-color:var(--w-s-color-border-strong)}.group:hover .group-hover\\:bg-\\[--w-s-color-border-strong-hover\\]{background-color:var(--w-s-color-border-strong-hover)}.border{border-width:1px}.rounded-full{border-radius:9999px}.block{display:block}.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}.left-0{left:0}.left-4{left:.4rem}.top-0{top:0}.top-4{top:.4rem}.absolute{position:absolute}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled{background-color:var(--w-s-color-background-disabled)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-bg-primary{background-color:var(--w-s-color-background-primary)}.group:hover .group-hover\\:s-bg-hover{background-color:var(--w-s-color-background-hover)}.group:hover .group-hover\\:s-bg-primary-hover{background-color:var(--w-s-color-background-primary-hover)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.group:hover .group-hover\\:s-border-strong-hover{border-color:var(--w-s-color-border-strong-hover)}.h-16{height:1.6rem}.h-24{height:2.4rem}.h-full{height:100%}.w-16{width:1.6rem}.w-44{width:4.4rem}.w-full{width:100%}.cursor-pointer{cursor:pointer}.pointer-events-none{pointer-events:none}.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}.translate-x-20{--w-translate-x:2rem;transform:translateX(var(--w-translate-x))translateY(var(--w-translate-y))translateZ(var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transform-gpu{transform:translate3d(var(--w-translate-x),var(--w-translate-y),var(--w-translate-z))rotate(var(--w-rotate))rotateX(var(--w-rotate-x))rotateY(var(--w-rotate-y))rotateZ(var(--w-rotate-z))skewX(var(--w-skew-x))skewY(var(--w-skew-y))scaleX(var(--w-scale-x))scaleY(var(--w-scale-y))scaleZ(var(--w-scale-z))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}`;var b={base:"block relative h-24 w-44 cursor-pointer group focusable rounded-full",disabled:"pointer-events-none",track:"absolute top-0 left-0 h-full w-full rounded-full transition-colors",trackActive:"s-bg-primary group-hover:s-bg-primary-hover",trackInactive:"s-bg border s-border-strong group-hover:s-bg-hover group-hover:s-border-strong-hover",trackDisabledOn:"s-bg-disabled",trackDisabledOff:"s-bg-disabled-subtle border s-border-disabled",handle:"absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform",handleSelected:"translate-x-20",handleActive:"s-bg",handleNotDisabled:"bg-[--w-s-color-border-strong] group-hover:bg-[--w-s-color-border-strong-hover]",handleDisabledOn:"s-bg-disabled-subtle",handleDisabledOff:"s-bg-disabled",a11y:"sr-only"},V,u=class extends I(oe){constructor(){super(...arguments);this.name="";this.value="";this.checked=!1;this.disabled=!1;L(this,V,null)}get _baseClasses(){return Y([b.base,this.disabled&&b.disabled])}get _trackClasses(){return Y([b.track,this.disabled?this.checked?b.trackDisabledOn:b.trackDisabledOff:this.checked?b.trackActive:b.trackInactive])}get _handleClasses(){return Y([b.handle,this.checked&&b.handleSelected,this.disabled?this.checked?b.handleDisabledOn:b.handleDisabledOff:this.checked?b.handleActive:b.handleNotDisabled])}_handleClick(){this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked,value:this.value||null},bubbles:!0,composed:!0})))}connectedCallback(){G(this,V,this.checked),super.connectedCallback(),this.disabled||this.setValue(this.checked&&this.value?this.value:null)}willUpdate(a){a.has("checked")&&(this.disabled||this.setValue(this.checked&&this.value?this.value:null))}resetFormControl(){this.checked=U(this,V)}render(){return re`
       <div>
         <button
           type="button"
           role="switch"
-          aria-checked=${this.value}
+          aria-checked=${this.checked}
           class=${this._baseClasses}
           aria-disabled=${this.disabled}
           ?disabled=${this.disabled}
@@ -2452,5 +2452,5 @@ var h=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,t,n,r
           <span data-testid="handle" class=${this._handleClasses}></span>
         </button>
       </div>
-    `}};i.styles=[p,g],c([v({type:Boolean,reflect:!0})],i.prototype,"value",2),c([v({type:Boolean,reflect:!0})],i.prototype,"disabled",2);customElements.get("w-switch")||customElements.define("w-switch",i);export{i as WarpSwitch};
+    `}};V=new WeakMap,u.styles=[q,B],F([j({type:String,reflect:!0})],u.prototype,"name",2),F([j({type:String,reflect:!0})],u.prototype,"value",2),F([j({type:Boolean,reflect:!0})],u.prototype,"checked",2),F([j({type:Boolean,reflect:!0})],u.prototype,"disabled",2);customElements.get("w-switch")||customElements.define("w-switch",u);export{u as WarpSwitch};
 //# sourceMappingURL=index.js.map