@folkehelseinstituttet/designsystem 0.1.0

package/dist/cdn/fhi-designsystem.umd.cjs

@@ -0,0 +1,647 @@
+(function(b,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(b=typeof globalThis<"u"?globalThis:b||self,g(b["fhi-designsystem"]={}))})(this,function(b){"use strict";/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */var sr;const g=globalThis,L=g.ShadowRoot&&(g.ShadyCSS===void 0||g.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,j=Symbol(),J=new WeakMap;let K=class{constructor(r,e,o){if(this._$cssResult$=!0,o!==j)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=r,this.t=e}get styleSheet(){let r=this.o;const e=this.t;if(L&&r===void 0){const o=e!==void 0&&e.length===1;o&&(r=J.get(e)),r===void 0&&((this.o=r=new CSSStyleSheet).replaceSync(this.cssText),o&&J.set(e,r))}return r}toString(){return this.cssText}};const dr=a=>new K(typeof a=="string"?a:a+"",void 0,j),ur=(a,...r)=>{const e=a.length===1?a[0]:r.reduce((o,t,c)=>o+(l=>{if(l._$cssResult$===!0)return l.cssText;if(typeof l=="number")return l;throw Error("Value passed to 'css' function must be a 'css' function result: "+l+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(t)+a[c+1],a[0]);return new K(e,a,j)},hr=(a,r)=>{if(L)a.adoptedStyleSheets=r.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const e of r){const o=document.createElement("style"),t=g.litNonce;t!==void 0&&o.setAttribute("nonce",t),o.textContent=e.cssText,a.appendChild(o)}},Z=L?a=>a:a=>a instanceof CSSStyleSheet?(r=>{let e="";for(const o of r.cssRules)e+=o.cssText;return dr(e)})(a):a;/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:br,defineProperty:vr,getOwnPropertyDescriptor:gr,getOwnPropertyNames:fr,getOwnPropertySymbols:pr,getPrototypeOf:yr}=Object,f=globalThis,G=f.trustedTypes,mr=G?G.emptyScript:"",D=f.reactiveElementPolyfillSupport,S=(a,r)=>a,B={toAttribute(a,r){switch(r){case Boolean:a=a?mr:null;break;case Object:case Array:a=a==null?a:JSON.stringify(a)}return a},fromAttribute(a,r){let e=a;switch(r){case Boolean:e=a!==null;break;case Number:e=a===null?null:Number(a);break;case Object:case Array:try{e=JSON.parse(a)}catch{e=null}}return e}},I=(a,r)=>!br(a,r),Q={attribute:!0,type:String,converter:B,reflect:!1,hasChanged:I};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),f.litPropertyMetadata??(f.litPropertyMetadata=new WeakMap);class k extends HTMLElement{static addInitializer(r){this._$Ei(),(this.l??(this.l=[])).push(r)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(r,e=Q){if(e.state&&(e.attribute=!1),this._$Ei(),this.elementProperties.set(r,e),!e.noAccessor){const o=Symbol(),t=this.getPropertyDescriptor(r,o,e);t!==void 0&&vr(this.prototype,r,t)}}static getPropertyDescriptor(r,e,o){const{get:t,set:c}=gr(this.prototype,r)??{get(){return this[e]},set(l){this[e]=l}};return{get(){return t==null?void 0:t.call(this)},set(l){const i=t==null?void 0:t.call(this);c.call(this,l),this.requestUpdate(r,i,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(r){return this.elementProperties.get(r)??Q}static _$Ei(){if(this.hasOwnProperty(S("elementProperties")))return;const r=yr(this);r.finalize(),r.l!==void 0&&(this.l=[...r.l]),this.elementProperties=new Map(r.elementProperties)}static finalize(){if(this.hasOwnProperty(S("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(S("properties"))){const e=this.properties,o=[...fr(e),...pr(e)];for(const t of o)this.createProperty(t,e[t])}const r=this[Symbol.metadata];if(r!==null){const e=litPropertyMetadata.get(r);if(e!==void 0)for(const[o,t]of e)this.elementProperties.set(o,t)}this._$Eh=new Map;for(const[e,o]of this.elementProperties){const t=this._$Eu(e,o);t!==void 0&&this._$Eh.set(t,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(r){const e=[];if(Array.isArray(r)){const o=new Set(r.flat(1/0).reverse());for(const t of o)e.unshift(Z(t))}else r!==void 0&&e.push(Z(r));return e}static _$Eu(r,e){const o=e.attribute;return o===!1?void 0:typeof o=="string"?o:typeof r=="string"?r.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var r;this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),(r=this.constructor.l)==null||r.forEach(e=>e(this))}addController(r){var e;(this._$EO??(this._$EO=new Set)).add(r),this.renderRoot!==void 0&&this.isConnected&&((e=r.hostConnected)==null||e.call(r))}removeController(r){var e;(e=this._$EO)==null||e.delete(r)}_$E_(){const r=new Map,e=this.constructor.elementProperties;for(const o of e.keys())this.hasOwnProperty(o)&&(r.set(o,this[o]),delete this[o]);r.size>0&&(this._$Ep=r)}createRenderRoot(){const r=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return hr(r,this.constructor.elementStyles),r}connectedCallback(){var r;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(r=this._$EO)==null||r.forEach(e=>{var o;return(o=e.hostConnected)==null?void 0:o.call(e)})}enableUpdating(r){}disconnectedCallback(){var r;(r=this._$EO)==null||r.forEach(e=>{var o;return(o=e.hostDisconnected)==null?void 0:o.call(e)})}attributeChangedCallback(r,e,o){this._$AK(r,o)}_$EC(r,e){var c;const o=this.constructor.elementProperties.get(r),t=this.constructor._$Eu(r,o);if(t!==void 0&&o.reflect===!0){const l=(((c=o.converter)==null?void 0:c.toAttribute)!==void 0?o.converter:B).toAttribute(e,o.type);this._$Em=r,l==null?this.removeAttribute(t):this.setAttribute(t,l),this._$Em=null}}_$AK(r,e){var c;const o=this.constructor,t=o._$Eh.get(r);if(t!==void 0&&this._$Em!==t){const l=o.getPropertyOptions(t),i=typeof l.converter=="function"?{fromAttribute:l.converter}:((c=l.converter)==null?void 0:c.fromAttribute)!==void 0?l.converter:B;this._$Em=t,this[t]=i.fromAttribute(e,l.type),this._$Em=null}}requestUpdate(r,e,o){if(r!==void 0){if(o??(o=this.constructor.getPropertyOptions(r)),!(o.hasChanged??I)(this[r],e))return;this.P(r,e,o)}this.isUpdatePending===!1&&(this._$ES=this._$ET())}P(r,e,o){this._$AL.has(r)||this._$AL.set(r,e),o.reflect===!0&&this._$Em!==r&&(this._$Ej??(this._$Ej=new Set)).add(r)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const r=this.scheduleUpdate();return r!=null&&await r,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var o;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[c,l]of this._$Ep)this[c]=l;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[c,l]of t)l.wrapped!==!0||this._$AL.has(c)||this[c]===void 0||this.P(c,this[c],l)}let r=!1;const e=this._$AL;try{r=this.shouldUpdate(e),r?(this.willUpdate(e),(o=this._$EO)==null||o.forEach(t=>{var c;return(c=t.hostUpdate)==null?void 0:c.call(t)}),this.update(e)):this._$EU()}catch(t){throw r=!1,this._$EU(),t}r&&this._$AE(e)}willUpdate(r){}_$AE(r){var e;(e=this._$EO)==null||e.forEach(o=>{var t;return(t=o.hostUpdated)==null?void 0:t.call(o)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(r)),this.updated(r)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(r){return!0}update(r){this._$Ej&&(this._$Ej=this._$Ej.forEach(e=>this._$EC(e,this[e]))),this._$EU()}updated(r){}firstUpdated(r){}}k.elementStyles=[],k.shadowRootOptions={mode:"open"},k[S("elementProperties")]=new Map,k[S("finalized")]=new Map,D==null||D({ReactiveElement:k}),(f.reactiveElementVersions??(f.reactiveElementVersions=[])).push("2.0.4");/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const w=globalThis,M=w.trustedTypes,X=M?M.createPolicy("lit-html",{createHTML:a=>a}):void 0,Y="$lit$",p=`lit$${Math.random().toFixed(9).slice(2)}$`,rr="?"+p,$r=`<${rr}>`,m=document,C=()=>m.createComment(""),P=a=>a===null||typeof a!="object"&&typeof a!="function",F=Array.isArray,_r=a=>F(a)||typeof(a==null?void 0:a[Symbol.iterator])=="function",V=`[ 	
+\f\r]`,U=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,er=/-->/g,or=/>/g,$=RegExp(`>|${V}(?:([^\\s"'>=/]+)(${V}*=${V}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`,"g"),tr=/'/g,ar=/"/g,lr=/^(?:script|style|textarea|title)$/i,kr=a=>(r,...e)=>({_$litType$:a,strings:r,values:e}),xr=kr(1),x=Symbol.for("lit-noChange"),d=Symbol.for("lit-nothing"),cr=new WeakMap,_=m.createTreeWalker(m,129);function nr(a,r){if(!F(a)||!a.hasOwnProperty("raw"))throw Error("invalid template strings array");return X!==void 0?X.createHTML(r):r}const Ar=(a,r)=>{const e=a.length-1,o=[];let t,c=r===2?"<svg>":r===3?"<math>":"",l=U;for(let i=0;i<e;i++){const n=a[i];let u,h,s=-1,v=0;for(;v<n.length&&(l.lastIndex=v,h=l.exec(n),h!==null);)v=l.lastIndex,l===U?h[1]==="!--"?l=er:h[1]!==void 0?l=or:h[2]!==void 0?(lr.test(h[2])&&(t=RegExp("</"+h[2],"g")),l=$):h[3]!==void 0&&(l=$):l===$?h[0]===">"?(l=t??U,s=-1):h[1]===void 0?s=-2:(s=l.lastIndex-h[2].length,u=h[1],l=h[3]===void 0?$:h[3]==='"'?ar:tr):l===ar||l===tr?l=$:l===er||l===or?l=U:(l=$,t=void 0);const y=l===$&&a[i+1].startsWith("/>")?" ":"";c+=l===U?n+$r:s>=0?(o.push(u),n.slice(0,s)+Y+n.slice(s)+p+y):n+p+(s===-2?i:y)}return[nr(a,c+(a[e]||"<?>")+(r===2?"</svg>":r===3?"</math>":"")),o]};class O{constructor({strings:r,_$litType$:e},o){let t;this.parts=[];let c=0,l=0;const i=r.length-1,n=this.parts,[u,h]=Ar(r,e);if(this.el=O.createElement(u,o),_.currentNode=this.el.content,e===2||e===3){const s=this.el.content.firstChild;s.replaceWith(...s.childNodes)}for(;(t=_.nextNode())!==null&&n.length<i;){if(t.nodeType===1){if(t.hasAttributes())for(const s of t.getAttributeNames())if(s.endsWith(Y)){const v=h[l++],y=t.getAttribute(s).split(p),R=/([.?@])?(.*)/.exec(v);n.push({type:1,index:c,name:R[2],strings:y,ctor:R[1]==="."?Sr:R[1]==="?"?wr:R[1]==="@"?Cr:N}),t.removeAttribute(s)}else s.startsWith(p)&&(n.push({type:6,index:c}),t.removeAttribute(s));if(lr.test(t.tagName)){const s=t.textContent.split(p),v=s.length-1;if(v>0){t.textContent=M?M.emptyScript:"";for(let y=0;y<v;y++)t.append(s[y],C()),_.nextNode(),n.push({type:2,index:++c});t.append(s[v],C())}}}else if(t.nodeType===8)if(t.data===rr)n.push({type:2,index:c});else{let s=-1;for(;(s=t.data.indexOf(p,s+1))!==-1;)n.push({type:7,index:c}),s+=p.length-1}c++}}static createElement(r,e){const o=m.createElement("template");return o.innerHTML=r,o}}function A(a,r,e=a,o){var l,i;if(r===x)return r;let t=o!==void 0?(l=e._$Co)==null?void 0:l[o]:e._$Cl;const c=P(r)?void 0:r._$litDirective$;return(t==null?void 0:t.constructor)!==c&&((i=t==null?void 0:t._$AO)==null||i.call(t,!1),c===void 0?t=void 0:(t=new c(a),t._$AT(a,e,o)),o!==void 0?(e._$Co??(e._$Co=[]))[o]=t:e._$Cl=t),t!==void 0&&(r=A(a,t._$AS(a,r.values),t,o)),r}class Er{constructor(r,e){this._$AV=[],this._$AN=void 0,this._$AD=r,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(r){const{el:{content:e},parts:o}=this._$AD,t=((r==null?void 0:r.creationScope)??m).importNode(e,!0);_.currentNode=t;let c=_.nextNode(),l=0,i=0,n=o[0];for(;n!==void 0;){if(l===n.index){let u;n.type===2?u=new T(c,c.nextSibling,this,r):n.type===1?u=new n.ctor(c,n.name,n.strings,this,r):n.type===6&&(u=new Pr(c,this,r)),this._$AV.push(u),n=o[++i]}l!==(n==null?void 0:n.index)&&(c=_.nextNode(),l++)}return _.currentNode=m,t}p(r){let e=0;for(const o of this._$AV)o!==void 0&&(o.strings!==void 0?(o._$AI(r,o,e),e+=o.strings.length-2):o._$AI(r[e])),e++}}class T{get _$AU(){var r;return((r=this._$AM)==null?void 0:r._$AU)??this._$Cv}constructor(r,e,o,t){this.type=2,this._$AH=d,this._$AN=void 0,this._$AA=r,this._$AB=e,this._$AM=o,this.options=t,this._$Cv=(t==null?void 0:t.isConnected)??!0}get parentNode(){let r=this._$AA.parentNode;const e=this._$AM;return e!==void 0&&(r==null?void 0:r.nodeType)===11&&(r=e.parentNode),r}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(r,e=this){r=A(this,r,e),P(r)?r===d||r==null||r===""?(this._$AH!==d&&this._$AR(),this._$AH=d):r!==this._$AH&&r!==x&&this._(r):r._$litType$!==void 0?this.$(r):r.nodeType!==void 0?this.T(r):_r(r)?this.k(r):this._(r)}O(r){return this._$AA.parentNode.insertBefore(r,this._$AB)}T(r){this._$AH!==r&&(this._$AR(),this._$AH=this.O(r))}_(r){this._$AH!==d&&P(this._$AH)?this._$AA.nextSibling.data=r:this.T(m.createTextNode(r)),this._$AH=r}$(r){var c;const{values:e,_$litType$:o}=r,t=typeof o=="number"?this._$AC(r):(o.el===void 0&&(o.el=O.createElement(nr(o.h,o.h[0]),this.options)),o);if(((c=this._$AH)==null?void 0:c._$AD)===t)this._$AH.p(e);else{const l=new Er(t,this),i=l.u(this.options);l.p(e),this.T(i),this._$AH=l}}_$AC(r){let e=cr.get(r.strings);return e===void 0&&cr.set(r.strings,e=new O(r)),e}k(r){F(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let o,t=0;for(const c of r)t===e.length?e.push(o=new T(this.O(C()),this.O(C()),this,this.options)):o=e[t],o._$AI(c),t++;t<e.length&&(this._$AR(o&&o._$AB.nextSibling,t),e.length=t)}_$AR(r=this._$AA.nextSibling,e){var o;for((o=this._$AP)==null?void 0:o.call(this,!1,!0,e);r&&r!==this._$AB;){const t=r.nextSibling;r.remove(),r=t}}setConnected(r){var e;this._$AM===void 0&&(this._$Cv=r,(e=this._$AP)==null||e.call(this,r))}}class N{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(r,e,o,t,c){this.type=1,this._$AH=d,this._$AN=void 0,this.element=r,this.name=e,this._$AM=t,this.options=c,o.length>2||o[0]!==""||o[1]!==""?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=d}_$AI(r,e=this,o,t){const c=this.strings;let l=!1;if(c===void 0)r=A(this,r,e,0),l=!P(r)||r!==this._$AH&&r!==x,l&&(this._$AH=r);else{const i=r;let n,u;for(r=c[0],n=0;n<c.length-1;n++)u=A(this,i[o+n],e,n),u===x&&(u=this._$AH[n]),l||(l=!P(u)||u!==this._$AH[n]),u===d?r=d:r!==d&&(r+=(u??"")+c[n+1]),this._$AH[n]=u}l&&!t&&this.j(r)}j(r){r===d?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,r??"")}}class Sr extends N{constructor(){super(...arguments),this.type=3}j(r){this.element[this.name]=r===d?void 0:r}}class wr extends N{constructor(){super(...arguments),this.type=4}j(r){this.element.toggleAttribute(this.name,!!r&&r!==d)}}class Cr extends N{constructor(r,e,o,t,c){super(r,e,o,t,c),this.type=5}_$AI(r,e=this){if((r=A(this,r,e,0)??d)===x)return;const o=this._$AH,t=r===d&&o!==d||r.capture!==o.capture||r.once!==o.once||r.passive!==o.passive,c=r!==d&&(o===d||t);t&&this.element.removeEventListener(this.name,this,o),c&&this.element.addEventListener(this.name,this,r),this._$AH=r}handleEvent(r){var e;typeof this._$AH=="function"?this._$AH.call(((e=this.options)==null?void 0:e.host)??this.element,r):this._$AH.handleEvent(r)}}class Pr{constructor(r,e,o){this.element=r,this.type=6,this._$AN=void 0,this._$AM=e,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(r){A(this,r)}}const W=w.litHtmlPolyfillSupport;W==null||W(O,T),(w.litHtmlVersions??(w.litHtmlVersions=[])).push("3.2.1");const Ur=(a,r,e)=>{const o=(e==null?void 0:e.renderBefore)??r;let t=o._$litPart$;if(t===void 0){const c=(e==null?void 0:e.renderBefore)??null;o._$litPart$=t=new T(r.insertBefore(C(),c),c,void 0,e??{})}return t._$AI(a),t};/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */let H=class extends k{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;const r=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=r.firstChild),r}update(r){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(r),this._$Do=Ur(e,this.renderRoot,this.renderOptions)}connectedCallback(){var r;super.connectedCallback(),(r=this._$Do)==null||r.setConnected(!0)}disconnectedCallback(){var r;super.disconnectedCallback(),(r=this._$Do)==null||r.setConnected(!1)}render(){return x}};H._$litElement$=!0,H.finalized=!0,(sr=globalThis.litElementHydrateSupport)==null||sr.call(globalThis,{LitElement:H});const q=globalThis.litElementPolyfillSupport;q==null||q({LitElement:H}),(globalThis.litElementVersions??(globalThis.litElementVersions=[])).push("4.1.1");/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Or=a=>(r,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(a,r)}):customElements.define(a,r)};/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const Tr={attribute:!0,type:String,converter:B,reflect:!1,hasChanged:I},Hr=(a=Tr,r,e)=>{const{kind:o,metadata:t}=e;let c=globalThis.litPropertyMetadata.get(t);if(c===void 0&&globalThis.litPropertyMetadata.set(t,c=new Map),c.set(e.name,a),o==="accessor"){const{name:l}=e;return{set(i){const n=r.get.call(this);r.set.call(this,i),this.requestUpdate(l,n,a)},init(i){return i!==void 0&&this.P(l,void 0,a),i}}}if(o==="setter"){const{name:l}=e;return function(i){const n=this[l];r.call(this,i),this.requestUpdate(l,n,a)}}throw Error("Unsupported decorator location: "+o)};function z(a){return(r,e)=>typeof e=="object"?Hr(a,r,e):((o,t,c)=>{const l=t.hasOwnProperty(c);return t.constructor.createProperty(c,l?{...o,wrapped:!0}:o),l?Object.getOwnPropertyDescriptor(t,c):void 0})(a,r,e)}var zr=Object.defineProperty,Br=Object.getOwnPropertyDescriptor,E=(a,r,e,o)=>{for(var t=o>1?void 0:o?Br(r,e):r,c=a.length-1,l;c>=0;c--)(l=a[c])&&(t=(o?l(r,e,t):l(t))||t);return o&&t&&zr(r,e,t),t};const ir="fhi-button";b.FhiButton=class extends H{constructor(){super(),this.color="accent",this.variant="strong",this.size="medium",this.disabled=!1,this.type="submit",this._stopClickLeak=this._stopClickLeak.bind(this)}connectedCallback(){super.connectedCallback&&super.connectedCallback(),this._form=this.closest("form")}firstUpdated(){this._formButton=document.createElement("button"),this._formButton.addEventListener("click",this._stopClickLeak),this.addEventListener("click",this._handleClick)}_handleClick(r){var e,o;(this.type==="submit"||this.type==="reset")&&this._form&&!r.defaultPrevented&&(this._formButton.type=this.type,(e=this._form)==null||e.appendChild(this._formButton),this._formButton.click(),(o=this._form)==null||o.removeChild(this._formButton))}_stopClickLeak(r){r.target===this._formButton&&r.stopImmediatePropagation()}render(){return xr`<button ?disabled=${this.disabled} type=${this.type}>
+      <slot></slot>
+    </button>`}},b.FhiButton.styles=ur`
+    :host {
+      --dimension-border-radius: var(--fhi-border-radius-full);
+      --dimension-border-width: var(--fhi-dimension-border-width);
+      --typography-font-family: var(--fhi-font-family-roboto-flex);
+      --motion-transition: var(--fhi-motion-duration-quick)
+        var(--fhi-motion-ease-default);
+
+      --opacity-disabled: var(--fhi-opacity-disabled);
+
+      --typography-label-large-font-size: var(
+        --fhi-typography-label-large-font-size
+      );
+      --typography-label-medium-font-size: var(
+        --fhi-typography-label-medium-font-size
+      );
+      --typography-label-small-font-size: var(
+        --fhi-typography-label-medium-font-size
+      );
+      --typography-label-large-font-weight: var(
+        --fhi-typography-label-large-font-weight
+      );
+      --typography-label-medium-font-weight: var(
+        --fhi-typography-label-medium-font-weight
+      );
+      --typography-label-small-font-weight: var(
+        --fhi-typography-label-medium-font-weight
+      );
+      --typography-label-large-letter-spacing: var(
+        --fhi-typography-label-large-letter-spacing
+      );
+      --typography-label-medium-letter-spacing: var(
+        --fhi-typography-label-medium-letter-spacing
+      );
+      --typography-label-small-letter-spacing: var(
+        --fhi-typography-label-medium-letter-spacing
+      );
+      --typography-label-large-line-height: var(
+        --fhi-typography-label-large-line-height
+      );
+      --typography-label-small-line-height: var(
+        --fhi-typography-label-medium-line-height
+      );
+      --typography-label-medium-line-height: var(
+        --fhi-typography-label-medium-line-height
+      );
+
+      --dimension-padding-small: calc(
+          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
+        )
+        calc(
+          var(--fhi-spacing-150) +
+            var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
+        );
+      --dimension-padding-medium: calc(
+          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)
+        )
+        calc(
+          var(--fhi-spacing-200) +
+            var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
+        );
+      --dimension-padding-large: calc(
+          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)
+        )
+        calc(
+          var(--fhi-spacing-300) +
+            var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
+        );
+      --color-accent-strong-background: var(--fhi-color-accent-base-default);
+      --color-accent-strong-border: var(--fhi-color-accent-base-default);
+      --color-accent-strong: var(--fhi-color-accent-text-inverted);
+      --color-accent-strong-background-hover: var(
+        --fhi-color-accent-base-hover
+      );
+      --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);
+      --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);
+      --color-accent-strong-background-active: var(
+        --fhi-color-accent-base-active
+      );
+      --color-accent-strong-border-active: var(--fhi-color-accent-base-hover);
+      --color-accent-strong-active: var(--fhi-color-accent-text-inverted);
+      --color-accent-strong-background-disabled: var(
+        --fhi-color-accent-base-default
+      );
+      --color-accent-strong-border-disabled: var(
+        --fhi-color-accent-base-default
+      );
+      --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);
+
+      --color-accent-subtle-background: var(--fhi-color-accent-surface-default);
+      --color-accent-subtle-border: var(--fhi-color-accent-surface-default);
+      --color-accent-subtle: var(--fhi-color-accent-text-subtle);
+      --color-accent-subtle-background-hover: var(
+        --fhi-color-accent-surface-hover
+      );
+      --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);
+      --color-accent-subtle-hover: var(--fhi-color-accent-text-default);
+      --color-accent-subtle-background-active: var(
+        --fhi-color-accent-surface-active
+      );
+      --color-accent-subtle-border-active: var(
+        --fhi-color-accent-surface-active
+      );
+      --color-accent-subtle-active: var(--fhi-color-accent-text-default);
+      --color-accent-subtle-background-disabled: var(
+        --fhi-color-accent-surface-default
+      );
+      --color-accent-subtle-border-disabled: var(
+        --fhi-color-accent-surface-default
+      );
+      --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);
+
+      --color-accent-outlined-background: transparent;
+      --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);
+      --color-accent-outlined: var(--fhi-color-accent-text-subtle);
+      --color-accent-outlined-background-hover: var(
+        --fhi-color-accent-surface-default
+      );
+      --color-accent-outlined-border-hover: var(
+        --fhi-color-accent-surface-default
+      );
+      --color-accent-outlined-hover: var(--fhi-color-accent-text-default);
+      --color-accent-outlined-background-active: var(
+        --fhi-color-accent-surface-hover
+      );
+      --color-accent-outlined-border-active: var(
+        --fhi-color-accent-surface-hover
+      );
+      --color-accent-outlined-active: var(--fhi-color-accent-text-default);
+      --color-accent-outlined-background-disabled: transparent;
+      --color-accent-outlined-border-disabled: var(
+        --fhi-color-accent-border-subtle
+      );
+      --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);
+
+      --color-accent-text-background: transparent;
+      --color-accent-text-border: transparent;
+      --color-accent-text: var(--fhi-color-accent-text-subtle);
+      --color-accent-text-background-hover: var(
+        --fhi-color-accent-surface-default
+      );
+      --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);
+      --color-accent-text-hover: var(--fhi-color-accent-text-default);
+      --color-accent-text-background-active: var(
+        --fhi-color-accent-surface-hover
+      );
+      --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);
+      --color-accent-text-active: var(--fhi-color-accent-text-default);
+      --color-accent-text-background-disabled: transparent;
+      --color-accent-text-border-disabled: transparent;
+      --color-accent-text-disabled: var(--fhi-color-accent-text-default);
+
+      --color-neutral-strong-background: var(--fhi-color-neutral-base-default);
+      --color-neutral-strong-border: var(--fhi-color-neutral-base-default);
+      --color-neutral-strong: var(--fhi-color-neutral-text-inverted);
+      --color-neutral-strong-background-hover: var(
+        --fhi-color-neutral-base-hover
+      );
+      --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);
+      --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);
+      --color-neutral-strong-background-active: var(
+        --fhi-color-neutral-base-active
+      );
+      --color-neutral-strong-border-active: var(--fhi-color-neutral-base-hover);
+      --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);
+      --color-neutral-strong-background-disabled: var(
+        --fhi-color-neutral-base-default
+      );
+      --color-neutral-strong-border-disabled: var(
+        --fhi-color-neutral-base-default
+      );
+      --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);
+
+      --color-neutral-subtle-background: var(
+        --fhi-color-neutral-surface-default
+      );
+      --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);
+      --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);
+      --color-neutral-subtle-background-hover: var(
+        --fhi-color-neutral-surface-hover
+      );
+      --color-neutral-subtle-border-hover: var(
+        --fhi-color-neutral-surface-hover
+      );
+      --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);
+      --color-neutral-subtle-background-active: var(
+        --fhi-color-neutral-surface-active
+      );
+      --color-neutral-subtle-border-active: var(
+        --fhi-color-neutral-surface-active
+      );
+      --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);
+      --color-neutral-subtle-background-disabled: var(
+        --fhi-color-neutral-surface-default
+      );
+      --color-neutral-subtle-border-disabled: var(
+        --fhi-color-neutral-surface-default
+      );
+      --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);
+
+      --color-neutral-outlined-background: transparent;
+      --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);
+      --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);
+      --color-neutral-outlined-background-hover: var(
+        --fhi-color-neutral-surface-default
+      );
+      --color-neutral-outlined-border-hover: var(
+        --fhi-color-neutral-surface-default
+      );
+      --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);
+      --color-neutral-outlined-background-active: var(
+        --fhi-color-neutral-surface-hover
+      );
+      --color-neutral-outlined-border-active: var(
+        --fhi-color-neutral-surface-hover
+      );
+      --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);
+      --color-neutral-outlined-background-disabled: transparent;
+      --color-neutral-outlined-border-disabled: var(
+        --fhi-color-neutral-border-subtle
+      );
+      --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);
+
+      --color-neutral-text-background: transparent;
+      --color-neutral-text-border: transparent;
+      --color-neutral-text: var(--fhi-color-neutral-text-subtle);
+      --color-neutral-text-background-hover: var(
+        --fhi-color-neutral-surface-default
+      );
+      --color-neutral-text-border-hover: var(
+        --fhi-color-neutral-surface-default
+      );
+      --color-neutral-text-hover: var(--fhi-color-neutral-text-default);
+      --color-neutral-text-background-active: var(
+        --fhi-color-neutral-surface-hover
+      );
+      --color-neutral-text-border-active: var(
+        --fhi-color-neutral-surface-hover
+      );
+      --color-neutral-text-active: var(--fhi-color-neutral-text-default);
+      --color-neutral-text-background-disabled: transparent;
+      --color-neutral-text-border-disabled: transparent;
+      --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);
+
+      --color-danger-strong-background: var(--fhi-color-danger-base-default);
+      --color-danger-strong-border: var(--fhi-color-danger-base-default);
+      --color-danger-strong: var(--fhi-color-danger-text-inverted);
+      --color-danger-strong-background-hover: var(
+        --fhi-color-danger-base-hover
+      );
+      --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);
+      --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);
+      --color-danger-strong-background-active: var(
+        --fhi-color-danger-base-active
+      );
+      --color-danger-strong-border-active: var(--fhi-color-danger-base-hover);
+      --color-danger-strong-active: var(--fhi-color-danger-text-inverted);
+      --color-danger-strong-background-disabled: var(
+        --fhi-color-danger-base-default
+      );
+      --color-danger-strong-border-disabled: var(
+        --fhi-color-danger-base-default
+      );
+      --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);
+
+      --color-danger-subtle-background: var(--fhi-color-danger-surface-default);
+      --color-danger-subtle-border: var(--fhi-color-danger-surface-default);
+      --color-danger-subtle: var(--fhi-color-danger-text-subtle);
+      --color-danger-subtle-background-hover: var(
+        --fhi-color-danger-surface-hover
+      );
+      --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);
+      --color-danger-subtle-hover: var(--fhi-color-danger-text-default);
+      --color-danger-subtle-background-active: var(
+        --fhi-color-danger-surface-active
+      );
+      --color-danger-subtle-border-active: var(
+        --fhi-color-danger-surface-active
+      );
+      --color-danger-subtle-active: var(--fhi-color-danger-text-default);
+      --color-danger-subtle-background-disabled: var(
+        --fhi-color-danger-surface-default
+      );
+      --color-danger-subtle-border-disabled: var(
+        --fhi-color-danger-surface-default
+      );
+      --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);
+
+      --color-danger-outlined-background: transparent;
+      --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);
+      --color-danger-outlined: var(--fhi-color-danger-text-subtle);
+      --color-danger-outlined-background-hover: var(
+        --fhi-color-danger-surface-default
+      );
+      --color-danger-outlined-border-hover: var(
+        --fhi-color-danger-surface-default
+      );
+      --color-danger-outlined-hover: var(--fhi-color-danger-text-default);
+      --color-danger-outlined-background-active: var(
+        --fhi-color-danger-surface-hover
+      );
+      --color-danger-outlined-border-active: var(
+        --fhi-color-danger-surface-hover
+      );
+      --color-danger-outlined-active: var(--fhi-color-danger-text-default);
+      --color-danger-outlined-background-disabled: transparent;
+      --color-danger-outlined-border-disabled: var(
+        --fhi-color-danger-border-subtle
+      );
+      --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);
+
+      --color-danger-text-background: transparent;
+      --color-danger-text-border: transparent;
+      --color-danger-text: var(--fhi-color-danger-text-subtle);
+      --color-danger-text-background-hover: var(
+        --fhi-color-danger-surface-default
+      );
+      --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);
+      --color-danger-text-hover: var(--fhi-color-danger-text-default);
+      --color-danger-text-background-active: var(
+        --fhi-color-danger-surface-hover
+      );
+      --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);
+      --color-danger-text-active: var(--fhi-color-danger-text-default);
+      --color-danger-text-background-disabled: transparent;
+      --color-danger-text-border-disabled: transparent;
+      --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);
+
+      button {
+        border-radius: var(--dimension-border-radius);
+        border: solid var(--dimension-border-width);
+        font-family: var(--typography-font-family);
+        transition: var(--motion-transition);
+
+        cursor: pointer;
+        &:disabled {
+          opacity: var(--opacity-disabled);
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    :host([size='large']) button {
+      font-size: var(--typography-label-large-font-size);
+      font-weight: var(--typography-label-large-font-weight);
+      line-height: var(--typography-label-large-line-height);
+      letter-spacing: var(--typography-label-large-letter-spacing);
+      padding: var(--dimension-padding-large);
+    }
+
+    :host([size='medium']) button {
+      font-size: var(--typography-label-medium-font-size);
+      font-weight: var(--typography-label-medium-font-weight);
+      line-height: var(--typography-label-medium-line-height);
+      letter-spacing: var(--typography-label-medium-letter-spacing);
+      padding: var(--dimension-padding-medium);
+    }
+
+    :host([size='small']) button {
+      font-size: var(--typography-label-small-font-size);
+      font-weight: var(--typography-label-small-font-weight);
+      line-height: var(--typography-label-small-line-height);
+      letter-spacing: var(--typography-label-small-letter-spacing);
+      padding: var(--dimension-padding-small);
+    }
+
+    :host([color='accent'][variant='strong']) button {
+      background-color: var(--color-accent-strong-background);
+      border-color: var(--color-accent-strong-border);
+      color: var(--color-accent-strong);
+      &:hover {
+        background-color: var(--color-accent-strong-background-hover);
+        border-color: var(--color-accent-strong-border-hover);
+        color: var(--color-accent-strong-hover);
+      }
+      &:active {
+        background-color: var(--color-accent-strong-background-active);
+        border-color: var(--color-accent-strong-border-active);
+        color: var(--color-accent-strong-active);
+      }
+      &:disabled {
+        background-color: var(--color-accent-strong-background-disabled);
+        border-color: var(--color-accent-strong-border-disabled);
+        color: var(--color-accent-strong-disabled);
+      }
+    }
+
+    :host([color='accent'][variant='subtle']) button {
+      background-color: var(--color-accent-subtle-background);
+      border-color: var(--color-accent-subtle-border);
+      color: var(--color-accent-subtle);
+      &:hover {
+        background-color: var(--color-accent-subtle-background-hover);
+        border-color: var(--color-accent-subtle-border-hover);
+        color: var(--color-accent-subtle-hover);
+      }
+      &:active {
+        background-color: var(--color-accent-subtle-background-active);
+        border-color: var(--color-accent-subtle-border-active);
+        color: var(--color-accent-subtle-active);
+      }
+      &:disabled {
+        background-color: var(--color-accent-subtle-background-disabled);
+        border-color: var(--color-accent-subtle-border-disabled);
+        color: var(--color-accent-subtle-disabled);
+      }
+    }
+
+    :host([color='accent'][variant='outlined']) button {
+      background-color: var(--color-accent-outlined-background);
+      border-color: var(--color-accent-outlined-border);
+      color: var(--color-accent-outlined);
+      &:hover {
+        background-color: var(--color-accent-outlined-background-hover);
+        border-color: var(--color-accent-outlined-border-hover);
+        color: var(--color-accent-outlined-hover);
+      }
+      &:active {
+        background-color: var(--color-accent-outlined-background-active);
+        border-color: var(--color-accent-outlined-border-active);
+        color: var(--color-accent-outlined-active);
+      }
+      &:disabled {
+        background-color: var(--color-accent-outlined-background-disabled);
+        border-color: var(--color-accent-outlined-border-disabled);
+        color: var(--color-accent-outlined-disabled);
+      }
+    }
+
+    :host([color='accent'][variant='text']) button {
+      background-color: var(--color-accent-text-background);
+      border-color: var(--color-accent-text-border);
+      color: var(--color-accent-text);
+      &:hover {
+        background-color: var(--color-accent-text-background-hover);
+        border-color: var(--color-accent-text-border-hover);
+        color: var(--color-accent-text-hover);
+      }
+      &:active {
+        background-color: var(--color-accent-text-background-active);
+        border-color: var(--color-accent-text-border-active);
+        color: var(--color-accent-text-active);
+      }
+      &:disabled {
+        background-color: var(--color-accent-text-background-disabled);
+        border-color: var(--color-accent-text-border-disabled);
+        color: var(--color-accent-text-disabled);
+      }
+    }
+
+    :host([color='neutral'][variant='strong']) button {
+      background-color: var(--color-neutral-strong-background);
+      border-color: var(--color-neutral-strong-border);
+      color: var(--color-neutral-strong);
+      &:hover {
+        background-color: var(--color-neutral-strong-background-hover);
+        border-color: var(--color-neutral-strong-border-hover);
+        color: var(--color-neutral-strong-hover);
+      }
+      &:active {
+        background-color: var(--color-neutral-strong-background-active);
+        border-color: var(--color-neutral-strong-border-active);
+        color: var(--color-neutral-strong-active);
+      }
+      &:disabled {
+        background-color: var(--color-neutral-strong-background-disabled);
+        border-color: var(--color-neutral-strong-border-disabled);
+        color: var(--color-neutral-strong-disabled);
+      }
+    }
+
+    :host([color='neutral'][variant='subtle']) button {
+      background-color: var(--color-neutral-subtle-background);
+      border-color: var(--color-neutral-subtle-border);
+      color: var(--color-neutral-subtle);
+      &:hover {
+        background-color: var(--color-neutral-subtle-background-hover);
+        border-color: var(--color-neutral-subtle-border-hover);
+        color: var(--color-neutral-subtle-hover);
+      }
+      &:active {
+        background-color: var(--color-neutral-subtle-background-active);
+        border-color: var(--color-neutral-subtle-border-active);
+        color: var(--color-neutral-subtle-active);
+      }
+      &:disabled {
+        background-color: var(--color-neutral-subtle-background-disabled);
+        border-color: var(--color-neutral-subtle-border-disabled);
+        color: var(--color-neutral-subtle-disabled);
+      }
+    }
+
+    :host([color='neutral'][variant='outlined']) button {
+      background-color: var(--color-neutral-outlined-background);
+      border-color: var(--color-neutral-outlined-border);
+      color: var(--color-neutral-outlined);
+      &:hover {
+        background-color: var(--color-neutral-outlined-background-hover);
+        border-color: var(--color-neutral-outlined-border-hover);
+        color: var(--color-neutral-outlined-hover);
+      }
+      &:active {
+        background-color: var(--color-neutral-outlined-background-active);
+        border-color: var(--color-neutral-outlined-border-active);
+        color: var(--color-neutral-outlined-active);
+      }
+      &:disabled {
+        background-color: var(--color-neutral-outlined-background-disabled);
+        border-color: var(--color-neutral-outlined-border-disabled);
+        color: var(--color-neutral-outlined-disabled);
+      }
+    }
+
+    :host([color='neutral'][variant='text']) button {
+      background-color: var(--color-neutral-text-background);
+      border-color: var(--color-neutral-text-border);
+      color: var(--color-neutral-text);
+      &:hover {
+        background-color: var(--color-neutral-text-background-hover);
+        border-color: var(--color-neutral-text-border-hover);
+        color: var(--color-neutral-text-hover);
+      }
+      &:active {
+        background-color: var(--color-neutral-text-background-active);
+        border-color: var(--color-neutral-text-border-active);
+        color: var(--color-neutral-text-active);
+      }
+      &:disabled {
+        background-color: var(--color-neutral-text-background-disabled);
+        border-color: var(--color-neutral-text-border-disabled);
+        color: var(--color-neutral-text-disabled);
+      }
+    }
+
+    :host([color='danger'][variant='strong']) button {
+      background-color: var(--color-danger-strong-background);
+      border-color: var(--color-danger-strong-border);
+      color: var(--color-danger-strong);
+      &:hover {
+        background-color: var(--color-danger-strong-background-hover);
+        border-color: var(--color-danger-strong-border-hover);
+        color: var(--color-danger-strong-hover);
+      }
+      &:active {
+        background-color: var(--color-danger-strong-background-active);
+        border-color: var(--color-danger-strong-border-active);
+        color: var(--color-danger-strong-active);
+      }
+      &:disabled {
+        background-color: var(--color-danger-strong-background-disabled);
+        border-color: var(--color-danger-strong-border-disabled);
+        color: var(--color-danger-strong-disabled);
+      }
+    }
+
+    :host([color='danger'][variant='subtle']) button {
+      background-color: var(--color-danger-subtle-background);
+      border-color: var(--color-danger-subtle-border);
+      color: var(--color-danger-subtle);
+      &:hover {
+        background-color: var(--color-danger-subtle-background-hover);
+        border-color: var(--color-danger-subtle-border-hover);
+        color: var(--color-danger-subtle-hover);
+      }
+      &:active {
+        background-color: var(--color-danger-subtle-background-active);
+        border-color: var(--color-danger-subtle-border-active);
+        color: var(--color-danger-subtle-active);
+      }
+      &:disabled {
+        background-color: var(--color-danger-subtle-background-disabled);
+        border-color: var(--color-danger-subtle-border-disabled);
+        color: var(--color-danger-subtle-disabled);
+      }
+    }
+
+    :host([color='danger'][variant='outlined']) button {
+      background-color: var(--color-danger-outlined-background);
+      border-color: var(--color-danger-outlined-border);
+      color: var(--color-danger-outlined);
+      &:hover {
+        background-color: var(--color-danger-outlined-background-hover);
+        border-color: var(--color-danger-outlined-border-hover);
+        color: var(--color-danger-outlined-hover);
+      }
+      &:active {
+        background-color: var(--color-danger-outlined-background-active);
+        border-color: var(--color-danger-outlined-border-active);
+        color: var(--color-danger-outlined-active);
+      }
+      &:disabled {
+        background-color: var(--color-danger-outlined-background-disabled);
+        border-color: var(--color-danger-outlined-border-disabled);
+        color: var(--color-danger-outlined-disabled);
+      }
+    }
+
+    :host([color='danger'][variant='text']) button {
+      background-color: var(--color-danger-text-background);
+      border-color: var(--color-danger-text-border);
+      color: var(--color-danger-text);
+      &:hover {
+        background-color: var(--color-danger-text-background-hover);
+        border-color: var(--color-danger-text-border-hover);
+        color: var(--color-danger-text-hover);
+      }
+      &:active {
+        background-color: var(--color-danger-text-background-active);
+        border-color: var(--color-danger-text-border-active);
+        color: var(--color-danger-text-active);
+      }
+      &:disabled {
+        background-color: var(--color-danger-text-background-disabled);
+        border-color: var(--color-danger-text-border-disabled);
+        color: var(--color-danger-text-disabled);
+      }
+    }
+  `,E([z({type:String,reflect:!0})],b.FhiButton.prototype,"color",2),E([z({type:String,reflect:!0})],b.FhiButton.prototype,"variant",2),E([z({type:String,reflect:!0})],b.FhiButton.prototype,"size",2),E([z({type:Boolean,reflect:!0})],b.FhiButton.prototype,"disabled",2),E([z({type:String})],b.FhiButton.prototype,"type",2),b.FhiButton=E([Or(ir)],b.FhiButton),b.FhiButtonSelector=ir,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});
+//# sourceMappingURL=fhi-designsystem.umd.cjs.map