@folkehelseinstituttet/designsystem 0.16.0 → 0.17.1

package/fhi-button.js

@@ -1,11 +1,11 @@
-import { i as h, n as i, a as f, x as p, t as k } from "./property-DYwjZ69W.js";
-var m = 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 && m(o, c, e), e;
+import { i as u, n as i, a as s, x as b, t as v } from "./property-DYwjZ69W.js";
+var g = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (r, o, a, c) => {
+  for (var t = c > 1 ? void 0 : c ? h(o, a) : o, e = r.length - 1, d; e >= 0; e--)
+    (d = r[e]) && (t = (c ? d(o, a, t) : d(t)) || t);
+  return c && t && g(o, a, t), t;
 };
-const y = "fhi-button";
-let l = class extends f {
+const f = "fhi-button";
+let l = class extends s {
   constructor() {
     super(), this.color = "accent", this.variant = "strong", this.size = "medium", this.disabled = !1, this.iconOnly = !1, this.type = "submit", this._internals = this.attachInternals();
   }
@@ -16,10 +16,10 @@ let l = class extends f {
     this._handleClick();
   }
   _handleClick(r) {
-    var o, c;
+    var o, a;
     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" && ((c = this._internals.form) == null || c.reset()));
+    ), this.type === "submit" && ((o = this._internals.form) == null || o.requestSubmit()), this.type === "reset" && ((a = this._internals.form) == null || a.reset()));
   }
   _handleKeyup(r) {
     if (r.key === " " || r.key === "Spacebar") {
@@ -47,15 +47,29 @@ let l = class extends f {
   _handleSlotChange(r) {
     if (this.iconOnly)
       return;
-    const c = r.target.assignedNodes();
-    let t, e;
-    c.forEach((a) => {
-      var d, u, s, b, 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 && !((s = a.previousSibling.textContent) != null && s.trim())) && (t = a), ((b = a.previousSibling) == null ? void 0 : b.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()));
+    const a = r.target.assignedNodes().filter(
+      (e) => {
+        var d;
+        return e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && ((d = e.textContent) == null ? void 0 : d.trim());
+      }
+    );
+    if (a.length === 0)
+      return;
+    const c = a[0];
+    if (c.nodeType === Node.ELEMENT_NODE && c.tagName.toLowerCase().startsWith("fhi-icon")) {
+      const e = c;
+      e.style.marginRight = "var(--dimension-icon-margin-right)", e.style.marginLeft = "var(--dimension-icon-margin-left-offset)", e.setAttribute("size", this._getIconSize());
+    }
+    if (a.length === 1)
+      return;
+    const t = a[a.length - 1];
+    if (t.nodeType === Node.ELEMENT_NODE && t.tagName.toLowerCase().startsWith("fhi-icon")) {
+      const e = t;
+      e.style.marginRight = "var(--dimension-icon-margin-right-offset)", e.style.marginLeft = "var(--dimension-icon-margin-left)", e.setAttribute("size", this._getIconSize());
+    }
   }
   render() {
-    return p`<button
+    return b`<button
       ?disabled=${this.disabled}
       type=${this.type}
       @keyup=${this._handleKeyup}
@@ -69,7 +83,7 @@ let l = class extends f {
   }
 };
 l.formAssociated = !0;
-l.styles = h`
+l.styles = u`
     :host {
       --dimension-border-radius: var(--fhi-border-radius-full);
       --dimension-border-width: var(--fhi-dimension-border-width);
@@ -779,10 +793,10 @@ n([
   i({ type: String })
 ], l.prototype, "type", 2);
 l = n([
-  k(y)
+  v(f)
 ], l);
 export {
   l as FhiButton,
-  y as FhiButtonSelector
+  f 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: 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      --dimension-padding-small-text: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));\n\n      --dimension-padding-medium-text: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n\n      --dimension-padding-large-text: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));\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='large'][variant='text']) button {\n      padding: var(--dimension-padding-large-text);\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='medium'][variant='text']) button {\n      padding: var(--dimension-padding-medium-text);\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([size='small'][variant='text']) button {\n      padding: var(--dimension-padding-small-text);\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":"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AAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;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;"}
+{"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 nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n    const validNodes = nodes.filter(\n      node =>\n        node.nodeType === Node.ELEMENT_NODE ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n    );\n\n    if (validNodes.length === 0) {\n      return;\n    }\n\n    const firstNode: Node = validNodes[0];\n\n    // if the first node is an icon, style it.\n    if (\n      firstNode.nodeType === Node.ELEMENT_NODE &&\n      (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const firstIcon = firstNode as HTMLElement;\n\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 (validNodes.length === 1) {\n      return;\n    }\n\n    const lastNode: Node = validNodes[validNodes.length - 1];\n\n    // if the last node is an icon, style it.\n    if (\n      lastNode.nodeType === Node.ELEMENT_NODE &&\n      (lastNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const lastIcon = lastNode as HTMLElement;\n\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      --dimension-padding-small-text: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));\n\n      --dimension-padding-medium-text: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n\n      --dimension-padding-large-text: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));\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='large'][variant='text']) button {\n      padding: var(--dimension-padding-large-text);\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='medium'][variant='text']) button {\n      padding: var(--dimension-padding-medium-text);\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([size='small'][variant='text']) button {\n      padding: var(--dimension-padding-small-text);\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","validNodes","node","firstNode","firstIcon","lastNode","lastIcon","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;AAKF,UAAMI,IAFSJ,EAAM,OAA2B,cAAA,EAEvB;AAAA,MACvB,CAAAK,MAAA;;AACE,eAAAA,EAAK,aAAa,KAAK,gBACtBA,EAAK,aAAa,KAAK,eAAaJ,IAAAI,EAAK,gBAAL,gBAAAJ,EAAkB;AAAA;AAAA,IAAK;AAGhE,QAAIG,EAAW,WAAW;AACxB;AAGF,UAAME,IAAkBF,EAAW,CAAC;AAGpC,QACEE,EAAU,aAAa,KAAK,gBAC3BA,EAAsB,QAAQ,YAAA,EAAc,WAAW,UAAU,GAClE;AACA,YAAMC,IAAYD;AAElB,MAAAC,EAAU,MAAM,cAAc,sCAC9BA,EAAU,MAAM,aAAa,4CAC7BA,EAAU,aAAa,QAAQ,KAAK,aAAA,CAAc;AAAA,IACpD;AAEA,QAAIH,EAAW,WAAW;AACxB;AAGF,UAAMI,IAAiBJ,EAAWA,EAAW,SAAS,CAAC;AAGvD,QACEI,EAAS,aAAa,KAAK,gBAC1BA,EAAqB,QAAQ,YAAA,EAAc,WAAW,UAAU,GACjE;AACA,YAAMC,IAAWD;AAEjB,MAAAC,EAAS,MAAM,cAAc,6CAC7BA,EAAS,MAAM,aAAa,qCAC5BA,EAAS,aAAa,QAAQ,KAAK,aAAA,CAAc;AAAA,IACnD;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;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;AAqrBF;AAp1BaZ,EACK,iBAAiB;AADtBA,EAiKJ,SAASa;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA9J2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9Bf,EAGgC,WAAA,SAAA,CAAA;AAKAc,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9Bf,EAQgC,WAAA,WAAA,CAAA;AAMAc,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9Bf,EAcgC,WAAA,QAAA,CAAA;AAKCc,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnB/Bf,EAmBiC,WAAA,YAAA,CAAA;AAG5Cc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GArBxCf,EAsBX,WAAA,YAAA,CAAA;AAE4Bc,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxBff,EAwBiB,WAAA,QAAA,CAAA;AAxBjBA,IAANc,EAAA;AAAA,EADNE,EAAcjB,CAAiB;AAAA,GACnBC,CAAA;"}

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

@@ -1,11 +1,11 @@
-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;
+import { i as p, n as h, a as c, x as u, t as w } from "./property-DYwjZ69W.js";
+var x = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (a, r, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? f(r, s) : r, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
+  return i && e && x(r, s, e), e;
 };
 const m = "fhi-icon-arrow-down-left";
-let t = class extends h {
+let t = class extends c {
   constructor() {
     super(...arguments), this.color = "currentcolor", this.size = "medium";
   }
@@ -20,7 +20,7 @@ let t = class extends h {
       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`;
+        return String(this.size).endsWith("px") || String(this.size).endsWith("rem") ? String(this.size) : isNaN(Number(this.size)) ? (console.warn(`Invalid size value: ${this.size}. Falling back to default size '24px'.`), "24px") : `${this.size}px`;
     }
   }
   render() {
@@ -37,10 +37,10 @@ t.styles = p`
     }
   `;
 l([
-  c({ type: String })
+  h({ type: String })
 ], t.prototype, "color", 2);
 l([
-  c({ type: String })
+  h({ type: String })
 ], t.prototype, "size", 2);
 t = l([
   w(m)

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  @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;"}
+{"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 | `${number}px` | `${number}rem` = '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 (String(this.size).endsWith('px') || String(this.size).endsWith('rem')) {\n          return String(this.size);\n        }\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,OAA0F;AAAA,EAAA;AAAA,EACtH,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,OAAO,KAAK,IAAI,EAAE,SAAS,IAAI,KAAK,OAAO,KAAK,IAAI,EAAE,SAAS,KAAK,IAC/D,OAAO,KAAK,IAAI,IAErB,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;AAtCWF,EA+BJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA9BYC,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,11 +1,11 @@
-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;
+import { i as p, n as a, a as c, x as u, t as g } from "./property-DYwjZ69W.js";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, h = (l, i, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? x(i, s) : i, n = l.length - 1, o; n >= 0; n--)
+    (o = l[n]) && (e = (r ? o(i, s, e) : o(e)) || e);
+  return r && e && w(i, s, e), e;
 };
 const m = "fhi-icon-arrow-down-right";
-let t = class extends p {
+let t = class extends c {
   constructor() {
     super(...arguments), this.color = "currentcolor", this.size = "medium";
   }
@@ -20,7 +20,7 @@ let t = class extends p {
       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`;
+        return String(this.size).endsWith("px") || String(this.size).endsWith("rem") ? String(this.size) : isNaN(Number(this.size)) ? (console.warn(`Invalid size value: ${this.size}. Falling back to default size '24px'.`), "24px") : `${this.size}px`;
     }
   }
   render() {
@@ -29,21 +29,21 @@ let t = class extends p {
     `;
   }
 };
-t.styles = c`
+t.styles = p`
     :host {
       display: flex;
       max-height: min-content;
       max-width: min-content;
     }
   `;
-l([
-  h({ type: String })
+h([
+  a({ type: String })
 ], t.prototype, "color", 2);
-l([
-  h({ type: String })
+h([
+  a({ type: String })
 ], t.prototype, "size", 2);
-t = l([
-  w(m)
+t = h([
+  g(m)
 ], t);
 export {
   t as FhiIconArrowDownRight,

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  @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;"}
+{"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 | `${number}px` | `${number}rem` = '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 (String(this.size).endsWith('px') || String(this.size).endsWith('rem')) {\n          return String(this.size);\n        }\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,OAA0F;AAAA,EAAA;AAAA,EACtH,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,OAAO,KAAK,IAAI,EAAE,SAAS,IAAI,KAAK,OAAO,KAAK,IAAI,EAAE,SAAS,KAAK,IAC/D,OAAO,KAAK,IAAI,IAErB,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;AAtCWF,EA+BJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA9BYC,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;"}

package/fhi-icon-arrow-down.js

@@ -1,11 +1,11 @@
-import { i as p, n as c, a as h, x as u, t as w } from "./property-DYwjZ69W.js";
-var x = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (a, r, i, s) => {
-  for (var e = s > 1 ? void 0 : s ? m(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;
+import { i as p, n as h, a as c, x as u, t as w } from "./property-DYwjZ69W.js";
+var x = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (a, r, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? m(r, s) : r, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
+  return i && e && x(r, s, e), e;
 };
-const v = "fhi-icon-arrow-down";
-let t = class extends h {
+const g = "fhi-icon-arrow-down";
+let t = class extends c {
   constructor() {
     super(...arguments), this.color = "currentcolor", this.size = "medium";
   }
@@ -20,7 +20,7 @@ let t = class extends h {
       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`;
+        return String(this.size).endsWith("px") || String(this.size).endsWith("rem") ? String(this.size) : isNaN(Number(this.size)) ? (console.warn(`Invalid size value: ${this.size}. Falling back to default size '24px'.`), "24px") : `${this.size}px`;
     }
   }
   render() {
@@ -37,16 +37,16 @@ t.styles = p`
     }
   `;
 l([
-  c({ type: String })
+  h({ type: String })
 ], t.prototype, "color", 2);
 l([
-  c({ type: String })
+  h({ type: String })
 ], t.prototype, "size", 2);
 t = l([
-  w(v)
+  w(g)
 ], t);
 export {
   t as FhiIconArrowDown,
-  v as FhiIconArrowDownSelector
+  g as FhiIconArrowDownSelector
 };
 //# sourceMappingURL=fhi-icon-arrow-down.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fhi-icon-arrow-down.js","sources":["../../src/components/icons/fhi-icon-arrow-down.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 FhiIconArrowDownSelector = \"fhi-icon-arrow-down\";\n\n@customElement(FhiIconArrowDownSelector)\nexport class FhiIconArrowDown 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=\"M11.25 5a.75.75 0 0 1 1.5 0v12.19l5.72-5.72a.75.75 0 1 1 1.06 1.06l-7 7a.75.75 0 0 1-1.003.052l-.057-.052-7-7-.052-.056a.75.75 0 0 1 1.056-1.056l.056.052 5.72 5.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":["FhiIconArrowDownSelector","FhiIconArrowDown","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA2B;AAGjC,IAAMC,IAAN,cAA+BC,EAAW;AAAA,EAA1C,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,CAAwB;AAAA,GAC1BC,CAAA;"}
+{"version":3,"file":"fhi-icon-arrow-down.js","sources":["../../src/components/icons/fhi-icon-arrow-down.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 FhiIconArrowDownSelector = \"fhi-icon-arrow-down\";\n\n@customElement(FhiIconArrowDownSelector)\nexport class FhiIconArrowDown extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n  @property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = '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 (String(this.size).endsWith('px') || String(this.size).endsWith('rem')) {\n          return String(this.size);\n        }\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=\"M11.25 5a.75.75 0 0 1 1.5 0v12.19l5.72-5.72a.75.75 0 1 1 1.06 1.06l-7 7a.75.75 0 0 1-1.003.052l-.057-.052-7-7-.052-.056a.75.75 0 0 1 1.056-1.056l.056.052 5.72 5.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":["FhiIconArrowDownSelector","FhiIconArrowDown","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA2B;AAGjC,IAAMC,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAChB,KAAA,OAA0F;AAAA,EAAA;AAAA,EACtH,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,OAAO,KAAK,IAAI,EAAE,SAAS,IAAI,KAAK,OAAO,KAAK,IAAI,EAAE,SAAS,KAAK,IAC/D,OAAO,KAAK,IAAI,IAErB,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;AAtCWF,EA+BJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA9BYC,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,CAAwB;AAAA,GAC1BC,CAAA;"}

package/fhi-icon-arrow-left.js

@@ -1,11 +1,11 @@
-import { i as p, n as c, a as h, x as u, t as x } from "./property-DYwjZ69W.js";
-var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (a, r, i, s) => {
-  for (var e = s > 1 ? void 0 : s ? m(r, i) : r, o = a.length - 1, l; o >= 0; o--)
-    (l = a[o]) && (e = (s ? l(r, i, e) : l(e)) || e);
-  return s && e && f(r, i, e), e;
+import { i as p, n as h, a as c, x as u, t as x } from "./property-DYwjZ69W.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (a, r, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? m(r, s) : r, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (e = (i ? o(r, s, e) : o(e)) || e);
+  return i && e && f(r, s, e), e;
 };
-const w = "fhi-icon-arrow-left";
-let t = class extends h {
+const g = "fhi-icon-arrow-left";
+let t = class extends c {
   constructor() {
     super(...arguments), this.color = "currentcolor", this.size = "medium";
   }
@@ -20,7 +20,7 @@ let t = class extends h {
       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`;
+        return String(this.size).endsWith("px") || String(this.size).endsWith("rem") ? String(this.size) : isNaN(Number(this.size)) ? (console.warn(`Invalid size value: ${this.size}. Falling back to default size '24px'.`), "24px") : `${this.size}px`;
     }
   }
   render() {
@@ -36,17 +36,17 @@ t.styles = p`
       max-width: min-content;
     }
   `;
-n([
-  c({ type: String })
+l([
+  h({ type: String })
 ], t.prototype, "color", 2);
-n([
-  c({ type: String })
+l([
+  h({ type: String })
 ], t.prototype, "size", 2);
-t = n([
-  x(w)
+t = l([
+  x(g)
 ], t);
 export {
   t as FhiIconArrowLeft,
-  w as FhiIconArrowLeftSelector
+  g as FhiIconArrowLeftSelector
 };
 //# sourceMappingURL=fhi-icon-arrow-left.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fhi-icon-arrow-left.js","sources":["../../src/components/icons/fhi-icon-arrow-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 FhiIconArrowLeftSelector = \"fhi-icon-arrow-left\";\n\n@customElement(FhiIconArrowLeftSelector)\nexport class FhiIconArrowLeft 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=\"M11.47 4.47a.75.75 0 1 1 1.06 1.06l-5.72 5.72H19a.75.75 0 1 1 0 1.5H6.81l5.72 5.72.052.056a.75.75 0 0 1-1.056 1.056l-.056-.052-7-7a.75.75 0 0 1 0-1.06z\"/></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":["FhiIconArrowLeftSelector","FhiIconArrowLeft","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA2B;AAGjC,IAAMC,IAAN,cAA+BC,EAAW;AAAA,EAA1C,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,CAAwB;AAAA,GAC1BC,CAAA;"}
+{"version":3,"file":"fhi-icon-arrow-left.js","sources":["../../src/components/icons/fhi-icon-arrow-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 FhiIconArrowLeftSelector = \"fhi-icon-arrow-left\";\n\n@customElement(FhiIconArrowLeftSelector)\nexport class FhiIconArrowLeft extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n  @property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = '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 (String(this.size).endsWith('px') || String(this.size).endsWith('rem')) {\n          return String(this.size);\n        }\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=\"M11.47 4.47a.75.75 0 1 1 1.06 1.06l-5.72 5.72H19a.75.75 0 1 1 0 1.5H6.81l5.72 5.72.052.056a.75.75 0 0 1-1.056 1.056l-.056-.052-7-7a.75.75 0 0 1 0-1.06z\"/></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":["FhiIconArrowLeftSelector","FhiIconArrowLeft","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA2B;AAGjC,IAAMC,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAChB,KAAA,OAA0F;AAAA,EAAA;AAAA,EACtH,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,OAAO,KAAK,IAAI,EAAE,SAAS,IAAI,KAAK,OAAO,KAAK,IAAI,EAAE,SAAS,KAAK,IAC/D,OAAO,KAAK,IAAI,IAErB,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;AAtCWF,EA+BJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA9BYC,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,CAAwB;AAAA,GAC1BC,CAAA;"}

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

@@ -1,11 +1,11 @@
-import { i as c, n as h, a as p, x as u, t as m } from "./property-DYwjZ69W.js";
-var x = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (n, r, i, s) => {
-  for (var e = s > 1 ? void 0 : s ? f(r, i) : r, l = n.length - 1, o; l >= 0; l--)
-    (o = n[l]) && (e = (s ? o(r, i, e) : o(e)) || e);
-  return s && e && x(r, i, e), e;
+import { i as p, n as h, a as c, x as u, t as g } from "./property-DYwjZ69W.js";
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, o = (a, i, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? x(i, s) : i, n = a.length - 1, l; n >= 0; n--)
+    (l = a[n]) && (e = (r ? l(i, s, e) : l(e)) || e);
+  return r && e && m(i, s, e), e;
 };
-const g = "fhi-icon-arrow-right-left";
-let t = class extends p {
+const f = "fhi-icon-arrow-right-left";
+let t = class extends c {
   constructor() {
     super(...arguments), this.color = "currentcolor", this.size = "medium";
   }
@@ -20,7 +20,7 @@ let t = class extends p {
       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`;
+        return String(this.size).endsWith("px") || String(this.size).endsWith("rem") ? String(this.size) : isNaN(Number(this.size)) ? (console.warn(`Invalid size value: ${this.size}. Falling back to default size '24px'.`), "24px") : `${this.size}px`;
     }
   }
   render() {
@@ -29,24 +29,24 @@ let t = class extends p {
     `;
   }
 };
-t.styles = c`
+t.styles = p`
     :host {
       display: flex;
       max-height: min-content;
       max-width: min-content;
     }
   `;
-a([
+o([
   h({ type: String })
 ], t.prototype, "color", 2);
-a([
+o([
   h({ type: String })
 ], t.prototype, "size", 2);
-t = a([
-  m(g)
+t = o([
+  g(f)
 ], t);
 export {
   t as FhiIconArrowRightLeft,
-  g as FhiIconArrowRightLeftSelector
+  f as FhiIconArrowRightLeftSelector
 };
 //# sourceMappingURL=fhi-icon-arrow-right-left.js.map