@warp-ds/elements 2.8.2-next.2 → 2.8.2-next.4

package/dist/packages/button/button.hydration.test.d.ts

@@ -0,0 +1 @@
+import './button.js';

package/dist/packages/button/button.hydration.test.js

@@ -0,0 +1,43 @@
+import { describe, expect, test, beforeEach, afterEach } from 'vitest';
+import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
+import './button.js';
+describe('w-button React SSR hydration', () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test('default (no attributes) hydrates without warnings', async () => {
+        const warnings = await testHydration('w-button', {});
+        expect(warnings).toEqual([]);
+    });
+    test('primary variant hydrates without warnings', async () => {
+        const warnings = await testHydration('w-button', {
+            variant: 'primary',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('secondary variant hydrates without warnings', async () => {
+        const warnings = await testHydration('w-button', {
+            variant: 'secondary',
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with loading state hydrates without warnings', async () => {
+        const warnings = await testHydration('w-button', {
+            loading: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with disabled state hydrates without warnings', async () => {
+        const warnings = await testHydration('w-button', {
+            disabled: true,
+        });
+        expect(warnings).toEqual([]);
+    });
+    test('with href hydrates without warnings', async () => {
+        const warnings = await testHydration('w-button', {
+            href: 'https://example.com',
+        });
+        expect(warnings).toEqual([]);
+    });
+});

package/dist/packages/button/button.js

@@ -2687,11 +2687,11 @@ ${Ue.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0
       rel=${this.target==="_blank"?this.rel||"noopener":void 0}
       class=${qr(o)}>
       <slot></slot>
-    </a>`}};z.shadowRootOptions={...Ie.shadowRootOptions,delegatesFocus:!0},z.styles=[te,Ne],m([V({type:Boolean,reflect:!0})],z.prototype,"autofocus",2),m([V({reflect:!0})],z.prototype,"variant",2),m([V({type:Boolean,reflect:!0})],z.prototype,"small",2),m([V({reflect:!0})],z.prototype,"href",2),m([V({type:Boolean,reflect:!0})],z.prototype,"disabled",2),m([V({reflect:!0})],z.prototype,"target",2),m([V({reflect:!0})],z.prototype,"rel",2),m([V({attribute:"full-width",type:Boolean,reflect:!0})],z.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",z);var Ye=JSON.parse('{"button.aria.loading":["Indl\xE6ser..."]}');var Re=JSON.parse('{"button.aria.loading":["Loading..."]}');var He=JSON.parse('{"button.aria.loading":["Ladataan..."]}');var Xe=JSON.parse('{"button.aria.loading":["Laster..."]}');var Ze=JSON.parse('{"button.aria.loading":["Laddar ..."]}');import{css as Fr}from"lit";var Ge=Fr`*,: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}.text-center{text-align:center}.animate-inprogress{background-size:30px 30px;animation:3s linear infinite animate-inprogress;background-image:linear-gradient(135deg,#0000000d 25%,#0000 0 50%,#0000000d 0 75%,#0000 0,#0000)!important}@keyframes animate-inprogress{0%{background-position:0 0}to{background-position:60px 0}}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.bg-transparent{background-color:#0000}.bg-\\[--w-color-button-primary-background\\]{background-color:var(--w-color-button-primary-background)}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.hover\\:bg-\\[--w-color-button-primary-background-hover\\]:hover{background-color:var(--w-color-button-primary-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.active\\:bg-\\[--w-color-button-primary-background-active\\]:active{background-color:var(--w-color-button-primary-background-active)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.inline-block{display:inline-block}.inline{display:inline}.inline-flex{display:inline-flex}.hover\\:underline:hover,.focus\\:underline:focus,.active\\:underline:active{text-decoration-line:underline}.hover\\:no-underline:hover,.focus\\:no-underline:focus,.active\\:no-underline:active{text-decoration: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}.items-center{align-items:center}.justify-center{justify-content:center}.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-negative{background-color:var(--w-s-color-background-negative)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-negative-hover:hover{background-color:var(--w-s-color-background-negative-hover)}.hover\\:s-bg-negative-subtle-hover:hover{background-color:var(--w-s-color-background-negative-subtle-hover)}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-negative-active:active{background-color:var(--w-s-color-background-negative-active)}.active\\:s-bg-negative-subtle-active:active{background-color:var(--w-s-color-background-negative-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-icon{color:var(--w-s-color-icon)}.hover\\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\\:s-icon-active:active{color:var(--w-s-color-icon-active)}.s-border{border-color:var(--w-s-color-border)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.max-w-full{max-width:100%}.max-w-max{max-width:max-content}.min-h-32{min-height:3.2rem}.min-w-32{min-width:3.2rem}.w-full{width:100%}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-0{padding:0}.p-4{padding:.4rem}.px-14{padding-left:1.4rem;padding-right:1.4rem}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-10{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.px-\\[15px\\]{padding-left:15px;padding-right:15px}.py-\\[11px\\]{padding-top:11px;padding-bottom:11px}.py-\\[7px\\]{padding-top:7px;padding-bottom:7px}.cursor-default{cursor:default}.font-bold{font-weight:700}.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}.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)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-\\[24\\]{line-height:2.4rem}`;var Ke=["primary","secondary","negative","utility","pill","link"],j="font-bold focusable justify-center transition-colors ease-in-out",f={primary:"s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",secondary:"s-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active",utility:"s-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",destructive:"s-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active",pill:"s-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",disabled:"s-text-inverted s-bg-disabled",quiet:"bg-transparent s-text-link hover:s-bg-hover active:s-bg-active",utilityQuiet:"s-text bg-transparent hover:s-bg-hover active:s-bg-active",negativeQuiet:"bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active",loading:"s-text s-bg-subtle",link:"s-text-link"},b={primary:`border-0 rounded-radius-default ${j}`,secondary:`border-2 rounded-radius-default ${j}`,utility:`border rounded-radius-utility ${j}`,negative:`border-0 rounded-radius-default ${j}`,pill:`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${j}`,link:`bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${f.link}`},n={xsmall:"py-6 px-16",small:"py-8 px-16",medium:"py-10 px-14",large:"py-12 px-16",utility:"py-[11px] px-[15px]",smallUtility:"py-[7px] px-[15px]",pill:"min-h-[44px] min-w-[44px]",pillSmall:"min-h-32 min-w-32",link:"p-0"},s={medium:"text-m leading-[24]",xsmall:"text-xs"},i={inProgress:`border-transparent animate-inprogress pointer-events-none ${f.loading}`,quiet:`border-0 rounded-8 ${j}`,utilityQuiet:`border-0 rounded-4 ${j}`,negativeQuiet:`border-0 rounded-8 ${j}`,isDisabled:`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${f.disabled}`},d={secondary:`${n.medium} ${s.medium} ${b.secondary} ${f.secondary}`,secondaryHref:`${n.medium} ${s.medium} ${b.secondary} ${f.secondary}`,secondaryDisabled:`${n.medium} ${s.medium} ${b.secondary} ${i.isDisabled}`,secondarySmall:`${s.xsmall} ${n.xsmall} ${b.secondary} ${f.secondary}`,secondarySmallDisabled:`${s.xsmall} ${n.xsmall} ${b.secondary} ${i.isDisabled}`,secondaryQuiet:`${n.medium} ${s.medium} ${i.quiet} ${f.quiet}`,secondaryQuietDisabled:`${n.medium} ${s.medium} ${i.quiet} ${i.isDisabled}`,secondarySmallQuiet:`${s.xsmall} ${n.xsmall} ${i.quiet} ${f.quiet}`,secondarySmallQuietDisabled:`${s.xsmall} ${n.xsmall} ${i.quiet} ${i.isDisabled}`,secondaryLoading:`${n.medium} ${s.medium} ${b.secondary} ${i.inProgress}`,secondarySmallLoading:`${s.xsmall} ${n.xsmall}  ${b.secondary} ${i.inProgress}`,secondarySmallQuietLoading:`${s.xsmall} ${n.xsmall} ${i.quiet} ${i.inProgress}`,secondaryQuietLoading:`${n.medium} ${s.medium} ${i.quiet} ${i.inProgress}`,primary:`${n.large} ${s.medium} ${b.primary} ${f.primary}`,primaryDisabled:`${n.large} ${s.medium} ${i.isDisabled} ${b.primary}`,primarySmall:`${n.small} ${s.xsmall} ${b.primary} ${f.primary}`,primarySmallDisabled:`${n.small} ${s.xsmall} ${i.isDisabled} ${b.primary} `,primaryQuiet:`${n.large} ${s.medium} ${i.quiet} ${f.quiet}`,primaryQuietDisabled:`${n.large} ${s.medium} ${i.quiet} ${i.isDisabled}`,primarySmallQuiet:`${n.small} ${s.xsmall} ${i.quiet} ${f.quiet}`,primarySmallQuietDisabled:`${n.small} ${s.xsmall} ${i.quiet} ${i.isDisabled}`,primaryLoading:`${n.large} ${s.medium} ${i.inProgress} ${b.primary}`,primarySmallLoading:`${n.small} ${s.xsmall}  ${i.inProgress} ${b.primary}`,primarySmallQuietLoading:`${n.small} ${s.xsmall} ${i.quiet} ${i.inProgress} ${b.primary}`,primaryQuietLoading:`${n.large} ${s.medium} ${i.quiet} ${i.inProgress}`,utility:`${n.utility} ${s.medium} ${b.utility} ${f.utility}`,utilityDisabled:`${n.utility} ${s.medium} ${b.utility} ${i.isDisabled}`,utilityQuiet:`${n.large} ${s.medium} ${i.utilityQuiet} ${f.utilityQuiet}`,utilityQuietDisabled:`${n.large} ${s.medium} ${i.utilityQuiet} ${i.isDisabled}`,utilitySmall:`${n.smallUtility} ${s.xsmall} ${b.utility} ${f.utility}`,utilitySmallDisabled:`${n.smallUtility} ${s.xsmall} ${b.utility} ${i.isDisabled}`,utilitySmallQuiet:`${n.smallUtility} ${s.xsmall} ${i.utilityQuiet} ${f.utilityQuiet}`,utilitySmallQuietDisabled:`${n.smallUtility} ${s.xsmall} ${i.utilityQuiet} ${i.isDisabled}`,utilityLoading:`${n.large} ${s.medium} ${b.utility} ${i.inProgress}`,utilitySmallLoading:`${n.smallUtility} ${s.xsmall} ${b.utility} ${i.inProgress}`,utilityQuietLoading:`${n.large} ${s.medium} ${i.inProgress} ${i.utilityQuiet}`,utilitySmallQuietLoading:`${n.smallUtility} ${s.xsmall} ${i.inProgress} ${i.utilityQuiet}`,negative:`${n.large} ${s.medium} ${b.negative} ${f.destructive}`,negativeDisabled:`${n.large} ${s.medium} ${b.negative} ${i.isDisabled}`,negativeQuiet:`${n.large} ${s.medium} ${i.negativeQuiet} ${f.negativeQuiet}`,negativeQuietDisabled:`${n.large} ${s.medium} ${i.negativeQuiet}${i.isDisabled}`,negativeSmall:`${n.small} ${s.xsmall} ${b.negative} ${f.destructive}`,negativeSmallDisabled:`${n.small} ${s.xsmall} ${b.negative} ${i.isDisabled}`,negativeSmallQuiet:`${n.small} ${s.xsmall} ${i.negativeQuiet} ${f.negativeQuiet}`,negativeSmallQuietDisabled:`${n.small} ${s.xsmall} ${i.negativeQuiet} ${i.isDisabled}`,negativeLoading:`${n.large} ${s.medium} ${b.negative} ${i.inProgress}`,negativeSmallLoading:`${n.small} ${s.xsmall} ${i.inProgress} ${b.negative}`,negativeQuietLoading:`${n.large} ${s.medium} ${i.negativeQuiet} ${b.negative} ${i.inProgress}`,negativeSmallQuietLoading:`${n.small} ${s.xsmall} ${i.negativeQuiet} ${i.inProgress}`,pill:`${n.pill} ${s.medium} ${b.pill} ${f.pill}`,pillSmall:`${n.pillSmall} ${s.xsmall} ${b.pill} ${f.pill}`,pillLoading:`${n.pill} ${s.medium} ${b.pill} ${i.inProgress}`,pillSmallLoading:`${n.pillSmall} ${s.xsmall} ${b.pill} ${i.inProgress}`,link:`${n.link} ${s.medium} ${b.link}`,linkSmall:`${n.link} ${s.xsmall} ${b.link}`,linkAsButton:"inline-block active:no-underline hover:no-underline focus:no-underline text-center",a11y:"sr-only",fullWidth:"w-full max-w-full",contentWidth:"max-w-max"},J,y=class extends Fe(Je){constructor(){super();this.autofocus=!1;this.quiet=!1;this.small=!1;this.loading=!1;this.fullWidth=!1;ye(this,J,null);Te(Re,Xe,He,Ye,Ze),this.variant="secondary",this.ariaValueTextLoading=Q._({id:"button.aria.loading",message:"Loading...",comment:"Screen reader message for buttons that are loading"})}updated(r){r.has("value")&&this.setValue(this.value)}connectedCallback(){if(super.connectedCallback(),!Ke.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
-${Ke.join(", ")}.`);ke(this,J,this.value)}firstUpdated(){this.autofocus&&!this.href&&setTimeout(()=>this.focus(),0)}get _primaryClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.primary,this.small&&!this.quiet&&!this.loading&&d.primarySmall,this.small&&this.quiet&&!this.loading&&d.primarySmallQuiet,this.small&&this.loading&&(this.quiet?d.primarySmallQuietLoading:d.primarySmallLoading),!this.small&&this.quiet&&!this.loading&&d.primaryQuiet,!this.small&&this.loading&&(this.quiet?d.primaryQuietLoading:d.primaryLoading)]}get _secondaryClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.secondary,this.small&&!this.quiet&&!this.loading&&d.secondarySmall,this.small&&this.loading&&(this.quiet?d.secondarySmallQuietLoading:d.secondarySmallLoading),this.small&&this.quiet&&!this.loading&&d.secondarySmallQuiet,!this.small&&this.quiet&&!this.loading&&d.secondaryQuiet,!this.small&&this.loading&&(this.quiet?d.secondaryQuietLoading:d.secondaryLoading)]}get _utilityClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.utility,this.small&&!this.quiet&&!this.loading&&d.utilitySmall,this.small&&this.quiet&&!this.loading&&d.utilitySmallQuiet,this.small&&this.loading&&(this.quiet?d.utilitySmallQuietLoading:d.utilitySmallLoading),!this.small&&this.quiet&&!this.loading&&d.utilityQuiet,!this.small&&this.loading&&(this.quiet?d.utilityQuietLoading:d.utilityLoading)]}get _negativeClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.negative,this.small&&!this.quiet&&!this.loading&&d.negativeSmall,this.small&&this.quiet&&!this.loading&&d.negativeSmallQuiet,this.small&&this.loading&&(this.quiet?d.negativeSmallQuietLoading:d.negativeSmallLoading),!this.small&&this.quiet&&!this.loading&&d.negativeQuiet,!this.small&&this.loading&&(this.quiet?d.negativeQuietLoading:d.negativeLoading)]}get _pillClasses(){return[!this.loading&&(this.small?d.pillSmall:d.pill),this.loading&&(this.small?d.pillSmallLoading:d.pillLoading)]}get _linkClasses(){return[this.small?d.linkSmall:d.link]}get _classes(){return le(this.buttonClass,[this.variant==="primary"&&this._primaryClasses,this.variant==="secondary"&&this._secondaryClasses,this.variant==="utility"&&this._utilityClasses,this.variant==="negative"&&this._negativeClasses,this.variant==="pill"&&this._pillClasses,this.variant==="link"&&this._linkClasses,this.href&&d.linkAsButton,this.fullWidth?d.fullWidth:d.contentWidth])}_handleButtonClick(){this.type==="submit"?this.internals.form.requestSubmit():this.type==="reset"&&this.internals.form.reset()}resetFormControl(){this.value=xe(this,J)}render(){return oe` ${this.href?oe`<w-link
+    </a>`}};z.shadowRootOptions={...Ie.shadowRootOptions,delegatesFocus:!0},z.styles=[te,Ne],m([V({type:Boolean,reflect:!0})],z.prototype,"autofocus",2),m([V({reflect:!0})],z.prototype,"variant",2),m([V({type:Boolean,reflect:!0})],z.prototype,"small",2),m([V({reflect:!0})],z.prototype,"href",2),m([V({type:Boolean,reflect:!0})],z.prototype,"disabled",2),m([V({reflect:!0})],z.prototype,"target",2),m([V({reflect:!0})],z.prototype,"rel",2),m([V({attribute:"full-width",type:Boolean,reflect:!0})],z.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",z);var Ye=JSON.parse('{"button.aria.loading":["Indl\xE6ser..."]}');var Re=JSON.parse('{"button.aria.loading":["Loading..."]}');var He=JSON.parse('{"button.aria.loading":["Ladataan..."]}');var Xe=JSON.parse('{"button.aria.loading":["Laster..."]}');var Ze=JSON.parse('{"button.aria.loading":["Laddar ..."]}');import{css as Fr}from"lit";var Ge=Fr`*,: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}.text-center{text-align:center}.animate-inprogress{background-size:30px 30px;animation:3s linear infinite animate-inprogress;background-image:linear-gradient(135deg,#0000000d 25%,#0000 0 50%,#0000000d 0 75%,#0000 0,#0000)!important}@keyframes animate-inprogress{0%{background-position:0 0}to{background-position:60px 0}}.hover\\:bg-clip-padding:hover{-webkit-background-clip:padding-box;background-clip:padding-box}.bg-transparent{background-color:#0000}.bg-\\[--w-color-button-primary-background\\]{background-color:var(--w-color-button-primary-background)}.hover\\:bg-\\[--w-color-button-pill-background-hover\\]:hover{background-color:var(--w-color-button-pill-background-hover)}.hover\\:bg-\\[--w-color-button-primary-background-hover\\]:hover{background-color:var(--w-color-button-primary-background-hover)}.active\\:bg-\\[--w-color-button-pill-background-active\\]:active{background-color:var(--w-color-button-pill-background-active)}.active\\:bg-\\[--w-color-button-primary-background-active\\]:active{background-color:var(--w-color-button-primary-background-active)}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.rounded-full{border-radius:9999px}.inline-block{display:inline-block}.inline{display:inline}.inline-flex{display:inline-flex}.hover\\:underline:hover,.focus\\:underline:focus,.active\\:underline:active{text-decoration-line:underline}.hover\\:no-underline:hover,.focus\\:no-underline:focus,.active\\:no-underline:active{text-decoration: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}.items-center{align-items:center}.justify-center{justify-content:center}.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-negative{background-color:var(--w-s-color-background-negative)}.s-bg-subtle{background-color:var(--w-s-color-background-subtle)}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-negative-hover:hover{background-color:var(--w-s-color-background-negative-hover)}.hover\\:s-bg-negative-subtle-hover:hover{background-color:var(--w-s-color-background-negative-subtle-hover)}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-negative-active:active{background-color:var(--w-s-color-background-negative-active)}.active\\:s-bg-negative-subtle-active:active{background-color:var(--w-s-color-background-negative-subtle-active)}.s-text{color:var(--w-s-color-text)}.s-text-inverted{color:var(--w-s-color-text-inverted)}.s-text-link{color:var(--w-s-color-text-link)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-icon{color:var(--w-s-color-icon)}.hover\\:s-icon-hover:hover{color:var(--w-s-color-icon-hover)}.active\\:s-icon-active:active{color:var(--w-s-color-icon-active)}.s-border{border-color:var(--w-s-color-border)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.max-w-full{max-width:100%}.max-w-max{max-width:max-content}.min-h-32{min-height:3.2rem}.min-w-32{min-width:3.2rem}.w-full{width:100%}.min-h-\\[44px\\]{min-height:44px}.min-w-\\[44px\\]{min-width:44px}.p-0{padding:0}.p-4{padding:.4rem}.px-14{padding-left:1.4rem;padding-right:1.4rem}.px-16{padding-left:1.6rem;padding-right:1.6rem}.py-10{padding-top:1rem;padding-bottom:1rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.py-6{padding-top:.6rem;padding-bottom:.6rem}.py-8{padding-top:.8rem;padding-bottom:.8rem}.px-\\[15px\\]{padding-left:15px;padding-right:15px}.py-\\[11px\\]{padding-top:11px;padding-bottom:11px}.py-\\[7px\\]{padding-top:7px;padding-bottom:7px}.cursor-default{cursor:default}.font-bold{font-weight:700}.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}.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)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-\\[24\\]{line-height:2.4rem}`;var Ke=["primary","secondary","negative","utility","pill","link"],j="font-bold focusable justify-center transition-colors ease-in-out",f={primary:"s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",secondary:"s-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active",utility:"s-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",destructive:"s-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active",pill:"s-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",disabled:"s-text-inverted s-bg-disabled",quiet:"bg-transparent s-text-link hover:s-bg-hover active:s-bg-active",utilityQuiet:"s-text bg-transparent hover:s-bg-hover active:s-bg-active",negativeQuiet:"bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active",loading:"s-text s-bg-subtle",link:"s-text-link"},b={primary:`border-0 rounded-radius-default ${j}`,secondary:`border-2 rounded-radius-default ${j}`,utility:`border rounded-radius-utility ${j}`,negative:`border-0 rounded-radius-default ${j}`,pill:`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${j}`,link:`bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${f.link}`},n={xsmall:"py-6 px-16",small:"py-8 px-16",medium:"py-10 px-14",large:"py-12 px-16",utility:"py-[11px] px-[15px]",smallUtility:"py-[7px] px-[15px]",pill:"min-h-[44px] min-w-[44px]",pillSmall:"min-h-32 min-w-32",link:"p-0"},s={medium:"text-m leading-[24]",xsmall:"text-xs"},i={inProgress:`border-transparent animate-inprogress pointer-events-none ${f.loading}`,quiet:`border-0 rounded-8 ${j}`,utilityQuiet:`border-0 rounded-4 ${j}`,negativeQuiet:`border-0 rounded-8 ${j}`,isDisabled:`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${f.disabled}`},d={secondary:`${n.medium} ${s.medium} ${b.secondary} ${f.secondary}`,secondaryHref:`${n.medium} ${s.medium} ${b.secondary} ${f.secondary}`,secondaryDisabled:`${n.medium} ${s.medium} ${b.secondary} ${i.isDisabled}`,secondarySmall:`${s.xsmall} ${n.xsmall} ${b.secondary} ${f.secondary}`,secondarySmallDisabled:`${s.xsmall} ${n.xsmall} ${b.secondary} ${i.isDisabled}`,secondaryQuiet:`${n.medium} ${s.medium} ${i.quiet} ${f.quiet}`,secondaryQuietDisabled:`${n.medium} ${s.medium} ${i.quiet} ${i.isDisabled}`,secondarySmallQuiet:`${s.xsmall} ${n.xsmall} ${i.quiet} ${f.quiet}`,secondarySmallQuietDisabled:`${s.xsmall} ${n.xsmall} ${i.quiet} ${i.isDisabled}`,secondaryLoading:`${n.medium} ${s.medium} ${b.secondary} ${i.inProgress}`,secondarySmallLoading:`${s.xsmall} ${n.xsmall}  ${b.secondary} ${i.inProgress}`,secondarySmallQuietLoading:`${s.xsmall} ${n.xsmall} ${i.quiet} ${i.inProgress}`,secondaryQuietLoading:`${n.medium} ${s.medium} ${i.quiet} ${i.inProgress}`,primary:`${n.large} ${s.medium} ${b.primary} ${f.primary}`,primaryDisabled:`${n.large} ${s.medium} ${i.isDisabled} ${b.primary}`,primarySmall:`${n.small} ${s.xsmall} ${b.primary} ${f.primary}`,primarySmallDisabled:`${n.small} ${s.xsmall} ${i.isDisabled} ${b.primary} `,primaryQuiet:`${n.large} ${s.medium} ${i.quiet} ${f.quiet}`,primaryQuietDisabled:`${n.large} ${s.medium} ${i.quiet} ${i.isDisabled}`,primarySmallQuiet:`${n.small} ${s.xsmall} ${i.quiet} ${f.quiet}`,primarySmallQuietDisabled:`${n.small} ${s.xsmall} ${i.quiet} ${i.isDisabled}`,primaryLoading:`${n.large} ${s.medium} ${i.inProgress} ${b.primary}`,primarySmallLoading:`${n.small} ${s.xsmall}  ${i.inProgress} ${b.primary}`,primarySmallQuietLoading:`${n.small} ${s.xsmall} ${i.quiet} ${i.inProgress} ${b.primary}`,primaryQuietLoading:`${n.large} ${s.medium} ${i.quiet} ${i.inProgress}`,utility:`${n.utility} ${s.medium} ${b.utility} ${f.utility}`,utilityDisabled:`${n.utility} ${s.medium} ${b.utility} ${i.isDisabled}`,utilityQuiet:`${n.large} ${s.medium} ${i.utilityQuiet} ${f.utilityQuiet}`,utilityQuietDisabled:`${n.large} ${s.medium} ${i.utilityQuiet} ${i.isDisabled}`,utilitySmall:`${n.smallUtility} ${s.xsmall} ${b.utility} ${f.utility}`,utilitySmallDisabled:`${n.smallUtility} ${s.xsmall} ${b.utility} ${i.isDisabled}`,utilitySmallQuiet:`${n.smallUtility} ${s.xsmall} ${i.utilityQuiet} ${f.utilityQuiet}`,utilitySmallQuietDisabled:`${n.smallUtility} ${s.xsmall} ${i.utilityQuiet} ${i.isDisabled}`,utilityLoading:`${n.large} ${s.medium} ${b.utility} ${i.inProgress}`,utilitySmallLoading:`${n.smallUtility} ${s.xsmall} ${b.utility} ${i.inProgress}`,utilityQuietLoading:`${n.large} ${s.medium} ${i.inProgress} ${i.utilityQuiet}`,utilitySmallQuietLoading:`${n.smallUtility} ${s.xsmall} ${i.inProgress} ${i.utilityQuiet}`,negative:`${n.large} ${s.medium} ${b.negative} ${f.destructive}`,negativeDisabled:`${n.large} ${s.medium} ${b.negative} ${i.isDisabled}`,negativeQuiet:`${n.large} ${s.medium} ${i.negativeQuiet} ${f.negativeQuiet}`,negativeQuietDisabled:`${n.large} ${s.medium} ${i.negativeQuiet}${i.isDisabled}`,negativeSmall:`${n.small} ${s.xsmall} ${b.negative} ${f.destructive}`,negativeSmallDisabled:`${n.small} ${s.xsmall} ${b.negative} ${i.isDisabled}`,negativeSmallQuiet:`${n.small} ${s.xsmall} ${i.negativeQuiet} ${f.negativeQuiet}`,negativeSmallQuietDisabled:`${n.small} ${s.xsmall} ${i.negativeQuiet} ${i.isDisabled}`,negativeLoading:`${n.large} ${s.medium} ${b.negative} ${i.inProgress}`,negativeSmallLoading:`${n.small} ${s.xsmall} ${i.inProgress} ${b.negative}`,negativeQuietLoading:`${n.large} ${s.medium} ${i.negativeQuiet} ${b.negative} ${i.inProgress}`,negativeSmallQuietLoading:`${n.small} ${s.xsmall} ${i.negativeQuiet} ${i.inProgress}`,pill:`${n.pill} ${s.medium} ${b.pill} ${f.pill}`,pillSmall:`${n.pillSmall} ${s.xsmall} ${b.pill} ${f.pill}`,pillLoading:`${n.pill} ${s.medium} ${b.pill} ${i.inProgress}`,pillSmallLoading:`${n.pillSmall} ${s.xsmall} ${b.pill} ${i.inProgress}`,link:`${n.link} ${s.medium} ${b.link}`,linkSmall:`${n.link} ${s.xsmall} ${b.link}`,linkAsButton:"inline-block active:no-underline hover:no-underline focus:no-underline text-center",a11y:"sr-only",fullWidth:"w-full max-w-full",contentWidth:"max-w-max"},J,y=class extends Fe(Je){constructor(){super();this.autofocus=!1;this.quiet=!1;this.small=!1;this.loading=!1;this.fullWidth=!1;ye(this,J,null);Te(Re,Xe,He,Ye,Ze),this.ariaValueTextLoading=Q._({id:"button.aria.loading",message:"Loading...",comment:"Screen reader message for buttons that are loading"})}updated(r){r.has("value")&&this.setValue(this.value)}connectedCallback(){super.connectedCallback();let r=this.variant||"secondary";if(!Ke.includes(r))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
+${Ke.join(", ")}.`);ke(this,J,this.value)}firstUpdated(){this.autofocus&&!this.href&&setTimeout(()=>this.focus(),0)}get _primaryClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.primary,this.small&&!this.quiet&&!this.loading&&d.primarySmall,this.small&&this.quiet&&!this.loading&&d.primarySmallQuiet,this.small&&this.loading&&(this.quiet?d.primarySmallQuietLoading:d.primarySmallLoading),!this.small&&this.quiet&&!this.loading&&d.primaryQuiet,!this.small&&this.loading&&(this.quiet?d.primaryQuietLoading:d.primaryLoading)]}get _secondaryClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.secondary,this.small&&!this.quiet&&!this.loading&&d.secondarySmall,this.small&&this.loading&&(this.quiet?d.secondarySmallQuietLoading:d.secondarySmallLoading),this.small&&this.quiet&&!this.loading&&d.secondarySmallQuiet,!this.small&&this.quiet&&!this.loading&&d.secondaryQuiet,!this.small&&this.loading&&(this.quiet?d.secondaryQuietLoading:d.secondaryLoading)]}get _utilityClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.utility,this.small&&!this.quiet&&!this.loading&&d.utilitySmall,this.small&&this.quiet&&!this.loading&&d.utilitySmallQuiet,this.small&&this.loading&&(this.quiet?d.utilitySmallQuietLoading:d.utilitySmallLoading),!this.small&&this.quiet&&!this.loading&&d.utilityQuiet,!this.small&&this.loading&&(this.quiet?d.utilityQuietLoading:d.utilityLoading)]}get _negativeClasses(){return[!this.small&&!this.quiet&&!this.loading&&d.negative,this.small&&!this.quiet&&!this.loading&&d.negativeSmall,this.small&&this.quiet&&!this.loading&&d.negativeSmallQuiet,this.small&&this.loading&&(this.quiet?d.negativeSmallQuietLoading:d.negativeSmallLoading),!this.small&&this.quiet&&!this.loading&&d.negativeQuiet,!this.small&&this.loading&&(this.quiet?d.negativeQuietLoading:d.negativeLoading)]}get _pillClasses(){return[!this.loading&&(this.small?d.pillSmall:d.pill),this.loading&&(this.small?d.pillSmallLoading:d.pillLoading)]}get _linkClasses(){return[this.small?d.linkSmall:d.link]}get _classes(){let r=this.variant||"secondary";return le(this.buttonClass,[r==="primary"&&this._primaryClasses,r==="secondary"&&this._secondaryClasses,r==="utility"&&this._utilityClasses,r==="negative"&&this._negativeClasses,r==="pill"&&this._pillClasses,r==="link"&&this._linkClasses,this.href&&d.linkAsButton,this.fullWidth?d.fullWidth:d.contentWidth])}_handleButtonClick(){this.type==="submit"?this.internals.form.requestSubmit():this.type==="reset"&&this.internals.form.reset()}resetFormControl(){this.value=xe(this,J)}render(){let r=this.variant||"secondary";return oe` ${this.href?oe`<w-link
           href=${this.href}
           target=${this.target}
-          variant=${this.variant}
+          variant=${r}
           ?small=${this.small}
           ?quiet=${this.quiet}
           ?loading=${this.loading}