@warp-ds/elements 2.8.1-next.1 → 2.8.1-next.3

package/dist/packages/breadcrumbs/breadcrumbs.stories.js

@@ -11,12 +11,13 @@ const meta = {
       <w-breadcrumbs ${spread(prespread(args))}>
         <a href="#/home">Home</a>
         <a href="#/category">Category</a>
-        <a href="#/subcategory">Subcategory</a>
-        <span aria-current="page">Current Page</span>
+        <span aria-current="page">Current page</span>
       </w-breadcrumbs>
     `;
     },
-    args,
+    args: {
+        'aria-label': 'You are here',
+    },
     argTypes,
     parameters: {
         actions: {
@@ -25,35 +26,25 @@ const meta = {
     },
 };
 export default meta;
-export const Default = {
-    args: {
-        'aria-label': 'You are here',
-    },
-};
+export const Default = {};
 export const WithLinks = {
-    args: {
-        'aria-label': 'Navigation breadcrumb',
-    },
     render(args) {
         return html `
       <w-breadcrumbs ${spread(prespread(args))}>
-        <a href="#/eiendom">Eiendom</a>
-        <a href="#/bolig-til-salgs">Bolig til salgs</a>
-        <a href="#/oslo" aria-current="page">Oslo</a>
+        <a href="#/home">Home</a>
+        <a href="#/category">Category</a>
+        <a href="#/subcategory" aria-current="page">Current page</a>
       </w-breadcrumbs>
     `;
     },
 };
 export const WithSpanForCurrentPage = {
-    args: {
-        'aria-label': 'You are here',
-    },
     render(args) {
         return html `
       <w-breadcrumbs ${spread(prespread(args))}>
-        <a href="#/eiendom">Eiendom</a>
-        <a href="#/bolig-til-salgs">Bolig til salgs</a>
-        <span aria-current="page">Oslo</span>
+        <a href="#/home">Home</a>
+        <a href="#/category">Category</a>
+        <span aria-current="page">Current page</span>
       </w-breadcrumbs>
     `;
     },

package/dist/packages/breadcrumbs/breadcrumbs.test.js

@@ -14,3 +14,10 @@ test('renders an aria-label if set', async () => {
     const page = render(html ` <w-breadcrumb aria-label="You are here"> </w-breadcrumb>`);
     await expect.element(page.getByLabelText('You are here', { hasText: 'w-breadcrumb' })).toBeDefined();
 });
+test('sets role navigation', async () => {
+    const page = render(html ` <w-breadcrumb>
+      <a href="/foo">Foo</a>
+      <a href="/bar">Bar</a>
+  </w-breadcrumb>`);
+    await expect.poll(() => page.getByRole('navigation')).toBeDefined();
+});

package/dist/packages/button/button.js

@@ -2680,14 +2680,14 @@ Please compile your catalog first.
         100% {
             background-position: 60px 0;
         }
-    }`;var Ue=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],z=class extends Ie{constructor(){super(...arguments);this.variant="secondary"}connectedCallback(){if(super.connectedCallback(),!Ue.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
+    }`;var Ue=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],z=class extends Ie{constructor(){super(...arguments);this.autofocus=!1;this.variant="secondary";this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),!Ue.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
 ${Ue.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){let t={"w-button":this.variant!=="link","w-button--primary":this.variant==="primary","w-button--secondary":this.variant==="secondary","w-button--negative":this.variant==="negative","w-button--utility":this.variant==="utility","w-button--quiet":this.variant==="quiet","w-button--negative-quiet":this.variant==="negativeQuiet","w-button--utility-quiet":this.variant==="utilityQuiet","w-button--overlay":this.variant==="overlay","w-button--overlay-inverted":this.variant==="overlayInverted","w-button--overlay-quiet":this.variant==="overlayQuiet","w-button--overlay-inverted-quiet":this.variant==="overlayInvertedQuiet","w-button--small":this.small,"w-button--full-width":this.fullWidth,"w-button--disabled":this.disabled};return Qr`<a
       href=${this.href}
       target=${this.target}
       rel=${this.target==="_blank"?this.rel||"noopener":void 0}
       class=${qr(t)}>
       <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.type="button";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(t){t.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:
+    </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.type="button";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(t){t.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
           href=${this.href}
           target=${this.target}