@folkehelseinstituttet/designsystem 0.9.0 → 0.11.0

package/fhi-button.js

@@ -1,13 +1,13 @@
-import { i as u, n as c, a as b, x as v, t as s } from "./property-DYwjZ69W.js";
-var g = Object.defineProperty, h = Object.getOwnPropertyDescriptor, l = (r, o, t, n) => {
-  for (var a = n > 1 ? void 0 : n ? h(o, t) : o, d = r.length - 1, i; d >= 0; d--)
-    (i = r[d]) && (a = (n ? i(o, t, a) : i(a)) || a);
-  return n && a && g(o, t, a), a;
+import { i as h, n as i, a as f, x as p, t as k } from "./property-DYwjZ69W.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (r, o, c, t) => {
+  for (var e = t > 1 ? void 0 : t ? x(o, c) : o, a = r.length - 1, d; a >= 0; a--)
+    (d = r[a]) && (e = (t ? d(o, c, e) : d(e)) || e);
+  return t && e && y(o, c, e), e;
 };
-const f = "fhi-button";
-let e = class extends b {
+const m = "fhi-button";
+let l = class extends f {
   constructor() {
-    super(), this.color = "accent", this.variant = "strong", this.size = "medium", this.disabled = !1, this.type = "submit", this._internals = this.attachInternals();
+    super(), this.color = "accent", this.variant = "strong", this.size = "medium", this.disabled = !1, this.iconOnly = !1, this.type = "submit", this._internals = this.attachInternals();
   }
   connectedCallback() {
     super.connectedCallback(), this.onkeyup = this._handleKeyup.bind(this), this.onkeydown = this._handleKeydown.bind(this), this.onselectstart = this._handleSelectStart.bind(this);
@@ -16,10 +16,10 @@ let e = class extends b {
     this._handleClick();
   }
   _handleClick(r) {
-    var o, t;
+    var o, c;
     r == null || r.preventDefault(), r == null || r.stopPropagation(), !this.disabled && (this.dispatchEvent(
       new MouseEvent("click", { bubbles: !0, composed: !0 })
-    ), this.type === "submit" && ((o = this._internals.form) == null || o.requestSubmit()), this.type === "reset" && ((t = this._internals.form) == null || t.reset()));
+    ), this.type === "submit" && ((o = this._internals.form) == null || o.requestSubmit()), this.type === "reset" && ((c = this._internals.form) == null || c.reset()));
   }
   _handleKeyup(r) {
     if (r.key === " " || r.key === "Spacebar") {
@@ -34,29 +34,83 @@ let e = class extends b {
   _handleSelectStart() {
     return !1;
   }
+  _getIconSize() {
+    switch (this.size) {
+      case "small":
+        return "20";
+      case "medium":
+      case "large":
+      default:
+        return "24";
+    }
+  }
+  _handleSlotChange(r) {
+    if (this.iconOnly)
+      return;
+    const c = r.target.assignedNodes();
+    let t, e;
+    c.forEach((a) => {
+      var d, u, b, s, v, g;
+      a.nodeType === Node.ELEMENT_NODE && a.tagName.toLowerCase().startsWith("fhi-icon") && ((!((d = a.previousSibling) != null && d.nodeType) || ((u = a.previousSibling) == null ? void 0 : u.nodeType) === Node.TEXT_NODE && !((b = a.previousSibling.textContent) != null && b.trim())) && (t = a), ((s = a.previousSibling) == null ? void 0 : s.nodeType) === Node.TEXT_NODE && ((g = (v = a.previousSibling) == null ? void 0 : v.textContent) != null && g.trim()) && (e = a));
+    }), t && (t.style.marginRight = "var(--dimension-icon-margin-right)", t.style.marginLeft = "var(--dimension-icon-margin-left-offset)", t.setAttribute("size", this._getIconSize())), e && (e.style.marginRight = "var(--dimension-icon-margin-right-offset)", e.style.marginLeft = "var(--dimension-icon-margin-left)", e.setAttribute("size", this._getIconSize()));
+  }
   render() {
-    return v`<button
+    return p`<button
       ?disabled=${this.disabled}
       type=${this.type}
       @keyup=${this._handleKeyup}
       @keydown=${this._handleKeydown}
       @click=${this._handleClick}
     >
-      <slot></slot>
+      <div class="slot-container">
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
     </button>`;
   }
 };
-e.formAssociated = !0;
-e.styles = u`
+l.formAssociated = !0;
+l.styles = h`
     :host {
       --dimension-border-radius: var(--fhi-border-radius-full);
       --dimension-border-width: var(--fhi-dimension-border-width);
-      --typography-font-family: var(--fhi-font-family-default);
-      --motion-transition: var(--fhi-motion-duration-quick)
-        var(--fhi-motion-ease-default);
 
-      --opacity-disabled: var(--fhi-opacity-disabled);
+      --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
+            )
+        );
+
+      /* Icon */
+      --dimension-icon-margin-left: var(--fhi-spacing-050);
+      --dimension-icon-margin-right: var(--fhi-spacing-050);
+
+      /* Adjust for the button padding when the icon is present on either side */
+      --dimension-icon-margin-left-offset: calc(-1 * var(--fhi-spacing-050));
+      --dimension-icon-margin-right-offset: calc(-1 * var(--fhi-spacing-050));
 
+      --dimension-icon-only-border-radius: var(--fhi-border-radius-full);
+
+      /* Typography */
+      --typography-font-family: var(--fhi-font-family-default);
       --typography-label-large-font-size: var(
         --fhi-typography-label-large-font-size
       );
@@ -94,30 +148,7 @@ e.styles = u`
         --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
-            )
-        );
+      /* Accent Color */
       --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);
@@ -202,6 +233,7 @@ e.styles = u`
       --color-accent-text-border-disabled: transparent;
       --color-accent-text-disabled: var(--fhi-color-accent-text-default);
 
+      /* Neutral Color */
       --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);
@@ -296,6 +328,7 @@ e.styles = u`
       --color-neutral-text-border-disabled: transparent;
       --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);
 
+      /* Danger Color */
       --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);
@@ -380,6 +413,15 @@ e.styles = u`
       --color-danger-text-border-disabled: transparent;
       --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);
 
+      --motion-transition: var(--fhi-motion-duration-quick)
+        var(--fhi-motion-ease-default);
+
+      --opacity-disabled: var(--fhi-opacity-disabled);
+    }
+
+    :host {
+      display: block;
+
       button {
         border-radius: var(--dimension-border-radius);
         border: solid var(--dimension-border-width);
@@ -392,6 +434,12 @@ e.styles = u`
           cursor: not-allowed;
         }
       }
