@folkehelseinstituttet/designsystem 0.6.0 → 0.8.0

package/fhi-button.js

@@ -1,4 +1,4 @@
-import { i as u, n as c, a as b, x as v, t as s } from "./property-WH20NVyT.js";
+import { i as u, n as c, a as b, x as v, t as s } from "./property-DYwjZ69W.js";
 var g = Object.defineProperty, h = Object.getOwnPropertyDescriptor, l = (r, o, t, n) => {
   for (var a = n > 1 ? void 0 : n ? h(o, t) : o, d = r.length - 1, i; d >= 0; d--)
     (i = r[d]) && (a = (n ? i(o, t, a) : i(a)) || a);

package/fhi-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-button.js","sources":["../../src/components/fhi-button/fhi-button.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n  static readonly formAssociated = true;\n\n  @property({ type: String, reflect: true }) color:\n    | 'accent'\n    | 'neutral'\n    | 'danger' = 'accent';\n\n  @property({ type: String, reflect: true }) variant:\n    | 'strong'\n    | 'subtle'\n    | 'outlined'\n    | 'text' = 'strong';\n\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: String }) type: 'button' | 'submit' | 'reset' = 'submit';\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.onkeyup = this._handleKeyup.bind(this);\n    this.onkeydown = this._handleKeydown.bind(this);\n    this.onselectstart = this._handleSelectStart.bind(this);\n  }\n\n  click(): void {\n    this._handleClick();\n  }\n\n  private _handleClick(event?: MouseEvent | KeyboardEvent): void {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (this.disabled) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new MouseEvent('click', { bubbles: true, composed: true }),\n    );\n\n    if (this.type === 'submit') {\n      this._internals.form?.requestSubmit();\n    }\n\n    if (this.type === 'reset') {\n      this._internals.form?.reset();\n    }\n  }\n\n  private _handleKeyup(event: KeyboardEvent): void {\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      this._handleClick(event);\n\n      const target = event.target as HTMLElement | null;\n      target?.blur();\n      target?.focus();\n    }\n  }\n\n  private _handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      this._handleClick(event);\n    }\n  }\n\n  private _handleSelectStart() {\n    return false;\n  }\n\n  render() {\n    return html`<button\n      ?disabled=${this.disabled}\n      type=${this.type}\n      @keyup=${this._handleKeyup}\n      @keydown=${this._handleKeydown}\n      @click=${this._handleClick}\n    >\n      <slot></slot>\n    </button>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-border-radius: var(--fhi-border-radius-full);\n      --dimension-border-width: var(--fhi-dimension-border-width);\n      --typography-font-family: var(--fhi-font-family-default);\n      --motion-transition: var(--fhi-motion-duration-quick)\n        var(--fhi-motion-ease-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n\n      --typography-label-large-font-size: var(\n        --fhi-typography-label-large-font-size\n      );\n      --typography-label-medium-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-small-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-large-font-weight: var(\n        --fhi-typography-label-large-font-weight\n      );\n      --typography-label-medium-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-small-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-large-letter-spacing: var(\n        --fhi-typography-label-large-letter-spacing\n      );\n      --typography-label-medium-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-small-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-large-line-height: var(\n        --fhi-typography-label-large-line-height\n      );\n      --typography-label-small-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n      --typography-label-medium-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n\n      --dimension-padding-small: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-medium: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-large: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --color-accent-strong-background: var(--fhi-color-accent-base-default);\n      --color-accent-strong-border: var(--fhi-color-accent-base-default);\n      --color-accent-strong: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-hover: var(\n        --fhi-color-accent-base-hover\n      );\n      --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);\n      --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-active: var(\n        --fhi-color-accent-base-active\n      );\n      --color-accent-strong-border-active: var(--fhi-color-accent-base-active);\n      --color-accent-strong-active: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-border-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);\n\n      --color-accent-subtle-background: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle-border: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle: var(--fhi-color-accent-text-subtle);\n      --color-accent-subtle-background-hover: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);\n      --color-accent-subtle-hover: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-border-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-active: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-border-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-outlined-background: transparent;\n      --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);\n      --color-accent-outlined: var(--fhi-color-accent-text-subtle);\n      --color-accent-outlined-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-border-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-hover: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-border-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-active: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-disabled: transparent;\n      --color-accent-outlined-border-disabled: var(\n        --fhi-color-accent-border-subtle\n      );\n      --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-text-background: transparent;\n      --color-accent-text-border: transparent;\n      --color-accent-text: var(--fhi-color-accent-text-subtle);\n      --color-accent-text-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);\n      --color-accent-text-hover: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);\n      --color-accent-text-active: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-disabled: transparent;\n      --color-accent-text-border-disabled: transparent;\n      --color-accent-text-disabled: var(--fhi-color-accent-text-default);\n\n      --color-neutral-strong-background: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong-border: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-hover: var(\n        --fhi-color-neutral-base-hover\n      );\n      --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);\n      --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-border-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-border-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);\n\n      --color-neutral-subtle-background: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);\n      --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-subtle-background-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-border-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-border-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);\n\n      --color-neutral-outlined-background: transparent;\n      --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);\n      --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-outlined-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-disabled: transparent;\n      --color-neutral-outlined-border-disabled: var(\n        --fhi-color-neutral-border-subtle\n      );\n      --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-neutral-text-background: transparent;\n      --color-neutral-text-border: transparent;\n      --color-neutral-text: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-text-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-disabled: transparent;\n      --color-neutral-text-border-disabled: transparent;\n      --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-danger-strong-background: var(--fhi-color-danger-base-default);\n      --color-danger-strong-border: var(--fhi-color-danger-base-default);\n      --color-danger-strong: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-hover: var(\n        --fhi-color-danger-base-hover\n      );\n      --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);\n      --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-active: var(\n        --fhi-color-danger-base-active\n      );\n      --color-danger-strong-border-active: var(--fhi-color-danger-base-active);\n      --color-danger-strong-active: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-border-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);\n\n      --color-danger-subtle-background: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle-border: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle: var(--fhi-color-danger-text-subtle);\n      --color-danger-subtle-background-hover: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);\n      --color-danger-subtle-hover: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-border-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-active: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-border-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-outlined-background: transparent;\n      --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);\n      --color-danger-outlined: var(--fhi-color-danger-text-subtle);\n      --color-danger-outlined-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-border-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-hover: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-border-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-active: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-disabled: transparent;\n      --color-danger-outlined-border-disabled: var(\n        --fhi-color-danger-border-subtle\n      );\n      --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-text-background: transparent;\n      --color-danger-text-border: transparent;\n      --color-danger-text: var(--fhi-color-danger-text-subtle);\n      --color-danger-text-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);\n      --color-danger-text-hover: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);\n      --color-danger-text-active: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-disabled: transparent;\n      --color-danger-text-border-disabled: transparent;\n      --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);\n\n      button {\n        border-radius: var(--dimension-border-radius);\n        border: solid var(--dimension-border-width);\n        font-family: var(--typography-font-family);\n        transition: var(--motion-transition);\n\n        cursor: pointer;\n        &:disabled {\n          opacity: var(--opacity-disabled);\n          cursor: not-allowed;\n        }\n      }\n    }\n\n    :host([size='large']) button {\n      font-size: var(--typography-label-large-font-size);\n      font-weight: var(--typography-label-large-font-weight);\n      line-height: var(--typography-label-large-line-height);\n      letter-spacing: var(--typography-label-large-letter-spacing);\n      padding: var(--dimension-padding-large);\n    }\n\n    :host([size='medium']) button {\n      font-size: var(--typography-label-medium-font-size);\n      font-weight: var(--typography-label-medium-font-weight);\n      line-height: var(--typography-label-medium-line-height);\n      letter-spacing: var(--typography-label-medium-letter-spacing);\n      padding: var(--dimension-padding-medium);\n    }\n\n    :host([size='small']) button {\n      font-size: var(--typography-label-small-font-size);\n      font-weight: var(--typography-label-small-font-weight);\n      line-height: var(--typography-label-small-line-height);\n      letter-spacing: var(--typography-label-small-letter-spacing);\n      padding: var(--dimension-padding-small);\n    }\n\n    :host([color='accent'][variant='strong']) button {\n      background-color: var(--color-accent-strong-background);\n      border-color: var(--color-accent-strong-border);\n      color: var(--color-accent-strong);\n      &:hover {\n        background-color: var(--color-accent-strong-background-hover);\n        border-color: var(--color-accent-strong-border-hover);\n        color: var(--color-accent-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-strong-background-active);\n        border-color: var(--color-accent-strong-border-active);\n        color: var(--color-accent-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-strong-background-disabled);\n        border-color: var(--color-accent-strong-border-disabled);\n        color: var(--color-accent-strong-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='subtle']) button {\n      background-color: var(--color-accent-subtle-background);\n      border-color: var(--color-accent-subtle-border);\n      color: var(--color-accent-subtle);\n      &:hover {\n        background-color: var(--color-accent-subtle-background-hover);\n        border-color: var(--color-accent-subtle-border-hover);\n        color: var(--color-accent-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-subtle-background-active);\n        border-color: var(--color-accent-subtle-border-active);\n        color: var(--color-accent-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-subtle-background-disabled);\n        border-color: var(--color-accent-subtle-border-disabled);\n        color: var(--color-accent-subtle-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='outlined']) button {\n      background-color: var(--color-accent-outlined-background);\n      border-color: var(--color-accent-outlined-border);\n      color: var(--color-accent-outlined);\n      &:hover {\n        background-color: var(--color-accent-outlined-background-hover);\n        border-color: var(--color-accent-outlined-border-hover);\n        color: var(--color-accent-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-outlined-background-active);\n        border-color: var(--color-accent-outlined-border-active);\n        color: var(--color-accent-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-outlined-background-disabled);\n        border-color: var(--color-accent-outlined-border-disabled);\n        color: var(--color-accent-outlined-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='text']) button {\n      background-color: var(--color-accent-text-background);\n      border-color: var(--color-accent-text-border);\n      color: var(--color-accent-text);\n      &:hover {\n        background-color: var(--color-accent-text-background-hover);\n        border-color: var(--color-accent-text-border-hover);\n        color: var(--color-accent-text-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-text-background-active);\n        border-color: var(--color-accent-text-border-active);\n        color: var(--color-accent-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-text-background-disabled);\n        border-color: var(--color-accent-text-border-disabled);\n        color: var(--color-accent-text-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='strong']) button {\n      background-color: var(--color-neutral-strong-background);\n      border-color: var(--color-neutral-strong-border);\n      color: var(--color-neutral-strong);\n      &:hover {\n        background-color: var(--color-neutral-strong-background-hover);\n        border-color: var(--color-neutral-strong-border-hover);\n        color: var(--color-neutral-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-strong-background-active);\n        border-color: var(--color-neutral-strong-border-active);\n        color: var(--color-neutral-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-strong-background-disabled);\n        border-color: var(--color-neutral-strong-border-disabled);\n        color: var(--color-neutral-strong-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='subtle']) button {\n      background-color: var(--color-neutral-subtle-background);\n      border-color: var(--color-neutral-subtle-border);\n      color: var(--color-neutral-subtle);\n      &:hover {\n        background-color: var(--color-neutral-subtle-background-hover);\n        border-color: var(--color-neutral-subtle-border-hover);\n        color: var(--color-neutral-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-subtle-background-active);\n        border-color: var(--color-neutral-subtle-border-active);\n        color: var(--color-neutral-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-subtle-background-disabled);\n        border-color: var(--color-neutral-subtle-border-disabled);\n        color: var(--color-neutral-subtle-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='outlined']) button {\n      background-color: var(--color-neutral-outlined-background);\n      border-color: var(--color-neutral-outlined-border);\n      color: var(--color-neutral-outlined);\n      &:hover {\n        background-color: var(--color-neutral-outlined-background-hover);\n        border-color: var(--color-neutral-outlined-border-hover);\n        color: var(--color-neutral-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-outlined-background-active);\n        border-color: var(--color-neutral-outlined-border-active);\n        color: var(--color-neutral-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-outlined-background-disabled);\n        border-color: var(--color-neutral-outlined-border-disabled);\n        color: var(--color-neutral-outlined-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='text']) button {\n      background-color: var(--color-neutral-text-background);\n      border-color: var(--color-neutral-text-border);\n      color: var(--color-neutral-text);\n      &:hover {\n        background-color: var(--color-neutral-text-background-hover);\n        border-color: var(--color-neutral-text-border-hover);\n        color: var(--color-neutral-text-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-text-background-active);\n        border-color: var(--color-neutral-text-border-active);\n        color: var(--color-neutral-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-text-background-disabled);\n        border-color: var(--color-neutral-text-border-disabled);\n        color: var(--color-neutral-text-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='strong']) button {\n      background-color: var(--color-danger-strong-background);\n      border-color: var(--color-danger-strong-border);\n      color: var(--color-danger-strong);\n      &:hover {\n        background-color: var(--color-danger-strong-background-hover);\n        border-color: var(--color-danger-strong-border-hover);\n        color: var(--color-danger-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-strong-background-active);\n        border-color: var(--color-danger-strong-border-active);\n        color: var(--color-danger-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-strong-background-disabled);\n        border-color: var(--color-danger-strong-border-disabled);\n        color: var(--color-danger-strong-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='subtle']) button {\n      background-color: var(--color-danger-subtle-background);\n      border-color: var(--color-danger-subtle-border);\n      color: var(--color-danger-subtle);\n      &:hover {\n        background-color: var(--color-danger-subtle-background-hover);\n        border-color: var(--color-danger-subtle-border-hover);\n        color: var(--color-danger-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-subtle-background-active);\n        border-color: var(--color-danger-subtle-border-active);\n        color: var(--color-danger-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-subtle-background-disabled);\n        border-color: var(--color-danger-subtle-border-disabled);\n        color: var(--color-danger-subtle-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='outlined']) button {\n      background-color: var(--color-danger-outlined-background);\n      border-color: var(--color-danger-outlined-border);\n      color: var(--color-danger-outlined);\n      &:hover {\n        background-color: var(--color-danger-outlined-background-hover);\n        border-color: var(--color-danger-outlined-border-hover);\n        color: var(--color-danger-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-outlined-background-active);\n        border-color: var(--color-danger-outlined-border-active);\n        color: var(--color-danger-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-outlined-background-disabled);\n        border-color: var(--color-danger-outlined-border-disabled);\n        color: var(--color-danger-outlined-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='text']) button {\n      background-color: var(--color-danger-text-background);\n      border-color: var(--color-danger-text-border);\n      color: var(--color-danger-text);\n      &:hover {\n        background-color: var(--color-danger-text-background-hover);\n        border-color: var(--color-danger-text-border-hover);\n        color: var(--color-danger-text-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-text-background-active);\n        border-color: var(--color-danger-text-border-active);\n        color: var(--color-danger-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-text-background-disabled);\n        border-color: var(--color-danger-text-border-disabled);\n        color: var(--color-danger-text-disabled);\n      }\n    }\n  `;\n}\n"],"names":["FhiButtonSelector","FhiButton","LitElement","event","_a","_b","target","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAoB;AAG1B,IAAMC,IAAN,cAAwBC,EAAW;AAAA,EAyBxC,cAAc;AACZ,UAAA,GAvByC,KAAA,QAG5B,UAE4B,KAAA,UAI9B,UAE8B,KAAA,OAG7B,UAE8B,KAAA,WAAW,IAE3B,KAAA,OAAsC,UAMhE,KAAK,aAAa,KAAK,gBAAA;AAAA,EAAgB;AAAA,EAGzC,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,EAAA;AAAA,EAGxD,QAAc;AACZ,SAAK,aAAA;AAAA,EAAa;AAAA,EAGZ,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,EACxB;AAAA,EAGM,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,IAAM;AAAA,EAChB;AAAA,EAGM,eAAeH,GAA4B;AACjD,IAAIA,EAAM,QAAQ,WAChB,KAAK,aAAaA,CAAK;AAAA,EACzB;AAAA,EAGM,qBAAqB;AAC3B,WAAO;AAAA,EAAA;AAAA,EAGT,SAAS;AACP,WAAOI;AAAAA,kBACO,KAAK,QAAQ;AAAA,aAClB,KAAK,IAAI;AAAA,eACP,KAAK,YAAY;AAAA,iBACf,KAAK,cAAc;AAAA,eACrB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAAA;AAqnBhC;AA9sBaN,EACK,iBAAiB;AADtBA,EA+FJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA5F2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BT,EAGgC,WAAA,SAAA,CAAA;AAKAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BT,EAQgC,WAAA,WAAA,CAAA;AAMAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BT,EAcgC,WAAA,QAAA,CAAA;AAKCQ,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnB/BT,EAmBiC,WAAA,YAAA,CAAA;AAEhBQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBfT,EAqBiB,WAAA,QAAA,CAAA;AArBjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAiB;AAAA,GACnBC,CAAA;"}
+{"version":3,"file":"fhi-button.js","sources":["../../src/components/fhi-button/fhi-button.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n  static readonly formAssociated = true;\n\n  @property({ type: String, reflect: true }) color:\n    | 'accent'\n    | 'neutral'\n    | 'danger' = 'accent';\n\n  @property({ type: String, reflect: true }) variant:\n    | 'strong'\n    | 'subtle'\n    | 'outlined'\n    | 'text' = 'strong';\n\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @property({ type: String }) type: 'button' | 'submit' | 'reset' = 'submit';\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.onkeyup = this._handleKeyup.bind(this);\n    this.onkeydown = this._handleKeydown.bind(this);\n    this.onselectstart = this._handleSelectStart.bind(this);\n  }\n\n  click(): void {\n    this._handleClick();\n  }\n\n  private _handleClick(event?: MouseEvent | KeyboardEvent): void {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (this.disabled) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new MouseEvent('click', { bubbles: true, composed: true }),\n    );\n\n    if (this.type === 'submit') {\n      this._internals.form?.requestSubmit();\n    }\n\n    if (this.type === 'reset') {\n      this._internals.form?.reset();\n    }\n  }\n\n  private _handleKeyup(event: KeyboardEvent): void {\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      this._handleClick(event);\n\n      const target = event.target as HTMLElement | null;\n      target?.blur();\n      target?.focus();\n    }\n  }\n\n  private _handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      this._handleClick(event);\n    }\n  }\n\n  private _handleSelectStart() {\n    return false;\n  }\n\n  render() {\n    return html`<button\n      ?disabled=${this.disabled}\n      type=${this.type}\n      @keyup=${this._handleKeyup}\n      @keydown=${this._handleKeydown}\n      @click=${this._handleClick}\n    >\n      <slot></slot>\n    </button>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-border-radius: var(--fhi-border-radius-full);\n      --dimension-border-width: var(--fhi-dimension-border-width);\n      --typography-font-family: var(--fhi-font-family-default);\n      --motion-transition: var(--fhi-motion-duration-quick)\n        var(--fhi-motion-ease-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n\n      --typography-label-large-font-size: var(\n        --fhi-typography-label-large-font-size\n      );\n      --typography-label-medium-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-small-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-large-font-weight: var(\n        --fhi-typography-label-large-font-weight\n      );\n      --typography-label-medium-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-small-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-large-letter-spacing: var(\n        --fhi-typography-label-large-letter-spacing\n      );\n      --typography-label-medium-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-small-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-large-line-height: var(\n        --fhi-typography-label-large-line-height\n      );\n      --typography-label-small-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n      --typography-label-medium-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n\n      --dimension-padding-small: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-medium: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-large: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --color-accent-strong-background: var(--fhi-color-accent-base-default);\n      --color-accent-strong-border: var(--fhi-color-accent-base-default);\n      --color-accent-strong: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-hover: var(\n        --fhi-color-accent-base-hover\n      );\n      --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);\n      --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-active: var(\n        --fhi-color-accent-base-active\n      );\n      --color-accent-strong-border-active: var(--fhi-color-accent-base-active);\n      --color-accent-strong-active: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-border-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);\n\n      --color-accent-subtle-background: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle-border: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle: var(--fhi-color-accent-text-subtle);\n      --color-accent-subtle-background-hover: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);\n      --color-accent-subtle-hover: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-border-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-active: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-border-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-outlined-background: transparent;\n      --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);\n      --color-accent-outlined: var(--fhi-color-accent-text-subtle);\n      --color-accent-outlined-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-border-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-hover: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-border-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-active: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-disabled: transparent;\n      --color-accent-outlined-border-disabled: var(\n        --fhi-color-accent-border-subtle\n      );\n      --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-text-background: transparent;\n      --color-accent-text-border: transparent;\n      --color-accent-text: var(--fhi-color-accent-text-subtle);\n      --color-accent-text-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);\n      --color-accent-text-hover: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);\n      --color-accent-text-active: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-disabled: transparent;\n      --color-accent-text-border-disabled: transparent;\n      --color-accent-text-disabled: var(--fhi-color-accent-text-default);\n\n      --color-neutral-strong-background: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong-border: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-hover: var(\n        --fhi-color-neutral-base-hover\n      );\n      --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);\n      --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-border-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-border-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);\n\n      --color-neutral-subtle-background: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);\n      --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-subtle-background-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-border-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-border-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);\n\n      --color-neutral-outlined-background: transparent;\n      --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);\n      --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-outlined-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-disabled: transparent;\n      --color-neutral-outlined-border-disabled: var(\n        --fhi-color-neutral-border-subtle\n      );\n      --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-neutral-text-background: transparent;\n      --color-neutral-text-border: transparent;\n      --color-neutral-text: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-text-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-disabled: transparent;\n      --color-neutral-text-border-disabled: transparent;\n      --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-danger-strong-background: var(--fhi-color-danger-base-default);\n      --color-danger-strong-border: var(--fhi-color-danger-base-default);\n      --color-danger-strong: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-hover: var(\n        --fhi-color-danger-base-hover\n      );\n      --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);\n      --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-active: var(\n        --fhi-color-danger-base-active\n      );\n      --color-danger-strong-border-active: var(--fhi-color-danger-base-active);\n      --color-danger-strong-active: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-border-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);\n\n      --color-danger-subtle-background: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle-border: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle: var(--fhi-color-danger-text-subtle);\n      --color-danger-subtle-background-hover: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);\n      --color-danger-subtle-hover: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-border-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-active: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-border-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-outlined-background: transparent;\n      --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);\n      --color-danger-outlined: var(--fhi-color-danger-text-subtle);\n      --color-danger-outlined-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-border-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-hover: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-border-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-active: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-disabled: transparent;\n      --color-danger-outlined-border-disabled: var(\n        --fhi-color-danger-border-subtle\n      );\n      --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-text-background: transparent;\n      --color-danger-text-border: transparent;\n      --color-danger-text: var(--fhi-color-danger-text-subtle);\n      --color-danger-text-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);\n      --color-danger-text-hover: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);\n      --color-danger-text-active: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-disabled: transparent;\n      --color-danger-text-border-disabled: transparent;\n      --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);\n\n      button {\n        border-radius: var(--dimension-border-radius);\n        border: solid var(--dimension-border-width);\n        font-family: var(--typography-font-family);\n        transition: var(--motion-transition);\n\n        cursor: pointer;\n        &:disabled {\n          opacity: var(--opacity-disabled);\n          cursor: not-allowed;\n        }\n      }\n    }\n\n    :host([size='large']) button {\n      font-size: var(--typography-label-large-font-size);\n      font-weight: var(--typography-label-large-font-weight);\n      line-height: var(--typography-label-large-line-height);\n      letter-spacing: var(--typography-label-large-letter-spacing);\n      padding: var(--dimension-padding-large);\n    }\n\n    :host([size='medium']) button {\n      font-size: var(--typography-label-medium-font-size);\n      font-weight: var(--typography-label-medium-font-weight);\n      line-height: var(--typography-label-medium-line-height);\n      letter-spacing: var(--typography-label-medium-letter-spacing);\n      padding: var(--dimension-padding-medium);\n    }\n\n    :host([size='small']) button {\n      font-size: var(--typography-label-small-font-size);\n      font-weight: var(--typography-label-small-font-weight);\n      line-height: var(--typography-label-small-line-height);\n      letter-spacing: var(--typography-label-small-letter-spacing);\n      padding: var(--dimension-padding-small);\n    }\n\n    :host([color='accent'][variant='strong']) button {\n      background-color: var(--color-accent-strong-background);\n      border-color: var(--color-accent-strong-border);\n      color: var(--color-accent-strong);\n      &:hover {\n        background-color: var(--color-accent-strong-background-hover);\n        border-color: var(--color-accent-strong-border-hover);\n        color: var(--color-accent-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-strong-background-active);\n        border-color: var(--color-accent-strong-border-active);\n        color: var(--color-accent-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-strong-background-disabled);\n        border-color: var(--color-accent-strong-border-disabled);\n        color: var(--color-accent-strong-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='subtle']) button {\n      background-color: var(--color-accent-subtle-background);\n      border-color: var(--color-accent-subtle-border);\n      color: var(--color-accent-subtle);\n      &:hover {\n        background-color: var(--color-accent-subtle-background-hover);\n        border-color: var(--color-accent-subtle-border-hover);\n        color: var(--color-accent-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-subtle-background-active);\n        border-color: var(--color-accent-subtle-border-active);\n        color: var(--color-accent-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-subtle-background-disabled);\n        border-color: var(--color-accent-subtle-border-disabled);\n        color: var(--color-accent-subtle-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='outlined']) button {\n      background-color: var(--color-accent-outlined-background);\n      border-color: var(--color-accent-outlined-border);\n      color: var(--color-accent-outlined);\n      &:hover {\n        background-color: var(--color-accent-outlined-background-hover);\n        border-color: var(--color-accent-outlined-border-hover);\n        color: var(--color-accent-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-outlined-background-active);\n        border-color: var(--color-accent-outlined-border-active);\n        color: var(--color-accent-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-outlined-background-disabled);\n        border-color: var(--color-accent-outlined-border-disabled);\n        color: var(--color-accent-outlined-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='text']) button {\n      background-color: var(--color-accent-text-background);\n      border-color: var(--color-accent-text-border);\n      color: var(--color-accent-text);\n      &:hover {\n        background-color: var(--color-accent-text-background-hover);\n        border-color: var(--color-accent-text-border-hover);\n        color: var(--color-accent-text-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-text-background-active);\n        border-color: var(--color-accent-text-border-active);\n        color: var(--color-accent-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-text-background-disabled);\n        border-color: var(--color-accent-text-border-disabled);\n        color: var(--color-accent-text-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='strong']) button {\n      background-color: var(--color-neutral-strong-background);\n      border-color: var(--color-neutral-strong-border);\n      color: var(--color-neutral-strong);\n      &:hover {\n        background-color: var(--color-neutral-strong-background-hover);\n        border-color: var(--color-neutral-strong-border-hover);\n        color: var(--color-neutral-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-strong-background-active);\n        border-color: var(--color-neutral-strong-border-active);\n        color: var(--color-neutral-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-strong-background-disabled);\n        border-color: var(--color-neutral-strong-border-disabled);\n        color: var(--color-neutral-strong-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='subtle']) button {\n      background-color: var(--color-neutral-subtle-background);\n      border-color: var(--color-neutral-subtle-border);\n      color: var(--color-neutral-subtle);\n      &:hover {\n        background-color: var(--color-neutral-subtle-background-hover);\n        border-color: var(--color-neutral-subtle-border-hover);\n        color: var(--color-neutral-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-subtle-background-active);\n        border-color: var(--color-neutral-subtle-border-active);\n        color: var(--color-neutral-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-subtle-background-disabled);\n        border-color: var(--color-neutral-subtle-border-disabled);\n        color: var(--color-neutral-subtle-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='outlined']) button {\n      background-color: var(--color-neutral-outlined-background);\n      border-color: var(--color-neutral-outlined-border);\n      color: var(--color-neutral-outlined);\n      &:hover {\n        background-color: var(--color-neutral-outlined-background-hover);\n        border-color: var(--color-neutral-outlined-border-hover);\n        color: var(--color-neutral-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-outlined-background-active);\n        border-color: var(--color-neutral-outlined-border-active);\n        color: var(--color-neutral-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-outlined-background-disabled);\n        border-color: var(--color-neutral-outlined-border-disabled);\n        color: var(--color-neutral-outlined-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='text']) button {\n      background-color: var(--color-neutral-text-background);\n      border-color: var(--color-neutral-text-border);\n      color: var(--color-neutral-text);\n      &:hover {\n        background-color: var(--color-neutral-text-background-hover);\n        border-color: var(--color-neutral-text-border-hover);\n        color: var(--color-neutral-text-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-text-background-active);\n        border-color: var(--color-neutral-text-border-active);\n        color: var(--color-neutral-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-text-background-disabled);\n        border-color: var(--color-neutral-text-border-disabled);\n        color: var(--color-neutral-text-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='strong']) button {\n      background-color: var(--color-danger-strong-background);\n      border-color: var(--color-danger-strong-border);\n      color: var(--color-danger-strong);\n      &:hover {\n        background-color: var(--color-danger-strong-background-hover);\n        border-color: var(--color-danger-strong-border-hover);\n        color: var(--color-danger-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-strong-background-active);\n        border-color: var(--color-danger-strong-border-active);\n        color: var(--color-danger-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-strong-background-disabled);\n        border-color: var(--color-danger-strong-border-disabled);\n        color: var(--color-danger-strong-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='subtle']) button {\n      background-color: var(--color-danger-subtle-background);\n      border-color: var(--color-danger-subtle-border);\n      color: var(--color-danger-subtle);\n      &:hover {\n        background-color: var(--color-danger-subtle-background-hover);\n        border-color: var(--color-danger-subtle-border-hover);\n        color: var(--color-danger-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-subtle-background-active);\n        border-color: var(--color-danger-subtle-border-active);\n        color: var(--color-danger-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-subtle-background-disabled);\n        border-color: var(--color-danger-subtle-border-disabled);\n        color: var(--color-danger-subtle-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='outlined']) button {\n      background-color: var(--color-danger-outlined-background);\n      border-color: var(--color-danger-outlined-border);\n      color: var(--color-danger-outlined);\n      &:hover {\n        background-color: var(--color-danger-outlined-background-hover);\n        border-color: var(--color-danger-outlined-border-hover);\n        color: var(--color-danger-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-outlined-background-active);\n        border-color: var(--color-danger-outlined-border-active);\n        color: var(--color-danger-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-outlined-background-disabled);\n        border-color: var(--color-danger-outlined-border-disabled);\n        color: var(--color-danger-outlined-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='text']) button {\n      background-color: var(--color-danger-text-background);\n      border-color: var(--color-danger-text-border);\n      color: var(--color-danger-text);\n      &:hover {\n        background-color: var(--color-danger-text-background-hover);\n        border-color: var(--color-danger-text-border-hover);\n        color: var(--color-danger-text-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-text-background-active);\n        border-color: var(--color-danger-text-border-active);\n        color: var(--color-danger-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-text-background-disabled);\n        border-color: var(--color-danger-text-border-disabled);\n        color: var(--color-danger-text-disabled);\n      }\n    }\n  `;\n}\n"],"names":["FhiButtonSelector","FhiButton","LitElement","event","_a","_b","target","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAoB;AAG1B,IAAMC,IAAN,cAAwBC,EAAW;AAAA,EAyBxC,cAAc;AACZ,UAAA,GAvByC,KAAA,QAG5B,UAE4B,KAAA,UAI9B,UAE8B,KAAA,OAG7B,UAE8B,KAAA,WAAW,IAE3B,KAAA,OAAsC,UAMhE,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GAEN,KAAK,UAAU,KAAK,aAAa,KAAK,IAAI,GAC1C,KAAK,YAAY,KAAK,eAAe,KAAK,IAAI,GAC9C,KAAK,gBAAgB,KAAK,mBAAmB,KAAK,IAAI;AAAA,EACxD;AAAA,EAEA,QAAc;AACZ,SAAK,aAAA;AAAA,EACP;AAAA,EAEQ,aAAaC,GAA0C;;AAI7D,IAHAA,KAAA,QAAAA,EAAO,kBACPA,KAAA,QAAAA,EAAO,mBAEH,MAAK,aAIT,KAAK;AAAA,MACH,IAAI,WAAW,SAAS,EAAE,SAAS,IAAM,UAAU,IAAM;AAAA,IAAA,GAGvD,KAAK,SAAS,cAChBC,IAAA,KAAK,WAAW,SAAhB,QAAAA,EAAsB,kBAGpB,KAAK,SAAS,aAChBC,IAAA,KAAK,WAAW,SAAhB,QAAAA,EAAsB;AAAA,EAE1B;AAAA,EAEQ,aAAaF,GAA4B;AAC/C,QAAIA,EAAM,QAAQ,OAAOA,EAAM,QAAQ,YAAY;AACjD,WAAK,aAAaA,CAAK;AAEvB,YAAMG,IAASH,EAAM;AACrB,MAAAG,KAAA,QAAAA,EAAQ,QACRA,KAAA,QAAAA,EAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEQ,eAAeH,GAA4B;AACjD,IAAIA,EAAM,QAAQ,WAChB,KAAK,aAAaA,CAAK;AAAA,EAE3B;AAAA,EAEQ,qBAAqB;AAC3B,WAAO;AAAA,EACT;AAAA,EAEA,SAAS;AACP,WAAOI;AAAAA,kBACO,KAAK,QAAQ;AAAA,aAClB,KAAK,IAAI;AAAA,eACP,KAAK,YAAY;AAAA,iBACf,KAAK,cAAc;AAAA,eACrB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAI9B;AAinBF;AA9sBaN,EACK,iBAAiB;AADtBA,EA+FJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA5F2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAH9BT,EAGgC,WAAA,SAAA,CAAA;AAKAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BT,EAQgC,WAAA,WAAA,CAAA;AAMAQ,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BT,EAcgC,WAAA,QAAA,CAAA;AAKCQ,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnB/BT,EAmBiC,WAAA,YAAA,CAAA;AAEhBQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBfT,EAqBiB,WAAA,QAAA,CAAA;AArBjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAiB;AAAA,GACnBC,CAAA;"}

package/fhi-checkbox.js

@@ -0,0 +1,272 @@
+import { i as b, n as a, a as v, x as s, t as k } from "./property-DYwjZ69W.js";
+import { o as n } from "./if-defined-Bw_mSLhL.js";
+var p = Object.defineProperty, u = Object.getOwnPropertyDescriptor, e = (c, t, i, h) => {
+  for (var r = h > 1 ? void 0 : h ? u(t, i) : t, l = c.length - 1, d; l >= 0; l--)
+    (d = c[l]) && (r = (h ? d(t, i, r) : d(r)) || r);
+  return h && r && p(t, i, r), r;
+};
+const x = "fhi-checkbox";
+let o = class extends v {
+  constructor() {
+    super(), this.label = void 0, this.name = void 0, this.value = "on", this.checked = !1, this.disabled = !1, this._internals = this.attachInternals();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._updateFormValue();
+  }
+  _handleChange(c) {
+    this.checked = c.target.checked, this._updateFormValue(), this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0
+      })
+    );
+  }
+  _handleInput(c) {
+    c.stopPropagation(), this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _updateFormValue() {
+    this._internals.setFormValue(this.checked ? this.value : null);
+  }
+  formResetCallback() {
+    this.checked = !1, this._updateFormValue();
+  }
+  render() {
+    return s`
+      <label>
+        <input
+          type="checkbox"
+          name="${n(this.name)}"
+          value="${n(this.value)}"
+          ?disabled=${this.disabled}
+          ?checked=${this.checked}
+          @change=${this._handleChange}
+          @input=${this._handleInput}
+        />
+        <svg
+          class="checkmark"
+          width="18"
+          height="18"
+          viewBox="0 0 18 18"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12.043 6.04295C12.4335 5.65243 13.0666 5.65243 13.4571 6.04295C13.8476 6.43348 13.8476 7.06649 13.4571 7.45702L8.95708 11.957C8.56655 12.3475 7.93354 12.3475 7.54302 11.957L5.29302 9.70702C4.90249 9.31649 4.90249 8.68348 5.29302 8.29295C5.65913 7.92684 6.23813 7.90424 6.63091 8.22459L6.70708 8.29295L8.25005 9.83592L12.043 6.04295Z"
+          />
+        </svg>
+
+        ${this.label}
+      </label>
+    `;
+  }
+};
+o.formAssociated = !0;
+o.styles = b`
+    :host {
+      --typography-font-family: var(--fhi-font-family-default);
+      --typography-font-size: var(--fhi-typography-body-medium-font-size);
+      --typography-font-weight: var(--fhi-typography-body-medium-font-weight);
+      --typography-line-height: var(--fhi-typography-body-medium-line-height);
+      --typography-letter-spacing: var(
+        --fhi-typography-body-medium-letter-spacing
+      );
+
+      --color-text: var(--fhi-color-neutral-text-default);
+      --color-checkbox-checkmark: var(--fhi-color-neutral-text-inverted);
+      --color-checkbox: var(--fhi-color-neutral-background-default);
+      --color-checkbox-border: var(--fhi-color-neutral-border-default);
+      --color-checkbox-hover: var(--fhi-color-accent-background-subtle);
+      --color-checkbox-border-hover: var(--fhi-color-accent-border-strong);
+      --color-checkbox-border-active: var(--fhi-color-accent-border-strong);
+      --color-checkbox-active: var(--fhi-color-accent-surface-default);
+      --color-checkbox-checked: var(--fhi-color-neutral-base-default);
+      --color-checkbox-checked-hover: var(--fhi-color-accent-base-hover);
+      --color-checkbox-checked-active: var(--fhi-color-accent-base-active);
+      --color-checkbox-error: var(--fhi-color-danger-background-default);
+      --color-checkbox-border-error: var(--fhi-color-danger-border-default);
+      --color-checkbox-error-hover: var(--fhi-color-danger-background-subtle);
+      --color-checkbox-border-error-hover: var(
+        --fhi-color-danger-border-strong
+      );
+      --color-checkbox-error-active: var(--fhi-color-danger-surface-default);
+      --color-checkbox-error-checked: var(--fhi-color-danger-base-default);
+      --color-checkbox-checked-error-hover: var(--fhi-color-danger-base-hover);
+      --color-checkbox-checked-error-active: var(
+        --fhi-color-danger-base-active
+      );
+      --color-checkbox-outline: var(--fhi-color-accent-surface-hover);
+      --color-checkbox-outline-error: var(--fhi-color-danger-surface-hover);
+
+      --dimension-checkbox-gap: var(--fhi-spacing-050);
+      --dimension-checkbox-border-radius: var(--fhi-border-radius-050);
+      --dimension-checkbox-border-width: var(--fhi-dimension-border-width);
+      --dimension-checkbox-size: 1.125rem;
+      --dimension-checkbox-margin: 3px;
+
+      --opacity-disabled: var(--fhi-opacity-disabled);
+      --motion-checkbox-transition: var(--fhi-motion-ease-default)
+        var(--fhi-motion-duration-quick);
+    }
+
+    :host {
+      display: flex;
+      align-items: center;
+      width: max-content;
+
+      label {
+        align-items: center;
+        display: flex;
+        position: relative;
+        color: var(--color-text);
+        font-family: var(--typography-font-family);
+        font-size: var(--typography-font-size);
+        font-weight: var(--typography-font-weight);
+        line-height: var(--typography-line-height);
+        letter-spacing: var(--typography-letter-spacing);
+        gap: var(--dimension-checkbox-gap);
+      }
+
+      input[type='checkbox'] {
+        margin: var(--dimension-checkbox-margin);
+        appearance: none;
+        width: var(--dimension-checkbox-size);
+        height: var(--dimension-checkbox-size);
+        background-color: var(--color-checkbox);
+        border: var(--dimension-checkbox-border-width) solid
+          var(--color-checkbox-border);
+        border-radius: var(--dimension-checkbox-border-radius);
+        transition: var(--motion-checkbox-transition);
+
+        &:hover {
+          background-color: var(--color-checkbox-hover);
+          border-color: var(--color-checkbox-border-hover);
+        }
+
+        &:active {
+          background-color: var(--color-checkbox-active);
+          outline: solid 5px var(--color-checkbox-outline);
+          border-color: var(--color-checkbox-border-active);
+        }
+
+        &:checked {
+          background-color: var(--color-checkbox-checked);
+          border-color: var(--color-checkbox-checked);
+          ~ .checkmark {
+            fill: var(--color-checkbox-checkmark);
+            visibility: visible;
+            opacity: 1;
+          }
+
+          &:hover {
+            background-color: var(--color-checkbox-checked-hover);
+            border-color: var(--color-checkbox-checked-hover);
+          }
+          &:active {
+            background-color: var(--color-checkbox-checked-active);
+            border-color: var(--color-checkbox-checked-active);
+          }
+        }
+      }
+
+      .checkmark {
+        visibility: hidden;
+        opacity: 0;
+        transition: opacity var(--motion-checkbox-transition);
+        position: absolute;
+        height: var(--dimension-checkbox-size);
+        width: var(--dimension-checkbox-size);
+        margin-left: var(--dimension-checkbox-margin);
+      }
+    }
+
+    :host([disabled]) {
+      opacity: var(--opacity-disabled);
+      * {
+        cursor: not-allowed;
+      }
+
+      input {
+        &:hover {
+          background-color: var(--color-checkbox);
+          border-color: var(--color-checkbox-border);
+        }
+
+        &:active {
+          outline: none;
+          background-color: var(--color-checkbox);
+          border-color: var(--color-checkbox-border);
+        }
+
+        &:checked:hover {
+          background-color: var(--color-checkbox-checked);
+          border-color: var(--color-checkbox-checked);
+        }
+
+        &:checked:active {
+          background-color: var(--color-checkbox-checked);
+          border-color: var(--color-checkbox-checked);
+        }
+      }
+    }
+
+    :host([status='error']:not([disabled])) {
+      input[type='checkbox'] {
+        background-color: var(--color-checkbox-error);
+        border-color: var(--color-checkbox-border-error);
+
+        &:hover {
+          background-color: var(--color-checkbox-error-hover);
+          border-color: var(--color-checkbox-border-error-hover);
+        }
+
+        &:active {
+          background-color: var(--color-checkbox-error-active);
+          outline: solid 5px var(--color-checkbox-outline-error);
+          border-color: var(--color-checkbox-border-error-hover);
+        }
+
+        &:checked {
+          background-color: var(--color-checkbox-error-checked);
+          border-color: var(--color-checkbox-error-checked);
+          &:hover {
+            background-color: var(--color-checkbox-checked-error-hover);
+            border-color: var(--color-checkbox-checked-error-hover);
+          }
+
+          &:active {
+            background-color: var(--color-checkbox-checked-error-active);
+            border-color: var(--color-checkbox-checked-error-active);
+          }
+        }
+      }
+    }
+  `;
+e([
+  a({ type: String })
+], o.prototype, "label", 2);
+e([
+  a({ type: String })
+], o.prototype, "name", 2);
+e([
+  a({ type: String })
+], o.prototype, "value", 2);
+e([
+  a({ type: String, reflect: !0 })
+], o.prototype, "status", 2);
+e([
+  a({ type: Boolean })
+], o.prototype, "checked", 2);
+e([
+  a({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+o = e([
+  k(x)
+], o);
+export {
+  o as FhiCheckbox,
+  x as FhiCheckboxSelector
+};
+//# sourceMappingURL=fhi-checkbox.js.map

package/fhi-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fhi-checkbox.js","sources":["../../src/components/fhi-checkbox/fhi-checkbox.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiCheckboxSelector = 'fhi-checkbox';\n\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n  static readonly formAssociated = true;\n\n  @property({ type: String }) label?: string = undefined;\n  @property({ type: String }) name?: string = undefined;\n  @property({ type: String }) value: string = 'on';\n  @property({ type: String, reflect: true }) status?: 'error' | undefined;\n  @property({ type: Boolean }) checked? = false;\n  @property({ type: Boolean, reflect: true }) disabled? = false;\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this._updateFormValue();\n  }\n\n  public _handleChange(event: Event): void {\n    this.checked = (event.target as HTMLInputElement).checked;\n    this._updateFormValue();\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n      }),\n    );\n  }\n\n  public _handleInput(event: Event): void {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _updateFormValue() {\n    this._internals.setFormValue(this.checked ? this.value : null);\n  }\n\n  public formResetCallback() {\n    this.checked = false;\n    this._updateFormValue();\n  }\n\n  render() {\n    return html`\n      <label>\n        <input\n          type=\"checkbox\"\n          name=\"${ifDefined(this.name)}\"\n          value=\"${ifDefined(this.value)}\"\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this._handleChange}\n          @input=${this._handleInput}\n        />\n        <svg\n          class=\"checkmark\"\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 18 18\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M12.043 6.04295C12.4335 5.65243 13.0666 5.65243 13.4571 6.04295C13.8476 6.43348 13.8476 7.06649 13.4571 7.45702L8.95708 11.957C8.56655 12.3475 7.93354 12.3475 7.54302 11.957L5.29302 9.70702C4.90249 9.31649 4.90249 8.68348 5.29302 8.29295C5.65913 7.92684 6.23813 7.90424 6.63091 8.22459L6.70708 8.29295L8.25005 9.83592L12.043 6.04295Z\"\n          />\n        </svg>\n\n        ${this.label}\n      </label>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --typography-font-family: var(--fhi-font-family-default);\n      --typography-font-size: var(--fhi-typography-body-medium-font-size);\n      --typography-font-weight: var(--fhi-typography-body-medium-font-weight);\n      --typography-line-height: var(--fhi-typography-body-medium-line-height);\n      --typography-letter-spacing: var(\n        --fhi-typography-body-medium-letter-spacing\n      );\n\n      --color-text: var(--fhi-color-neutral-text-default);\n      --color-checkbox-checkmark: var(--fhi-color-neutral-text-inverted);\n      --color-checkbox: var(--fhi-color-neutral-background-default);\n      --color-checkbox-border: var(--fhi-color-neutral-border-default);\n      --color-checkbox-hover: var(--fhi-color-accent-background-subtle);\n      --color-checkbox-border-hover: var(--fhi-color-accent-border-strong);\n      --color-checkbox-border-active: var(--fhi-color-accent-border-strong);\n      --color-checkbox-active: var(--fhi-color-accent-surface-default);\n      --color-checkbox-checked: var(--fhi-color-neutral-base-default);\n      --color-checkbox-checked-hover: var(--fhi-color-accent-base-hover);\n      --color-checkbox-checked-active: var(--fhi-color-accent-base-active);\n      --color-checkbox-error: var(--fhi-color-danger-background-default);\n      --color-checkbox-border-error: var(--fhi-color-danger-border-default);\n      --color-checkbox-error-hover: var(--fhi-color-danger-background-subtle);\n      --color-checkbox-border-error-hover: var(\n        --fhi-color-danger-border-strong\n      );\n      --color-checkbox-error-active: var(--fhi-color-danger-surface-default);\n      --color-checkbox-error-checked: var(--fhi-color-danger-base-default);\n      --color-checkbox-checked-error-hover: var(--fhi-color-danger-base-hover);\n      --color-checkbox-checked-error-active: var(\n        --fhi-color-danger-base-active\n      );\n      --color-checkbox-outline: var(--fhi-color-accent-surface-hover);\n      --color-checkbox-outline-error: var(--fhi-color-danger-surface-hover);\n\n      --dimension-checkbox-gap: var(--fhi-spacing-050);\n      --dimension-checkbox-border-radius: var(--fhi-border-radius-050);\n      --dimension-checkbox-border-width: var(--fhi-dimension-border-width);\n      --dimension-checkbox-size: 1.125rem;\n      --dimension-checkbox-margin: 3px;\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n      --motion-checkbox-transition: var(--fhi-motion-ease-default)\n        var(--fhi-motion-duration-quick);\n    }\n\n    :host {\n      display: flex;\n      align-items: center;\n      width: max-content;\n\n      label {\n        align-items: center;\n        display: flex;\n        position: relative;\n        color: var(--color-text);\n        font-family: var(--typography-font-family);\n        font-size: var(--typography-font-size);\n        font-weight: var(--typography-font-weight);\n        line-height: var(--typography-line-height);\n        letter-spacing: var(--typography-letter-spacing);\n        gap: var(--dimension-checkbox-gap);\n      }\n\n      input[type='checkbox'] {\n        margin: var(--dimension-checkbox-margin);\n        appearance: none;\n        width: var(--dimension-checkbox-size);\n        height: var(--dimension-checkbox-size);\n        background-color: var(--color-checkbox);\n        border: var(--dimension-checkbox-border-width) solid\n          var(--color-checkbox-border);\n        border-radius: var(--dimension-checkbox-border-radius);\n        transition: var(--motion-checkbox-transition);\n\n        &:hover {\n          background-color: var(--color-checkbox-hover);\n          border-color: var(--color-checkbox-border-hover);\n        }\n\n        &:active {\n          background-color: var(--color-checkbox-active);\n          outline: solid 5px var(--color-checkbox-outline);\n          border-color: var(--color-checkbox-border-active);\n        }\n\n        &:checked {\n          background-color: var(--color-checkbox-checked);\n          border-color: var(--color-checkbox-checked);\n          ~ .checkmark {\n            fill: var(--color-checkbox-checkmark);\n            visibility: visible;\n            opacity: 1;\n          }\n\n          &:hover {\n            background-color: var(--color-checkbox-checked-hover);\n            border-color: var(--color-checkbox-checked-hover);\n          }\n          &:active {\n            background-color: var(--color-checkbox-checked-active);\n            border-color: var(--color-checkbox-checked-active);\n          }\n        }\n      }\n\n      .checkmark {\n        visibility: hidden;\n        opacity: 0;\n        transition: opacity var(--motion-checkbox-transition);\n        position: absolute;\n        height: var(--dimension-checkbox-size);\n        width: var(--dimension-checkbox-size);\n        margin-left: var(--dimension-checkbox-margin);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      * {\n        cursor: not-allowed;\n      }\n\n      input {\n        &:hover {\n          background-color: var(--color-checkbox);\n          border-color: var(--color-checkbox-border);\n        }\n\n        &:active {\n          outline: none;\n          background-color: var(--color-checkbox);\n          border-color: var(--color-checkbox-border);\n        }\n\n        &:checked:hover {\n          background-color: var(--color-checkbox-checked);\n          border-color: var(--color-checkbox-checked);\n        }\n\n        &:checked:active {\n          background-color: var(--color-checkbox-checked);\n          border-color: var(--color-checkbox-checked);\n        }\n      }\n    }\n\n    :host([status='error']:not([disabled])) {\n      input[type='checkbox'] {\n        background-color: var(--color-checkbox-error);\n        border-color: var(--color-checkbox-border-error);\n\n        &:hover {\n          background-color: var(--color-checkbox-error-hover);\n          border-color: var(--color-checkbox-border-error-hover);\n        }\n\n        &:active {\n          background-color: var(--color-checkbox-error-active);\n          outline: solid 5px var(--color-checkbox-outline-error);\n          border-color: var(--color-checkbox-border-error-hover);\n        }\n\n        &:checked {\n          background-color: var(--color-checkbox-error-checked);\n          border-color: var(--color-checkbox-error-checked);\n          &:hover {\n            background-color: var(--color-checkbox-checked-error-hover);\n            border-color: var(--color-checkbox-checked-error-hover);\n          }\n\n          &:active {\n            background-color: var(--color-checkbox-checked-error-active);\n            border-color: var(--color-checkbox-checked-error-active);\n          }\n        }\n      }\n    }\n  `;\n}\n"],"names":["FhiCheckboxSelector","FhiCheckbox","LitElement","event","html","ifDefined","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAsB;AAG5B,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAY1C,cAAc;AACZ,UAAA,GAV0B,KAAA,QAAiB,QACjB,KAAA,OAAgB,QAChB,KAAA,QAAgB,MAEf,KAAA,UAAW,IACI,KAAA,WAAY,IAMtD,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,iBAAA;AAAA,EACP;AAAA,EAEO,cAAcC,GAAoB;AACvC,SAAK,UAAWA,EAAM,OAA4B,SAClD,KAAK,iBAAA,GACL,KAAK;AAAA,MACH,IAAI,MAAM,UAAU;AAAA,QAClB,SAAS;AAAA,MAAA,CACV;AAAA,IAAA;AAAA,EAEL;AAAA,EAEO,aAAaA,GAAoB;AACtC,IAAAA,EAAM,gBAAA,GACN,KAAK;AAAA,MACH,IAAI,MAAM,SAAS;AAAA,QACjB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,mBAAmB;AACzB,SAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;AAAA,EAC/D;AAAA,EAEO,oBAAoB;AACzB,SAAK,UAAU,IACf,KAAK,iBAAA;AAAA,EACP;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA,kBAIOC,EAAU,KAAK,IAAI,CAAC;AAAA,mBACnBA,EAAU,KAAK,KAAK,CAAC;AAAA,sBAClB,KAAK,QAAQ;AAAA,qBACd,KAAK,OAAO;AAAA,oBACb,KAAK,aAAa;AAAA,mBACnB,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAc1B,KAAK,KAAK;AAAA;AAAA;AAAA,EAGlB;AAsLF;AApQaJ,EACK,iBAAiB;AADtBA,EAgFJ,SAASK;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA7EYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfP,EAGiB,WAAA,SAAA,CAAA;AACAM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfP,EAIiB,WAAA,QAAA,CAAA;AACAM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GALfP,EAKiB,WAAA,SAAA,CAAA;AACeM,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BP,EAMgC,WAAA,UAAA,CAAA;AACdM,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAPhBP,EAOkB,WAAA,WAAA,CAAA;AACeM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAR/BP,EAQiC,WAAA,YAAA,CAAA;AARjCA,IAANM,EAAA;AAAA,EADNE,EAAcT,CAAmB;AAAA,GACrBC,CAAA;"}

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

@@ -1,4 +1,4 @@
-import { i as p, n as c, a as w, x as a, t as f } from "./property-WH20NVyT.js";
+import { i as p, n as c, a as w, x as a, t as f } from "./property-DYwjZ69W.js";
 var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (h, r, s, o) => {
   for (var t = o > 1 ? void 0 : o ? m(r, s) : r, i = h.length - 1, n; i >= 0; i--)
     (n = h[i]) && (t = (o ? n(r, s, t) : n(t)) || t);

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

@@ -1 +1 @@
-{"version":3,"file":"fhi-icon-arrow-down-left.js","sources":["../../src/components/icons/fhi-icon-arrow-down-left.component.ts"],"sourcesContent":["\n/*\n  This file is auto-generated by generate-icon-components.js. Do not edit it manually.\n*/\nimport { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const FhiIconArrowDownLeftSelector = \"fhi-icon-arrow-down-left\";\n\n@customElement(FhiIconArrowDownLeftSelector)\nexport class FhiIconArrowDownLeft extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M16.526 6.418a.75.75 0 0 1 1.056 1.056l-.052.056-8.72 8.72H17a.75.75 0 0 1 0 1.5H7a.75.75 0 0 1-.75-.75V7a.75.75 0 1 1 1.5 0v8.19l8.72-8.72z\"/></svg>\n    `;\n  }\n      \n  static styles = css`\n    :host {\n      display: flex;\n      max-height: min-content;\n      max-width: min-content;\n    }\n  `;\n  }\n"],"names":["FhiIconArrowDownLeftSelector","FhiIconArrowDownLeft","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA+B;AAGrC,IAAMC,IAAN,cAAmCC,EAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAAA;AAW7H;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA4B;AAAA,GAC9BC,CAAA;"}
+{"version":3,"file":"fhi-icon-arrow-down-left.js","sources":["../../src/components/icons/fhi-icon-arrow-down-left.component.ts"],"sourcesContent":["\n/*\n  This file is auto-generated by generate-icon-components.js. Do not edit it manually.\n*/\nimport { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const FhiIconArrowDownLeftSelector = \"fhi-icon-arrow-down-left\";\n\n@customElement(FhiIconArrowDownLeftSelector)\nexport class FhiIconArrowDownLeft extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M16.526 6.418a.75.75 0 0 1 1.056 1.056l-.052.056-8.72 8.72H17a.75.75 0 0 1 0 1.5H7a.75.75 0 0 1-.75-.75V7a.75.75 0 1 1 1.5 0v8.19l8.72-8.72z\"/></svg>\n    `;\n  }\n      \n  static styles = css`\n    :host {\n      display: flex;\n      max-height: min-content;\n      max-width: min-content;\n    }\n  `;\n  }\n"],"names":["FhiIconArrowDownLeftSelector","FhiIconArrowDownLeft","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA+B;AAGrC,IAAMC,IAAN,cAAmCC,EAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAE7H;AASA;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA4B;AAAA,GAC9BC,CAAA;"}

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

@@ -1,4 +1,4 @@
-import { i as p, n as c, a as w, x as a, t as g } from "./property-WH20NVyT.js";
+import { i as p, n as c, a as w, x as a, t as g } from "./property-DYwjZ69W.js";
 var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, h = (l, e, i, o) => {
   for (var t = o > 1 ? void 0 : o ? f(e, i) : e, s = l.length - 1, n; s >= 0; s--)
     (n = l[s]) && (t = (o ? n(e, i, t) : n(t)) || t);

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

@@ -1 +1 @@
-{"version":3,"file":"fhi-icon-arrow-down-right.js","sources":["../../src/components/icons/fhi-icon-arrow-down-right.component.ts"],"sourcesContent":["\n/*\n  This file is auto-generated by generate-icon-components.js. Do not edit it manually.\n*/\nimport { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const FhiIconArrowDownRightSelector = \"fhi-icon-arrow-down-right\";\n\n@customElement(FhiIconArrowDownRightSelector)\nexport class FhiIconArrowDownRight extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M6.47 6.47a.75.75 0 0 1 1.004-.052l.056.052 8.72 8.72V7a.75.75 0 0 1 1.5 0v10a.75.75 0 0 1-.75.75H7a.75.75 0 0 1 0-1.5h8.19L6.47 7.53l-.052-.056A.75.75 0 0 1 6.47 6.47\"/></svg>\n    `;\n  }\n      \n  static styles = css`\n    :host {\n      display: flex;\n      max-height: min-content;\n      max-width: min-content;\n    }\n  `;\n  }\n"],"names":["FhiIconArrowDownRightSelector","FhiIconArrowDownRight","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAAgC;AAGtC,IAAMC,IAAN,cAAoCC,EAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAAA;AAW7H;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA6B;AAAA,GAC/BC,CAAA;"}
+{"version":3,"file":"fhi-icon-arrow-down-right.js","sources":["../../src/components/icons/fhi-icon-arrow-down-right.component.ts"],"sourcesContent":["\n/*\n  This file is auto-generated by generate-icon-components.js. Do not edit it manually.\n*/\nimport { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const FhiIconArrowDownRightSelector = \"fhi-icon-arrow-down-right\";\n\n@customElement(FhiIconArrowDownRightSelector)\nexport class FhiIconArrowDownRight extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M6.47 6.47a.75.75 0 0 1 1.004-.052l.056.052 8.72 8.72V7a.75.75 0 0 1 1.5 0v10a.75.75 0 0 1-.75.75H7a.75.75 0 0 1 0-1.5h8.19L6.47 7.53l-.052-.056A.75.75 0 0 1 6.47 6.47\"/></svg>\n    `;\n  }\n      \n  static styles = css`\n    :host {\n      display: flex;\n      max-height: min-content;\n      max-width: min-content;\n    }\n  `;\n  }\n"],"names":["FhiIconArrowDownRightSelector","FhiIconArrowDownRight","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAAgC;AAGtC,IAAMC,IAAN,cAAoCC,EAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAE7H;AASA;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA6B;AAAA,GAC/BC,CAAA;"}

package/fhi-icon-arrow-down.js

@@ -1,4 +1,4 @@
-import { i as p, n as c, a as w, x as a, t as v } from "./property-WH20NVyT.js";
+import { i as p, n as c, a as w, x as a, t as v } from "./property-DYwjZ69W.js";
 var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (h, e, s, o) => {
   for (var t = o > 1 ? void 0 : o ? m(e, s) : e, i = h.length - 1, n; i >= 0; i--)
     (n = h[i]) && (t = (o ? n(e, s, t) : n(t)) || t);

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\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"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,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAAA;AAW7H;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,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\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"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,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAE7H;AASA;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAAwB;AAAA,GAC1BC,CAAA;"}

package/fhi-icon-arrow-left.js

@@ -1,4 +1,4 @@
-import { i as p, n as c, a, x as f, t as w } from "./property-WH20NVyT.js";
+import { i as p, n as c, a, x as f, t as w } from "./property-DYwjZ69W.js";
 var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, l = (h, r, s, o) => {
   for (var t = o > 1 ? void 0 : o ? m(r, s) : r, i = h.length - 1, n; i >= 0; i--)
     (n = h[i]) && (t = (o ? n(r, s, t) : n(t)) || t);

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\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"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,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAAA;AAW7H;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,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\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"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,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAE7H;AASA;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAAwB;AAAA,GAC1BC,CAAA;"}

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

@@ -1,4 +1,4 @@
-import { i as c, n as a, a as p, x as f, t as w } from "./property-WH20NVyT.js";
+import { i as c, n as a, a as p, x as f, t as w } from "./property-DYwjZ69W.js";
 var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, h = (n, r, i, o) => {
   for (var t = o > 1 ? void 0 : o ? m(r, i) : r, s = n.length - 1, l; s >= 0; s--)
     (l = n[s]) && (t = (o ? l(r, i, t) : l(t)) || t);

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

@@ -1 +1 @@
-{"version":3,"file":"fhi-icon-arrow-right-left.js","sources":["../../src/components/icons/fhi-icon-arrow-right-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 FhiIconArrowRightLeftSelector = \"fhi-icon-arrow-right-left\";\n\n@customElement(FhiIconArrowRightLeftSelector)\nexport class FhiIconArrowRightLeft extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M7.47 12.47a.75.75 0 0 1 1.06 1.06l-2.72 2.72H20a.75.75 0 0 1 0 1.5H5.81l2.72 2.72.052.056a.75.75 0 0 1-1.056 1.056l-.056-.052-4-4a.75.75 0 0 1 0-1.06zm8-10a.75.75 0 0 1 1.004-.052l.056.052 4 4 .052.056a.75.75 0 0 1-.052 1.004l-4 4a.75.75 0 1 1-1.06-1.06l2.72-2.72H4a.75.75 0 0 1 0-1.5h14.19l-2.72-2.72-.052-.056a.75.75 0 0 1 .052-1.004\"/></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":["FhiIconArrowRightLeftSelector","FhiIconArrowRightLeft","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAAgC;AAGtC,IAAMC,IAAN,cAAoCC,EAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAAA;AAW7H;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA6B;AAAA,GAC/BC,CAAA;"}
+{"version":3,"file":"fhi-icon-arrow-right-left.js","sources":["../../src/components/icons/fhi-icon-arrow-right-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 FhiIconArrowRightLeftSelector = \"fhi-icon-arrow-right-left\";\n\n@customElement(FhiIconArrowRightLeftSelector)\nexport class FhiIconArrowRightLeft extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M7.47 12.47a.75.75 0 0 1 1.06 1.06l-2.72 2.72H20a.75.75 0 0 1 0 1.5H5.81l2.72 2.72.052.056a.75.75 0 0 1-1.056 1.056l-.056-.052-4-4a.75.75 0 0 1 0-1.06zm8-10a.75.75 0 0 1 1.004-.052l.056.052 4 4 .052.056a.75.75 0 0 1-.052 1.004l-4 4a.75.75 0 1 1-1.06-1.06l2.72-2.72H4a.75.75 0 0 1 0-1.5h14.19l-2.72-2.72-.052-.056a.75.75 0 0 1 .052-1.004\"/></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":["FhiIconArrowRightLeftSelector","FhiIconArrowRightLeft","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAAgC;AAGtC,IAAMC,IAAN,cAAoCC,EAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAE7H;AASA;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA6B;AAAA,GAC/BC,CAAA;"}

package/fhi-icon-arrow-right.js

@@ -1,4 +1,4 @@
-import { i as p, n as c, a, x as w, t as g } from "./property-WH20NVyT.js";
+import { i as p, n as c, a, x as w, t as g } from "./property-DYwjZ69W.js";
 var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (l, e, i, o) => {
   for (var t = o > 1 ? void 0 : o ? f(e, i) : e, s = l.length - 1, h; s >= 0; s--)
     (h = l[s]) && (t = (o ? h(e, i, t) : h(t)) || t);

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

@@ -1 +1 @@
-{"version":3,"file":"fhi-icon-arrow-right.js","sources":["../../src/components/icons/fhi-icon-arrow-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 FhiIconArrowRightSelector = \"fhi-icon-arrow-right\";\n\n@customElement(FhiIconArrowRightSelector)\nexport class FhiIconArrowRight extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M11.47 4.47a.75.75 0 0 1 1.004-.052l.056.052 7 7 .052.056a.75.75 0 0 1 0 .948l-.052.056-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72-.052-.056a.75.75 0 0 1 .052-1.004\"/></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":["FhiIconArrowRightSelector","FhiIconArrowRight","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA4B;AAGlC,IAAMC,IAAN,cAAgCC,EAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAAA;AAW7H;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAAyB;AAAA,GAC3BC,CAAA;"}
+{"version":3,"file":"fhi-icon-arrow-right.js","sources":["../../src/components/icons/fhi-icon-arrow-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 FhiIconArrowRightSelector = \"fhi-icon-arrow-right\";\n\n@customElement(FhiIconArrowRightSelector)\nexport class FhiIconArrowRight extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M11.47 4.47a.75.75 0 0 1 1.004-.052l.056.052 7 7 .052.056a.75.75 0 0 1 0 .948l-.052.056-7 7a.75.75 0 1 1-1.06-1.06l5.72-5.72H5a.75.75 0 0 1 0-1.5h12.19l-5.72-5.72-.052-.056a.75.75 0 0 1 .052-1.004\"/></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":["FhiIconArrowRightSelector","FhiIconArrowRight","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA4B;AAGlC,IAAMC,IAAN,cAAgCC,EAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAE7H;AASA;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAAyB;AAAA,GAC3BC,CAAA;"}

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

@@ -1,4 +1,4 @@
-import { i as h, n as a, a as c, x as w, t as v } from "./property-WH20NVyT.js";
+import { i as h, n as a, a as c, x as w, t as v } from "./property-DYwjZ69W.js";
 var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, l = (p, e, s, o) => {
   for (var t = o > 1 ? void 0 : o ? f(e, s) : e, i = p.length - 1, n; i >= 0; i--)
     (n = p[i]) && (t = (o ? n(e, s, t) : n(t)) || t);

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

@@ -1 +1 @@
-{"version":3,"file":"fhi-icon-arrow-up-down.js","sources":["../../src/components/icons/fhi-icon-arrow-up-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 FhiIconArrowUpDownSelector = \"fhi-icon-arrow-up-down\";\n\n@customElement(FhiIconArrowUpDownSelector)\nexport class FhiIconArrowUpDown extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M6.25 20V5.81L3.53 8.53a.75.75 0 1 1-1.06-1.06l4-4 .056-.052a.75.75 0 0 1 1.004.052l4 4 .052.056a.75.75 0 0 1-1.056 1.056l-.056-.052-2.72-2.72V20a.75.75 0 0 1-1.5 0m10-16a.75.75 0 0 1 1.5 0v14.19l2.72-2.72a.75.75 0 0 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4-.052-.056a.75.75 0 0 1 1.056-1.056l.056.052 2.72 2.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":["FhiIconArrowUpDownSelector","FhiIconArrowUpDown","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA6B;AAGnC,IAAMC,IAAN,cAAiCC,EAAW;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAAA;AAW7H;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA0B;AAAA,GAC5BC,CAAA;"}
+{"version":3,"file":"fhi-icon-arrow-up-down.js","sources":["../../src/components/icons/fhi-icon-arrow-up-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 FhiIconArrowUpDownSelector = \"fhi-icon-arrow-up-down\";\n\n@customElement(FhiIconArrowUpDownSelector)\nexport class FhiIconArrowUpDown extends LitElement {\n  @property({ type: String }) color: string = \"currentcolor\";\n\n  @property({ type: Number }) size: number = 24;\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this.size}\" height=\"${this.size}\" fill=\"${this.color}\"><path d=\"M6.25 20V5.81L3.53 8.53a.75.75 0 1 1-1.06-1.06l4-4 .056-.052a.75.75 0 0 1 1.004.052l4 4 .052.056a.75.75 0 0 1-1.056 1.056l-.056-.052-2.72-2.72V20a.75.75 0 0 1-1.5 0m10-16a.75.75 0 0 1 1.5 0v14.19l2.72-2.72a.75.75 0 0 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4-.052-.056a.75.75 0 0 1 1.056-1.056l.056.052 2.72 2.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":["FhiIconArrowUpDownSelector","FhiIconArrowUpDown","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAA6B;AAGnC,IAAMC,IAAN,cAAiCC,EAAW;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GACuB,KAAA,QAAgB,gBAEhB,KAAA,OAAe;AAAA,EAAA;AAAA,EAE3C,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,IAAI,aAAa,KAAK,IAAI,WAAW,KAAK,KAAK;AAAA;AAAA,EAE7H;AASA;AAlBWF,EAWJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAVYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GADfL,EACiB,WAAA,SAAA,CAAA;AAEAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAHfL,EAGiB,WAAA,QAAA,CAAA;AAHjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAA0B;AAAA,GAC5BC,CAAA;"}

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

@@ -1,4 +1,4 @@
-import { i as c, n as l, a, x as f, t as w } from "./property-WH20NVyT.js";
+import { i as c, n as l, a, x as f, t as w } from "./property-DYwjZ69W.js";
 var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, p = (h, r, s, o) => {
   for (var t = o > 1 ? void 0 : o ? m(r, s) : r, i = h.length - 1, n; i >= 0; i--)
     (n = h[i]) && (t = (o ? n(r, s, t) : n(t)) || t);