@warp-ds/elements 2.8.2-next.5 → 2.9.0-next.1

package/dist/packages/button/button.js

@@ -1,13 +1,13 @@
-var er=Object.create;var se=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var rr=Object.getOwnPropertyNames;var tr=Object.getPrototypeOf,or=Object.prototype.hasOwnProperty;var me=t=>{throw TypeError(t)};var fe=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var ar=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of rr(e))!or.call(t,a)&&a!==r&&se(t,a,{get:()=>e[a],enumerable:!(o=pe(e,a))||o.enumerable});return t};var ir=(t,e,r)=>(r=t!=null?er(tr(t)):{},ar(e||!t||!t.__esModule?se(r,"default",{value:t,enumerable:!0}):r,t));var m=(t,e,r,o)=>{for(var a=o>1?void 0:o?pe(e,r):e,g=t.length-1,u;g>=0;g--)(u=t[g])&&(a=(o?u(e,r,a):u(a))||a);return o&&a&&se(e,r,a),a};var we=(t,e,r)=>e.has(t)||me("Cannot "+r);var xe=(t,e,r)=>(we(t,e,"read from private field"),r?r.call(t):e.get(t)),ye=(t,e,r)=>e.has(t)?me("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,r),ke=(t,e,r,o)=>(we(t,e,"write to private field"),o?o.call(t,r):e.set(t,r),r);var $e=fe(N=>{"use strict";Object.defineProperty(N,"__esModule",{value:!0});N.errorMessages=N.ErrorType=void 0;var R;(function(t){t.MalformedUnicode="MALFORMED_UNICODE",t.MalformedHexadecimal="MALFORMED_HEXADECIMAL",t.CodePointLimit="CODE_POINT_LIMIT",t.OctalDeprecation="OCTAL_DEPRECATION",t.EndOfString="END_OF_STRING"})(R=N.ErrorType||(N.ErrorType={}));N.errorMessages=new Map([[R.MalformedUnicode,"malformed Unicode character escape sequence"],[R.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[R.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[R.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[R.EndOfString,"malformed escape sequence at end of string"]])});var ze=fe(F=>{"use strict";Object.defineProperty(F,"__esModule",{value:!0});F.unraw=F.errorMessages=F.ErrorType=void 0;var _=$e();Object.defineProperty(F,"ErrorType",{enumerable:!0,get:function(){return _.ErrorType}});Object.defineProperty(F,"errorMessages",{enumerable:!0,get:function(){return _.errorMessages}});function nr(t){return!t.match(/[^a-f0-9]/i)?parseInt(t,16):NaN}function K(t,e,r){let o=nr(t);if(Number.isNaN(o)||r!==void 0&&r!==t.length)throw new SyntaxError(_.errorMessages.get(e));return o}function sr(t){let e=K(t,_.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function _e(t,e){let r=K(t,_.ErrorType.MalformedUnicode,4);if(e!==void 0){let o=K(e,_.ErrorType.MalformedUnicode,4);return String.fromCharCode(r,o)}return String.fromCharCode(r)}function lr(t){return t.charAt(0)==="{"&&t.charAt(t.length-1)==="}"}function dr(t){if(!lr(t))throw new SyntaxError(_.errorMessages.get(_.ErrorType.MalformedUnicode));let e=t.slice(1,-1),r=K(e,_.ErrorType.MalformedUnicode);try{return String.fromCodePoint(r)}catch(o){throw o instanceof RangeError?new SyntaxError(_.errorMessages.get(_.ErrorType.CodePointLimit)):o}}function cr(t,e=!1){if(e)throw new SyntaxError(_.errorMessages.get(_.ErrorType.OctalDeprecation));let r=parseInt(t,8);return String.fromCharCode(r)}var ur=new Map([["b","\b"],["f","\f"],["n",`
-`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function br(t){return ur.get(t)||t}var gr=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function Ce(t,e=!1){return t.replace(gr,function(r,o,a,g,u,l,p,k,E){if(o!==void 0)return"\\";if(a!==void 0)return sr(a);if(g!==void 0)return dr(g);if(u!==void 0)return _e(u,l);if(p!==void 0)return _e(p);if(k==="0")return"\0";if(k!==void 0)return cr(k,!e);if(E!==void 0)return br(E);throw new SyntaxError(_.errorMessages.get(_.ErrorType.EndOfString))})}F.unraw=Ce;F.default=Ce});var le=function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return t.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?le.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(a){return o[a]?a:""}):"")},[]).join(" ")};var Le=ir(ze(),1);var T=t=>typeof t=="string",hr=t=>typeof t=="function",Se=new Map,Ee="en";function be(t){return[...Array.isArray(t)?t:[t],Ee]}function ge(t,e,r){let o=be(t);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return W(()=>ee("date",o,r),()=>new Intl.DateTimeFormat(o,a)).format(T(e)?new Date(e):e)}function vr(t,e,r){let o;if(r||(r="default"),typeof r=="string")switch(o={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":o.timeZoneName="short";break;case"short":delete o.second}else o=r;return ge(t,e,o)}function de(t,e,r){let o=be(t);return W(()=>ee("number",o,r),()=>new Intl.NumberFormat(o,r)).format(e)}function Me(t,e,r,{offset:o=0,...a}){var l,p;let g=be(t),u=e?W(()=>ee("plural-ordinal",g),()=>new Intl.PluralRules(g,{type:"ordinal"})):W(()=>ee("plural-cardinal",g),()=>new Intl.PluralRules(g,{type:"cardinal"}));return(p=(l=a[r])!=null?l:a[u.select(r-o)])!=null?p:a.other}function W(t,e){let r=t(),o=Se.get(r);return o||(o=e(),Se.set(r,o)),o}function ee(t,e,r){let o=e.join("-");return`${t}-${o}-${JSON.stringify(r)}`}var Qe=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,qe="%__lingui_octothorpe__%",pr=(t,e,r={})=>{let o=e||t,a=u=>typeof u=="object"?u:r[u],g=(u,l)=>{let p=Object.keys(r).length?a("number"):void 0,k=de(o,u,p);return l.replace(new RegExp(qe,"g"),k)};return{plural:(u,l)=>{let{offset:p=0}=l,k=Me(o,!1,u,l);return g(u-p,k)},selectordinal:(u,l)=>{let{offset:p=0}=l,k=Me(o,!0,u,l);return g(u-p,k)},select:mr,number:(u,l)=>de(o,u,a(l)||{style:l}),date:(u,l)=>ge(o,u,a(l)||l),time:(u,l)=>vr(o,u,a(l)||l)}},mr=(t,e)=>{var r;return(r=e[t])!=null?r:e.other};function fr(t,e,r){return(o={},a)=>{let g=pr(e,r,a),u=(p,k=!1)=>Array.isArray(p)?p.reduce((E,D)=>{if(D==="#"&&k)return E+qe;if(T(D))return E+D;let[U,M,P]=D,O={};M==="plural"||M==="selectordinal"||M==="select"?Object.entries(P).forEach(([A,H])=>{O[A]=u(H,M==="plural"||M==="selectordinal")}):O=P;let C;if(M){let A=g[M];C=A(o[U],O)}else C=o[U];return C==null?E:E+C},""):p,l=u(t);return T(l)&&Qe.test(l)?(0,Le.unraw)(l):T(l)?l:l?String(l):""}}var wr=Object.defineProperty,xr=(t,e,r)=>e in t?wr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,yr=(t,e,r)=>(xr(t,typeof e!="symbol"?e+"":e,r),r),ce=class{constructor(){yr(this,"_events",{})}on(e,r){var a;var o;return(a=(o=this._events)[e])!=null||(o[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let o=this._getListeners(e);if(!o)return;let a=o.indexOf(r);~a&&o.splice(a,1)}emit(e,...r){let o=this._getListeners(e);o&&o.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},kr=Object.defineProperty,$r=(t,e,r)=>e in t?kr(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,I=(t,e,r)=>($r(t,typeof e!="symbol"?e+"":e,r),r),ue=class extends ce{constructor(e){var r;super(),I(this,"_locale",""),I(this,"_locales"),I(this,"_localeData",{}),I(this,"_messages",{}),I(this,"_missing"),I(this,"_messageCompiler"),I(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((r=e.locale)!=null?r:Ee,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,r){let o=this._localeData[e];o?Object.assign(o,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(o=>this._loadLocaleData(o,e[o])),this.emit("change")}_load(e,r){let o=this._messages[e];o?Object.assign(o,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([o,a])=>this._load(o,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:o}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=o,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,o){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=o==null?void 0:o.message;e||(e=""),T(e)||(r=e.values||r,a=e.message,e=e.id);let g=this.messages[e],u=g===void 0,l=this._missing;if(l&&u)return hr(l)?l(this._locale,e):l;u&&this.emit("missing",{id:e,locale:this._locale});let p=g||a||e;return T(p)&&(this._messageCompiler?p=this._messageCompiler(p):console.warn(`Uncompiled message detected! Message:
+var Re=Object.create;var ee=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var Xe=Object.getPrototypeOf,Ze=Object.prototype.hasOwnProperty;var ce=o=>{throw TypeError(o)};var de=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports);var Ge=(o,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of He(e))!Ze.call(o,a)&&a!==r&&ee(o,a,{get:()=>e[a],enumerable:!(t=le(e,a))||t.enumerable});return o};var Be=(o,e,r)=>(r=o!=null?Re(Xe(o)):{},Ge(e||!o||!o.__esModule?ee(r,"default",{value:o,enumerable:!0}):r,o));var u=(o,e,r,t)=>{for(var a=t>1?void 0:t?le(e,r):e,l=o.length-1,s;l>=0;l--)(s=o[l])&&(a=(t?s(e,r,a):s(a))||a);return t&&a&&ee(e,r,a),a};var ve=(o,e,r)=>e.has(o)||ce("Cannot "+r);var ue=(o,e,r)=>(ve(o,e,"read from private field"),r?r.call(o):e.get(o)),be=(o,e,r)=>e.has(o)?ce("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,r),he=(o,e,r,t)=>(ve(o,e,"write to private field"),t?t.call(o,r):e.set(o,r),r);var ge=de(I=>{"use strict";Object.defineProperty(I,"__esModule",{value:!0});I.errorMessages=I.ErrorType=void 0;var D;(function(o){o.MalformedUnicode="MALFORMED_UNICODE",o.MalformedHexadecimal="MALFORMED_HEXADECIMAL",o.CodePointLimit="CODE_POINT_LIMIT",o.OctalDeprecation="OCTAL_DEPRECATION",o.EndOfString="END_OF_STRING"})(D=I.ErrorType||(I.ErrorType={}));I.errorMessages=new Map([[D.MalformedUnicode,"malformed Unicode character escape sequence"],[D.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[D.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[D.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[D.EndOfString,"malformed escape sequence at end of string"]])});var we=de(E=>{"use strict";Object.defineProperty(E,"__esModule",{value:!0});E.unraw=E.errorMessages=E.ErrorType=void 0;var w=ge();Object.defineProperty(E,"ErrorType",{enumerable:!0,get:function(){return w.ErrorType}});Object.defineProperty(E,"errorMessages",{enumerable:!0,get:function(){return w.errorMessages}});function Je(o){return!o.match(/[^a-f0-9]/i)?parseInt(o,16):NaN}function R(o,e,r){let t=Je(o);if(Number.isNaN(t)||r!==void 0&&r!==o.length)throw new SyntaxError(w.errorMessages.get(e));return t}function Ke(o){let e=R(o,w.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function pe(o,e){let r=R(o,w.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=R(e,w.ErrorType.MalformedUnicode,4);return String.fromCharCode(r,t)}return String.fromCharCode(r)}function We(o){return o.charAt(0)==="{"&&o.charAt(o.length-1)==="}"}function er(o){if(!We(o))throw new SyntaxError(w.errorMessages.get(w.ErrorType.MalformedUnicode));let e=o.slice(1,-1),r=R(e,w.ErrorType.MalformedUnicode);try{return String.fromCodePoint(r)}catch(t){throw t instanceof RangeError?new SyntaxError(w.errorMessages.get(w.ErrorType.CodePointLimit)):t}}function rr(o,e=!1){if(e)throw new SyntaxError(w.errorMessages.get(w.ErrorType.OctalDeprecation));let r=parseInt(o,8);return String.fromCharCode(r)}var or=new Map([["b","\b"],["f","\f"],["n",`
+`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function tr(o){return or.get(o)||o}var ar=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function me(o,e=!1){return o.replace(ar,function(r,t,a,l,s,i,v,p,z){if(t!==void 0)return"\\";if(a!==void 0)return Ke(a);if(l!==void 0)return er(l);if(s!==void 0)return pe(s,i);if(v!==void 0)return pe(v);if(p==="0")return"\0";if(p!==void 0)return rr(p,!e);if(z!==void 0)return tr(z);throw new SyntaxError(w.errorMessages.get(w.ErrorType.EndOfString))})}E.unraw=me;E.default=me});var ke=Be(we(),1);var L=o=>typeof o=="string",ir=o=>typeof o=="function",fe=new Map,ye="en";function ae(o){return[...Array.isArray(o)?o:[o],ye]}function ie(o,e,r){let t=ae(o);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return H(()=>X("date",t,r),()=>new Intl.DateTimeFormat(t,a)).format(L(e)?new Date(e):e)}function nr(o,e,r){let t;if(r||(r="default"),typeof r=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=r;return ie(o,e,t)}function re(o,e,r){let t=ae(o);return H(()=>X("number",t,r),()=>new Intl.NumberFormat(t,r)).format(e)}function xe(o,e,r,{offset:t=0,...a}){var i,v;let l=ae(o),s=e?H(()=>X("plural-ordinal",l),()=>new Intl.PluralRules(l,{type:"ordinal"})):H(()=>X("plural-cardinal",l),()=>new Intl.PluralRules(l,{type:"cardinal"}));return(v=(i=a[r])!=null?i:a[s.select(r-t)])!=null?v:a.other}function H(o,e){let r=o(),t=fe.get(r);return t||(t=e(),fe.set(r,t)),t}function X(o,e,r){let t=e.join("-");return`${o}-${t}-${JSON.stringify(r)}`}var _e=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,ze="%__lingui_octothorpe__%",sr=(o,e,r={})=>{let t=e||o,a=s=>typeof s=="object"?s:r[s],l=(s,i)=>{let v=Object.keys(r).length?a("number"):void 0,p=re(t,s,v);return i.replace(new RegExp(ze,"g"),p)};return{plural:(s,i)=>{let{offset:v=0}=i,p=xe(t,!1,s,i);return l(s-v,p)},selectordinal:(s,i)=>{let{offset:v=0}=i,p=xe(t,!0,s,i);return l(s-v,p)},select:lr,number:(s,i)=>re(t,s,a(i)||{style:i}),date:(s,i)=>ie(t,s,a(i)||i),time:(s,i)=>nr(t,s,a(i)||i)}},lr=(o,e)=>{var r;return(r=e[o])!=null?r:e.other};function cr(o,e,r){return(t={},a)=>{let l=sr(e,r,a),s=(v,p=!1)=>Array.isArray(v)?v.reduce((z,F)=>{if(F==="#"&&p)return z+ze;if(L(F))return z+F;let[N,y,S]=F,O={};y==="plural"||y==="selectordinal"||y==="select"?Object.entries(S).forEach(([V,j])=>{O[V]=s(j,y==="plural"||y==="selectordinal")}):O=S;let x;if(y){let V=l[y];x=V(t[N],O)}else x=t[N];return x==null?z:z+x},""):v,i=s(o);return L(i)&&_e.test(i)?(0,ke.unraw)(i):L(i)?i:i?String(i):""}}var dr=Object.defineProperty,vr=(o,e,r)=>e in o?dr(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,ur=(o,e,r)=>(vr(o,typeof e!="symbol"?e+"":e,r),r),oe=class{constructor(){ur(this,"_events",{})}on(e,r){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(r);~a&&t.splice(a,1)}emit(e,...r){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},br=Object.defineProperty,hr=(o,e,r)=>e in o?br(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,P=(o,e,r)=>(hr(o,typeof e!="symbol"?e+"":e,r),r),te=class extends oe{constructor(e){var r;super(),P(this,"_locale",""),P(this,"_locales"),P(this,"_localeData",{}),P(this,"_messages",{}),P(this,"_missing"),P(this,"_messageCompiler"),P(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((r=e.locale)!=null?r:ye,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,r){let t=this._localeData[e];t?Object.assign(t,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,r){let t=this._messages[e];t?Object.assign(t,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:t}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,t){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=t==null?void 0:t.message;e||(e=""),L(e)||(r=e.values||r,a=e.message,e=e.id);let l=this.messages[e],s=l===void 0,i=this._missing;if(i&&s)return ir(i)?i(this._locale,e):i;s&&this.emit("missing",{id:e,locale:this._locale});let v=l||a||e;return L(v)&&(this._messageCompiler?v=this._messageCompiler(v):console.warn(`Uncompiled message detected! Message:
 
-> ${p}
+> ${v}
 
 That means you use raw catalog or your catalog doesn't have a translation for the message and fallback was used.
 ICU features such as interpolation and plurals will not work properly for that message. 
 
 Please compile your catalog first. 
-`)),T(p)&&Qe.test(p)?JSON.parse(`"${p}"`):T(p)?p:fr(p,this._locale,this._locales)(r,o==null?void 0:o.formats)}date(e,r){return ge(this._locales||this._locale,e,r)}number(e,r){return de(this._locales||this._locale,e,r)}};function _r(t={}){return new ue(t)}var Q=_r();var v=function(t,e,r,o){if(r==="a"&&!o)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?t!==e||!o:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?o:r==="a"?o.call(t):o?o.value:e.get(t)},x=function(t,e,r,o,a){if(o==="m")throw new TypeError("Private method is not writable");if(o==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?t!==e||!a:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return o==="a"?a.call(t,r):a?a.value=r:e.set(t,r),r};function Fe(t){var e,r,o,a,g,u,l,p,k,E,D,U,M,P,O,C,A,H,ae;class We extends t{constructor(...c){var h,w,$;super(...c),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),o.set(this,!1),a.set(this,!1),g.set(this,void 0),u.set(this,void 0),l.set(this,!0),k.set(this,""),E.set(this,()=>{x(this,a,!0,"f"),x(this,r,!0,"f"),v(this,e,"m",C).call(this)}),D.set(this,()=>{x(this,r,!1,"f"),v(this,e,"m",A).call(this,this.shouldFormValueUpdate()?v(this,k,"f"):""),!this.validity.valid&&v(this,a,"f")&&x(this,o,!0,"f");let q=v(this,e,"m",C).call(this);this.validationMessageCallback&&this.validationMessageCallback(q?this.internals.validationMessage:"")}),U.set(this,()=>{var q;v(this,l,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),x(this,l,!1,"f")),x(this,a,!0,"f"),x(this,o,!0,"f"),v(this,e,"m",C).call(this),(q=this===null||this===void 0?void 0:this.validationMessageCallback)===null||q===void 0||q.call(this,this.showError?this.internals.validationMessage:"")}),M.set(this,void 0),P.set(this,!1),O.set(this,Promise.resolve()),(h=this.addEventListener)===null||h===void 0||h.call(this,"focus",v(this,E,"f")),(w=this.addEventListener)===null||w===void 0||w.call(this,"blur",v(this,D,"f")),($=this.addEventListener)===null||$===void 0||$.call(this,"invalid",v(this,U,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let c=this.validators.map($=>$.attribute).flat(),h=super.observedAttributes||[];return[...new Set([...h,...c])]}static getValidator(c){return this.validators.find(h=>h.attribute===c)||null}static getValidators(c){return this.validators.filter(h=>{var w;if(h.attribute===c||!((w=h.attribute)===null||w===void 0)&&w.includes(c))return!0})}get form(){return this.internals.form}get showError(){return v(this,e,"m",C).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(c,h,w){var $;($=super.attributeChangedCallback)===null||$===void 0||$.call(this,c,h,w);let Z=this.constructor.getValidators(c);Z!=null&&Z.length&&this.validationTarget&&this.setValue(v(this,k,"f"))}setValue(c){var h;x(this,o,!1,"f"),(h=this.validationMessageCallback)===null||h===void 0||h.call(this,""),x(this,k,c,"f");let $=this.shouldFormValueUpdate()?c:null;this.internals.setFormValue($),v(this,e,"m",A).call(this,$),this.valueChangedCallback&&this.valueChangedCallback($),v(this,e,"m",C).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(c=>c(v(this,O,"f")))}formResetCallback(){var c,h;x(this,a,!1,"f"),x(this,o,!1,"f"),v(this,e,"m",C).call(this),(c=this.resetFormControl)===null||c===void 0||c.call(this),(h=this.validationMessageCallback)===null||h===void 0||h.call(this,v(this,e,"m",C).call(this)?this.validationMessage:"")}}return r=new WeakMap,o=new WeakMap,a=new WeakMap,g=new WeakMap,u=new WeakMap,l=new WeakMap,k=new WeakMap,E=new WeakMap,D=new WeakMap,U=new WeakMap,M=new WeakMap,P=new WeakMap,O=new WeakMap,e=new WeakSet,p=function(){let c=this.getRootNode(),h=`${this.localName}[name="${this.getAttribute("name")}"]`;return c.querySelectorAll(h)},C=function(){if(this.hasAttribute("disabled"))return!1;let c=v(this,o,"f")||v(this,a,"f")&&!this.validity.valid&&!v(this,r,"f");return c&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),c},A=function(c){let h=this.constructor,w={},$=h.validators,q=[],Z=$.some(L=>L.isValid instanceof Promise);v(this,P,"f")||(x(this,O,new Promise(L=>{x(this,M,L,"f")}),"f"),x(this,P,!0,"f")),v(this,g,"f")&&(v(this,g,"f").abort(),x(this,u,v(this,g,"f"),"f"));let G=new AbortController;x(this,g,G,"f");let B,ve=!1;$.length&&($.forEach(L=>{let ie=L.key||"customError",Y=L.isValid(this,c,G.signal);Y instanceof Promise?(q.push(Y),Y.then(ne=>{ne!=null&&(w[ie]=!ne,B=v(this,e,"m",ae).call(this,L,c),v(this,e,"m",H).call(this,w,B))})):(w[ie]=!Y,this.validity[ie]!==!Y&&(ve=!0),!Y&&!B&&(B=v(this,e,"m",ae).call(this,L,c)))}),Promise.allSettled(q).then(()=>{var L;G!=null&&G.signal.aborted||(x(this,P,!1,"f"),(L=v(this,M,"f"))===null||L===void 0||L.call(this))}),(ve||!Z)&&v(this,e,"m",H).call(this,w,B))},H=function(c,h){if(this.validationTarget)this.internals.setValidity(c,h,this.validationTarget),x(this,l,!1,"f");else{if(this.internals.setValidity(c,h),this.internals.validity.valid)return;x(this,l,!0,"f")}},ae=function(c,h){if(this.validityCallback){let w=this.validityCallback(c.key||"customError");if(w)return w}return c.message instanceof Function?c.message(this,h):c.message},We}import{css as Be,html as oe,LitElement as Je}from"lit";import{property as S}from"lit/decorators.js";var Cr=["en","nb","fi","da","sv"],he="en",re=t=>Cr.find(e=>t===e||t.toLowerCase().includes(e))||he;function Oe(){if(typeof window=="undefined"){let t=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return re(t)}try{let t=Pe(document);if(t)return re(t);let e=Lr();if(e)return re(e);let r=Pe(je());return r?re(r):he}catch(t){return console.warn("could not detect locale, falling back to source locale",t),he}}var Te=(t,e,r,o,a)=>{Q.load("en",t),Q.load("nb",e),Q.load("fi",r),Q.load("da",o),Q.load("sv",a);let g=Oe();Q.activate(g),Ve(),Sr()},zr="warp-i18n-change";function Ve(){typeof window!="undefined"&&window.dispatchEvent(new Event(zr))}var De=!1;function Sr(){if(De||typeof window=="undefined"||!(document!=null&&document.documentElement))return;De=!0;let t=()=>{let a=Oe();Q.locale!==a&&(Q.activate(a),Ve())},e=new MutationObserver(a=>{for(let g of a)if(g.type==="attributes"&&g.attributeName==="lang"){t();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=je();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let o=Mr();o&&e.observe(o,{attributes:!0,attributeFilter:["lang"]})}function je(){var t,e;try{return(e=(t=window.parent)==null?void 0:t.document)!=null?e:null}catch(r){return null}}function Pe(t){var e,r;try{return(r=(e=t==null?void 0:t.documentElement)==null?void 0:e.lang)!=null?r:""}catch(o){return""}}function Mr(){var t;try{return(t=window.frameElement)!=null?t:null}catch(e){return null}}function Lr(){var t,e,r;try{return(r=(e=(t=window.frameElement)==null?void 0:t.getAttribute)==null?void 0:e.call(t,"lang"))!=null?r:""}catch(o){return""}}import{html as Qr,LitElement as Ie}from"lit";import{property as V}from"lit/decorators.js";import{classMap as qr}from"lit/directives/class-map.js";import{css as Ae}from"lit";var te=Ae`
+`)),L(v)&&_e.test(v)?JSON.parse(`"${v}"`):L(v)?v:cr(v,this._locale,this._locales)(r,t==null?void 0:t.formats)}date(e,r){return ie(this._locales||this._locale,e,r)}number(e,r){return re(this._locales||this._locale,e,r)}};function gr(o={}){return new te(o)}var C=gr();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)},g=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 Ce(o){var e,r,t,a,l,s,i,v,p,z,F,N,y,S,O,x,V,j,J;class Ue extends o{constructor(...n){var c,h,m;super(...n),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),i.set(this,!0),p.set(this,""),z.set(this,()=>{g(this,a,!0,"f"),g(this,r,!0,"f"),d(this,e,"m",x).call(this)}),F.set(this,()=>{g(this,r,!1,"f"),d(this,e,"m",V).call(this,this.shouldFormValueUpdate()?d(this,p,"f"):""),!this.validity.valid&&d(this,a,"f")&&g(this,t,!0,"f");let M=d(this,e,"m",x).call(this);this.validationMessageCallback&&this.validationMessageCallback(M?this.internals.validationMessage:"")}),N.set(this,()=>{var M;d(this,i,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),g(this,i,!1,"f")),g(this,a,!0,"f"),g(this,t,!0,"f"),d(this,e,"m",x).call(this),(M=this===null||this===void 0?void 0:this.validationMessageCallback)===null||M===void 0||M.call(this,this.showError?this.internals.validationMessage:"")}),y.set(this,void 0),S.set(this,!1),O.set(this,Promise.resolve()),(c=this.addEventListener)===null||c===void 0||c.call(this,"focus",d(this,z,"f")),(h=this.addEventListener)===null||h===void 0||h.call(this,"blur",d(this,F,"f")),(m=this.addEventListener)===null||m===void 0||m.call(this,"invalid",d(this,N,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let n=this.validators.map(m=>m.attribute).flat(),c=super.observedAttributes||[];return[...new Set([...c,...n])]}static getValidator(n){return this.validators.find(c=>c.attribute===n)||null}static getValidators(n){return this.validators.filter(c=>{var h;if(c.attribute===n||!((h=c.attribute)===null||h===void 0)&&h.includes(n))return!0})}get form(){return this.internals.form}get showError(){return d(this,e,"m",x).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(n,c,h){var m;(m=super.attributeChangedCallback)===null||m===void 0||m.call(this,n,c,h);let q=this.constructor.getValidators(n);q!=null&&q.length&&this.validationTarget&&this.setValue(d(this,p,"f"))}setValue(n){var c;g(this,t,!1,"f"),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,""),g(this,p,n,"f");let m=this.shouldFormValueUpdate()?n:null;this.internals.setFormValue(m),d(this,e,"m",V).call(this,m),this.valueChangedCallback&&this.valueChangedCallback(m),d(this,e,"m",x).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(n=>n(d(this,O,"f")))}formResetCallback(){var n,c;g(this,a,!1,"f"),g(this,t,!1,"f"),d(this,e,"m",x).call(this),(n=this.resetFormControl)===null||n===void 0||n.call(this),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,d(this,e,"m",x).call(this)?this.validationMessage:"")}}return r=new WeakMap,t=new WeakMap,a=new WeakMap,l=new WeakMap,s=new WeakMap,i=new WeakMap,p=new WeakMap,z=new WeakMap,F=new WeakMap,N=new WeakMap,y=new WeakMap,S=new WeakMap,O=new WeakMap,e=new WeakSet,v=function(){let n=this.getRootNode(),c=`${this.localName}[name="${this.getAttribute("name")}"]`;return n.querySelectorAll(c)},x=function(){if(this.hasAttribute("disabled"))return!1;let n=d(this,t,"f")||d(this,a,"f")&&!this.validity.valid&&!d(this,r,"f");return n&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),n},V=function(n){let c=this.constructor,h={},m=c.validators,M=[],q=m.some(_=>_.isValid instanceof Promise);d(this,S,"f")||(g(this,O,new Promise(_=>{g(this,y,_,"f")}),"f"),g(this,S,!0,"f")),d(this,l,"f")&&(d(this,l,"f").abort(),g(this,s,d(this,l,"f"),"f"));let Y=new AbortController;g(this,l,Y,"f");let Q,se=!1;m.length&&(m.forEach(_=>{let K=_.key||"customError",A=_.isValid(this,n,Y.signal);A instanceof Promise?(M.push(A),A.then(W=>{W!=null&&(h[K]=!W,Q=d(this,e,"m",J).call(this,_,n),d(this,e,"m",j).call(this,h,Q))})):(h[K]=!A,this.validity[K]!==!A&&(se=!0),!A&&!Q&&(Q=d(this,e,"m",J).call(this,_,n)))}),Promise.allSettled(M).then(()=>{var _;Y!=null&&Y.signal.aborted||(g(this,S,!1,"f"),(_=d(this,y,"f"))===null||_===void 0||_.call(this))}),(se||!q)&&d(this,e,"m",j).call(this,h,Q))},j=function(n,c){if(this.validationTarget)this.internals.setValidity(n,c,this.validationTarget),g(this,i,!1,"f");else{if(this.internals.setValidity(n,c),this.internals.validity.valid)return;g(this,i,!0,"f")}},J=function(n,c){if(this.validityCallback){let h=this.validityCallback(n.key||"customError");if(h)return h}return n.message instanceof Function?n.message(this,c):n.message},Ue}import{html as B,LitElement as Ye,nothing as Cr}from"lit";import{property as f}from"lit/decorators.js";var pr=["en","nb","fi","da","sv"],ne="en",Z=o=>pr.find(e=>o===e||o.toLowerCase().includes(e))||ne;function Fe(){if(typeof window=="undefined"){let o=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return Z(o)}try{let o=Ee(document);if(o)return Z(o);let e=xr();if(e)return Z(e);let r=Ee(Le());return r?Z(r):ne}catch(o){return console.warn("could not detect locale, falling back to source locale",o),ne}}var Se=(o,e,r,t,a)=>{C.load("en",o),C.load("nb",e),C.load("fi",r),C.load("da",t),C.load("sv",a);let l=Fe();C.activate(l),Oe(),wr()},mr="warp-i18n-change";function Oe(){typeof window!="undefined"&&window.dispatchEvent(new Event(mr))}var Me=!1;function wr(){if(Me||typeof window=="undefined"||!(document!=null&&document.documentElement))return;Me=!0;let o=()=>{let a=Fe();C.locale!==a&&(C.activate(a),Oe())},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=Le();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let t=fr();t&&e.observe(t,{attributes:!0,attributeFilter:["lang"]})}function Le(){var o,e;try{return(e=(o=window.parent)==null?void 0:o.document)!=null?e:null}catch(r){return null}}function Ee(o){var e,r;try{return(r=(e=o==null?void 0:o.documentElement)==null?void 0:e.lang)!=null?r:""}catch(t){return""}}function fr(){var o;try{return(o=window.frameElement)!=null?o:null}catch(e){return null}}function xr(){var o,e,r;try{return(r=(e=(o=window.frameElement)==null?void 0:o.getAttribute)==null?void 0:e.call(o,"lang"))!=null?r:""}catch(t){return""}}import{html as yr,LitElement as Ie,nothing as _r}from"lit";import{property as T}from"lit/decorators.js";import{css as Te}from"lit";var G=Te`
   *,
   :before,
   :after {
@@ -280,7 +280,7 @@ Please compile your catalog first.
   svg {
     pointer-events: none;
   }
-`,Rr=Ae`*, :before, :after {
+`,Ar=Te`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2446,24 +2446,255 @@ Please compile your catalog first.
                     display: none
                 }
             }
-        `;import{css as Er}from"lit";var Ne=Er`.w-button,
-.w-button--secondary {
+        `;import{css as kr}from"lit";var Ve=kr`
+  /* If not a link variant this should look like a button */
+  :host(:not([variant="link"])) {
+    --_background: var(--background, var(--w-s-color-background));
+    --_background-hover: var(
+      --background-hover,
+      var(--w-s-color-background-hover)
+    );
+    --_background-active: var(
+      --background-active,
+      var(--w-s-color-background-active)
+    );
+    --_text-color: var(--color, var(--w-s-color-text-link));
+    --_text-color-hover: var(--color-hover, var(--w-s-color-text-link));
+    --_text-color-active: var(--color-active, var(--w-s-color-text-link));
+    --_border-width: var(--border-width, 2px);
+    --_border: var(--border, var(--w-s-color-border));
+    --_border-hover: var(--border-hover, var(--w-s-color-border-hover));
+    --_border-active: var(--border-active, var(--w-s-color-border-active));
+    --_border-radius: var(--border-radius, var(--w-button-radius-default, 8px));
+    --_font-size: var(--font-size, var(--w-font-size-m));
+    --_line-height: var(--line-height, var(--w-line-height-m));
+    --_font-weight: var(--font-weight, bold);
+    --_padding-x: var(--padding-x, 16px);
+    --_padding-y: var(--padding-y, 13px);
+  }
+
+  :host(:not([variant="link"])) a {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    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),
+      fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    background-color: var(--_background);
+    color: var(--_text-color);
+    border: var(--_border-width) solid var(--_border);
+    border-radius: var(--_border-radius);
+    padding: calc(var(--_padding-y) - var(--_border-width))
+      calc(var(--_padding-x) - var(--_border-width));
+    font-size: var(--_font-size);
+    line-height: var(--_line-height);
+    font-weight: var(--_font-weight);
+  }
+
+  :host(:not([variant="link"])) a:hover {
+    background-color: var(--_background-hover);
+    border-color: var(--_border-hover);
+    color: var(--_text-color-hover);
+  }
+
+  :host(:not([variant="link"])) a:active {
+    background-color: var(--_background-active);
+    border-color: var(--_border-active);
+    color: var(--_text-color-active);
+  }
+
+  :host(:not([variant="link"])) a:focus-visible {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+  }
+
+  /* Variants config */
+  :host([variant="primary"]) {
+    --background: var(--w-s-color-background-primary);
+    --background-hover: var(--w-s-color-background-primary-hover);
+    --background-active: var(--w-s-color-background-primary-active);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-width: 0px;
+  }
+  :host([variant="quiet"]),
+  :host([quiet]) /* deprecated, backwards compatibility, use variant="quiet" */ {
+    --background: transparent;
+    --color: var(--w-s-color-text-link);
+    --color-hover: var(--w-s-color-text-link-hover);
+    --color-active: var(--w-s-color-text-link-active);
+    --border-width: 0px;
+  }
+  :host([variant="negative"]) {
+    --background: var(--w-s-color-background-negative);
+    --background-hover: var(--w-s-color-background-negative-hover);
+    --background-active: var(--w-s-color-background-negative-active);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-width: 0px;
+  }
+  :host([variant="negativeQuiet"]),
+  :host([quiet][variant="negative"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --background-hover: var(--w-s-color-background-negative-subtle-hover);
+    --background-active: var(--w-s-color-background-negative-subtle-active);
+    --color: var(--w-s-color-text-negative);
+    --color-hover: var(--w-s-color-text-negative);
+    --color-active: var(--w-s-color-text-negative);
+    --border-width: 0px;
+  }
+  :host([variant="utility"]) {
+    --background: var(--w-s-color-background);
+    --background-hover: var(--w-s-color-background-hover);
+    --background-active: var(--w-s-color-background-active);
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-radius: var(--w-button-radius-utility, 4px);
+    --border-width: 1px;
+  }
+  :host([variant="utilityQuiet"]),
+  :host([quiet][variant="utility"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-width: 0px;
+  }
+  :host([variant="overlay"]) {
+    --background: var(--w-color-background);
+    --background-hover: var(--w-color-background-hover);
+    --background-active: var(--w-color-background-active);
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+  :host([variant="overlayQuiet"]),
+  :host([quiet][variant="overlay"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --background-hover: var(--w-s-color-background-hover);
+    --background-active: var(--w-s-color-background-active);
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+  :host([variant="overlayInverted"]) {
+    --background: var(--w-s-color-background-inverted);
+    --background-hover: var(--w-s-color-background-inverted-hover);
+    --background-active: var(--w-s-color-background-inverted-active);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+  :host([variant="overlayInvertedQuiet"]),
+  :host([quiet][variant="overlayInverted"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --background-hover: var(--w-s-color-background-inverted-hover);
+    --background-active: var(--w-s-color-background-inverted-active);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+
+  :host([variant="link"]) {
+    --background: none;
+    --background-hover: none;
+    --background-active: none;
+    --border-width: 0px;
+    --font-weight: normal;
+    display: inline;
+  }
+
+  /* States config,  selects --loading as well since loading is always supposed to be disabled */
+  :host(:disabled),
+  :host([disabled]) {
+    --background: var(--w-s-color-background-disabled);
+    --background-hover: var(--w-s-color-background-disabled);
+    --background-active: var(--w-s-color-background-disabled);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-width: 0px;
+  }
+
+  :host(:disabled) a,
+  :host([disabled]) a {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  :host([variant="link"]):hover a {
+    text-decoration: underline;
+  }
+
+  /* Sizes config */
+  :host([small]) {
+    --padding-x: 12px;
+    --padding-y: 8px;
+    --font-size: var(--w-font-size-xs);
+    --line-height: var(--w-line-height-xs);
+  }
+
+  /* Width config */
+  :host([full-width]) a {
+    width: 100%;
+    max-width: 100%;
+  }
+`;var Pe=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],k=class extends Ie{constructor(){super(...arguments);this.autofocus=!1;this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),this.variant&&!Pe.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
+${Pe.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){return yr`
+      <a
+        href="${this.href}"
+        target="${this.target}"
+        rel="${this.target==="_blank"?this.rel||"noopener":_r}"
+        tabindex="0"
+      >
+        <slot></slot>
+      </a>
+    `}};k.shadowRootOptions={...Ie.shadowRootOptions,delegatesFocus:!0},k.styles=[G,Ve],u([T({type:Boolean,reflect:!0})],k.prototype,"autofocus",2),u([T({reflect:!0})],k.prototype,"variant",2),u([T({type:Boolean,reflect:!0})],k.prototype,"small",2),u([T({reflect:!0})],k.prototype,"href",2),u([T({type:Boolean,reflect:!0})],k.prototype,"disabled",2),u([T({reflect:!0})],k.prototype,"target",2),u([T({reflect:!0})],k.prototype,"rel",2),u([T({attribute:"full-width",type:Boolean,reflect:!0})],k.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",k);var Ne=JSON.parse('{"button.aria.loading":["Indl\xE6ser..."]}');var Ae=JSON.parse('{"button.aria.loading":["Loading..."]}');var De=JSON.parse('{"button.aria.loading":["Ladataan..."]}');var je=JSON.parse('{"button.aria.loading":["Laster..."]}');var $e=JSON.parse('{"button.aria.loading":["Laddar ..."]}');import{css as zr}from"lit";var qe=zr`
+  :host {
     /* Local scoped variables, given the default button (the secondary variant) as a default */
     --_background: var(--background, var(--w-s-color-background));
-    --_background-hover: var(--background-hover, var(--w-s-color-background-hover));
-    --_background-active: var(--background-active, var(--w-s-color-background-active));
+    --_background-hover: var(
+      --background-hover,
+      var(--w-s-color-background-hover)
+    );
+    --_background-active: var(
+      --background-active,
+      var(--w-s-color-background-active)
+    );
     --_text-color: var(--color, var(--w-s-color-text-link));
+    --_text-color-hover: var(--color-hover, var(--w-s-color-text-link));
+    --_text-color-active: var(--color-active, var(--w-s-color-text-link));
     --_border-width: var(--border-width, 2px);
     --_border: var(--border, var(--w-s-color-border));
     --_border-hover: var(--border-hover, var(--w-s-color-border-hover));
     --_border-active: var(--border-active, var(--w-s-color-border-active));
-    --_border-radius: var(--w-button-radius-default, 8px);
+    --_border-radius: var(--border-radius, var(--w-button-radius-default, 8px));
     --_font-size: var(--font-size, var(--w-font-size-m));
     --_line-height: var(--line-height, var(--w-line-height-m));
     --_font-weight: var(--font-weight, bold);
     --_padding-x: var(--padding-x, 16px);
     --_padding-y: var(--padding-y, 13px);
+  }
 
+  button {
     /* Base setup for all buttons */
     display: inline-flex;
     justify-content: center;
@@ -2471,237 +2702,279 @@ Please compile your catalog first.
     text-align: center;
     cursor: pointer;
     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),
-            fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
-            stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      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),
+      fill 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
     /* Hook the local vars up to the button stuff  */
     background-color: var(--_background);
     color: var(--_text-color);
     border: var(--_border-width) solid var(--_border);
     border-radius: var(--_border-radius);
-    padding: calc(var(--_padding-y) - var(--_border-width)) calc(var(--_padding-x) - var(--_border-width));
+    padding: calc(var(--_padding-y) - var(--_border-width))
+      calc(var(--_padding-x) - var(--_border-width));
     font-size: var(--_font-size);
     line-height: var(--_line-height);
     font-weight: var(--_font-weight);
-}
+  }
 
-    .w-button:hover {
-        background-color: var(--_background-hover);
-        border-color: var(--_border-hover);
-    }
+  button:hover {
+    background-color: var(--_background-hover);
+    border-color: var(--_border-hover);
+    color: var(--_text-color-hover);
+  }
 
-    .w-button:active {
-        background-color: var(--_background-active);
-        border-color: var(--_border-active);
-    }
+  button:active {
+    background-color: var(--_background-active);
+    border-color: var(--_border-active);
+    color: var(--_text-color-active);
+  }
 
-    .w-button:focus-visible {
-        outline: 2px solid var(--w-s-color-border-focus);
-        outline-offset: var(--w-outline-offset, 1px);
-    }
+  button:focus-visible {
+    outline: 2px solid var(--w-s-color-border-focus);
+    outline-offset: var(--w-outline-offset, 1px);
+  }
 
-    /* Variants config */
-    .w-button--primary {
-        --background: var(--w-color-button-primary-background);
-        --background-hover: var(--w-color-button-primary-background-hover);
-        --background-active: var(--w-color-button-primary-background-active);
-        --color: var(--w-s-color-text-inverted);
-        --border-width: 0px;
-    }
-    .w-button--negative {
-        --background: var(--w-s-color-background-negative);
-        --background-hover: var(--w-s-color-background-negative-hover);
-        --background-active: var(--w-s-color-background-negative-active);
-        --color: var(--w-s-color-text-inverted);
-        --border-width: 0px;
-    }
-    .w-button--negative-quiet {
-        --background: transparent;
-        --background-hover: var(--w-s-color-background-negative-subtle-hover);
-        --background-active: var(--w-s-color-background-negative-subtle-active);
-        --color: var(--w-s-color-text-negative);
-        --border-width: 0px;
-    }
-    .w-button--utility {
-        --background: var(--w-s-color-background);
-        --background-hover: var(--w-s-color-background-hover);
-        --background-active: var(--w-s-color-background-active);
-        --color: var(--w-s-color-text);
-        --border-radius: var(--w-button-radius-utility, 4px);
-        --border-width: 1px;
-    }
-    .w-button--utility-quiet {
-        --background: transparent;
-        --color: var(--w-s-color-text);
-        --border-width: 0px;
-    }
-    .w-button--quiet {
-        --background: transparent;
-        --border-width: 0px;
-    }
-    .w-button--overlay {
-        --background: var(--w-color-background);
-        --background-hover: var(--w-color-background-hover);
-        --background-active: var(--w-color-background-active);
-        --color: var(--w-s-color-text);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-quiet {
-        --background: transparent;
-        --background-hover: var(--w-s-color-background-hover);
-        --background-active: var(--w-s-color-background-active);
-        --color: var(--w-s-color-text);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-inverted {
-        --background: var(--w-s-color-background-inverted);
-        --background-hover: var(--w-s-color-background-inverted-hover);
-        --background-active: var(--w-s-color-background-inverted-active);
-        --color: var(--w-s-color-text-inverted);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-inverted-quiet {
-        --background: transparent;
-        --background-hover: var(--w-s-color-background-inverted-hover);
-        --background-active: var(--w-s-color-background-inverted-active);
-        --color: var(--w-s-color-text-inverted);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
+  /* Variants config */
+  :host([variant="primary"]) {
+    --background: var(--w-s-color-background-primary);
+    --background-hover: var(--w-s-color-background-primary-hover);
+    --background-active: var(--w-s-color-background-primary-active);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-width: 0px;
+  }
+  :host([variant="quiet"]),
+  :host([quiet]) /* deprecated, backwards compatibility, use variant="quiet" */ {
+    --background: transparent;
+    --color: var(--w-s-color-text-link);
+    --color-hover: var(--w-s-color-text-link-hover);
+    --color-active: var(--w-s-color-text-link-active);
+    --border-width: 0px;
+  }
+  :host([variant="negative"]) {
+    --background: var(--w-s-color-background-negative);
+    --background-hover: var(--w-s-color-background-negative-hover);
+    --background-active: var(--w-s-color-background-negative-active);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-width: 0px;
+  }
+  :host([variant="negativeQuiet"]),
+  :host([quiet][variant="negative"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --background-hover: var(--w-s-color-background-negative-subtle-hover);
+    --background-active: var(--w-s-color-background-negative-subtle-active);
+    --color: var(--w-s-color-text-negative);
+    --color-hover: var(--w-s-color-text-negative);
+    --color-active: var(--w-s-color-text-negative);
+    --border-width: 0px;
+  }
+  :host([variant="utility"]) {
+    --background: var(--w-s-color-background);
+    --background-hover: var(--w-s-color-background-hover);
+    --background-active: var(--w-s-color-background-active);
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-radius: var(--w-button-radius-utility, 4px);
+    --border-width: 1px;
+  }
+  :host([variant="utilityQuiet"]),
+  :host([quiet][variant="utility"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-width: 0px;
+  }
+  :host([variant="overlay"]) {
+    --background: var(--w-color-background);
+    --background-hover: var(--w-color-background-hover);
+    --background-active: var(--w-color-background-active);
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+  :host([variant="overlayQuiet"]),
+  :host([quiet][variant="overlay"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --background-hover: var(--w-s-color-background-hover);
+    --background-active: var(--w-s-color-background-active);
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+  :host([variant="overlayInverted"]) {
+    --background: var(--w-s-color-background-inverted);
+    --background-hover: var(--w-s-color-background-inverted-hover);
+    --background-active: var(--w-s-color-background-inverted-active);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
+  :host([variant="overlayInvertedQuiet"]),
+  :host([quiet][variant="overlayInverted"]) /* deprecated, backwards compatibility */ {
+    --background: transparent;
+    --background-hover: var(--w-s-color-background-inverted-hover);
+    --background-active: var(--w-s-color-background-inverted-active);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-radius: 9999px;
+    --border-width: 0px;
+  }
 
-    .w-button--link {
-        --background: none;
-        --background-hover: none;
-        --background-active: none;
-        --border-width: 0;
-        --font-weight: normal;
-        display: inline;
-    }
-    .w-button--overlay {
-        --background: var(--w-color-background);
-        --background-hover: var(--w-color-background-hover);
-        --background-active: var(--w-color-background-active);
-        --color: var(--w-s-color-text);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-quiet {
-        --background: transparent;
-        --background-hover: var(--w-s-color-background-hover);
-        --background-active: var(--w-s-color-background-active);
-        --color: var(--w-s-color-text);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-inverted {
-        --background: var(--w-s-color-background-inverted);
-        --background-hover: var(--w-s-color-background-inverted-hover);
-        --background-active: var(--w-s-color-background-inverted-active);
-        --color: var(--w-s-color-text-inverted);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
-    .w-button--overlay-inverted-quiet {
-        --background: transparent;
-        --background-hover: var(--w-s-color-background-inverted-hover);
-        --background-active: var(--w-s-color-background-inverted-active);
-        --color: var(--w-s-color-text-inverted);
-        --border-radius: 9999px;
-        --border-width: 0px;
-    }
+  :host([variant="link"]) {
+    --background: none;
+    --background-hover: none;
+    --background-active: none;
+    --border-width: 0px;
+    --font-weight: normal;
+    display: inline;
+  }
 
-    /* States config,  selects --loading as well since loading is always supposed to be disabled */
-    .w-button:disabled,
-    .w-button--disabled,
-    .w-button--loading {
-        --background: var(--w-s-color-background-disabled);
-        --background-hover: var(--w-s-color-background-disabled);
-        --background-active: var(--w-s-color-background-disabled);
-        --color: var(--w-s-color-text-inverted);
-        --border-width: 0px;
-        pointer-events: none;
-    }
+  :host([variant="pill"]) {
+    --background: transparent;
+    --background-hover: var(--w-color-button-pill-background-hover); /** TODO: this should use a semantic token */
+    --background-active: var(--w-color-button-pill-background-active); /** TODO: this should use a semantic token */
+    --border-radius: 50%;
+    --border-width: 0px;
+    --color: var(--w-s-color-icon);
+    --color-hover: var(--w-s-color-icon-hover);
+    --color-active: var(--w-s-color-icon-active);
+    --padding-x: 14px; /* get a total height and width of 44px, matching atomic CSS variant */
+    --padding-y: 14px;
+  }
 
-    .w-button--link:hover {
-        text-decoration: underline;
-    }
+  /* States config,  selects --loading as well since loading is always supposed to be disabled */
+  :host(:disabled),
+  :host([disabled]) {
+    --background: var(--w-s-color-background-disabled);
+    --background-hover: var(--w-s-color-background-disabled);
+    --background-active: var(--w-s-color-background-disabled);
+    --color: var(--w-s-color-text-inverted);
+    --color-hover: var(--w-s-color-text-inverted);
+    --color-active: var(--w-s-color-text-inverted);
+    --border-width: 0px;
+  }
 
-    /* Sizes config */
-    .w-button--small {
-        --padding-x: 12px;
-        --padding-y: 8px;
-        --font-size: var(--w-font-size-xs);
-        --line-height: var(--w-line-height-xs);
-    }
+  :host(:disabled) button,
+  :host([disabled]) button {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
 
-    /* Width config */
-    .w-button--full-width {
-        width: 100%;
-        max-width: 100%;
-    }
+  :host([loading]) {
+    --background: var(--w-s-color-background-subtle);
+    --background-hover: var(--w-s-color-background-subtle);
+    --background-active: var(--w-s-color-background-subtle);
+    --color: var(--w-s-color-text);
+    --color-hover: var(--w-s-color-text);
+    --color-active: var(--w-s-color-text);
+    --border-width: 0px;
+  }
 
-    .w-button--has-icon-only {
-        width: auto;
-        max-width: none;
-        --_padding-x: var(--_padding-y);
-        aspect-ratio: 1 / 1;
-    }
+  :host([loading]) button {
+    cursor: wait;
+    pointer-events: none;
+  }
 
-    a.w-button {
-        text-decoration: none !important;
-    }
+  :host([variant="link"]):hover {
+    text-decoration: underline;
+  }
 
-    /* Copy of loading animation from warp  */
-    .w-button--loading {
-        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;
-    }
+  /* Sizes config */
+  :host([small]) {
+    --padding-x: 12px;
+    --padding-y: 8px;
+    --font-size: var(--w-font-size-xs);
+    --line-height: var(--w-line-height-xs);
+  }
 
-    @keyframes animate-inprogress {
-        0% {
-            background-position: 0 0;
-        }
-        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.autofocus=!1;this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),this.variant&&!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 r=this.variant||"secondary",o={"w-button":r!=="link","w-button--primary":r==="primary","w-button--secondary":r==="secondary"||!this.variant,"w-button--negative":r==="negative","w-button--utility":r==="utility","w-button--quiet":r==="quiet","w-button--negative-quiet":r==="negativeQuiet","w-button--utility-quiet":r==="utilityQuiet","w-button--overlay":r==="overlay","w-button--overlay-inverted":r==="overlayInverted","w-button--overlay-quiet":r==="overlayQuiet","w-button--overlay-inverted-quiet":r==="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(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.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=${r}
-          ?small=${this.small}
-          ?quiet=${this.quiet}
-          ?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>`:oe`<button type=${this.type||"button"} class=${this._classes} @click="${this._handleButtonClick}">
-          <slot></slot>
-        </button>`}
-    ${this.loading?oe`<span class="sr-only" role="progressbar" aria-valuenow="{0}" aria-valuetext=${this.ariaValueTextLoading}></span>`:null}`}};J=new WeakMap,y.shadowRootOptions={...Je.shadowRootOptions,delegatesFocus:!0},y.styles=[te,Ge,Be`:host([full-width]) { width: 100%; }`,Be`.rounded-radius-default{border-radius:var(--w-button-radius-default,8px);}.rounded-radius-utility{border-radius:var(--w-button-radius-utility,4px);}`],m([S({reflect:!0})],y.prototype,"type",2),m([S({type:Boolean,reflect:!0})],y.prototype,"autofocus",2),m([S({reflect:!0})],y.prototype,"variant",2),m([S({type:Boolean,reflect:!0})],y.prototype,"quiet",2),m([S({type:Boolean,reflect:!0})],y.prototype,"small",2),m([S({type:Boolean,reflect:!0})],y.prototype,"loading",2),m([S({reflect:!0})],y.prototype,"href",2),m([S({reflect:!0})],y.prototype,"target",2),m([S({reflect:!0})],y.prototype,"rel",2),m([S({attribute:"full-width",type:Boolean,reflect:!0})],y.prototype,"fullWidth",2),m([S({attribute:"button-class",reflect:!0})],y.prototype,"buttonClass",2),m([S({reflect:!0})],y.prototype,"name",2),m([S({reflect:!0})],y.prototype,"value",2);customElements.get("w-button")||customElements.define("w-button",y);export{y as WarpButton};
+  :host([small][variant="pill"]) {
+    --padding-x: 8px; /* get a total height and width of 32px, matching atomic CSS variant */
+    --padding-y: 8px;
+  }
+
+  /* Width config */
+  :host([full-width]) button {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  :host([has-icon-only]) {
+    --_padding-x: var(--_padding-y);
+  }
+
+  :host([has-icon-only]) button {
+    width: auto;
+    max-width: none;
+    aspect-ratio: 1 / 1;
+  }
+
+  /* Copy of loading animation from warp  */
+  :host([loading]) button {
+    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;
+  }
+
+  @keyframes animate-inprogress {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 60px 0;
+    }
+  }
+`;import{ifDefined as Mr}from"lit/directives/if-defined.js";var Qe=["primary","secondary","negative","negativeQuiet","utility","pill","link","quiet","utilityQuiet","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],U,b=class extends Ce(Ye){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,U,null);Se(Ae,je,De,Ne,$e),this.ariaValueTextLoading=C.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(!Qe.includes(r))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
+${Qe.join(", ")}.`);he(this,U,this.value)}firstUpdated(){this.autofocus&&!this.href&&setTimeout(()=>this.focus(),0)}_handleButtonClick(){this.type==="submit"?this.internals.form.requestSubmit():this.type==="reset"&&this.internals.form.reset()}resetFormControl(){this.value=ue(this,U)}render(){let r=this.variant||"secondary";return B` ${this.href?B`
+          <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>
+        `:B`
+          <button
+            type=${this.type||"button"}
+            class=${Mr(this.buttonClass)}
+            @click="${this._handleButtonClick}"
+          >
+            <slot></slot>
+          </button>
+        `}
+    ${this.loading?B`<span
+          class="sr-only"
+          role="progressbar"
+          aria-valuenow="{0}"
+          aria-valuetext=${this.ariaValueTextLoading}
+        ></span>`:Cr}`}};U=new WeakMap,b.styles=[G,qe],b.shadowRootOptions={...Ye.shadowRootOptions,delegatesFocus:!0},u([f({reflect:!0})],b.prototype,"type",2),u([f({type:Boolean,reflect:!0})],b.prototype,"autofocus",2),u([f({reflect:!0})],b.prototype,"variant",2),u([f({type:Boolean,reflect:!0})],b.prototype,"quiet",2),u([f({type:Boolean,reflect:!0,attribute:"icon-only"})],b.prototype,"iconOnly",2),u([f({type:Boolean,reflect:!0})],b.prototype,"small",2),u([f({type:Boolean,reflect:!0})],b.prototype,"loading",2),u([f({reflect:!0})],b.prototype,"href",2),u([f({reflect:!0})],b.prototype,"target",2),u([f({type:Boolean,reflect:!0})],b.prototype,"disabled",2),u([f({reflect:!0})],b.prototype,"rel",2),u([f({attribute:"full-width",type:Boolean,reflect:!0})],b.prototype,"fullWidth",2),u([f({attribute:"button-class",reflect:!0})],b.prototype,"buttonClass",2),u([f({reflect:!0})],b.prototype,"name",2),u([f({reflect:!0})],b.prototype,"value",2);customElements.get("w-button")||customElements.define("w-button",b);export{b as WarpButton};
 //# sourceMappingURL=button.js.map