+
+      .slot-container {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
     }
 
     :host([size='large']) button {
@@ -669,27 +717,46 @@ e.styles = u`
         color: var(--color-danger-text-disabled);
       }
     }
+
+    :host([icon-only]) button {
+      border-radius: var(--dimension-icon-only-border-radius);
+    }
+
+    :host([icon-only][size='small']) button {
+      padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width));
+    }
+
+    :host([icon-only][size='medium']) button {
+      padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width));
+    }
+
+    :host([icon-only][size='large']) button {
+      padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));
+    }
   `;
-l([
-  c({ type: String, reflect: !0 })
-], e.prototype, "color", 2);
-l([
-  c({ type: String, reflect: !0 })
-], e.prototype, "variant", 2);
-l([
-  c({ type: String, reflect: !0 })
-], e.prototype, "size", 2);
-l([
-  c({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-l([
-  c({ type: String })
-], e.prototype, "type", 2);
-e = l([
-  s(f)
-], e);
+n([
+  i({ type: String, reflect: !0 })
+], l.prototype, "color", 2);
+n([
+  i({ type: String, reflect: !0 })
+], l.prototype, "variant", 2);
+n([
+  i({ type: String, reflect: !0 })
+], l.prototype, "size", 2);
+n([
+  i({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+n([
+  i({ type: Boolean, attribute: "icon-only" })
+], l.prototype, "iconOnly", 2);
+n([
+  i({ type: String })
+], l.prototype, "type", 2);
+l = n([
+  k(m)
+], l);
 export {
-  e as FhiButton,
-  f as FhiButtonSelector
+  l as FhiButton,
+  m as FhiButtonSelector
 };
 //# sourceMappingURL=fhi-button.js.map

package/fhi-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-button.js","sources":["../../src/components/fhi-button/fhi-button.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n  static readonly formAssociated = true;\n\n  @property({ type: String, reflect: true }) color:\n    | 'accent'\n    | 'neutral'\n    | 'danger' = 'accent';\n\n  @property({ type: String, reflect: true }) variant:\n    | 'strong'\n    | 'subtle'\n    | 'outlined'\n    | 'text' = 'strong';\n\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: String }) type: 'button' | 'submit' | 'reset' = 'submit';\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.onkeyup = this._handleKeyup.bind(this);\n    this.onkeydown = this._handleKeydown.bind(this);\n    this.onselectstart = this._handleSelectStart.bind(this);\n  }\n\n  click(): void {\n    this._handleClick();\n  }\n\n  private _handleClick(event?: MouseEvent | KeyboardEvent): void {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (this.disabled) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new MouseEvent('click', { bubbles: true, composed: true }),\n    );\n\n    if (this.type === 'submit') {\n      this._internals.form?.requestSubmit();\n    }\n\n    if (this.type === 'reset') {\n      this._internals.form?.reset();\n    }\n  }\n\n  private _handleKeyup(event: KeyboardEvent): void {\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      this._handleClick(event);\n\n      const target = event.target as HTMLElement | null;\n      target?.blur();\n      target?.focus();\n    }\n  }\n\n  private _handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      this._handleClick(event);\n    }\n  }\n\n  private _handleSelectStart() {\n    return false;\n  }\n\n  render() {\n    return html`<button\n      ?disabled=${this.disabled}\n      type=${this.type}\n      @keyup=${this._handleKeyup}\n      @keydown=${this._handleKeydown}\n      @click=${this._handleClick}\n    >\n      <slot></slot>\n    </button>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-border-radius: var(--fhi-border-radius-full);\n      --dimension-border-width: var(--fhi-dimension-border-width);\n      --typography-font-family: var(--fhi-font-family-default);\n      --motion-transition: var(--fhi-motion-duration-quick)\n        var(--fhi-motion-ease-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n\n      --typography-label-large-font-size: var(\n        --fhi-typography-label-large-font-size\n      );\n      --typography-label-medium-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-small-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-large-font-weight: var(\n        --fhi-typography-label-large-font-weight\n      );\n      --typography-label-medium-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-small-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-large-letter-spacing: var(\n        --fhi-typography-label-large-letter-spacing\n      );\n      --typography-label-medium-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-small-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-large-line-height: var(\n        --fhi-typography-label-large-line-height\n      );\n      --typography-label-small-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n      --typography-label-medium-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n\n      --dimension-padding-small: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-medium: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-large: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --color-accent-strong-background: var(--fhi-color-accent-base-default);\n      --color-accent-strong-border: var(--fhi-color-accent-base-default);\n      --color-accent-strong: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-hover: var(\n        --fhi-color-accent-base-hover\n      );\n      --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);\n      --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-active: var(\n        --fhi-color-accent-base-active\n      );\n      --color-accent-strong-border-active: var(--fhi-color-accent-base-active);\n      --color-accent-strong-active: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-border-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);\n\n      --color-accent-subtle-background: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle-border: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle: var(--fhi-color-accent-text-subtle);\n      --color-accent-subtle-background-hover: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);\n      --color-accent-subtle-hover: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-border-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-active: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-border-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-outlined-background: transparent;\n      --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);\n      --color-accent-outlined: var(--fhi-color-accent-text-subtle);\n      --color-accent-outlined-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-border-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-hover: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-border-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-active: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-disabled: transparent;\n      --color-accent-outlined-border-disabled: var(\n        --fhi-color-accent-border-subtle\n      );\n      --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-text-background: transparent;\n      --color-accent-text-border: transparent;\n      --color-accent-text: var(--fhi-color-accent-text-subtle);\n      --color-accent-text-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);\n      --color-accent-text-hover: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);\n      --color-accent-text-active: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-disabled: transparent;\n      --color-accent-text-border-disabled: transparent;\n      --color-accent-text-disabled: var(--fhi-color-accent-text-default);\n\n      --color-neutral-strong-background: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong-border: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-hover: var(\n        --fhi-color-neutral-base-hover\n      );\n      --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);\n      --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-border-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-border-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);\n\n      --color-neutral-subtle-background: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);\n      --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-subtle-background-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-border-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-border-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);\n\n      --color-neutral-outlined-background: transparent;\n      --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);\n      --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-outlined-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-disabled: transparent;\n      --color-neutral-outlined-border-disabled: var(\n        --fhi-color-neutral-border-subtle\n      );\n      --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-neutral-text-background: transparent;\n      --color-neutral-text-border: transparent;\n      --color-neutral-text: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-text-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-disabled: transparent;\n      --color-neutral-text-border-disabled: transparent;\n      --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-danger-strong-background: var(--fhi-color-danger-base-default);\n      --color-danger-strong-border: var(--fhi-color-danger-base-default);\n      --color-danger-strong: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-hover: var(\n        --fhi-color-danger-base-hover\n      );\n      --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);\n      --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-active: var(\n        --fhi-color-danger-base-active\n      );\n      --color-danger-strong-border-active: var(--fhi-color-danger-base-active);\n      --color-danger-strong-active: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-border-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);\n\n      --color-danger-subtle-background: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle-border: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle: var(--fhi-color-danger-text-subtle);\n      --color-danger-subtle-background-hover: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);\n      --color-danger-subtle-hover: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-border-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-active: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-border-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-outlined-background: transparent;\n      --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);\n      --color-danger-outlined: var(--fhi-color-danger-text-subtle);\n      --color-danger-outlined-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-border-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-hover: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-border-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-active: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-disabled: transparent;\n      --color-danger-outlined-border-disabled: var(\n        --fhi-color-danger-border-subtle\n      );\n      --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-text-background: transparent;\n      --color-danger-text-border: transparent;\n      --color-danger-text: var(--fhi-color-danger-text-subtle);\n      --color-danger-text-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);\n      --color-danger-text-hover: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);\n      --color-danger-text-active: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-disabled: transparent;\n      --color-danger-text-border-disabled: transparent;\n      --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);\n\n      button {\n        border-radius: var(--dimension-border-radius);\n        border: solid var(--dimension-border-width);\n        font-family: var(--typography-font-family);\n        transition: var(--motion-transition);\n\n        cursor: pointer;\n        &:disabled {\n          opacity: var(--opacity-disabled);\n          cursor: not-allowed;\n        }\n      }\n    }\n\n    :host([size='large']) button {\n      font-size: var(--typography-label-large-font-size);\n      font-weight: var(--typography-label-large-font-weight);\n      line-height: var(--typography-label-large-line-height);\n      letter-spacing: var(--typography-label-large-letter-spacing);\n      padding: var(--dimension-padding-large);\n    }\n\n    :host([size='medium']) button {\n      font-size: var(--typography-label-medium-font-size);\n      font-weight: var(--typography-label-medium-font-weight);\n      line-height: var(--typography-label-medium-line-height);\n      letter-spacing: var(--typography-label-medium-letter-spacing);\n      padding: var(--dimension-padding-medium);\n    }\n\n    :host([size='small']) button {\n      font-size: var(--typography-label-small-font-size);\n      font-weight: var(--typography-label-small-font-weight);\n      line-height: var(--typography-label-small-line-height);\n      letter-spacing: var(--typography-label-small-letter-spacing);\n      padding: var(--dimension-padding-small);\n    }\n\n    :host([color='accent'][variant='strong']) button {\n      background-color: var(--color-accent-strong-background);\n      border-color: var(--color-accent-strong-border);\n      color: var(--color-accent-strong);\n      &:hover {\n        background-color: var(--color-accent-strong-background-hover);\n        border-color: var(--color-accent-strong-border-hover);\n        color: var(--color-accent-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-strong-background-active);\n        border-color: var(--color-accent-strong-border-active);\n        color: var(--color-accent-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-strong-background-disabled);\n        border-color: var(--color-accent-strong-border-disabled);\n        color: var(--color-accent-strong-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='subtle']) button {\n      background-color: var(--color-accent-subtle-background);\n      border-color: var(--color-accent-subtle-border);\n      color: var(--color-accent-subtle);\n      &:hover {\n        background-color: var(--color-accent-subtle-background-hover);\n        border-color: var(--color-accent-subtle-border-hover);\n        color: var(--color-accent-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-subtle-background-active);\n        border-color: var(--color-accent-subtle-border-active);\n        color: var(--color-accent-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-subtle-background-disabled);\n        border-color: var(--color-accent-subtle-border-disabled);\n        color: var(--color-accent-subtle-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='outlined']) button {\n      background-color: var(--color-accent-outlined-background);\n      border-color: var(--color-accent-outlined-border);\n      color: var(--color-accent-outlined);\n      &:hover {\n        background-color: var(--color-accent-outlined-background-hover);\n        border-color: var(--color-accent-outlined-border-hover);\n        color: var(--color-accent-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-outlined-background-active);\n        border-color: var(--color-accent-outlined-border-active);\n        color: var(--color-accent-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-outlined-background-disabled);\n        border-color: var(--color-accent-outlined-border-disabled);\n        color: var(--color-accent-outlined-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='text']) button {\n      background-color: var(--color-accent-text-background);\n      border-color: var(--color-accent-text-border);\n      color: var(--color-accent-text);\n      &:hover {\n        background-color: var(--color-accent-text-background-hover);\n        border-color: var(--color-accent-text-border-hover);\n        color: var(--color-accent-text-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-text-background-active);\n        border-color: var(--color-accent-text-border-active);\n        color: var(--color-accent-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-text-background-disabled);\n        border-color: var(--color-accent-text-border-disabled);\n        color: var(--color-accent-text-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='strong']) button {\n      background-color: var(--color-neutral-strong-background);\n      border-color: var(--color-neutral-strong-border);\n      color: var(--color-neutral-strong);\n      &:hover {\n        background-color: var(--color-neutral-strong-background-hover);\n        border-color: var(--color-neutral-strong-border-hover);\n        color: var(--color-neutral-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-strong-background-active);\n        border-color: var(--color-neutral-strong-border-active);\n        color: var(--color-neutral-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-strong-background-disabled);\n        border-color: var(--color-neutral-strong-border-disabled);\n        color: var(--color-neutral-strong-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='subtle']) button {\n      background-color: var(--color-neutral-subtle-background);\n      border-color: var(--color-neutral-subtle-border);\n      color: var(--color-neutral-subtle);\n      &:hover {\n        background-color: var(--color-neutral-subtle-background-hover);\n        border-color: var(--color-neutral-subtle-border-hover);\n        color: var(--color-neutral-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-subtle-background-active);\n        border-color: var(--color-neutral-subtle-border-active);\n        color: var(--color-neutral-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-subtle-background-disabled);\n        border-color: var(--color-neutral-subtle-border-disabled);\n        color: var(--color-neutral-subtle-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='outlined']) button {\n      background-color: var(--color-neutral-outlined-background);\n      border-color: var(--color-neutral-outlined-border);\n      color: var(--color-neutral-outlined);\n      &:hover {\n        background-color: var(--color-neutral-outlined-background-hover);\n        border-color: var(--color-neutral-outlined-border-hover);\n        color: var(--color-neutral-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-outlined-background-active);\n        border-color: var(--color-neutral-outlined-border-active);\n        color: var(--color-neutral-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-outlined-background-disabled);\n        border-color: var(--color-neutral-outlined-border-disabled);\n        color: var(--color-neutral-outlined-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='text']) button {\n      background-color: var(--color-neutral-text-background);\n      border-color: var(--color-neutral-text-border);\n      color: var(--color-neutral-text);\n      &:hover {\n        background-color: var(--color-neutral-text-background-hover);\n        border-color: var(--color-neutral-text-border-hover);\n        color: var(--color-neutral-text-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-text-background-active);\n        border-color: var(--color-neutral-text-border-active);\n        color: var(--color-neutral-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-text-background-disabled);\n        border-color: var(--color-neutral-text-border-disabled);\n        color: var(--color-neutral-text-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='strong']) button {\n      background-color: var(--color-danger-strong-background);\n      border-color: var(--color-danger-strong-border);\n      color: var(--color-danger-strong);\n      &:hover {\n        background-color: var(--color-danger-strong-background-hover);\n        border-color: var(--color-danger-strong-border-hover);\n        color: var(--color-danger-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-strong-background-active);\n        border-color: var(--color-danger-strong-border-active);\n        color: var(--color-danger-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-strong-background-disabled);\n        border-color: var(--color-danger-strong-border-disabled);\n        color: var(--color-danger-strong-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='subtle']) button {\n      background-color: var(--color-danger-subtle-background);\n      border-color: var(--color-danger-subtle-border);\n      color: var(--color-danger-subtle);\n      &:hover {\n        background-color: var(--color-danger-subtle-background-hover);\n        border-color: var(--color-danger-subtle-border-hover);\n        color: var(--color-danger-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-subtle-background-active);\n        border-color: var(--color-danger-subtle-border-active);\n        color: var(--color-danger-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-subtle-background-disabled);\n        border-color: var(--color-danger-subtle-border-disabled);\n        color: var(--color-danger-subtle-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='outlined']) button {\n      background-color: var(--color-danger-outlined-background);\n      border-color: var(--color-danger-outlined-border);\n      color: var(--color-danger-outlined);\n      &:hover {\n        background-color: var(--color-danger-outlined-background-hover);\n        border-color: var(--color-danger-outlined-border-hover);\n        color: var(--color-danger-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-outlined-background-active);\n        border-color: var(--color-danger-outlined-border-active);\n        color: var(--color-danger-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-outlined-background-disabled);\n        border-color: var(--color-danger-outlined-border-disabled);\n        color: var(--color-danger-outlined-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='text']) button {\n      background-color: var(--color-danger-text-background);\n      border-color: var(--color-danger-text-border);\n      color: var(--color-danger-text);\n      &:hover {\n        background-color: var(--color-danger-text-background-hover);\n        border-color: var(--color-danger-text-border-hover);\n        color: var(--color-danger-text-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-text-background-active);\n        border-color: var(--color-danger-text-border-active);\n        color: var(--color-danger-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-text-background-disabled);\n        border-color: var(--color-danger-text-border-disabled);\n        color: var(--color-danger-text-disabled);\n      }\n    }\n  `;\n}\n"],"names":["FhiButtonSelector","FhiButton","LitElement","event","_a","_b","target","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAoB;AAG1B,IAAMC,IAAN,cAAwBC,EAAW;AAAA,EAyBxC,cAAc;AACZ,UAAA,GAvByC,KAAA,QAG5B,UAE4B,KAAA,UAI9B,UAE8B,KAAA,OAG7B,UAE8B,KAAA,WAAW,IAE3B,KAAA,OAAsC,UAMhE,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GAEN,KAAK,UAAU,KAAK,aAAa,KAAK,IAAI,GAC1C,KAAK,YAAY,KAAK,eAAe,KAAK,IAAI,GAC9C,KAAK,gBAAgB,KAAK,mBAAmB,KAAK,IAAI;AAAA,EACxD;AAAA,EAEA,QAAc;AACZ,SAAK,aAAA;AAAA,EACP;AAAA,EAEQ,aAAaC,GAA0C;;AAI7D,IAHAA,KAAA,QAAAA,EAAO,kBACPA,KAAA,QAAAA,EAAO,mBAEH,MAAK,aAIT,KAAK;AAAA,MACH,IAAI,WAAW,SAAS,EAAE,SAAS,IAAM,UAAU,IAAM;AAAA,IAAA,GAGvD,KAAK,SAAS,cAChBC,IAAA,KAAK,WAAW,SAAhB,QAAAA,EAAsB,kBAGpB,KAAK,SAAS,aAChBC,IAAA,KAAK,WAAW,SAAhB,QAAAA,EAAsB;AAAA,EAE1B;AAAA,EAEQ,aAAaF,GAA4B;AAC/C,QAAIA,EAAM,QAAQ,OAAOA,EAAM,QAAQ,YAAY;AACjD,WAAK,aAAaA,CAAK;AAEvB,YAAMG,IAASH,EAAM;AACrB,MAAAG,KAAA,QAAAA,EAAQ,QACRA,KAAA,QAAAA,EAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEQ,eAAeH,GAA4B;AACjD,IAAIA,EAAM,QAAQ,WAChB,KAAK,aAAaA,CAAK;AAAA,EAE3B;AAAA,EAEQ,qBAAqB;AAC3B,WAAO;AAAA,EACT;AAAA,EAEA,SAAS;AACP,WAAOI;AAAAA,kBACO,KAAK,QAAQ;AAAA,aAClB,KAAK,IAAI;AAAA,eACP,KAAK,YAAY;AAAA,iBACf,KAAK,cAAc;AAAA,eACrB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAI9B;AAinBF;AA9sBaN,EACK,iBAAiB;AADtBA,EA+FJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA5F2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BT,EAGgC,WAAA,SAAA,CAAA;AAKAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BT,EAQgC,WAAA,WAAA,CAAA;AAMAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BT,EAcgC,WAAA,QAAA,CAAA;AAKCQ,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnB/BT,EAmBiC,WAAA,YAAA,CAAA;AAEhBQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBfT,EAqBiB,WAAA,QAAA,CAAA;AArBjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAiB;AAAA,GACnBC,CAAA;"}
+{"version":3,"file":"fhi-button.js","sources":["../../src/components/fhi-button/fhi-button.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n  static readonly formAssociated = true;\n\n  @property({ type: String, reflect: true }) color:\n    | 'accent'\n    | 'neutral'\n    | 'danger' = 'accent';\n\n  @property({ type: String, reflect: true }) variant:\n    | 'strong'\n    | 'subtle'\n    | 'outlined'\n    | 'text' = 'strong';\n\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: Boolean, attribute: 'icon-only' })\n  iconOnly: boolean = false;\n\n  @property({ type: String }) type: 'button' | 'submit' | 'reset' = 'submit';\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.onkeyup = this._handleKeyup.bind(this);\n    this.onkeydown = this._handleKeydown.bind(this);\n    this.onselectstart = this._handleSelectStart.bind(this);\n  }\n\n  public click(): void {\n    this._handleClick();\n  }\n\n  private _handleClick(event?: MouseEvent | KeyboardEvent): void {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (this.disabled) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new MouseEvent('click', { bubbles: true, composed: true }),\n    );\n\n    if (this.type === 'submit') {\n      this._internals.form?.requestSubmit();\n    }\n\n    if (this.type === 'reset') {\n      this._internals.form?.reset();\n    }\n  }\n\n  private _handleKeyup(event: KeyboardEvent): void {\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      this._handleClick(event);\n\n      const target = event.target as HTMLElement | null;\n      target?.blur();\n      target?.focus();\n    }\n  }\n\n  private _handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      this._handleClick(event);\n    }\n  }\n\n  private _handleSelectStart(): boolean {\n    return false;\n  }\n\n  private _getIconSize(): string {\n    switch (this.size) {\n      case 'small':\n        return '20';\n      case 'medium':\n      case 'large':\n      default:\n        return '24';\n    }\n  }\n\n  private _handleSlotChange(event: Event): void {\n    if (this.iconOnly) {\n      return;\n    }\n\n    const slot = event.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes();\n\n    let firstIcon: HTMLElement | undefined;\n    let lastIcon: HTMLElement | undefined;\n\n    nodes.forEach(node => {\n      if (node.nodeType !== Node.ELEMENT_NODE) {\n        return;\n      }\n\n      if (!(node as Element).tagName.toLowerCase().startsWith('fhi-icon')) {\n        return;\n      }\n\n      // The first icon is either the first child or it is preceded by a whitespace text node\n      if (\n        !node.previousSibling?.nodeType ||\n        (node.previousSibling?.nodeType === Node.TEXT_NODE &&\n          !node.previousSibling.textContent?.trim())\n      ) {\n        firstIcon = node as HTMLElement;\n      }\n\n      // The last icon is either the last child or it is followed by a whitespace text node\n      if (\n        node.previousSibling?.nodeType === Node.TEXT_NODE &&\n        node.previousSibling?.textContent?.trim()\n      ) {\n        lastIcon = node as HTMLElement;\n      }\n    });\n\n    if (firstIcon) {\n      firstIcon.style.marginRight = 'var(--dimension-icon-margin-right)';\n      firstIcon.style.marginLeft = 'var(--dimension-icon-margin-left-offset)';\n      firstIcon.setAttribute('size', this._getIconSize());\n    }\n\n    if (lastIcon) {\n      lastIcon.style.marginRight = 'var(--dimension-icon-margin-right-offset)';\n      lastIcon.style.marginLeft = 'var(--dimension-icon-margin-left)';\n      lastIcon.setAttribute('size', this._getIconSize());\n    }\n  }\n\n  render() {\n    return html`<button\n      ?disabled=${this.disabled}\n      type=${this.type}\n      @keyup=${this._handleKeyup}\n      @keydown=${this._handleKeydown}\n      @click=${this._handleClick}\n    >\n      <div class=\"slot-container\">\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    </button>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-border-radius: var(--fhi-border-radius-full);\n      --dimension-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-padding-small: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-medium: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-large: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n\n      /* Icon */\n      --dimension-icon-margin-left: var(--fhi-spacing-050);\n      --dimension-icon-margin-right: var(--fhi-spacing-050);\n\n      /* Adjust for the button padding when the icon is present on either side */\n      --dimension-icon-margin-left-offset: calc(-1 * var(--fhi-spacing-050));\n      --dimension-icon-margin-right-offset: calc(-1 * var(--fhi-spacing-050));\n\n      --dimension-icon-only-border-radius: var(--fhi-border-radius-full);\n\n      /* Typography */\n      --typography-font-family: var(--fhi-font-family-default);\n      --typography-label-large-font-size: var(\n        --fhi-typography-label-large-font-size\n      );\n      --typography-label-medium-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-small-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-large-font-weight: var(\n        --fhi-typography-label-large-font-weight\n      );\n      --typography-label-medium-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-small-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-large-letter-spacing: var(\n        --fhi-typography-label-large-letter-spacing\n      );\n      --typography-label-medium-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-small-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-large-line-height: var(\n        --fhi-typography-label-large-line-height\n      );\n      --typography-label-small-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n      --typography-label-medium-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n\n      /* Accent Color */\n      --color-accent-strong-background: var(--fhi-color-accent-base-default);\n      --color-accent-strong-border: var(--fhi-color-accent-base-default);\n      --color-accent-strong: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-hover: var(\n        --fhi-color-accent-base-hover\n      );\n      --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);\n      --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-active: var(\n        --fhi-color-accent-base-active\n      );\n      --color-accent-strong-border-active: var(--fhi-color-accent-base-active);\n      --color-accent-strong-active: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-border-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);\n\n      --color-accent-subtle-background: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle-border: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle: var(--fhi-color-accent-text-subtle);\n      --color-accent-subtle-background-hover: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);\n      --color-accent-subtle-hover: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-border-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-active: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-border-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-outlined-background: transparent;\n      --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);\n      --color-accent-outlined: var(--fhi-color-accent-text-subtle);\n      --color-accent-outlined-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-border-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-hover: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-border-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-active: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-disabled: transparent;\n      --color-accent-outlined-border-disabled: var(\n        --fhi-color-accent-border-subtle\n      );\n      --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-text-background: transparent;\n      --color-accent-text-border: transparent;\n      --color-accent-text: var(--fhi-color-accent-text-subtle);\n      --color-accent-text-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);\n      --color-accent-text-hover: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);\n      --color-accent-text-active: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-disabled: transparent;\n      --color-accent-text-border-disabled: transparent;\n      --color-accent-text-disabled: var(--fhi-color-accent-text-default);\n\n      /* Neutral Color */\n      --color-neutral-strong-background: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong-border: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-hover: var(\n        --fhi-color-neutral-base-hover\n      );\n      --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);\n      --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-border-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-border-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);\n\n      --color-neutral-subtle-background: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);\n      --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-subtle-background-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-border-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-border-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);\n\n      --color-neutral-outlined-background: transparent;\n      --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);\n      --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-outlined-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-disabled: transparent;\n      --color-neutral-outlined-border-disabled: var(\n        --fhi-color-neutral-border-subtle\n      );\n      --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-neutral-text-background: transparent;\n      --color-neutral-text-border: transparent;\n      --color-neutral-text: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-text-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-disabled: transparent;\n      --color-neutral-text-border-disabled: transparent;\n      --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);\n\n      /* Danger Color */\n      --color-danger-strong-background: var(--fhi-color-danger-base-default);\n      --color-danger-strong-border: var(--fhi-color-danger-base-default);\n      --color-danger-strong: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-hover: var(\n        --fhi-color-danger-base-hover\n      );\n      --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);\n      --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-active: var(\n        --fhi-color-danger-base-active\n      );\n      --color-danger-strong-border-active: var(--fhi-color-danger-base-active);\n      --color-danger-strong-active: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-border-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);\n\n      --color-danger-subtle-background: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle-border: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle: var(--fhi-color-danger-text-subtle);\n      --color-danger-subtle-background-hover: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);\n      --color-danger-subtle-hover: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-border-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-active: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-border-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-outlined-background: transparent;\n      --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);\n      --color-danger-outlined: var(--fhi-color-danger-text-subtle);\n      --color-danger-outlined-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-border-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-hover: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-border-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-active: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-disabled: transparent;\n      --color-danger-outlined-border-disabled: var(\n        --fhi-color-danger-border-subtle\n      );\n      --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-text-background: transparent;\n      --color-danger-text-border: transparent;\n      --color-danger-text: var(--fhi-color-danger-text-subtle);\n      --color-danger-text-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);\n      --color-danger-text-hover: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);\n      --color-danger-text-active: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-disabled: transparent;\n      --color-danger-text-border-disabled: transparent;\n      --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);\n\n      --motion-transition: var(--fhi-motion-duration-quick)\n        var(--fhi-motion-ease-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n    }\n\n    :host {\n      display: block;\n\n      button {\n        border-radius: var(--dimension-border-radius);\n        border: solid var(--dimension-border-width);\n        font-family: var(--typography-font-family);\n        transition: var(--motion-transition);\n\n        cursor: pointer;\n        &:disabled {\n          opacity: var(--opacity-disabled);\n          cursor: not-allowed;\n        }\n      }\n\n      .slot-container {\n        display: flex;\n        align-items: center;\n        gap: 0.25rem;\n      }\n    }\n\n    :host([size='large']) button {\n      font-size: var(--typography-label-large-font-size);\n      font-weight: var(--typography-label-large-font-weight);\n      line-height: var(--typography-label-large-line-height);\n      letter-spacing: var(--typography-label-large-letter-spacing);\n      padding: var(--dimension-padding-large);\n    }\n\n    :host([size='medium']) button {\n      font-size: var(--typography-label-medium-font-size);\n      font-weight: var(--typography-label-medium-font-weight);\n      line-height: var(--typography-label-medium-line-height);\n      letter-spacing: var(--typography-label-medium-letter-spacing);\n      padding: var(--dimension-padding-medium);\n    }\n\n    :host([size='small']) button {\n      font-size: var(--typography-label-small-font-size);\n      font-weight: var(--typography-label-small-font-weight);\n      line-height: var(--typography-label-small-line-height);\n      letter-spacing: var(--typography-label-small-letter-spacing);\n      padding: var(--dimension-padding-small);\n    }\n\n    :host([color='accent'][variant='strong']) button {\n      background-color: var(--color-accent-strong-background);\n      border-color: var(--color-accent-strong-border);\n      color: var(--color-accent-strong);\n      &:hover {\n        background-color: var(--color-accent-strong-background-hover);\n        border-color: var(--color-accent-strong-border-hover);\n        color: var(--color-accent-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-strong-background-active);\n        border-color: var(--color-accent-strong-border-active);\n        color: var(--color-accent-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-strong-background-disabled);\n        border-color: var(--color-accent-strong-border-disabled);\n        color: var(--color-accent-strong-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='subtle']) button {\n      background-color: var(--color-accent-subtle-background);\n      border-color: var(--color-accent-subtle-border);\n      color: var(--color-accent-subtle);\n      &:hover {\n        background-color: var(--color-accent-subtle-background-hover);\n        border-color: var(--color-accent-subtle-border-hover);\n        color: var(--color-accent-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-subtle-background-active);\n        border-color: var(--color-accent-subtle-border-active);\n        color: var(--color-accent-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-subtle-background-disabled);\n        border-color: var(--color-accent-subtle-border-disabled);\n        color: var(--color-accent-subtle-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='outlined']) button {\n      background-color: var(--color-accent-outlined-background);\n      border-color: var(--color-accent-outlined-border);\n      color: var(--color-accent-outlined);\n      &:hover {\n        background-color: var(--color-accent-outlined-background-hover);\n        border-color: var(--color-accent-outlined-border-hover);\n        color: var(--color-accent-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-outlined-background-active);\n        border-color: var(--color-accent-outlined-border-active);\n        color: var(--color-accent-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-outlined-background-disabled);\n        border-color: var(--color-accent-outlined-border-disabled);\n        color: var(--color-accent-outlined-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='text']) button {\n      background-color: var(--color-accent-text-background);\n      border-color: var(--color-accent-text-border);\n      color: var(--color-accent-text);\n      &:hover {\n        background-color: var(--color-accent-text-background-hover);\n        border-color: var(--color-accent-text-border-hover);\n        color: var(--color-accent-text-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-text-background-active);\n        border-color: var(--color-accent-text-border-active);\n        color: var(--color-accent-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-text-background-disabled);\n        border-color: var(--color-accent-text-border-disabled);\n        color: var(--color-accent-text-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='strong']) button {\n      background-color: var(--color-neutral-strong-background);\n      border-color: var(--color-neutral-strong-border);\n      color: var(--color-neutral-strong);\n      &:hover {\n        background-color: var(--color-neutral-strong-background-hover);\n        border-color: var(--color-neutral-strong-border-hover);\n        color: var(--color-neutral-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-strong-background-active);\n        border-color: var(--color-neutral-strong-border-active);\n        color: var(--color-neutral-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-strong-background-disabled);\n        border-color: var(--color-neutral-strong-border-disabled);\n        color: var(--color-neutral-strong-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='subtle']) button {\n      background-color: var(--color-neutral-subtle-background);\n      border-color: var(--color-neutral-subtle-border);\n      color: var(--color-neutral-subtle);\n      &:hover {\n        background-color: var(--color-neutral-subtle-background-hover);\n        border-color: var(--color-neutral-subtle-border-hover);\n        color: var(--color-neutral-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-subtle-background-active);\n        border-color: var(--color-neutral-subtle-border-active);\n        color: var(--color-neutral-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-subtle-background-disabled);\n        border-color: var(--color-neutral-subtle-border-disabled);\n        color: var(--color-neutral-subtle-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='outlined']) button {\n      background-color: var(--color-neutral-outlined-background);\n      border-color: var(--color-neutral-outlined-border);\n      color: var(--color-neutral-outlined);\n      &:hover {\n        background-color: var(--color-neutral-outlined-background-hover);\n        border-color: var(--color-neutral-outlined-border-hover);\n        color: var(--color-neutral-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-outlined-background-active);\n        border-color: var(--color-neutral-outlined-border-active);\n        color: var(--color-neutral-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-outlined-background-disabled);\n        border-color: var(--color-neutral-outlined-border-disabled);\n        color: var(--color-neutral-outlined-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='text']) button {\n      background-color: var(--color-neutral-text-background);\n      border-color: var(--color-neutral-text-border);\n      color: var(--color-neutral-text);\n      &:hover {\n        background-color: var(--color-neutral-text-background-hover);\n        border-color: var(--color-neutral-text-border-hover);\n        color: var(--color-neutral-text-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-text-background-active);\n        border-color: var(--color-neutral-text-border-active);\n        color: var(--color-neutral-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-text-background-disabled);\n        border-color: var(--color-neutral-text-border-disabled);\n        color: var(--color-neutral-text-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='strong']) button {\n      background-color: var(--color-danger-strong-background);\n      border-color: var(--color-danger-strong-border);\n      color: var(--color-danger-strong);\n      &:hover {\n        background-color: var(--color-danger-strong-background-hover);\n        border-color: var(--color-danger-strong-border-hover);\n        color: var(--color-danger-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-strong-background-active);\n        border-color: var(--color-danger-strong-border-active);\n        color: var(--color-danger-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-strong-background-disabled);\n        border-color: var(--color-danger-strong-border-disabled);\n        color: var(--color-danger-strong-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='subtle']) button {\n      background-color: var(--color-danger-subtle-background);\n      border-color: var(--color-danger-subtle-border);\n      color: var(--color-danger-subtle);\n      &:hover {\n        background-color: var(--color-danger-subtle-background-hover);\n        border-color: var(--color-danger-subtle-border-hover);\n        color: var(--color-danger-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-subtle-background-active);\n        border-color: var(--color-danger-subtle-border-active);\n        color: var(--color-danger-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-subtle-background-disabled);\n        border-color: var(--color-danger-subtle-border-disabled);\n        color: var(--color-danger-subtle-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='outlined']) button {\n      background-color: var(--color-danger-outlined-background);\n      border-color: var(--color-danger-outlined-border);\n      color: var(--color-danger-outlined);\n      &:hover {\n        background-color: var(--color-danger-outlined-background-hover);\n        border-color: var(--color-danger-outlined-border-hover);\n        color: var(--color-danger-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-outlined-background-active);\n        border-color: var(--color-danger-outlined-border-active);\n        color: var(--color-danger-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-outlined-background-disabled);\n        border-color: var(--color-danger-outlined-border-disabled);\n        color: var(--color-danger-outlined-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='text']) button {\n      background-color: var(--color-danger-text-background);\n      border-color: var(--color-danger-text-border);\n      color: var(--color-danger-text);\n      &:hover {\n        background-color: var(--color-danger-text-background-hover);\n        border-color: var(--color-danger-text-border-hover);\n        color: var(--color-danger-text-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-text-background-active);\n        border-color: var(--color-danger-text-border-active);\n        color: var(--color-danger-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-text-background-disabled);\n        border-color: var(--color-danger-text-border-disabled);\n        color: var(--color-danger-text-disabled);\n      }\n    }\n\n    :host([icon-only]) button {\n      border-radius: var(--dimension-icon-only-border-radius);\n    }\n\n    :host([icon-only][size='small']) button {\n      padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width));\n    }\n\n    :host([icon-only][size='medium']) button {\n      padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width));\n    }\n\n    :host([icon-only][size='large']) button {\n      padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n    }\n  `;\n}\n"],"names":["FhiButtonSelector","FhiButton","LitElement","event","_a","_b","target","nodes","firstIcon","lastIcon","node","_c","_d","_f","_e","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAoB;AAG1B,IAAMC,IAAN,cAAwBC,EAAW;AAAA,EA4BxC,cAAc;AACZ,UAAA,GA1ByC,KAAA,QAG5B,UAE4B,KAAA,UAI9B,UAE8B,KAAA,OAG7B,UAE8B,KAAA,WAAW,IAGvD,KAAA,WAAoB,IAEQ,KAAA,OAAsC,UAMhE,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GAEN,KAAK,UAAU,KAAK,aAAa,KAAK,IAAI,GAC1C,KAAK,YAAY,KAAK,eAAe,KAAK,IAAI,GAC9C,KAAK,gBAAgB,KAAK,mBAAmB,KAAK,IAAI;AAAA,EACxD;AAAA,EAEO,QAAc;AACnB,SAAK,aAAA;AAAA,EACP;AAAA,EAEQ,aAAaC,GAA0C;;AAI7D,IAHAA,KAAA,QAAAA,EAAO,kBACPA,KAAA,QAAAA,EAAO,mBAEH,MAAK,aAIT,KAAK;AAAA,MACH,IAAI,WAAW,SAAS,EAAE,SAAS,IAAM,UAAU,IAAM;AAAA,IAAA,GAGvD,KAAK,SAAS,cAChBC,IAAA,KAAK,WAAW,SAAhB,QAAAA,EAAsB,kBAGpB,KAAK,SAAS,aAChBC,IAAA,KAAK,WAAW,SAAhB,QAAAA,EAAsB;AAAA,EAE1B;AAAA,EAEQ,aAAaF,GAA4B;AAC/C,QAAIA,EAAM,QAAQ,OAAOA,EAAM,QAAQ,YAAY;AACjD,WAAK,aAAaA,CAAK;AAEvB,YAAMG,IAASH,EAAM;AACrB,MAAAG,KAAA,QAAAA,EAAQ,QACRA,KAAA,QAAAA,EAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEQ,eAAeH,GAA4B;AACjD,IAAIA,EAAM,QAAQ,WAChB,KAAK,aAAaA,CAAK;AAAA,EAE3B;AAAA,EAEQ,qBAA8B;AACpC,WAAO;AAAA,EACT;AAAA,EAEQ,eAAuB;AAC7B,YAAQ,KAAK,MAAA;AAAA,MACX,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AAAA,MACL,KAAK;AAAA,MACL;AACE,eAAO;AAAA,IAAA;AAAA,EAEb;AAAA,EAEQ,kBAAkBA,GAAoB;AAC5C,QAAI,KAAK;AACP;AAIF,UAAMI,IADOJ,EAAM,OACA,cAAA;AAEnB,QAAIK,GACAC;AAEJ,IAAAF,EAAM,QAAQ,CAAAG,MAAQ;;AACpB,MAAIA,EAAK,aAAa,KAAK,gBAIrBA,EAAiB,QAAQ,cAAc,WAAW,UAAU,OAMhE,GAACN,IAAAM,EAAK,oBAAL,QAAAN,EAAsB,eACtBC,IAAAK,EAAK,oBAAL,gBAAAL,EAAsB,cAAa,KAAK,aACvC,GAACM,IAAAD,EAAK,gBAAgB,gBAArB,QAAAC,EAAkC,aAErCH,IAAYE,MAKZE,IAAAF,EAAK,oBAAL,gBAAAE,EAAsB,cAAa,KAAK,eACxCC,KAAAC,IAAAJ,EAAK,oBAAL,gBAAAI,EAAsB,gBAAtB,QAAAD,EAAmC,YAEnCJ,IAAWC;AAAA,IAEf,CAAC,GAEGF,MACFA,EAAU,MAAM,cAAc,sCAC9BA,EAAU,MAAM,aAAa,4CAC7BA,EAAU,aAAa,QAAQ,KAAK,aAAA,CAAc,IAGhDC,MACFA,EAAS,MAAM,cAAc,6CAC7BA,EAAS,MAAM,aAAa,qCAC5BA,EAAS,aAAa,QAAQ,KAAK,aAAA,CAAc;AAAA,EAErD;AAAA,EAEA,SAAS;AACP,WAAOM;AAAAA,kBACO,KAAK,QAAQ;AAAA,aAClB,KAAK,IAAI;AAAA,eACP,KAAK,YAAY;AAAA,iBACf,KAAK,cAAc;AAAA,eACrB,KAAK,YAAY;AAAA;AAAA;AAAA,4BAGJ,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAGhD;AA2pBF;AA3zBad,EACK,iBAAiB;AADtBA,EAkKJ,SAASe;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA/J2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BjB,EAGgC,WAAA,SAAA,CAAA;AAKAgB,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BjB,EAQgC,WAAA,WAAA,CAAA;AAMAgB,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BjB,EAcgC,WAAA,QAAA,CAAA;AAKCgB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnB/BjB,EAmBiC,WAAA,YAAA,CAAA;AAG5CgB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GArBxCjB,EAsBX,WAAA,YAAA,CAAA;AAE4BgB,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxBfjB,EAwBiB,WAAA,QAAA,CAAA;AAxBjBA,IAANgB,EAAA;AAAA,EADNE,EAAcnB,CAAiB;AAAA,GACnBC,CAAA;"}

package/fhi-icon-arrow-down-left.js

@@ -1,21 +1,35 @@
-import { i as p, n as c, a as w, x as a, t as f } from "./property-DYwjZ69W.js";
-var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (h, r, s, o) => {
-  for (var t = o > 1 ? void 0 : o ? m(r, s) : r, i = h.length - 1, n; i >= 0; i--)
-    (n = h[i]) && (t = (o ? n(r, s, t) : n(t)) || t);
-  return o && t && v(r, s, t), t;
+import { i as p, n as c, a as h, x as u, t as w } from "./property-DYwjZ69W.js";
+var x = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (a, r, i, s) => {
+  for (var e = s > 1 ? void 0 : s ? f(r, i) : r, o = a.length - 1, n; o >= 0; o--)
+    (n = a[o]) && (e = (s ? n(r, i, e) : n(e)) || e);
+  return s && e && x(r, i, e), e;
 };
-const g = "fhi-icon-arrow-down-left";
-let e = class extends w {
+const m = "fhi-icon-arrow-down-left";
+let t = class extends h {
   constructor() {
-    super(...arguments), this.color = "currentcolor", this.size = 24;
+    super(...arguments), this.color = "currentcolor", this.size = "medium";
+  }
+  get _size() {
+    switch (this.size) {
+      case "xsmall":
+        return "16px";
+      case "small":
+        return "20px";
+      case "medium":
+        return "24px";
+      case "large":
+        return "32px";
+      default:
+        return isNaN(Number(this.size)) ? (console.warn(`Invalid size value: ${this.size}. Falling back to default size '24px'.`), "24px") : `${this.size}px`;
+    }
   }
   render() {
-    return a`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${this.size}" height="${this.size}" fill="${this.color}"><path d="M16.526 6.418a.75.75 0 0 1 1.056 1.056l-.052.056-8.72 8.72H17a.75.75 0 0 1 0 1.5H7a.75.75 0 0 1-.75-.75V7a.75.75 0 1 1 1.5 0v8.19l8.72-8.72z"/></svg>
+    return u`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${this._size}" height="${this._size}" fill="${this.color}"><path d="M16.526 6.418a.75.75 0 0 1 1.056 1.056l-.052.056-8.72 8.72H17a.75.75 0 0 1 0 1.5H7a.75.75 0 0 1-.75-.75V7a.75.75 0 1 1 1.5 0v8.19l8.72-8.72z"/></svg>
     `;
   }
 };
-e.styles = p`
+t.styles = p`
     :host {
       display: flex;
       max-height: min-content;
@@ -24,15 +38,15 @@ e.styles = p`
   `;
 l([
   c({ type: String })
-], e.prototype, "color", 2);
+], t.prototype, "color", 2);
 l([
-  c({ type: Number })
-], e.prototype, "size", 2);
-e = l([
-  f(g)
-], e);
+  c({ type: String })
+], t.prototype, "size", 2);
+t = l([
+  w(m)
+], t);
 export {
-  e as FhiIconArrowDownLeft,
-  g as FhiIconArrowDownLeftSelector
+  t as FhiIconArrowDownLeft,
+  m as FhiIconArrowDownLeftSelector
 };
 //# sourceMappingURL=fhi-icon-arrow-down-left.js.map

package/fhi-icon-arrow-down-left.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-icon-arrow-down-left.js","sources":["../../src/components/icons/fhi-icon-arrow-down-left.component.ts"],"sourcesContent":["\n/*\n  This file is auto-generated by generate-icon-components.js. Do not edit it manually.\n*/\nimport { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const FhiIconArrowDownLeftSelector = \"fhi-icon-arrow-down-left\";\n\n@customElement(FhiIconArrowDownLeftSelector)\nexport class FhiIconArrowDownLeft extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M16.526 6.418a.75.75 0 0 1 1.056 1.056l-.052.056-8.72 8.72H17a.75.75 0 0 1 0 1.5H7a.75.75 0 0 1-.75-.75V7a.75.75 0 1 1 1.5 0v8.19l8.72-8.72z\"/></svg>\n    `;\n  }\n      \n  static styles = css`\n    :host {\n      display: flex;\n      max-height: min-content;\n      max-width: min-content;\n    }\n  `;\n  }\n"],"names":["FhiIconArrowDownLeftSelector","FhiIconArrowDownLeft","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA+B;AAGrC,IAAMC,IAAN,cAAmCC,EAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAE7H;AASA;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA4B;AAAA,GAC9BC,CAAA;"}
+{"version":3,"file":"fhi-icon-arrow-down-left.js","sources":["../../src/components/icons/fhi-icon-arrow-down-left.component.ts"],"sourcesContent":["\n/*\n  This file is auto-generated by generate-icon-components.js. Do not edit it manually.\n*/\nimport { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const FhiIconArrowDownLeftSelector = \"fhi-icon-arrow-down-left\";\n\n@customElement(FhiIconArrowDownLeftSelector)\nexport class FhiIconArrowDownLeft extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n  @property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number = 'medium';\n  private get _size(): string {\n    switch (this.size) {\n      case 'xsmall': \n        return '16px'; \n      case 'small':\n        return '20px';\n      case 'medium':\n        return '24px'; \n      case 'large':\n        return '32px'; \n      default:\n        if (isNaN(Number(this.size))) {\n          console.warn(`Invalid size value: ${this.size}. Falling back to default size '24px'.`)\n          return '24px';\n        }\n        return `${this.size}px`;\n    }\n  }\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this._size}\" height=\"${this._size}\" fill=\"${this.color}\"><path d=\"M16.526 6.418a.75.75 0 0 1 1.056 1.056l-.052.056-8.72 8.72H17a.75.75 0 0 1 0 1.5H7a.75.75 0 0 1-.75-.75V7a.75.75 0 1 1 1.5 0v8.19l8.72-8.72z\"/></svg>\n    `;\n  }\n      \n  static styles = css`\n    :host {\n      display: flex;\n      max-height: min-content;\n      max-width: min-content;\n    }\n  `;\n  }\n"],"names":["FhiIconArrowDownLeftSelector","FhiIconArrowDownLeft","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA+B;AAGrC,IAAMC,IAAN,cAAmCC,EAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAChB,KAAA,OAAyD;AAAA,EAAA;AAAA,EACrF,IAAY,QAAgB;AAC1B,YAAQ,KAAK,MAAA;AAAA,MACX,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAI,MAAM,OAAO,KAAK,IAAI,CAAC,KACzB,QAAQ,KAAK,uBAAuB,KAAK,IAAI,wCAAwC,GAC9E,UAEF,GAAG,KAAK,IAAI;AAAA,IAAA;AAAA,EAEzB;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,KAAK,aAAa,KAAK,KAAK,WAAW,KAAK,KAAK;AAAA;AAAA,EAE/H;AASA;AAnCWF,EA4BJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA3BYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AACAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAFfL,EAEiB,WAAA,QAAA,CAAA;AAFjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA4B;AAAA,GAC9BC,CAAA;"}

package/fhi-icon-arrow-down-right.js

@@ -1,38 +1,52 @@
-import { i as p, n as c, a as w, x as a, t as g } from "./property-DYwjZ69W.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, h = (l, e, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? f(e, i) : e, s = l.length - 1, n; s >= 0; s--)
-    (n = l[s]) && (t = (o ? n(e, i, t) : n(t)) || t);
-  return o && t && v(e, i, t), t;
+import { i as c, n as h, a as p, x as u, t as w } from "./property-DYwjZ69W.js";
+var x = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (a, r, i, s) => {
+  for (var e = s > 1 ? void 0 : s ? g(r, i) : r, o = a.length - 1, n; o >= 0; o--)
+    (n = a[o]) && (e = (s ? n(r, i, e) : n(e)) || e);
+  return s && e && x(r, i, e), e;
 };
 const m = "fhi-icon-arrow-down-right";
-let r = class extends w {
+let t = class extends p {
   constructor() {
-    super(...arguments), this.color = "currentcolor", this.size = 24;
+    super(...arguments), this.color = "currentcolor", this.size = "medium";
+  }
+  get _size() {
+    switch (this.size) {
+      case "xsmall":
+        return "16px";
+      case "small":
+        return "20px";
+      case "medium":
+        return "24px";
+      case "large":
+        return "32px";
+      default:
+        return isNaN(Number(this.size)) ? (console.warn(`Invalid size value: ${this.size}. Falling back to default size '24px'.`), "24px") : `${this.size}px`;
+    }
   }
   render() {
-    return a`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${this.size}" height="${this.size}" fill="${this.color}"><path d="M6.47 6.47a.75.75 0 0 1 1.004-.052l.056.052 8.72 8.72V7a.75.75 0 0 1 1.5 0v10a.75.75 0 0 1-.75.75H7a.75.75 0 0 1 0-1.5h8.19L6.47 7.53l-.052-.056A.75.75 0 0 1 6.47 6.47"/></svg>
+    return u`
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${this._size}" height="${this._size}" fill="${this.color}"><path d="M6.47 6.47a.75.75 0 0 1 1.004-.052l.056.052 8.72 8.72V7a.75.75 0 0 1 1.5 0v10a.75.75 0 0 1-.75.75H7a.75.75 0 0 1 0-1.5h8.19L6.47 7.53l-.052-.056A.75.75 0 0 1 6.47 6.47"/></svg>
     `;
   }
 };
-r.styles = p`
+t.styles = c`
     :host {
       display: flex;
       max-height: min-content;
       max-width: min-content;
     }
   `;
-h([
-  c({ type: String })
-], r.prototype, "color", 2);
-h([
-  c({ type: Number })
-], r.prototype, "size", 2);
-r = h([
-  g(m)
-], r);
+l([
+  h({ type: String })
+], t.prototype, "color", 2);
+l([
+  h({ type: String })
+], t.prototype, "size", 2);
+t = l([
+  w(m)
+], t);
 export {
-  r as FhiIconArrowDownRight,
+  t as FhiIconArrowDownRight,
   m as FhiIconArrowDownRightSelector
 };
 //# sourceMappingURL=fhi-icon-arrow-down-right.js.map

package/fhi-icon-arrow-down-right.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-icon-arrow-down-right.js","sources":["../../src/components/icons/fhi-icon-arrow-down-right.component.ts"],"sourcesContent":["\n/*\n  This file is auto-generated by generate-icon-components.js. Do not edit it manually.\n*/\nimport { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const FhiIconArrowDownRightSelector = \"fhi-icon-arrow-down-right\";\n\n@customElement(FhiIconArrowDownRightSelector)\nexport class FhiIconArrowDownRight extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M6.47 6.47a.75.75 0 0 1 1.004-.052l.056.052 8.72 8.72V7a.75.75 0 0 1 1.5 0v10a.75.75 0 0 1-.75.75H7a.75.75 0 0 1 0-1.5h8.19L6.47 7.53l-.052-.056A.75.75 0 0 1 6.47 6.47\"/></svg>\n    `;\n  }\n      \n  static styles = css`\n    :host {\n      display: flex;\n      max-height: min-content;\n      max-width: min-content;\n    }\n  `;\n  }\n"],"names":["FhiIconArrowDownRightSelector","FhiIconArrowDownRight","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAAgC;AAGtC,IAAMC,IAAN,cAAoCC,EAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAE7H;AASA;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA6B;AAAA,GAC/BC,CAAA;"}
+{"version":3,"file":"fhi-icon-arrow-down-right.js","sources":["../../src/components/icons/fhi-icon-arrow-down-right.component.ts"],"sourcesContent":["\n/*\n  This file is auto-generated by generate-icon-components.js. Do not edit it manually.\n*/\nimport { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const FhiIconArrowDownRightSelector = \"fhi-icon-arrow-down-right\";\n\n@customElement(FhiIconArrowDownRightSelector)\nexport class FhiIconArrowDownRight extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n  @property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number = 'medium';\n  private get _size(): string {\n    switch (this.size) {\n      case 'xsmall': \n        return '16px'; \n      case 'small':\n        return '20px';\n      case 'medium':\n        return '24px'; \n      case 'large':\n        return '32px'; \n      default:\n        if (isNaN(Number(this.size))) {\n          console.warn(`Invalid size value: ${this.size}. Falling back to default size '24px'.`)\n          return '24px';\n        }\n        return `${this.size}px`;\n    }\n  }\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this._size}\" height=\"${this._size}\" fill=\"${this.color}\"><path d=\"M6.47 6.47a.75.75 0 0 1 1.004-.052l.056.052 8.72 8.72V7a.75.75 0 0 1 1.5 0v10a.75.75 0 0 1-.75.75H7a.75.75 0 0 1 0-1.5h8.19L6.47 7.53l-.052-.056A.75.75 0 0 1 6.47 6.47\"/></svg>\n    `;\n  }\n      \n  static styles = css`\n    :host {\n      display: flex;\n      max-height: min-content;\n      max-width: min-content;\n    }\n  `;\n  }\n"],"names":["FhiIconArrowDownRightSelector","FhiIconArrowDownRight","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAAgC;AAGtC,IAAMC,IAAN,cAAoCC,EAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAChB,KAAA,OAAyD;AAAA,EAAA;AAAA,EACrF,IAAY,QAAgB;AAC1B,YAAQ,KAAK,MAAA;AAAA,MACX,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAI,MAAM,OAAO,KAAK,IAAI,CAAC,KACzB,QAAQ,KAAK,uBAAuB,KAAK,IAAI,wCAAwC,GAC9E,UAEF,GAAG,KAAK,IAAI;AAAA,IAAA;AAAA,EAEzB;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,KAAK,aAAa,KAAK,KAAK,WAAW,KAAK,KAAK;AAAA;AAAA,EAE/H;AASA;AAnCWF,EA4BJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA3BYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AACAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAFfL,EAEiB,WAAA,QAAA,CAAA;AAFjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA6B;AAAA,GAC/BC,CAAA;"}