@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.17

package/dist/packages/button/button.js

@@ -7,278 +7,278 @@ ICU features such as interpolation and plurals will not work properly for that m
 
 Please compile your catalog first. 
 `)),S(h)&&pe.test(h)?we(h):S(h)?h:Qe(h,this._locale,this._locales)(r,t?.formats)}date(e,r){return ee(this._locales||this._locale,e,r)}number(e,r){return G(this._locales||this._locale,e,r)}};function Ge(o={}){return new K(o)}var _=Ge();var d=function(o,e,r,t){if(r==="a"&&!t)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?o!==e||!t:!e.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?t:r==="a"?t.call(o):t?t.value:e.get(o)},v=function(o,e,r,t,a){if(t==="m")throw new TypeError("Private method is not writable");if(t==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?o!==e||!a:!e.has(o))throw new TypeError("Cannot write private member to an object whose class did not declare it");return t==="a"?a.call(o,r):a?a.value=r:e.set(o,r),r};function fe(o){var e,r,t,a,l,s,n,h,m,C,E,$,k,M,F,f,V,P,B;class Ne extends o{constructor(...i){var c,g,p;super(...i),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),t.set(this,!1),a.set(this,!1),l.set(this,void 0),s.set(this,void 0),n.set(this,!0),m.set(this,""),C.set(this,()=>{v(this,a,!0,"f"),v(this,r,!0,"f"),d(this,e,"m",f).call(this)}),E.set(this,()=>{v(this,r,!1,"f"),d(this,e,"m",V).call(this,this.shouldFormValueUpdate()?d(this,m,"f"):""),!this.validity.valid&&d(this,a,"f")&&v(this,t,!0,"f");let z=d(this,e,"m",f).call(this);this.validationMessageCallback&&this.validationMessageCallback(z?this.internals.validationMessage:"")}),$.set(this,()=>{var z;d(this,n,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),v(this,n,!1,"f")),v(this,a,!0,"f"),v(this,t,!0,"f"),d(this,e,"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:"")}),k.set(this,void 0),M.set(this,!1),F.set(this,Promise.resolve()),(c=this.addEventListener)===null||c===void 0||c.call(this,"focus",d(this,C,"f")),(g=this.addEventListener)===null||g===void 0||g.call(this,"blur",d(this,E,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"invalid",d(this,$,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let i=this.validators.map(p=>p.attribute).flat(),c=super.observedAttributes||[];return[...new Set([...c,...i])]}static getValidator(i){return this.validators.find(c=>c.attribute===i)||null}static getValidators(i){return this.validators.filter(c=>{var g;if(c.attribute===i||!((g=c.attribute)===null||g===void 0)&&g.includes(i))return!0})}get form(){return this.internals.form}get showError(){return d(this,e,"m",f).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(i,c,g){var p;(p=super.attributeChangedCallback)===null||p===void 0||p.call(this,i,c,g);let N=this.constructor.getValidators(i);N?.length&&this.validationTarget&&this.setValue(d(this,m,"f"))}setValue(i){var c;v(this,t,!1,"f"),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,""),v(this,m,i,"f");let p=this.shouldFormValueUpdate()?i:null;this.internals.setFormValue(p),d(this,e,"m",V).call(this,p),this.valueChangedCallback&&this.valueChangedCallback(p),d(this,e,"m",f).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(i=>i(d(this,F,"f")))}formResetCallback(){var i,c;v(this,a,!1,"f"),v(this,t,!1,"f"),d(this,e,"m",f).call(this),(i=this.resetFormControl)===null||i===void 0||i.call(this),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,d(this,e,"m",f).call(this)?this.validationMessage:"")}}return r=new WeakMap,t=new WeakMap,a=new WeakMap,l=new WeakMap,s=new WeakMap,n=new WeakMap,m=new WeakMap,C=new WeakMap,E=new WeakMap,$=new WeakMap,k=new WeakMap,M=new WeakMap,F=new WeakMap,e=new WeakSet,h=function(){let i=this.getRootNode(),c=`${this.localName}[name="${this.getAttribute("name")}"]`;return i.querySelectorAll(c)},f=function(){if(this.hasAttribute("disabled"))return!1;let i=d(this,t,"f")||d(this,a,"f")&&!this.validity.valid&&!d(this,r,"f");return i&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),i},V=function(i){let c=this.constructor,g={},p=c.validators,z=[],N=p.some(y=>y.isValid instanceof Promise);d(this,M,"f")||(v(this,F,new Promise(y=>{v(this,k,y,"f")}),"f"),v(this,M,!0,"f")),d(this,l,"f")&&(d(this,l,"f").abort(),v(this,s,d(this,l,"f"),"f"));let O=new AbortController;v(this,l,O,"f");let j,se=!1;p.length&&(p.forEach(y=>{let U=y.key||"customError",I=y.isValid(this,i,O.signal);I instanceof Promise?(z.push(I),I.then(H=>{H!=null&&(g[U]=!H,j=d(this,e,"m",B).call(this,y,i),d(this,e,"m",P).call(this,g,j))})):(g[U]=!I,this.validity[U]!==!I&&(se=!0),!I&&!j&&(j=d(this,e,"m",B).call(this,y,i)))}),Promise.allSettled(z).then(()=>{var y;O?.signal.aborted||(v(this,M,!1,"f"),(y=d(this,k,"f"))===null||y===void 0||y.call(this))}),(se||!N)&&d(this,e,"m",P).call(this,g,j))},P=function(i,c){if(this.validationTarget)this.internals.setValidity(i,c,this.validationTarget),v(this,n,!1,"f");else{if(this.internals.setValidity(i,c),this.internals.validity.valid)return;v(this,n,!0,"f")}},B=function(i,c){if(this.validityCallback){let g=this.validityCallback(i.key||"customError");if(g)return g}return i.message instanceof Function?i.message(this,c):i.message},Ne}import{html as Z,LitElement as Pe,nothing as sr}from"lit";import{property as w,query as lr}from"lit/decorators.js";var Je=["en","nb","fi","da","sv"],re="en",Q=o=>Je.find(e=>o===e||o.toLowerCase().includes(e))||re;function ye(){if(typeof window>"u"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return Q(o)}try{let o=ke(document);if(o)return Q(o);let e=rr();if(e)return Q(e);let r=ke(Ce());return r?Q(r):re}catch(o){return console.warn("could not detect locale, falling back to source locale",o),re}}var _e=(o,e,r,t,a)=>{_.load("en",o),_.load("nb",e),_.load("fi",r),_.load("da",t),_.load("sv",a);let l=ye();_.activate(l),ze(),We()},Ke="warp-i18n-change";function ze(){typeof window>"u"||window.dispatchEvent(new Event(Ke))}var xe=!1;function We(){if(xe||typeof window>"u"||!document?.documentElement)return;xe=!0;let o=()=>{let a=ye();_.locale!==a&&(_.activate(a),ze())},e=new MutationObserver(a=>{for(let l of a)if(l.type==="attributes"&&l.attributeName==="lang"){o();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=Ce();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let t=er();t&&e.observe(t,{attributes:!0,attributeFilter:["lang"]})}function Ce(){try{return window.parent?.document??null}catch{return null}}function ke(o){try{return o?.documentElement?.lang??""}catch{return""}}function er(){try{return window.frameElement??null}catch{return null}}function rr(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}import{html as ir,LitElement as Fe,nothing as nr}from"lit";import{property as L}from"lit/decorators.js";import{css as tr}from"lit";import{unsafeCSS as or}from"lit";var X=tr`
-  *,
-  :before,
-  :after {
-    box-sizing: border-box;
-    border-style: solid;
-    border-width: 0;
-    border-color: var(--w-s-color-border);
-  }
-  html {
-    font-size: 62.5%;
-  }
-  body {
-    background-color: var(--w-s-color-background);
-    min-height: 100%;
-    margin: 0;
-    overflow-y: scroll;
-  }
-  body,
-  :host {
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    -webkit-tap-highlight-color: transparent;
-    font-family: var(--w-font-family);
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-    color: var(--w-s-color-text);
-  }
-  hr {
-    color: inherit;
-    border-top-width: 1px;
-    height: 0;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: inherit;
-    font-weight: 700;
-  }
-  a {
-    cursor: pointer;
-    color: var(--w-s-color-text-link);
-    text-decoration: none;
-  }
-  a:hover,
-  a:focus,
-  a:active {
-    text-decoration: underline;
-  }
-  a:focus-visible {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: 1px;
-  }
-  b,
-  strong {
-    font-weight: 700;
-  }
-  code,
-  kbd,
-  samp,
-  pre {
-    font-family:
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      Consolas,
-      Liberation Mono,
-      Courier New,
-      monospace;
-    font-size: 1em;
-  }
-  sub,
-  sup {
-    vertical-align: baseline;
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-    margin: 0;
-    padding: 0;
-  }
-  button,
-  select {
-    text-transform: none;
-  }
-  button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'] {
-    -webkit-appearance: button;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  ::-webkit-inner-spin-button {
-    height: auto;
-  }
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [type='search'] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-  summary {
-    display: list-item;
-  }
-  blockquote,
-  dl,
-  dd,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  hr,
-  figure,
-  p,
-  pre {
-    margin: 0;
-  }
-  fieldset {
-    margin: 0;
-    padding: 0;
-  }
-  legend {
-    padding: 0;
-  }
-  ol,
-  ul,
-  menu {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  textarea {
-    resize: vertical;
-  }
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    color: var(--w-s-color-text-placeholder);
-  }
-  button,
-  [role='button'] {
-    cursor: pointer;
-  }
-  :disabled {
-    cursor: default;
-  }
-  img,
-  svg,
-  video,
-  canvas,
-  audio,
-  iframe,
-  embed,
-  object {
-    vertical-align: middle;
-    display: block;
-  }
-  img,
-  video {
-    max-width: 100%;
-    height: auto;
-  }
-  h1 {
-    font-size: var(--w-font-size-xxl);
-    line-height: var(--w-line-height-xxl);
-  }
-  h2 {
-    font-size: var(--w-font-size-xl);
-    line-height: var(--w-line-height-xl);
-  }
-  h3 {
-    font-size: var(--w-font-size-l);
-    line-height: var(--w-line-height-l);
-  }
-  h4 {
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-  }
-  h5 {
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-  }
-  dt,
-  dd {
-    margin: 0 16px;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  ul,
-  ol,
-  dl,
-  p,
-  blockquote {
-    margin: 0 0 8px;
-  }
-  [hidden] {
-    display: none !important;
-  }
-  [tabindex='-1']:focus:not(:focus-visible) {
-    outline: none;
-  }
-  legend {
-    float: left;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    display: table;
-  }
-  legend + * {
-    clear: both;
-  }
-  fieldset {
-    border: 0;
-    min-width: 0;
-    margin: 0;
-    padding: 0.01em 0 0;
-  }
-  body:not(:-moz-handler-blocked) fieldset {
-    display: table-cell;
-  }
-  svg {
-    pointer-events: none;
-  }
+	*,
+	:before,
+	:after {
+		box-sizing: border-box;
+		border-style: solid;
+		border-width: 0;
+		border-color: var(--w-s-color-border);
+	}
+	html {
+		font-size: 62.5%;
+	}
+	body {
+		background-color: var(--w-s-color-background);
+		min-height: 100%;
+		margin: 0;
+		overflow-y: scroll;
+	}
+	body,
+	:host {
+		-webkit-text-size-adjust: 100%;
+		tab-size: 4;
+		-webkit-tap-highlight-color: transparent;
+		font-family: var(--w-font-family);
+		font-size: var(--w-font-size-m);
+		line-height: var(--w-line-height-m);
+		color: var(--w-s-color-text);
+	}
+	hr {
+		color: inherit;
+		border-top-width: 1px;
+		height: 0;
+	}
+	abbr:where([title]) {
+		-webkit-text-decoration: underline dotted;
+		text-decoration: underline dotted;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-size: inherit;
+		font-weight: 700;
+	}
+	a {
+		cursor: pointer;
+		color: var(--w-s-color-text-link);
+		text-decoration: none;
+	}
+	a:hover,
+	a:focus,
+	a:active {
+		text-decoration: underline;
+	}
+	a:focus-visible {
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: 1px;
+	}
+	b,
+	strong {
+		font-weight: 700;
+	}
+	code,
+	kbd,
+	samp,
+	pre {
+		font-family:
+			ui-monospace,
+			SFMono-Regular,
+			Menlo,
+			Monaco,
+			Consolas,
+			Liberation Mono,
+			Courier New,
+			monospace;
+		font-size: 1em;
+	}
+	sub,
+	sup {
+		vertical-align: baseline;
+		font-size: 75%;
+		line-height: 0;
+		position: relative;
+	}
+	sub {
+		bottom: -0.25em;
+	}
+	sup {
+		top: -0.5em;
+	}
+	table {
+		text-indent: 0;
+		border-color: inherit;
+		border-collapse: collapse;
+	}
+	button,
+	input,
+	optgroup,
+	select,
+	textarea {
+		font-family: inherit;
+		font-size: 100%;
+		font-weight: inherit;
+		line-height: inherit;
+		color: inherit;
+		margin: 0;
+		padding: 0;
+	}
+	button,
+	select {
+		text-transform: none;
+	}
+	button,
+	[type="button"],
+	[type="reset"],
+	[type="submit"] {
+		-webkit-appearance: button;
+	}
+	:-moz-focusring {
+		outline: auto;
+	}
+	:-moz-ui-invalid {
+		box-shadow: none;
+	}
+	progress {
+		vertical-align: baseline;
+	}
+	::-webkit-inner-spin-button {
+		height: auto;
+	}
+	::-webkit-outer-spin-button {
+		height: auto;
+	}
+	[type="search"] {
+		-webkit-appearance: textfield;
+		outline-offset: -2px;
+	}
+	::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+	::-webkit-file-upload-button {
+		-webkit-appearance: button;
+		font: inherit;
+	}
+	summary {
+		display: list-item;
+	}
+	blockquote,
+	dl,
+	dd,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	hr,
+	figure,
+	p,
+	pre {
+		margin: 0;
+	}
+	fieldset {
+		margin: 0;
+		padding: 0;
+	}
+	legend {
+		padding: 0;
+	}
+	ol,
+	ul,
+	menu {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	textarea {
+		resize: vertical;
+	}
+	input::placeholder,
+	textarea::placeholder {
+		opacity: 1;
+		color: var(--w-s-color-text-placeholder);
+	}
+	button,
+	[role="button"] {
+		cursor: pointer;
+	}
+	:disabled {
+		cursor: default;
+	}
+	img,
+	svg,
+	video,
+	canvas,
+	audio,
+	iframe,
+	embed,
+	object {
+		vertical-align: middle;
+		display: block;
+	}
+	img,
+	video {
+		max-width: 100%;
+		height: auto;
+	}
+	h1 {
+		font-size: var(--w-font-size-xxl);
+		line-height: var(--w-line-height-xxl);
+	}
+	h2 {
+		font-size: var(--w-font-size-xl);
+		line-height: var(--w-line-height-xl);
+	}
+	h3 {
+		font-size: var(--w-font-size-l);
+		line-height: var(--w-line-height-l);
+	}
+	h4 {
+		font-size: var(--w-font-size-m);
+		line-height: var(--w-line-height-m);
+	}
+	h5 {
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+	}
+	dt,
+	dd {
+		margin: 0 16px;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	ul,
+	ol,
+	dl,
+	p,
+	blockquote {
+		margin: 0 0 8px;
+	}
+	[hidden] {
+		display: none !important;
+	}
+	[tabindex="-1"]:focus:not(:focus-visible) {
+		outline: none;
+	}
+	legend {
+		float: left;
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		display: table;
+	}
+	legend + * {
+		clear: both;
+	}
+	fieldset {
+		border: 0;
+		min-width: 0;
+		margin: 0;
+		padding: 0.01em 0 0;
+	}
+	body:not(:-moz-handler-blocked) fieldset {
+		display: table-cell;
+	}
+	svg {
+		pointer-events: none;
+	}
 `,mr=or(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
@@ -2446,308 +2446,334 @@ Please compile your catalog first.
                 }
             }
         `);import{css as ar}from"lit";import{css as Y}from"lit";var te=Y`
-  :host {
-    display: inline-block;
-
-    /* Internal resolved vars (defaults) */
-    --_bg: var(--w-c-button-bg, var(--w-s-color-background));
-    --_bg-hover: var(--w-c-button-bg-hover, var(--w-s-color-background-hover));
-    --_bg-active: var(--w-c-button-bg-active, var(--w-s-color-background-active));
-
-    --_color: var(--w-c-button-color, var(--w-s-color-text-link));
-    --_color-hover: var(--w-c-button-color-hover, var(--_color));
-    --_color-active: var(--w-c-button-color-active, var(--_color));
-
-    --_border-width: var(--w-c-button-border-width, 2px);
-    --_border-color: var(--w-c-button-border-color, var(--w-s-color-border));
-    --_border-color-hover: var(--w-c-button-border-color-hover, var(--w-s-color-border-hover));
-    --_border-color-active: var(--w-c-button-border-color-active, var(--w-s-color-border-active));
-
-    --_radius: var(--w-c-button-radius, var(--w-button-radius-default, 8px));
-
-    --_font-size: var(--w-c-button-font-size, var(--w-font-size-m));
-    --_line-height: var(--w-c-button-line-height, var(--w-line-height-m));
-    --_font-weight: var(--w-c-button-font-weight, 700);
-
-    --_pad-x: var(--w-c-button-padding-x, 16px);
-    --_pad-y: var(--w-c-button-padding-y, 13px);
-
-    --_outline-width: var(--w-c-button-outline-width, 2px);
-    --_outline-color: var(--w-c-button-outline-color, var(--w-s-color-border-focus));
-    --_outline-offset: var(--w-c-button-outline-offset, var(--w-outline-offset, 1px));
-
-    --_transition: var(
-      --w-c-button-transition,
-      color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
-    );
-
-    /* Icon color for pill/icon-only variants (semantic; default dark grey icon) */
-    --w-c-button-icon-color: var(--w-s-color-icon);
-  }
-
-  :host(:focus-visible) {
-    outline: none;
-  }
+	:host {
+		display: inline-block;
+
+		/* Internal resolved vars (defaults) */
+		--_bg: var(--w-c-button-bg, var(--w-s-color-background));
+		--_bg-hover: var(--w-c-button-bg-hover, var(--w-s-color-background-hover));
+		--_bg-active: var(
+			--w-c-button-bg-active,
+			var(--w-s-color-background-active)
+		);
+
+		--_color: var(--w-c-button-color, var(--w-s-color-text-link));
+		--_color-hover: var(--w-c-button-color-hover, var(--_color));
+		--_color-active: var(--w-c-button-color-active, var(--_color));
+
+		--_border-width: var(--w-c-button-border-width, 2px);
+		--_border-color: var(--w-c-button-border-color, var(--w-s-color-border));
+		--_border-color-hover: var(
+			--w-c-button-border-color-hover,
+			var(--w-s-color-border-hover)
+		);
+		--_border-color-active: var(
+			--w-c-button-border-color-active,
+			var(--w-s-color-border-active)
+		);
+
+		--_radius: var(--w-c-button-radius, var(--w-button-radius-default, 8px));
+
+		--_font-size: var(--w-c-button-font-size, var(--w-font-size-m));
+		--_line-height: var(--w-c-button-line-height, var(--w-line-height-m));
+		--_font-weight: var(--w-c-button-font-weight, 700);
+
+		--_pad-x: var(--w-c-button-padding-x, 16px);
+		--_pad-y: var(--w-c-button-padding-y, 13px);
+
+		--_outline-width: var(--w-c-button-outline-width, 2px);
+		--_outline-color: var(
+			--w-c-button-outline-color,
+			var(--w-s-color-border-focus)
+		);
+		--_outline-offset: var(
+			--w-c-button-outline-offset,
+			var(--w-outline-offset, 1px)
+		);
+
+		--_transition: var(
+			--w-c-button-transition,
+			color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+			background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+			border-color 150ms cubic-bezier(0.4, 0, 0.2, 1)
+		);
+
+		/* Icon color for pill/icon-only variants (semantic; default dark grey icon) */
+		--w-c-button-icon-color: var(--w-s-color-icon);
+	}
+
+	:host(:focus-visible) {
+		outline: none;
+	}
 `,oe=Y`
-  :host([variant='primary']) {
-    --w-c-button-bg: var(--w-s-color-background-primary);
-    --w-c-button-bg-hover: var(--w-s-color-background-primary-hover);
-    --w-c-button-bg-active: var(--w-s-color-background-primary-active);
-    --w-c-button-color: var(--w-s-color-text-inverted);
-    --w-c-button-border-width: 0px;
-  }
-
-  :host([variant='negative']) {
-    --w-c-button-bg: var(--w-s-color-background-negative);
-    --w-c-button-bg-hover: var(--w-s-color-background-negative-hover);
-    --w-c-button-bg-active: var(--w-s-color-background-negative-active);
-    --w-c-button-color: var(--w-s-color-text-inverted);
-    --w-c-button-border-width: 0px;
-  }
-
-  :host([variant='negativeQuiet']) {
-    --w-c-button-bg: transparent;
-    --w-c-button-bg-hover: var(--w-s-color-background-negative-subtle-hover);
-    --w-c-button-bg-active: var(--w-s-color-background-negative-subtle-active);
-    --w-c-button-color: var(--w-s-color-text-negative);
-    --w-c-button-border-width: 0px;
-  }
-
-  :host([variant='utility']) {
-    --w-c-button-bg: var(--w-s-color-background);
-    --w-c-button-color: var(--w-s-color-text);
-    --w-c-button-radius: var(--w-button-radius-utility, 4px);
-    --w-c-button-border-width: 1px;
-  }
-
-  :host([variant='utilityQuiet']) {
-    --w-c-button-bg: transparent;
-    --w-c-button-color: var(--w-s-color-text);
-    --w-c-button-border-width: 0px;
-  }
-
-  :host([variant='quiet']) {
-    --w-c-button-bg: transparent;
-    --w-c-button-border-width: 0px;
-  }
-
-  :host([variant='overlay']) {
-    --w-c-button-bg: var(--w-s-color-background);
-    --w-c-button-bg-hover: var(--w-s-color-background-hover);
-    --w-c-button-bg-active: var(--w-s-color-background-active);
-    --w-c-button-color: var(--w-s-color-text);
-    --w-c-button-radius: 9999px;
-    --w-c-button-border-width: 0px;
-  }
-
-  :host([variant='overlayInverted']) {
-    --w-c-button-bg: var(--w-s-color-background-inverted);
-    --w-c-button-bg-hover: var(--w-s-color-background-inverted-hover);
-    --w-c-button-bg-active: var(--w-s-color-background-inverted-active);
-    --w-c-button-color: var(--w-s-color-text-inverted);
-    --w-c-button-radius: 9999px;
-    --w-c-button-border-width: 0px;
-  }
-
-  :host([variant='overlayQuiet']) {
-    --w-c-button-bg: transparent;
-    --w-c-button-bg-hover: var(--w-s-color-background-hover);
-    --w-c-button-bg-active: var(--w-s-color-background-active);
-    --w-c-button-color: var(--w-s-color-text);
-    --w-c-button-radius: 9999px;
-    --w-c-button-border-width: 0px;
-  }
-
-  :host([variant='overlayInvertedQuiet']) {
-    --w-c-button-bg: transparent;
-    --w-c-button-bg-hover: var(--w-s-color-background-inverted-hover);
-    --w-c-button-bg-active: var(--w-s-color-background-inverted-active);
-    --w-c-button-color: var(--w-s-color-text-inverted);
-    --w-c-button-radius: 9999px;
-    --w-c-button-border-width: 0px;
-  }
-
-  :host([variant='link']) {
-    --w-c-button-bg: transparent;
-    --w-c-button-border-width: 0px;
-    --w-c-button-padding-x: 0px;
-    --w-c-button-padding-y: 0px;
-    --w-c-button-font-weight: 400;
-
-    --w-c-button-bg-hover: transparent;
-    --w-c-button-bg-active: transparent;
-
-    --w-c-button-color: var(--w-s-color-text-link);
-    --w-c-button-color-hover: var(--w-s-color-text-link-hover, var(--w-c-button-color));
-    --w-c-button-color-active: var(--w-s-color-text-link-active, var(--w-c-button-color));
-  }
+	:host([variant="primary"]) {
+		--w-c-button-bg: var(--w-s-color-background-primary);
+		--w-c-button-bg-hover: var(--w-s-color-background-primary-hover);
+		--w-c-button-bg-active: var(--w-s-color-background-primary-active);
+		--w-c-button-color: var(--w-s-color-text-inverted);
+		--w-c-button-border-width: 0px;
+	}
+
+	:host([variant="negative"]) {
+		--w-c-button-bg: var(--w-s-color-background-negative);
+		--w-c-button-bg-hover: var(--w-s-color-background-negative-hover);
+		--w-c-button-bg-active: var(--w-s-color-background-negative-active);
+		--w-c-button-color: var(--w-s-color-text-inverted);
+		--w-c-button-border-width: 0px;
+	}
+
+	:host([variant="negativeQuiet"]) {
+		--w-c-button-bg: transparent;
+		--w-c-button-bg-hover: var(--w-s-color-background-negative-subtle-hover);
+		--w-c-button-bg-active: var(--w-s-color-background-negative-subtle-active);
+		--w-c-button-color: var(--w-s-color-text-negative);
+		--w-c-button-border-width: 0px;
+	}
+
+	:host([variant="utility"]) {
+		--w-c-button-bg: var(--w-s-color-background);
+		--w-c-button-color: var(--w-s-color-text);
+		--w-c-button-radius: var(--w-button-radius-utility, 4px);
+		--w-c-button-border-width: 1px;
+	}
+
+	:host([variant="utilityQuiet"]) {
+		--w-c-button-bg: transparent;
+		--w-c-button-color: var(--w-s-color-text);
+		--w-c-button-border-width: 0px;
+	}
+
+	:host([variant="quiet"]) {
+		--w-c-button-bg: transparent;
+		--w-c-button-border-width: 0px;
+	}
+
+	:host([variant="overlay"]) {
+		--w-c-button-bg: var(--w-s-color-background);
+		--w-c-button-bg-hover: var(--w-s-color-background-hover);
+		--w-c-button-bg-active: var(--w-s-color-background-active);
+		--w-c-button-color: var(--w-s-color-text);
+		--w-c-button-radius: 9999px;
+		--w-c-button-border-width: 0px;
+	}
+
+	:host([variant="overlayInverted"]) {
+		--w-c-button-bg: var(--w-s-color-background-inverted);
+		--w-c-button-bg-hover: var(--w-s-color-background-inverted-hover);
+		--w-c-button-bg-active: var(--w-s-color-background-inverted-active);
+		--w-c-button-color: var(--w-s-color-text-inverted);
+		--w-c-button-radius: 9999px;
+		--w-c-button-border-width: 0px;
+	}
+
+	:host([variant="overlayQuiet"]) {
+		--w-c-button-bg: transparent;
+		--w-c-button-bg-hover: var(--w-s-color-background-hover);
+		--w-c-button-bg-active: var(--w-s-color-background-active);
+		--w-c-button-color: var(--w-s-color-text);
+		--w-c-button-radius: 9999px;
+		--w-c-button-border-width: 0px;
+	}
+
+	:host([variant="overlayInvertedQuiet"]) {
+		--w-c-button-bg: transparent;
+		--w-c-button-bg-hover: var(--w-s-color-background-inverted-hover);
+		--w-c-button-bg-active: var(--w-s-color-background-inverted-active);
+		--w-c-button-color: var(--w-s-color-text-inverted);
+		--w-c-button-radius: 9999px;
+		--w-c-button-border-width: 0px;
+	}
+
+	:host([variant="link"]) {
+		--w-c-button-bg: transparent;
+		--w-c-button-border-width: 0px;
+		--w-c-button-padding-x: 0px;
+		--w-c-button-padding-y: 0px;
+		--w-c-button-font-weight: 400;
+
+		--w-c-button-bg-hover: transparent;
+		--w-c-button-bg-active: transparent;
+
+		--w-c-button-color: var(--w-s-color-text-link);
+		--w-c-button-color-hover: var(
+			--w-s-color-text-link-hover,
+			var(--w-c-button-color)
+		);
+		--w-c-button-color-active: var(
+			--w-s-color-text-link-active,
+			var(--w-c-button-color)
+		);
+	}
 `,ae=Y`
-  :host([small]) {
-    --w-c-button-padding-x: 12px;
-    --w-c-button-padding-y: 8px;
-    --w-c-button-font-size: var(--w-font-size-xs);
-    --w-c-button-line-height: var(--w-line-height-xs);
-  }
+	:host([small]) {
+		--w-c-button-padding-x: 12px;
+		--w-c-button-padding-y: 8px;
+		--w-c-button-font-size: var(--w-font-size-xs);
+		--w-c-button-line-height: var(--w-line-height-xs);
+	}
 `,ie=Y`
-  :host([disabled]) {
-    pointer-events: none;
-    cursor: default;
+	:host([disabled]) {
+		pointer-events: none;
+		cursor: default;
 
-    --w-c-button-bg: var(--w-s-color-background-disabled);
-    --w-c-button-bg-hover: var(--w-s-color-background-disabled);
-    --w-c-button-bg-active: var(--w-s-color-background-disabled);
+		--w-c-button-bg: var(--w-s-color-background-disabled);
+		--w-c-button-bg-hover: var(--w-s-color-background-disabled);
+		--w-c-button-bg-active: var(--w-s-color-background-disabled);
 
-    --w-c-button-color: var(--w-s-color-text-inverted);
-    --w-c-button-border-width: 0px;
-  }
+		--w-c-button-color: var(--w-s-color-text-inverted);
+		--w-c-button-border-width: 0px;
+	}
 `,Ee=Y`
-  ${te}
+	${te}
 
-  /* ============================================================
+	/* ============================================================
    * Base element (NATIVE button mode ONLY)
    * ============================================================ */
   button[part='base'] {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
 
-    cursor: pointer;
+		cursor: pointer;
 
-    background-color: var(--_bg);
-    color: var(--_color);
+		background-color: var(--_bg);
+		color: var(--_color);
 
-    border: var(--_border-width) solid var(--_border-color);
-    border-radius: var(--_radius);
+		border: var(--_border-width) solid var(--_border-color);
+		border-radius: var(--_radius);
 
-    padding: calc(var(--_pad-y) - var(--_border-width))
-      calc(var(--_pad-x) - var(--_border-width));
+		padding: calc(var(--_pad-y) - var(--_border-width))
+			calc(var(--_pad-x) - var(--_border-width));
 
-    font-size: var(--_font-size);
-    line-height: var(--_line-height);
-    font-weight: var(--_font-weight);
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		font-weight: var(--_font-weight);
 
-    transition: var(--_transition);
-  }
+		transition: var(--_transition);
+	}
 
-  /* Optional: helps avoid "grew a bit" from slot typography differences */
-  button[part='base'] ::slotted(*) {
-    line-height: inherit;
-  }
+	/* Optional: helps avoid "grew a bit" from slot typography differences */
+	button[part="base"] ::slotted(*) {
+		line-height: inherit;
+	}
 
-  /* ============================================================
+	/* ============================================================
    * Link mode wrapper (w-link host carries part="base" in button.ts)
    * Keep it layout-only to avoid double chrome.
    * ============================================================ */
-  :host > w-link[part='base'] {
-    display: inline-block;
-    padding: 0;
-    border: 0;
-    background: transparent;
-  }
-
-  /* Hover / active (native button mode only) */
-  :host(:not([disabled]):not([loading])) button[part='base']:hover {
-    background-color: var(--_bg-hover);
-    border-color: var(--_border-color-hover);
-    color: var(--_color-hover);
-  }
-
-  :host(:not([disabled]):not([loading])) button[part='base']:active {
-    background-color: var(--_bg-active);
-    border-color: var(--_border-color-active);
-    color: var(--_color-active);
-  }
-
-  :host(:focus-visible) button[part='base'] {
-    outline: var(--_outline-width) solid var(--_outline-color);
-    outline-offset: var(--_outline-offset);
-  }
-
-  /* ============================================================
+	:host > w-link[part="base"] {
+		display: inline-block;
+		padding: 0;
+		border: 0;
+		background: transparent;
+	}
+
+	/* Hover / active (native button mode only) */
+	:host(:not([disabled]):not([loading])) button[part="base"]:hover {
+		background-color: var(--_bg-hover);
+		border-color: var(--_border-color-hover);
+		color: var(--_color-hover);
+	}
+
+	:host(:not([disabled]):not([loading])) button[part="base"]:active {
+		background-color: var(--_bg-active);
+		border-color: var(--_border-color-active);
+		color: var(--_color-active);
+	}
+
+	:host(:focus-visible) button[part="base"] {
+		outline: var(--_outline-width) solid var(--_outline-color);
+		outline-offset: var(--_outline-offset);
+	}
+
+	/* ============================================================
    * Variants (shared + button-specific quiet mappings)
    * ============================================================ */
-  ${oe}
+	${oe}
 
-  /* Button-specific: quiet attribute backwards compatibility */
+	/* Button-specific: quiet attribute backwards compatibility */
   :host([variant='negative'][quiet]) {
-    --w-c-button-bg: transparent;
-    --w-c-button-bg-hover: var(--w-s-color-background-negative-subtle-hover);
-    --w-c-button-bg-active: var(--w-s-color-background-negative-subtle-active);
-    --w-c-button-color: var(--w-s-color-text-negative);
-    --w-c-button-border-width: 0px;
-  }
-
-  :host([variant='utility'][quiet]) {
-    --w-c-button-bg: transparent;
-    --w-c-button-color: var(--w-s-color-text);
-    --w-c-button-border-width: 0px;
-  }
-
-  /* Button-specific: pill variant */
-  :host([variant='pill']) {
-    --w-c-button-bg: transparent;
-    --w-c-button-radius: 50%;
-    --w-c-button-border-width: 0px;
-    --w-c-button-padding-x: 14px;
-    --w-c-button-padding-y: 14px;
-
-    /* pill uses semantic icon color (dark grey by default) */
-    --w-c-button-color: var(--w-c-button-icon-color, var(--w-s-color-icon));
-  }
-
-  :host([variant='pill']) button[part='base'] {
-    min-height: 44px;
-    min-width: 44px;
-  }
-
-  :host([small][variant='pill']) button[part='base'] {
-    min-height: 32px;
-    min-width: 32px;
-  }
-
-  /* Button-specific: link variant element styles */
-  :host([variant='link']) button[part='base'] {
-    display: inline;
-    padding: 0;
-  }
-
-  :host([variant='link']:not([disabled]):not([loading])) button[part='base']:hover {
-    text-decoration: underline;
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--w-c-button-color-hover);
-  }
-
-  /* ===== Size ===== */
-  ${ae}
-
-  :host([small][variant='pill']) {
-    --w-c-button-padding-x: 8px;
-    --w-c-button-padding-y: 8px;
-  }
-
-  /* ===== Layout ===== */
-
-  :host([full-width]) {
-    display: block;
-    width: 100%;
-  }
-
-  :host([full-width]) button[part='base'],
-  :host([full-width]) > w-link[part='base'] {
-    width: 100%;
-  }
-
-  :host([icon-only]) button[part='base'] {
-    aspect-ratio: 1 / 1;
-    padding-left: calc(var(--w-c-button-padding-y) - var(--w-c-button-border-width, 0px));
-    padding-right: calc(var(--w-c-button-padding-y) - var(--w-c-button-border-width, 0px));
-  }
-
-  /* ============================================================
+		--w-c-button-bg: transparent;
+		--w-c-button-bg-hover: var(--w-s-color-background-negative-subtle-hover);
+		--w-c-button-bg-active: var(--w-s-color-background-negative-subtle-active);
+		--w-c-button-color: var(--w-s-color-text-negative);
+		--w-c-button-border-width: 0px;
+	}
+
+	:host([variant="utility"][quiet]) {
+		--w-c-button-bg: transparent;
+		--w-c-button-color: var(--w-s-color-text);
+		--w-c-button-border-width: 0px;
+	}
+
+	/* Button-specific: pill variant */
+	:host([variant="pill"]) {
+		--w-c-button-bg: transparent;
+		--w-c-button-radius: 50%;
+		--w-c-button-border-width: 0px;
+		--w-c-button-padding-x: 14px;
+		--w-c-button-padding-y: 14px;
+
+		/* pill uses semantic icon color (dark grey by default) */
+		--w-c-button-color: var(--w-c-button-icon-color, var(--w-s-color-icon));
+	}
+
+	:host([variant="pill"]) button[part="base"] {
+		min-height: 44px;
+		min-width: 44px;
+	}
+
+	:host([small][variant="pill"]) button[part="base"] {
+		min-height: 32px;
+		min-width: 32px;
+	}
+
+	/* Button-specific: link variant element styles */
+	:host([variant="link"]) button[part="base"] {
+		display: inline;
+		padding: 0;
+	}
+
+	:host([variant="link"]:not([disabled]):not([loading]))
+		button[part="base"]:hover {
+		text-decoration: underline;
+		background-color: transparent;
+		border-color: transparent;
+		color: var(--w-c-button-color-hover);
+	}
+
+	/* ===== Size ===== */
+	${ae}
+
+	:host([small][variant='pill']) {
+		--w-c-button-padding-x: 8px;
+		--w-c-button-padding-y: 8px;
+	}
+
+	/* ===== Layout ===== */
+
+	:host([full-width]) {
+		display: block;
+		width: 100%;
+	}
+
+	:host([full-width]) button[part="base"],
+	:host([full-width]) > w-link[part="base"] {
+		width: 100%;
+	}
+
+	:host([icon-only]) button[part="base"] {
+		aspect-ratio: 1 / 1;
+		padding-left: calc(
+			var(--w-c-button-padding-y) - var(--w-c-button-border-width, 0px)
+		);
+		padding-right: calc(
+			var(--w-c-button-padding-y) - var(--w-c-button-border-width, 0px)
+		);
+	}
+
+	/* ============================================================
    * STATE OVERRIDES (must be last so they win over variants)
    * Disabled first, Loading last (loading is disabled-like + visuals)
    *
@@ -2756,198 +2782,198 @@ Please compile your catalog first.
    * To ensure states always win, we match similar specificity via extra attribute selectors.
    * ============================================================ */
 
-  /* ===== Disabled ===== */
-  ${ie}
+	/* ===== Disabled ===== */
+	${ie}
 
-  /* Additional specificity for button to override quiet variants */
+	/* Additional specificity for button to override quiet variants */
   :host([disabled][variant]),
   :host([disabled][quiet]) {
-    --w-c-button-bg: var(--w-s-color-background-disabled);
-    --w-c-button-bg-hover: var(--w-s-color-background-disabled);
-    --w-c-button-bg-active: var(--w-s-color-background-disabled);
-
-    --w-c-button-color: var(--w-s-color-text-inverted);
-
-    --w-c-button-border-width: 0px;
-    --w-c-button-border-color: transparent;
-    --w-c-button-border-color-hover: transparent;
-    --w-c-button-border-color-active: transparent;
-
-    --w-c-button-color-hover: var(--w-s-color-text-inverted);
-    --w-c-button-color-active: var(--w-s-color-text-inverted);
-  }
-
-  /* ===== Loading (wins over everything) ===== */
-  :host([loading]),
-  :host([loading][variant]),
-  :host([loading][quiet]) {
-    pointer-events: none;
-
-    /* Strong overrides so variants can't leak through */
-    --w-c-button-bg: var(--w-s-color-background-subtle);
-    --w-c-button-bg-hover: var(--w-s-color-background-subtle);
-    --w-c-button-bg-active: var(--w-s-color-background-subtle);
-
-    --w-c-button-color: var(--w-s-color-text);
-    --w-c-button-color-hover: var(--w-s-color-text);
-    --w-c-button-color-active: var(--w-s-color-text);
-
-    --w-c-button-border-width: 0px;
-    --w-c-button-border-color: transparent;
-    --w-c-button-border-color-hover: transparent;
-    --w-c-button-border-color-active: transparent;
-  }
-
-  /* Loading stripes (native button mode only) */
-  :host([loading]) button[part='base'] {
-    background-image: linear-gradient(
-      135deg,
-      rgba(0, 0, 0, 0.05) 25%,
-      transparent 25%,
-      transparent 50%,
-      rgba(0, 0, 0, 0.05) 50%,
-      rgba(0, 0, 0, 0.05) 75%,
-      transparent 75%,
-      transparent
-    );
-    background-size: 30px 30px;
-    animation: animate-inprogress 3s linear infinite;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :host([loading]) button[part='base'] {
-      animation: none;
-    }
-  }
-
-  @keyframes animate-inprogress {
-    0% {
-      background-position: 0 0;
-    }
-    100% {
-      background-position: 60px 0;
-    }
-  }
+		--w-c-button-bg: var(--w-s-color-background-disabled);
+		--w-c-button-bg-hover: var(--w-s-color-background-disabled);
+		--w-c-button-bg-active: var(--w-s-color-background-disabled);
+
+		--w-c-button-color: var(--w-s-color-text-inverted);
+
+		--w-c-button-border-width: 0px;
+		--w-c-button-border-color: transparent;
+		--w-c-button-border-color-hover: transparent;
+		--w-c-button-border-color-active: transparent;
+
+		--w-c-button-color-hover: var(--w-s-color-text-inverted);
+		--w-c-button-color-active: var(--w-s-color-text-inverted);
+	}
+
+	/* ===== Loading (wins over everything) ===== */
+	:host([loading]),
+	:host([loading][variant]),
+	:host([loading][quiet]) {
+		pointer-events: none;
+
+		/* Strong overrides so variants can't leak through */
+		--w-c-button-bg: var(--w-s-color-background-subtle);
+		--w-c-button-bg-hover: var(--w-s-color-background-subtle);
+		--w-c-button-bg-active: var(--w-s-color-background-subtle);
+
+		--w-c-button-color: var(--w-s-color-text);
+		--w-c-button-color-hover: var(--w-s-color-text);
+		--w-c-button-color-active: var(--w-s-color-text);
+
+		--w-c-button-border-width: 0px;
+		--w-c-button-border-color: transparent;
+		--w-c-button-border-color-hover: transparent;
+		--w-c-button-border-color-active: transparent;
+	}
+
+	/* Loading stripes (native button mode only) */
+	:host([loading]) button[part="base"] {
+		background-image: linear-gradient(
+			135deg,
+			rgba(0, 0, 0, 0.05) 25%,
+			transparent 25%,
+			transparent 50%,
+			rgba(0, 0, 0, 0.05) 50%,
+			rgba(0, 0, 0, 0.05) 75%,
+			transparent 75%,
+			transparent
+		);
+		background-size: 30px 30px;
+		animation: animate-inprogress 3s linear infinite;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host([loading]) button[part="base"] {
+			animation: none;
+		}
+	}
+
+	@keyframes animate-inprogress {
+		0% {
+			background-position: 0 0;
+		}
+		100% {
+			background-position: 60px 0;
+		}
+	}
 `;var Me=ar`
-  ${te}
+	${te}
 
-  /* ============================================================
+	/* ============================================================
    * Link element (anchor with button styling)
    * ============================================================ */
   a[part='base'] {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
 
-    cursor: pointer;
-    text-decoration: none;
+		cursor: pointer;
+		text-decoration: none;
 
-    background-color: var(--_bg);
-    color: var(--_color);
+		background-color: var(--_bg);
+		color: var(--_color);
 
-    border: var(--_border-width) solid var(--_border-color);
-    border-radius: var(--_radius);
+		border: var(--_border-width) solid var(--_border-color);
+		border-radius: var(--_radius);
 
-    padding: calc(var(--_pad-y) - var(--_border-width))
-             calc(var(--_pad-x) - var(--_border-width));
+		padding: calc(var(--_pad-y) - var(--_border-width))
+			calc(var(--_pad-x) - var(--_border-width));
 
-    font-size: var(--_font-size);
-    line-height: var(--_line-height);
-    font-weight: var(--_font-weight);
+		font-size: var(--_font-size);
+		line-height: var(--_line-height);
+		font-weight: var(--_font-weight);
 
-    transition: var(--_transition);
-  }
+		transition: var(--_transition);
+	}
 
-  :host(:not([disabled])) a[part='base']:hover {
-    background-color: var(--_bg-hover);
-    border-color: var(--_border-color-hover);
-    color: var(--_color-hover);
-  }
+	:host(:not([disabled])) a[part="base"]:hover {
+		background-color: var(--_bg-hover);
+		border-color: var(--_border-color-hover);
+		color: var(--_color-hover);
+	}
 
-  :host(:not([disabled])) a[part='base']:active {
-    background-color: var(--_bg-active);
-    border-color: var(--_border-color-active);
-    color: var(--_color-active);
-  }
+	:host(:not([disabled])) a[part="base"]:active {
+		background-color: var(--_bg-active);
+		border-color: var(--_border-color-active);
+		color: var(--_color-active);
+	}
 
-  :host(:focus-visible) a[part='base'] {
-    outline: var(--_outline-width) solid var(--_outline-color);
-    outline-offset: var(--_outline-offset);
-  }
+	:host(:focus-visible) a[part="base"] {
+		outline: var(--_outline-width) solid var(--_outline-color);
+		outline-offset: var(--_outline-offset);
+	}
 
-  /* ===== Variants (shared from button) ===== */
-  ${oe}
+	/* ===== Variants (shared from button) ===== */
+	${oe}
 
-  /* Link-specific: link variant element styles */
+	/* Link-specific: link variant element styles */
   :host([variant='link']) a[part='base'] {
-    display: inline;
-    padding: 0;
-  }
+		display: inline;
+		padding: 0;
+	}
 
-  :host([variant='link']:not([disabled])) a[part='base']:hover {
-    text-decoration: underline;
-    background-color: transparent;
-    border-color: transparent;
-  }
+	:host([variant="link"]:not([disabled])) a[part="base"]:hover {
+		text-decoration: underline;
+		background-color: transparent;
+		border-color: transparent;
+	}
 
-  /* ===== Sizes (shared from button) ===== */
-  ${ae}
+	/* ===== Sizes (shared from button) ===== */
+	${ae}
 
-  /* ===== Layout ===== */
+	/* ===== Layout ===== */
   :host([full-width]) {
-    display: block;
-    width: 100%;
-  }
+		display: block;
+		width: 100%;
+	}
 
-  :host([full-width]) a[part='base'] {
-    width: 100%;
-  }
+	:host([full-width]) a[part="base"] {
+		width: 100%;
+	}
 
-  /* ===== Disabled (shared from button) ===== */
-  ${ie}
+	/* ===== Disabled (shared from button) ===== */
+	${ie}
 `;var Se=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],x=class extends Fe{constructor(){super(...arguments);this.autofocus=!1;this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),this.variant&&!Se.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
 ${Se.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){return ir`
-      <a
-        href="${this.href}"
-        part="base"
-        target="${this.target}"
-        rel="${this.target==="_blank"?this.rel||"noopener":nr}"
-        tabindex="0"
-      >
-        <slot></slot>
-      </a>
-    `}};x.shadowRootOptions={...Fe.shadowRootOptions,delegatesFocus:!0},x.styles=[X,Me],b([L({type:Boolean,reflect:!0})],x.prototype,"autofocus",2),b([L({reflect:!0})],x.prototype,"variant",2),b([L({type:Boolean,reflect:!0})],x.prototype,"small",2),b([L({reflect:!0})],x.prototype,"href",2),b([L({type:Boolean,reflect:!0})],x.prototype,"disabled",2),b([L({reflect:!0})],x.prototype,"target",2),b([L({reflect:!0})],x.prototype,"rel",2),b([L({attribute:"full-width",type:Boolean,reflect:!0})],x.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",x);import{ifDefined as ne}from"lit/directives/if-defined.js";var Le=JSON.parse('{"button.aria.loading":["Indl\xE6ser..."]}');var Ve=JSON.parse('{"button.aria.loading":["Loading..."]}');var Te=JSON.parse('{"button.aria.loading":["Ladataan..."]}');var $e=JSON.parse('{"button.aria.loading":["Laster..."]}');var Ie=JSON.parse('{"button.aria.loading":["Laddar ..."]}');var Ae=["primary","secondary","negative","negativeQuiet","utility","pill","link","quiet","utilityQuiet","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],D,u=class extends fe(Pe){constructor(){super();this.autofocus=!1;this.quiet=!1;this.iconOnly=!1;this.small=!1;this.loading=!1;this.disabled=!1;this.fullWidth=!1;be(this,D);_e(Ve,$e,Te,Le,Ie),this.ariaValueTextLoading=_.t({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(!Ae.includes(r))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
-${Ae.join(", ")}.`);ue(this,D,this.value)}closestWithId(r){let t=this.shadowRoot,a=null;try{for(;t;){if(a=t.getElementById(r),a)return a;t=t.getRootNode().host?.getRootNode()}}catch{}return document.getElementById(r)}firstUpdated(){this.autofocus&&!this.href&&setTimeout(()=>this.focus(),0),this.buttonEl&&this.commandfor&&(this.buttonEl.commandForElement=this.closestWithId(this.commandfor))}_handleButtonClick(){this.type==="submit"?this.internals.form.requestSubmit():this.type==="reset"&&this.internals.form.reset()}resetFormControl(){this.value=de(this,D)}render(){let r=this.variant||"secondary";return Z` ${this.href?Z`
-          <w-link
-            href=${this.href}
-            target=${this.target}
-            variant=${this.quiet?"quiet":r}
-            ?small=${this.small}
-            ?loading=${this.loading}
-            ?autofocus=${this.autofocus}
-            ?full-width=${this.fullWidth}
-            class=${this.buttonClass}
-            rel=${this.target==="_blank"?this.rel||"noopener":void 0}
-          >
-            <slot></slot>
-          </w-link>
-        `:Z`
-          <button
-            type=${this.type||"button"}
-            part="base"
-            class=${ne(this.buttonClass)}
-            @click="${this._handleButtonClick}"
-            commandfor=${ne(this.commandfor)}
-            command=${ne(this.command)}
-          >
-            <slot></slot>
-          </button>
-        `}
-    ${this.loading?Z`<span
-          class="sr-only"
-          role="progressbar"
-          aria-valuenow="{0}"
-          aria-valuetext=${this.ariaValueTextLoading}
-        ></span>`:sr}`}};D=new WeakMap,u.styles=[X,Ee],u.shadowRootOptions={...Pe.shadowRootOptions,delegatesFocus:!0},b([w({reflect:!0})],u.prototype,"type",2),b([w({type:Boolean,reflect:!0})],u.prototype,"autofocus",2),b([w({reflect:!0})],u.prototype,"variant",2),b([w({type:Boolean,reflect:!0})],u.prototype,"quiet",2),b([w({type:Boolean,reflect:!0,attribute:"icon-only"})],u.prototype,"iconOnly",2),b([w({type:Boolean,reflect:!0})],u.prototype,"small",2),b([w({type:Boolean,reflect:!0})],u.prototype,"loading",2),b([w({reflect:!0})],u.prototype,"href",2),b([w({reflect:!0})],u.prototype,"target",2),b([w({type:Boolean,reflect:!0})],u.prototype,"disabled",2),b([w({reflect:!0})],u.prototype,"rel",2),b([w({attribute:"full-width",type:Boolean,reflect:!0})],u.prototype,"fullWidth",2),b([w({attribute:"button-class",reflect:!0})],u.prototype,"buttonClass",2),b([w({reflect:!0})],u.prototype,"name",2),b([w({reflect:!0})],u.prototype,"value",2),b([w()],u.prototype,"commandfor",2),b([w()],u.prototype,"command",2),b([lr("button")],u.prototype,"buttonEl",2);customElements.get("w-button")||customElements.define("w-button",u);export{u as WarpButton};
+			<a
+				href="${this.href}"
+				part="base"
+				target="${this.target}"
+				rel="${this.target==="_blank"?this.rel||"noopener":nr}"
+				tabindex="0"
+			>
+				<slot></slot>
+			</a>
+		`}};x.shadowRootOptions={...Fe.shadowRootOptions,delegatesFocus:!0},x.styles=[X,Me],b([L({type:Boolean,reflect:!0})],x.prototype,"autofocus",2),b([L({reflect:!0})],x.prototype,"variant",2),b([L({type:Boolean,reflect:!0})],x.prototype,"small",2),b([L({reflect:!0})],x.prototype,"href",2),b([L({type:Boolean,reflect:!0})],x.prototype,"disabled",2),b([L({reflect:!0})],x.prototype,"target",2),b([L({reflect:!0})],x.prototype,"rel",2),b([L({attribute:"full-width",type:Boolean,reflect:!0})],x.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",x);import{ifDefined as ne}from"lit/directives/if-defined.js";var Le=JSON.parse('{"button.aria.loading":["Indl\xE6ser..."]}');var Ve=JSON.parse('{"button.aria.loading":["Loading..."]}');var Te=JSON.parse('{"button.aria.loading":["Ladataan..."]}');var $e=JSON.parse('{"button.aria.loading":["Laster..."]}');var Ie=JSON.parse('{"button.aria.loading":["Laddar ..."]}');var Ae=["primary","secondary","negative","negativeQuiet","utility","pill","link","quiet","utilityQuiet","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],D,u=class extends fe(Pe){constructor(){super();this.autofocus=!1;this.quiet=!1;this.iconOnly=!1;this.small=!1;this.loading=!1;this.disabled=!1;this.fullWidth=!1;be(this,D);_e(Ve,$e,Te,Le,Ie),this.ariaValueTextLoading=_.t({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(!Ae.includes(r))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
+${Ae.join(", ")}.`);ue(this,D,this.value)}closestWithId(r){let t=this.shadowRoot,a;try{for(;t;){if(a=t.getElementById(r),a)return a;t=t.getRootNode().host?.getRootNode()}}catch{}return document.getElementById(r)}firstUpdated(){this.autofocus&&!this.href&&setTimeout(()=>this.focus(),0),this.buttonEl&&this.commandfor&&(this.buttonEl.commandForElement=this.closestWithId(this.commandfor))}_handleButtonClick(){this.type==="submit"?this.internals.form.requestSubmit():this.type==="reset"&&this.internals.form.reset()}resetFormControl(){this.value=de(this,D)}render(){let r=this.variant||"secondary";return Z` ${this.href?Z`
+					<w-link
+						href=${this.href}
+						target=${this.target}
+						variant=${this.quiet?"quiet":r}
+						?small=${this.small}
+						?loading=${this.loading}
+						?autofocus=${this.autofocus}
+						?full-width=${this.fullWidth}
+						class=${this.buttonClass}
+						rel=${this.target==="_blank"?this.rel||"noopener":void 0}
+					>
+						<slot></slot>
+					</w-link>
+				`:Z`
+					<button
+						type=${this.type||"button"}
+						part="base"
+						class=${ne(this.buttonClass)}
+						@click="${this._handleButtonClick}"
+						commandfor=${ne(this.commandfor)}
+						command=${ne(this.command)}
+					>
+						<slot></slot>
+					</button>
+				`}
+		${this.loading?Z`<span
+					class="sr-only"
+					role="progressbar"
+					aria-valuenow="{0}"
+					aria-valuetext=${this.ariaValueTextLoading}
+				></span>`:sr}`}};D=new WeakMap,u.styles=[X,Ee],u.shadowRootOptions={...Pe.shadowRootOptions,delegatesFocus:!0},b([w({reflect:!0})],u.prototype,"type",2),b([w({type:Boolean,reflect:!0})],u.prototype,"autofocus",2),b([w({reflect:!0})],u.prototype,"variant",2),b([w({type:Boolean,reflect:!0})],u.prototype,"quiet",2),b([w({type:Boolean,reflect:!0,attribute:"icon-only"})],u.prototype,"iconOnly",2),b([w({type:Boolean,reflect:!0})],u.prototype,"small",2),b([w({type:Boolean,reflect:!0})],u.prototype,"loading",2),b([w({reflect:!0})],u.prototype,"href",2),b([w({reflect:!0})],u.prototype,"target",2),b([w({type:Boolean,reflect:!0})],u.prototype,"disabled",2),b([w({reflect:!0})],u.prototype,"rel",2),b([w({attribute:"full-width",type:Boolean,reflect:!0})],u.prototype,"fullWidth",2),b([w({attribute:"button-class",reflect:!0})],u.prototype,"buttonClass",2),b([w({reflect:!0})],u.prototype,"name",2),b([w({reflect:!0})],u.prototype,"value",2),b([w()],u.prototype,"commandfor",2),b([w()],u.prototype,"command",2),b([lr("button")],u.prototype,"buttonEl",2);customElements.get("w-button")||customElements.define("w-button",u);export{u as WarpButton};
 //# sourceMappingURL=button.js.map