@folkehelseinstituttet/designsystem 0.39.0 → 0.40.1

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, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n/**\n * ## FHI Button\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs}\n *\n * The `<fhi-button>` component is used to create interactive buttons in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<button>` element to ensure consistent styling and behavior across your application.\n *\n * @tag fhi-button\n * @element fhi-button\n *\n * @slot - The content of the button. This should be pure text, an icon or both.\n */\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * Sets the color of the button.\n   *\n   * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#color-farge}\n   *\n   * @reflect\n   * @type {'accent' | 'neutral' | 'danger'}\n   */\n  @property({ type: String, reflect: true }) color:\n    | 'accent'\n    | 'neutral'\n    | 'danger' = 'accent';\n\n  /**\n   *\n   * Sets the button variant. The variant determines the button's visual style and emphasis.\n   *\n   * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#variant}\n   *\n   * @reflect\n   * @type {'strong' | 'subtle' | 'outlined' | 'text'}\n   */\n  @property({ type: String, reflect: true }) variant:\n    | 'strong'\n    | 'subtle'\n    | 'outlined'\n    | 'text' = 'strong';\n\n  /**\n   * Sets the size of the button to one of the predefined options.\n   *\n   * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse}\n   *\n   * @reflect\n   * @type {'large' | 'medium' | 'small'}\n   */\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  /**\n   * Disables the button. This changes its appearance and makes it non-interactive.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Styles the button for icon-only content.\n   *\n   * If you only have an icon as the child of the button, then you should set this property to `true`.\n   *\n   * @deprecated This property is deprecated and will be removed in a future release. The button will automatically detect if it only contains an icon and apply the appropriate styling.\n   *\n   * @type {boolean}\n   */\n  @property({ type: Boolean, attribute: 'icon-only' })\n  iconOnly: boolean = false;\n\n  /**\n   * Sets the button's type. This determines the button's behavior when used within a form.\n   * The predefined types conform to standard HTML button types.\n   *\n   * For more information about button types, see: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n   * @type {'button' | 'submit' | 'reset'}\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  protected update(_changedProperties: PropertyValues): void {\n    // If a falsy value is provided, default to 'accent'.\n    if (_changedProperties.has('color')) {\n      if (!this.color) {\n        this.color = 'accent';\n      }\n    }\n\n    // If a falsy value is provided, default to 'strong'.\n    if (_changedProperties.has('variant')) {\n      if (!this.variant) {\n        this.variant = 'strong';\n      }\n    }\n\n    // If an invalid value is provided, default to 'medium'.\n    if (_changedProperties.has('size')) {\n      if (!this.size) {\n        this.size = 'medium';\n      }\n    }\n\n    if (_changedProperties.has('iconOnly')) {\n      if (this.getAttribute('icon-only') !== null) {\n        console.warn(\n          \"The 'iconOnly' property is deprecated and will be removed in a future release. The button automatically detects if it only contains an icon and applies the appropriate styling.\",\n        );\n      }\n    }\n\n    super.update(_changedProperties);\n  }\n\n  /**\n   * Programmatically clicks the button.\n   */\n  public click(): void {\n    this._handleClick();\n  }\n\n  private _handleClick(event?: MouseEvent | KeyboardEvent): void {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (this.disabled) {\n      return;\n    }\n\n    this._dispatchClickEvent();\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 _dispatchClickEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `click`.\n     * This event is dispatched when the button is clicked, either via mouse or keyboard interaction.\n     * */\n    this.dispatchEvent(\n      new MouseEvent('click', { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleKeyup(event: KeyboardEvent): void {\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      this._handleClick(event);\n\n      const target = event.target as HTMLElement | null;\n      target?.blur();\n      target?.focus();\n    }\n  }\n\n  private _handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      this._handleClick(event);\n    }\n  }\n\n  private _handleSelectStart(): boolean {\n    return false;\n  }\n\n  private _getIconSize(): string {\n    switch (this.size) {\n      case 'small':\n        return '1.25rem';\n      case 'medium':\n      case 'large':\n      default:\n        return '1.5rem';\n    }\n  }\n\n  private _handleSlotChange(event: Event): void {\n    const nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n    const validNodes = nodes.filter(\n      node =>\n        node.nodeType === Node.ELEMENT_NODE ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n    );\n\n    if (validNodes.length === 0) {\n      return;\n    }\n\n    const firstNode: Node = validNodes[0];\n\n    // if the first node is an icon, style it.\n    if (\n      firstNode.nodeType === Node.ELEMENT_NODE &&\n      (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const firstIcon = firstNode as HTMLElement;\n\n      if (this.iconOnly || validNodes.length === 1) {\n        if (!this.iconOnly) {\n          this.iconOnly = true;\n        }\n\n        firstIcon.setAttribute('size', this._getIconSize());\n        return;\n      }\n\n      if (this.size != 'small') {\n        firstIcon.style.marginRight = 'var(--dimension-icon-margin-right)';\n      }\n      firstIcon.style.marginLeft = 'var(--dimension-icon-margin-left-offset)';\n      firstIcon.setAttribute('size', this._getIconSize());\n    }\n\n    const lastNode: Node = validNodes[validNodes.length - 1];\n\n    // if the last node is an icon, style it.\n    if (\n      lastNode.nodeType === Node.ELEMENT_NODE &&\n      (lastNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const lastIcon = lastNode as HTMLElement;\n\n      lastIcon.style.marginRight = 'var(--dimension-icon-margin-right-offset)';\n      if (this.size != 'small') {\n        lastIcon.style.marginLeft = 'var(--dimension-icon-margin-left)';\n      }\n      lastIcon.setAttribute('size', this._getIconSize());\n    }\n  }\n\n  render() {\n    return html`<button\n      ?disabled=${this.disabled}\n      type=${this.type}\n      @keyup=${this._handleKeyup}\n      @keydown=${this._handleKeydown}\n      @click=${this._handleClick}\n      ?data-icon-only=${this.iconOnly}\n    >\n      <div class=\"slot-container\">\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    </button>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-border-radius: var(--fhi-border-radius-full);\n      --dimension-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-padding-small: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-medium: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-large: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-small-text: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));\n\n      --dimension-padding-medium-text: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n\n      --dimension-padding-large-text: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));\n\n      /* Icon */\n      --dimension-icon-margin-left: var(--fhi-spacing-050);\n      --dimension-icon-margin-right: var(--fhi-spacing-050);\n\n      /* Adjust for the button padding when the icon is present on either side */\n      --dimension-icon-margin-left-offset: calc(-1 * var(--fhi-spacing-050));\n      --dimension-icon-margin-right-offset: calc(-1 * var(--fhi-spacing-050));\n\n      --dimension-icon-only-border-radius: var(--fhi-border-radius-full);\n\n      /* Typography */\n      --typography-font-family: var(--fhi-font-family-default);\n      --typography-label-large-font-size: var(\n        --fhi-typography-label-large-font-size\n      );\n      --typography-label-medium-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-small-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-large-font-weight: var(\n        --fhi-typography-label-large-font-weight\n      );\n      --typography-label-medium-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-small-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-large-letter-spacing: var(\n        --fhi-typography-label-large-letter-spacing\n      );\n      --typography-label-medium-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-small-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-large-line-height: var(\n        --fhi-typography-label-large-line-height\n      );\n      --typography-label-small-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n      --typography-label-medium-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n\n      /* Accent Color */\n      --color-accent-strong-background: var(--fhi-color-accent-base-default);\n      --color-accent-strong-border: var(--fhi-color-accent-base-default);\n      --color-accent-strong: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-hover: var(\n        --fhi-color-accent-base-hover\n      );\n      --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);\n      --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-active: var(\n        --fhi-color-accent-base-active\n      );\n      --color-accent-strong-border-active: var(--fhi-color-accent-base-active);\n      --color-accent-strong-active: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-border-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);\n\n      --color-accent-subtle-background: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle-border: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle: var(--fhi-color-accent-text-subtle);\n      --color-accent-subtle-background-hover: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);\n      --color-accent-subtle-hover: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-border-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-active: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-border-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-outlined-background: transparent;\n      --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);\n      --color-accent-outlined: var(--fhi-color-accent-text-subtle);\n      --color-accent-outlined-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-border-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-hover: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-border-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-active: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-disabled: transparent;\n      --color-accent-outlined-border-disabled: var(\n        --fhi-color-accent-border-subtle\n      );\n      --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-text-background: transparent;\n      --color-accent-text-border: transparent;\n      --color-accent-text: var(--fhi-color-accent-text-subtle);\n      --color-accent-text-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);\n      --color-accent-text-hover: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);\n      --color-accent-text-active: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-disabled: transparent;\n      --color-accent-text-border-disabled: transparent;\n      --color-accent-text-disabled: var(--fhi-color-accent-text-default);\n\n      /* Neutral Color */\n      --color-neutral-strong-background: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong-border: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-hover: var(\n        --fhi-color-neutral-base-hover\n      );\n      --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);\n      --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-border-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-border-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);\n\n      --color-neutral-subtle-background: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);\n      --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-subtle-background-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-border-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-border-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);\n\n      --color-neutral-outlined-background: transparent;\n      --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);\n      --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-outlined-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-disabled: transparent;\n      --color-neutral-outlined-border-disabled: var(\n        --fhi-color-neutral-border-subtle\n      );\n      --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-neutral-text-background: transparent;\n      --color-neutral-text-border: transparent;\n      --color-neutral-text: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-text-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-disabled: transparent;\n      --color-neutral-text-border-disabled: transparent;\n      --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);\n\n      /* Danger Color */\n      --color-danger-strong-background: var(--fhi-color-danger-base-default);\n      --color-danger-strong-border: var(--fhi-color-danger-base-default);\n      --color-danger-strong: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-hover: var(\n        --fhi-color-danger-base-hover\n      );\n      --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);\n      --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-active: var(\n        --fhi-color-danger-base-active\n      );\n      --color-danger-strong-border-active: var(--fhi-color-danger-base-active);\n      --color-danger-strong-active: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-border-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);\n\n      --color-danger-subtle-background: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle-border: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle: var(--fhi-color-danger-text-subtle);\n      --color-danger-subtle-background-hover: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);\n      --color-danger-subtle-hover: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-border-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-active: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-border-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-outlined-background: transparent;\n      --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);\n      --color-danger-outlined: var(--fhi-color-danger-text-subtle);\n      --color-danger-outlined-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-border-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-hover: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-border-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-active: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-disabled: transparent;\n      --color-danger-outlined-border-disabled: var(\n        --fhi-color-danger-border-subtle\n      );\n      --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-text-background: transparent;\n      --color-danger-text-border: transparent;\n      --color-danger-text: var(--fhi-color-danger-text-subtle);\n      --color-danger-text-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);\n      --color-danger-text-hover: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);\n      --color-danger-text-active: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-disabled: transparent;\n      --color-danger-text-border-disabled: transparent;\n      --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);\n\n      --motion-transition: var(--fhi-motion-duration-quick)\n        var(--fhi-motion-ease-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n    }\n\n    :host {\n      display: block;\n      width: fit-content;\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        -webkit-font-smoothing: antialiased;\n        transition: var(--motion-transition);\n        width: 100%;\n        justify-items: center;\n\n        cursor: pointer;\n        &:disabled {\n          opacity: var(--opacity-disabled);\n          cursor: not-allowed;\n        }\n      }\n\n      .slot-container {\n        display: flex;\n        align-items: center;\n        gap: 0.25rem;\n      }\n    }\n\n    :host([size='large']) button {\n      font-size: var(--typography-label-large-font-size);\n      font-weight: var(--typography-label-large-font-weight);\n      line-height: var(--typography-label-large-line-height);\n      letter-spacing: var(--typography-label-large-letter-spacing);\n      padding: var(--dimension-padding-large);\n    }\n\n    :host([size='large'][variant='text']) button {\n      padding: var(--dimension-padding-large-text);\n    }\n\n    :host([size='medium']) button {\n      font-size: var(--typography-label-medium-font-size);\n      font-weight: var(--typography-label-medium-font-weight);\n      line-height: var(--typography-label-medium-line-height);\n      letter-spacing: var(--typography-label-medium-letter-spacing);\n      padding: var(--dimension-padding-medium);\n    }\n\n    :host([size='medium'][variant='text']) button {\n      padding: var(--dimension-padding-medium-text);\n    }\n\n    :host([size='small']) button {\n      font-size: var(--typography-label-small-font-size);\n      font-weight: var(--typography-label-small-font-weight);\n      line-height: var(--typography-label-small-line-height);\n      letter-spacing: var(--typography-label-small-letter-spacing);\n      padding: var(--dimension-padding-small);\n    }\n\n    :host([size='small'][variant='text']) button {\n      padding: var(--dimension-padding-small-text);\n    }\n\n    :host([color='accent'][variant='strong']) button {\n      background-color: var(--color-accent-strong-background);\n      border-color: var(--color-accent-strong-border);\n      color: var(--color-accent-strong);\n      &:hover {\n        background-color: var(--color-accent-strong-background-hover);\n        border-color: var(--color-accent-strong-border-hover);\n        color: var(--color-accent-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-strong-background-active);\n        border-color: var(--color-accent-strong-border-active);\n        color: var(--color-accent-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-strong-background-disabled);\n        border-color: var(--color-accent-strong-border-disabled);\n        color: var(--color-accent-strong-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='subtle']) button {\n      background-color: var(--color-accent-subtle-background);\n      border-color: var(--color-accent-subtle-border);\n      color: var(--color-accent-subtle);\n      &:hover {\n        background-color: var(--color-accent-subtle-background-hover);\n        border-color: var(--color-accent-subtle-border-hover);\n        color: var(--color-accent-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-subtle-background-active);\n        border-color: var(--color-accent-subtle-border-active);\n        color: var(--color-accent-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-subtle-background-disabled);\n        border-color: var(--color-accent-subtle-border-disabled);\n        color: var(--color-accent-subtle-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='outlined']) button {\n      background-color: var(--color-accent-outlined-background);\n      border-color: var(--color-accent-outlined-border);\n      color: var(--color-accent-outlined);\n      &:hover {\n        background-color: var(--color-accent-outlined-background-hover);\n        border-color: var(--color-accent-outlined-border-hover);\n        color: var(--color-accent-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-outlined-background-active);\n        border-color: var(--color-accent-outlined-border-active);\n        color: var(--color-accent-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-outlined-background-disabled);\n        border-color: var(--color-accent-outlined-border-disabled);\n        color: var(--color-accent-outlined-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='text']) button {\n      background-color: var(--color-accent-text-background);\n      border-color: var(--color-accent-text-border);\n      color: var(--color-accent-text);\n      &:hover {\n        background-color: var(--color-accent-text-background-hover);\n        border-color: var(--color-accent-text-border-hover);\n        color: var(--color-accent-text-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-text-background-active);\n        border-color: var(--color-accent-text-border-active);\n        color: var(--color-accent-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-text-background-disabled);\n        border-color: var(--color-accent-text-border-disabled);\n        color: var(--color-accent-text-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='strong']) button {\n      background-color: var(--color-neutral-strong-background);\n      border-color: var(--color-neutral-strong-border);\n      color: var(--color-neutral-strong);\n      &:hover {\n        background-color: var(--color-neutral-strong-background-hover);\n        border-color: var(--color-neutral-strong-border-hover);\n        color: var(--color-neutral-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-strong-background-active);\n        border-color: var(--color-neutral-strong-border-active);\n        color: var(--color-neutral-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-strong-background-disabled);\n        border-color: var(--color-neutral-strong-border-disabled);\n        color: var(--color-neutral-strong-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='subtle']) button {\n      background-color: var(--color-neutral-subtle-background);\n      border-color: var(--color-neutral-subtle-border);\n      color: var(--color-neutral-subtle);\n      &:hover {\n        background-color: var(--color-neutral-subtle-background-hover);\n        border-color: var(--color-neutral-subtle-border-hover);\n        color: var(--color-neutral-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-subtle-background-active);\n        border-color: var(--color-neutral-subtle-border-active);\n        color: var(--color-neutral-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-subtle-background-disabled);\n        border-color: var(--color-neutral-subtle-border-disabled);\n        color: var(--color-neutral-subtle-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='outlined']) button {\n      background-color: var(--color-neutral-outlined-background);\n      border-color: var(--color-neutral-outlined-border);\n      color: var(--color-neutral-outlined);\n      &:hover {\n        background-color: var(--color-neutral-outlined-background-hover);\n        border-color: var(--color-neutral-outlined-border-hover);\n        color: var(--color-neutral-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-outlined-background-active);\n        border-color: var(--color-neutral-outlined-border-active);\n        color: var(--color-neutral-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-outlined-background-disabled);\n        border-color: var(--color-neutral-outlined-border-disabled);\n        color: var(--color-neutral-outlined-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='text']) button {\n      background-color: var(--color-neutral-text-background);\n      border-color: var(--color-neutral-text-border);\n      color: var(--color-neutral-text);\n      &:hover {\n        background-color: var(--color-neutral-text-background-hover);\n        border-color: var(--color-neutral-text-border-hover);\n        color: var(--color-neutral-text-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-text-background-active);\n        border-color: var(--color-neutral-text-border-active);\n        color: var(--color-neutral-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-text-background-disabled);\n        border-color: var(--color-neutral-text-border-disabled);\n        color: var(--color-neutral-text-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='strong']) button {\n      background-color: var(--color-danger-strong-background);\n      border-color: var(--color-danger-strong-border);\n      color: var(--color-danger-strong);\n      &:hover {\n        background-color: var(--color-danger-strong-background-hover);\n        border-color: var(--color-danger-strong-border-hover);\n        color: var(--color-danger-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-strong-background-active);\n        border-color: var(--color-danger-strong-border-active);\n        color: var(--color-danger-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-strong-background-disabled);\n        border-color: var(--color-danger-strong-border-disabled);\n        color: var(--color-danger-strong-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='subtle']) button {\n      background-color: var(--color-danger-subtle-background);\n      border-color: var(--color-danger-subtle-border);\n      color: var(--color-danger-subtle);\n      &:hover {\n        background-color: var(--color-danger-subtle-background-hover);\n        border-color: var(--color-danger-subtle-border-hover);\n        color: var(--color-danger-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-subtle-background-active);\n        border-color: var(--color-danger-subtle-border-active);\n        color: var(--color-danger-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-subtle-background-disabled);\n        border-color: var(--color-danger-subtle-border-disabled);\n        color: var(--color-danger-subtle-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='outlined']) button {\n      background-color: var(--color-danger-outlined-background);\n      border-color: var(--color-danger-outlined-border);\n      color: var(--color-danger-outlined);\n      &:hover {\n        background-color: var(--color-danger-outlined-background-hover);\n        border-color: var(--color-danger-outlined-border-hover);\n        color: var(--color-danger-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-outlined-background-active);\n        border-color: var(--color-danger-outlined-border-active);\n        color: var(--color-danger-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-outlined-background-disabled);\n        border-color: var(--color-danger-outlined-border-disabled);\n        color: var(--color-danger-outlined-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='text']) button {\n      background-color: var(--color-danger-text-background);\n      border-color: var(--color-danger-text-border);\n      color: var(--color-danger-text);\n      &:hover {\n        background-color: var(--color-danger-text-background-hover);\n        border-color: var(--color-danger-text-border-hover);\n        color: var(--color-danger-text-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-text-background-active);\n        border-color: var(--color-danger-text-border-active);\n        color: var(--color-danger-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-text-background-disabled);\n        border-color: var(--color-danger-text-border-disabled);\n        color: var(--color-danger-text-disabled);\n      }\n    }\n\n    button[data-icon-only] {\n      border-radius: var(--dimension-icon-only-border-radius);\n    }\n\n    :host([size='small']) button[data-icon-only] {\n      padding: calc(0.375rem - var(--fhi-dimension-border-width));\n    }\n\n    :host([size='medium']) button[data-icon-only] {\n      padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width));\n    }\n\n    :host([size='large']) button[data-icon-only] {\n      padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n    }\n  `;\n}\n"],"names":["FhiButtonSelector","FhiButton","LitElement","_changedProperties","event","_a","_b","target","validNodes","node","firstNode","firstIcon","lastNode","lastIcon","html","css","__decorateClass","property","customElement"],"mappings":"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AA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAtP2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAX9BhB,EAWgC,WAAA,SAAA,CAAA;AAcAe,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAzB9BhB,EAyBgC,WAAA,WAAA,CAAA;AAcAe,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvC9BhB,EAuCgC,WAAA,QAAA,CAAA;AAUCe,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjD/BhB,EAiDiC,WAAA,YAAA,CAAA;AAY5Ce,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,aAAa;AAAA,GA5DxChB,EA6DX,WAAA,YAAA,CAAA;AAS4Be,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtEfhB,EAsEiB,WAAA,QAAA,CAAA;AAtEjBA,IAANe,EAAA;AAAA,EADNE,EAAclB,CAAiB;AAAA,GACnBC,CAAA;"}
+{"version":3,"file":"fhi-button.js","names":[],"sources":["../../src/components/fhi-button/fhi-button.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n/**\n * ## FHI Button\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs}\n *\n * The `<fhi-button>` component is used to create interactive buttons in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<button>` element to ensure consistent styling and behavior across your application.\n *\n * @tag fhi-button\n * @element fhi-button\n *\n * @slot - The content of the button. This should be pure text, an icon or both.\n */\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * Sets the color of the button.\n   *\n   * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#color-farge}\n   *\n   * @reflect\n   * @type {'accent' | 'neutral' | 'danger'}\n   */\n  @property({ type: String, reflect: true }) color:\n    | 'accent'\n    | 'neutral'\n    | 'danger' = 'accent';\n\n  /**\n   *\n   * Sets the button variant. The variant determines the button's visual style and emphasis.\n   *\n   * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#variant}\n   *\n   * @reflect\n   * @type {'strong' | 'subtle' | 'outlined' | 'text'}\n   */\n  @property({ type: String, reflect: true }) variant:\n    | 'strong'\n    | 'subtle'\n    | 'outlined'\n    | 'text' = 'strong';\n\n  /**\n   * Sets the size of the button to one of the predefined options.\n   *\n   * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse}\n   *\n   * @reflect\n   * @type {'large' | 'medium' | 'small'}\n   */\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  /**\n   * Disables the button. This changes its appearance and makes it non-interactive.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Styles the button for icon-only content.\n   *\n   * If you only have an icon as the child of the button, then you should set this property to `true`.\n   *\n   * @deprecated This property is deprecated and will be removed in a future release. The button will automatically detect if it only contains an icon and apply the appropriate styling.\n   *\n   * @type {boolean}\n   */\n  @property({ type: Boolean, attribute: 'icon-only' })\n  iconOnly: boolean = false;\n\n  /**\n   * Sets the button's type. This determines the button's behavior when used within a form.\n   * The predefined types conform to standard HTML button types.\n   *\n   * For more information about button types, see: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n   * @type {'button' | 'submit' | 'reset'}\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  protected update(_changedProperties: PropertyValues): void {\n    // If a falsy value is provided, default to 'accent'.\n    if (_changedProperties.has('color')) {\n      if (!this.color) {\n        this.color = 'accent';\n      }\n    }\n\n    // If a falsy value is provided, default to 'strong'.\n    if (_changedProperties.has('variant')) {\n      if (!this.variant) {\n        this.variant = 'strong';\n      }\n    }\n\n    // If an invalid value is provided, default to 'medium'.\n    if (_changedProperties.has('size')) {\n      if (!this.size) {\n        this.size = 'medium';\n      }\n    }\n\n    if (_changedProperties.has('iconOnly')) {\n      if (this.getAttribute('icon-only') !== null) {\n        console.warn(\n          \"The 'iconOnly' property is deprecated and will be removed in a future release. The button automatically detects if it only contains an icon and applies the appropriate styling.\",\n        );\n      }\n    }\n\n    super.update(_changedProperties);\n  }\n\n  /**\n   * Programmatically clicks the button.\n   */\n  public click(): void {\n    this._handleClick();\n  }\n\n  private _handleClick(event?: MouseEvent | KeyboardEvent): void {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    if (this.disabled) {\n      return;\n    }\n\n    this._dispatchClickEvent();\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 _dispatchClickEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `click`.\n     * This event is dispatched when the button is clicked, either via mouse or keyboard interaction.\n     * */\n    this.dispatchEvent(\n      new MouseEvent('click', { bubbles: true, composed: true }),\n    );\n  }\n\n  private _handleKeyup(event: KeyboardEvent): void {\n    if (event.key === ' ' || event.key === 'Spacebar') {\n      this._handleClick(event);\n\n      const target = event.target as HTMLElement | null;\n      target?.blur();\n      target?.focus();\n    }\n  }\n\n  private _handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      this._handleClick(event);\n    }\n  }\n\n  private _handleSelectStart(): boolean {\n    return false;\n  }\n\n  private _getIconSize(): string {\n    switch (this.size) {\n      case 'small':\n        return '1.25rem';\n      case 'medium':\n      case 'large':\n      default:\n        return '1.5rem';\n    }\n  }\n\n  private _handleSlotChange(event: Event): void {\n    const nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n    const validNodes = nodes.filter(\n      node =>\n        node.nodeType === Node.ELEMENT_NODE ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n    );\n\n    if (validNodes.length === 0) {\n      return;\n    }\n\n    const firstNode: Node = validNodes[0];\n\n    // if the first node is an icon, style it.\n    if (\n      firstNode.nodeType === Node.ELEMENT_NODE &&\n      (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const firstIcon = firstNode as HTMLElement;\n\n      if (this.iconOnly || validNodes.length === 1) {\n        if (!this.iconOnly) {\n          this.iconOnly = true;\n        }\n\n        firstIcon.setAttribute('size', this._getIconSize());\n        return;\n      }\n\n      if (this.size != 'small') {\n        firstIcon.style.marginRight = 'var(--dimension-icon-margin-right)';\n      }\n      firstIcon.style.marginLeft = 'var(--dimension-icon-margin-left-offset)';\n      firstIcon.setAttribute('size', this._getIconSize());\n    }\n\n    const lastNode: Node = validNodes[validNodes.length - 1];\n\n    // if the last node is an icon, style it.\n    if (\n      lastNode.nodeType === Node.ELEMENT_NODE &&\n      (lastNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const lastIcon = lastNode as HTMLElement;\n\n      lastIcon.style.marginRight = 'var(--dimension-icon-margin-right-offset)';\n      if (this.size != 'small') {\n        lastIcon.style.marginLeft = 'var(--dimension-icon-margin-left)';\n      }\n      lastIcon.setAttribute('size', this._getIconSize());\n    }\n  }\n\n  render() {\n    return html`<button\n      ?disabled=${this.disabled}\n      type=${this.type}\n      @keyup=${this._handleKeyup}\n      @keydown=${this._handleKeydown}\n      @click=${this._handleClick}\n      ?data-icon-only=${this.iconOnly}\n    >\n      <div class=\"slot-container\">\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    </button>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-border-radius: var(--fhi-border-radius-full);\n      --dimension-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-padding-small: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-medium: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-large: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(\n          var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(\n              --fhi-dimension-border-width\n            )\n        );\n      --dimension-padding-small-text: calc(\n          var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));\n\n      --dimension-padding-medium-text: calc(\n          var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n\n      --dimension-padding-large-text: calc(\n          var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n        )\n        calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));\n\n      /* Icon */\n      --dimension-icon-margin-left: var(--fhi-spacing-050);\n      --dimension-icon-margin-right: var(--fhi-spacing-050);\n\n      /* Adjust for the button padding when the icon is present on either side */\n      --dimension-icon-margin-left-offset: calc(-1 * var(--fhi-spacing-050));\n      --dimension-icon-margin-right-offset: calc(-1 * var(--fhi-spacing-050));\n\n      --dimension-icon-only-border-radius: var(--fhi-border-radius-full);\n\n      /* Typography */\n      --typography-font-family: var(--fhi-font-family-default);\n      --typography-label-large-font-size: var(\n        --fhi-typography-label-large-font-size\n      );\n      --typography-label-medium-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-small-font-size: var(\n        --fhi-typography-label-medium-font-size\n      );\n      --typography-label-large-font-weight: var(\n        --fhi-typography-label-large-font-weight\n      );\n      --typography-label-medium-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-small-font-weight: var(\n        --fhi-typography-label-medium-font-weight\n      );\n      --typography-label-large-letter-spacing: var(\n        --fhi-typography-label-large-letter-spacing\n      );\n      --typography-label-medium-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-small-letter-spacing: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n      --typography-label-large-line-height: var(\n        --fhi-typography-label-large-line-height\n      );\n      --typography-label-small-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n      --typography-label-medium-line-height: var(\n        --fhi-typography-label-medium-line-height\n      );\n\n      /* Accent Color */\n      --color-accent-strong-background: var(--fhi-color-accent-base-default);\n      --color-accent-strong-border: var(--fhi-color-accent-base-default);\n      --color-accent-strong: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-hover: var(\n        --fhi-color-accent-base-hover\n      );\n      --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);\n      --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-active: var(\n        --fhi-color-accent-base-active\n      );\n      --color-accent-strong-border-active: var(--fhi-color-accent-base-active);\n      --color-accent-strong-active: var(--fhi-color-accent-text-inverted);\n      --color-accent-strong-background-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-border-disabled: var(\n        --fhi-color-accent-base-default\n      );\n      --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);\n\n      --color-accent-subtle-background: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle-border: var(--fhi-color-accent-surface-default);\n      --color-accent-subtle: var(--fhi-color-accent-text-subtle);\n      --color-accent-subtle-background-hover: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);\n      --color-accent-subtle-hover: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-border-active: var(\n        --fhi-color-accent-surface-active\n      );\n      --color-accent-subtle-active: var(--fhi-color-accent-text-default);\n      --color-accent-subtle-background-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-border-disabled: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-outlined-background: transparent;\n      --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);\n      --color-accent-outlined: var(--fhi-color-accent-text-subtle);\n      --color-accent-outlined-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-border-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-outlined-hover: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-border-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-outlined-active: var(--fhi-color-accent-text-default);\n      --color-accent-outlined-background-disabled: transparent;\n      --color-accent-outlined-border-disabled: var(\n        --fhi-color-accent-border-subtle\n      );\n      --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);\n\n      --color-accent-text-background: transparent;\n      --color-accent-text-border: transparent;\n      --color-accent-text: var(--fhi-color-accent-text-subtle);\n      --color-accent-text-background-hover: var(\n        --fhi-color-accent-surface-default\n      );\n      --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);\n      --color-accent-text-hover: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-active: var(\n        --fhi-color-accent-surface-hover\n      );\n      --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);\n      --color-accent-text-active: var(--fhi-color-accent-text-default);\n      --color-accent-text-background-disabled: transparent;\n      --color-accent-text-border-disabled: transparent;\n      --color-accent-text-disabled: var(--fhi-color-accent-text-default);\n\n      /* Neutral Color */\n      --color-neutral-strong-background: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong-border: var(--fhi-color-neutral-base-default);\n      --color-neutral-strong: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-hover: var(\n        --fhi-color-neutral-base-hover\n      );\n      --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);\n      --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-border-active: var(\n        --fhi-color-neutral-base-active\n      );\n      --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);\n      --color-neutral-strong-background-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-border-disabled: var(\n        --fhi-color-neutral-base-default\n      );\n      --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);\n\n      --color-neutral-subtle-background: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);\n      --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-subtle-background-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-border-hover: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-border-active: var(\n        --fhi-color-neutral-surface-active\n      );\n      --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-subtle-background-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-border-disabled: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);\n\n      --color-neutral-outlined-background: transparent;\n      --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);\n      --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-outlined-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-outlined-background-disabled: transparent;\n      --color-neutral-outlined-border-disabled: var(\n        --fhi-color-neutral-border-subtle\n      );\n      --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);\n\n      --color-neutral-text-background: transparent;\n      --color-neutral-text-border: transparent;\n      --color-neutral-text: var(--fhi-color-neutral-text-subtle);\n      --color-neutral-text-background-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-border-hover: var(\n        --fhi-color-neutral-surface-default\n      );\n      --color-neutral-text-hover: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-border-active: var(\n        --fhi-color-neutral-surface-hover\n      );\n      --color-neutral-text-active: var(--fhi-color-neutral-text-default);\n      --color-neutral-text-background-disabled: transparent;\n      --color-neutral-text-border-disabled: transparent;\n      --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);\n\n      /* Danger Color */\n      --color-danger-strong-background: var(--fhi-color-danger-base-default);\n      --color-danger-strong-border: var(--fhi-color-danger-base-default);\n      --color-danger-strong: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-hover: var(\n        --fhi-color-danger-base-hover\n      );\n      --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);\n      --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-active: var(\n        --fhi-color-danger-base-active\n      );\n      --color-danger-strong-border-active: var(--fhi-color-danger-base-active);\n      --color-danger-strong-active: var(--fhi-color-danger-text-inverted);\n      --color-danger-strong-background-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-border-disabled: var(\n        --fhi-color-danger-base-default\n      );\n      --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);\n\n      --color-danger-subtle-background: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle-border: var(--fhi-color-danger-surface-default);\n      --color-danger-subtle: var(--fhi-color-danger-text-subtle);\n      --color-danger-subtle-background-hover: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);\n      --color-danger-subtle-hover: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-border-active: var(\n        --fhi-color-danger-surface-active\n      );\n      --color-danger-subtle-active: var(--fhi-color-danger-text-default);\n      --color-danger-subtle-background-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-border-disabled: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-outlined-background: transparent;\n      --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);\n      --color-danger-outlined: var(--fhi-color-danger-text-subtle);\n      --color-danger-outlined-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-border-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-outlined-hover: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-border-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-outlined-active: var(--fhi-color-danger-text-default);\n      --color-danger-outlined-background-disabled: transparent;\n      --color-danger-outlined-border-disabled: var(\n        --fhi-color-danger-border-subtle\n      );\n      --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);\n\n      --color-danger-text-background: transparent;\n      --color-danger-text-border: transparent;\n      --color-danger-text: var(--fhi-color-danger-text-subtle);\n      --color-danger-text-background-hover: var(\n        --fhi-color-danger-surface-default\n      );\n      --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);\n      --color-danger-text-hover: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-active: var(\n        --fhi-color-danger-surface-hover\n      );\n      --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);\n      --color-danger-text-active: var(--fhi-color-danger-text-default);\n      --color-danger-text-background-disabled: transparent;\n      --color-danger-text-border-disabled: transparent;\n      --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);\n\n      --motion-transition: var(--fhi-motion-duration-quick)\n        var(--fhi-motion-ease-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n    }\n\n    :host {\n      display: block;\n      width: fit-content;\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        -webkit-font-smoothing: antialiased;\n        transition: var(--motion-transition);\n        width: 100%;\n        justify-items: center;\n\n        cursor: pointer;\n        &:disabled {\n          opacity: var(--opacity-disabled);\n          cursor: not-allowed;\n        }\n      }\n\n      .slot-container {\n        display: flex;\n        align-items: center;\n        gap: 0.25rem;\n      }\n    }\n\n    :host([size='large']) button {\n      font-size: var(--typography-label-large-font-size);\n      font-weight: var(--typography-label-large-font-weight);\n      line-height: var(--typography-label-large-line-height);\n      letter-spacing: var(--typography-label-large-letter-spacing);\n      padding: var(--dimension-padding-large);\n    }\n\n    :host([size='large'][variant='text']) button {\n      padding: var(--dimension-padding-large-text);\n    }\n\n    :host([size='medium']) button {\n      font-size: var(--typography-label-medium-font-size);\n      font-weight: var(--typography-label-medium-font-weight);\n      line-height: var(--typography-label-medium-line-height);\n      letter-spacing: var(--typography-label-medium-letter-spacing);\n      padding: var(--dimension-padding-medium);\n    }\n\n    :host([size='medium'][variant='text']) button {\n      padding: var(--dimension-padding-medium-text);\n    }\n\n    :host([size='small']) button {\n      font-size: var(--typography-label-small-font-size);\n      font-weight: var(--typography-label-small-font-weight);\n      line-height: var(--typography-label-small-line-height);\n      letter-spacing: var(--typography-label-small-letter-spacing);\n      padding: var(--dimension-padding-small);\n    }\n\n    :host([size='small'][variant='text']) button {\n      padding: var(--dimension-padding-small-text);\n    }\n\n    :host([color='accent'][variant='strong']) button {\n      background-color: var(--color-accent-strong-background);\n      border-color: var(--color-accent-strong-border);\n      color: var(--color-accent-strong);\n      &:hover {\n        background-color: var(--color-accent-strong-background-hover);\n        border-color: var(--color-accent-strong-border-hover);\n        color: var(--color-accent-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-strong-background-active);\n        border-color: var(--color-accent-strong-border-active);\n        color: var(--color-accent-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-strong-background-disabled);\n        border-color: var(--color-accent-strong-border-disabled);\n        color: var(--color-accent-strong-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='subtle']) button {\n      background-color: var(--color-accent-subtle-background);\n      border-color: var(--color-accent-subtle-border);\n      color: var(--color-accent-subtle);\n      &:hover {\n        background-color: var(--color-accent-subtle-background-hover);\n        border-color: var(--color-accent-subtle-border-hover);\n        color: var(--color-accent-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-subtle-background-active);\n        border-color: var(--color-accent-subtle-border-active);\n        color: var(--color-accent-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-subtle-background-disabled);\n        border-color: var(--color-accent-subtle-border-disabled);\n        color: var(--color-accent-subtle-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='outlined']) button {\n      background-color: var(--color-accent-outlined-background);\n      border-color: var(--color-accent-outlined-border);\n      color: var(--color-accent-outlined);\n      &:hover {\n        background-color: var(--color-accent-outlined-background-hover);\n        border-color: var(--color-accent-outlined-border-hover);\n        color: var(--color-accent-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-outlined-background-active);\n        border-color: var(--color-accent-outlined-border-active);\n        color: var(--color-accent-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-outlined-background-disabled);\n        border-color: var(--color-accent-outlined-border-disabled);\n        color: var(--color-accent-outlined-disabled);\n      }\n    }\n\n    :host([color='accent'][variant='text']) button {\n      background-color: var(--color-accent-text-background);\n      border-color: var(--color-accent-text-border);\n      color: var(--color-accent-text);\n      &:hover {\n        background-color: var(--color-accent-text-background-hover);\n        border-color: var(--color-accent-text-border-hover);\n        color: var(--color-accent-text-hover);\n      }\n      &:active {\n        background-color: var(--color-accent-text-background-active);\n        border-color: var(--color-accent-text-border-active);\n        color: var(--color-accent-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-accent-text-background-disabled);\n        border-color: var(--color-accent-text-border-disabled);\n        color: var(--color-accent-text-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='strong']) button {\n      background-color: var(--color-neutral-strong-background);\n      border-color: var(--color-neutral-strong-border);\n      color: var(--color-neutral-strong);\n      &:hover {\n        background-color: var(--color-neutral-strong-background-hover);\n        border-color: var(--color-neutral-strong-border-hover);\n        color: var(--color-neutral-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-strong-background-active);\n        border-color: var(--color-neutral-strong-border-active);\n        color: var(--color-neutral-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-strong-background-disabled);\n        border-color: var(--color-neutral-strong-border-disabled);\n        color: var(--color-neutral-strong-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='subtle']) button {\n      background-color: var(--color-neutral-subtle-background);\n      border-color: var(--color-neutral-subtle-border);\n      color: var(--color-neutral-subtle);\n      &:hover {\n        background-color: var(--color-neutral-subtle-background-hover);\n        border-color: var(--color-neutral-subtle-border-hover);\n        color: var(--color-neutral-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-subtle-background-active);\n        border-color: var(--color-neutral-subtle-border-active);\n        color: var(--color-neutral-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-subtle-background-disabled);\n        border-color: var(--color-neutral-subtle-border-disabled);\n        color: var(--color-neutral-subtle-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='outlined']) button {\n      background-color: var(--color-neutral-outlined-background);\n      border-color: var(--color-neutral-outlined-border);\n      color: var(--color-neutral-outlined);\n      &:hover {\n        background-color: var(--color-neutral-outlined-background-hover);\n        border-color: var(--color-neutral-outlined-border-hover);\n        color: var(--color-neutral-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-outlined-background-active);\n        border-color: var(--color-neutral-outlined-border-active);\n        color: var(--color-neutral-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-outlined-background-disabled);\n        border-color: var(--color-neutral-outlined-border-disabled);\n        color: var(--color-neutral-outlined-disabled);\n      }\n    }\n\n    :host([color='neutral'][variant='text']) button {\n      background-color: var(--color-neutral-text-background);\n      border-color: var(--color-neutral-text-border);\n      color: var(--color-neutral-text);\n      &:hover {\n        background-color: var(--color-neutral-text-background-hover);\n        border-color: var(--color-neutral-text-border-hover);\n        color: var(--color-neutral-text-hover);\n      }\n      &:active {\n        background-color: var(--color-neutral-text-background-active);\n        border-color: var(--color-neutral-text-border-active);\n        color: var(--color-neutral-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-neutral-text-background-disabled);\n        border-color: var(--color-neutral-text-border-disabled);\n        color: var(--color-neutral-text-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='strong']) button {\n      background-color: var(--color-danger-strong-background);\n      border-color: var(--color-danger-strong-border);\n      color: var(--color-danger-strong);\n      &:hover {\n        background-color: var(--color-danger-strong-background-hover);\n        border-color: var(--color-danger-strong-border-hover);\n        color: var(--color-danger-strong-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-strong-background-active);\n        border-color: var(--color-danger-strong-border-active);\n        color: var(--color-danger-strong-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-strong-background-disabled);\n        border-color: var(--color-danger-strong-border-disabled);\n        color: var(--color-danger-strong-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='subtle']) button {\n      background-color: var(--color-danger-subtle-background);\n      border-color: var(--color-danger-subtle-border);\n      color: var(--color-danger-subtle);\n      &:hover {\n        background-color: var(--color-danger-subtle-background-hover);\n        border-color: var(--color-danger-subtle-border-hover);\n        color: var(--color-danger-subtle-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-subtle-background-active);\n        border-color: var(--color-danger-subtle-border-active);\n        color: var(--color-danger-subtle-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-subtle-background-disabled);\n        border-color: var(--color-danger-subtle-border-disabled);\n        color: var(--color-danger-subtle-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='outlined']) button {\n      background-color: var(--color-danger-outlined-background);\n      border-color: var(--color-danger-outlined-border);\n      color: var(--color-danger-outlined);\n      &:hover {\n        background-color: var(--color-danger-outlined-background-hover);\n        border-color: var(--color-danger-outlined-border-hover);\n        color: var(--color-danger-outlined-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-outlined-background-active);\n        border-color: var(--color-danger-outlined-border-active);\n        color: var(--color-danger-outlined-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-outlined-background-disabled);\n        border-color: var(--color-danger-outlined-border-disabled);\n        color: var(--color-danger-outlined-disabled);\n      }\n    }\n\n    :host([color='danger'][variant='text']) button {\n      background-color: var(--color-danger-text-background);\n      border-color: var(--color-danger-text-border);\n      color: var(--color-danger-text);\n      &:hover {\n        background-color: var(--color-danger-text-background-hover);\n        border-color: var(--color-danger-text-border-hover);\n        color: var(--color-danger-text-hover);\n      }\n      &:active {\n        background-color: var(--color-danger-text-background-active);\n        border-color: var(--color-danger-text-border-active);\n        color: var(--color-danger-text-active);\n      }\n      &:disabled {\n        background-color: var(--color-danger-text-background-disabled);\n        border-color: var(--color-danger-text-border-disabled);\n        color: var(--color-danger-text-disabled);\n      }\n    }\n\n    button[data-icon-only] {\n      border-radius: var(--dimension-icon-only-border-radius);\n    }\n\n    :host([size='small']) button[data-icon-only] {\n      padding: calc(0.375rem - var(--fhi-dimension-border-width));\n    }\n\n    :host([size='medium']) button[data-icon-only] {\n      padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width));\n    }\n\n    :host([size='large']) button[data-icon-only] {\n      padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n    }\n  `;\n}\n"],"mappings":"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"}

package/fhi-checkbox.js

@@ -1,43 +1,44 @@
-import { i as b, n as a, a as v, b as s, t as k } from "./property-B2Ico5CW.js";
-import { o as d } from "./if-defined-B_sR6Mtk.js";
-var p = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (r, t, i, h) => {
-  for (var e = h > 1 ? void 0 : h ? u(t, i) : t, l = r.length - 1, n; l >= 0; l--)
-    (n = r[l]) && (e = (h ? n(t, i, e) : n(e)) || e);
-  return h && e && p(t, i, e), e;
-};
-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(r) {
-    this.checked = r.target.checked, this._updateFormValue(), r.stopPropagation(), this._dispatchChangeEvent();
-  }
-  _handleInput(r) {
-    r.stopPropagation(), this._dispatchInputEvent();
-  }
-  _updateFormValue() {
-    this._internals.setFormValue(this.checked ? this.value : null);
-  }
-  _dispatchChangeEvent() {
-    this.dispatchEvent(new Event("change", { bubbles: !0 }));
-  }
-  _dispatchInputEvent() {
-    this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 }));
-  }
-  formResetCallback() {
-    this.checked = !1, this._updateFormValue();
-  }
-  render() {
-    return s`
+import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
+import { t as o } from "./if-defined-Dl-W5B5_.js";
+//#region src/components/fhi-checkbox/fhi-checkbox.component.ts
+var s = "fhi-checkbox", c = class extends r {
+	static {
+		this.formAssociated = !0;
+	}
+	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(e) {
+		this.checked = e.target.checked, this._updateFormValue(), e.stopPropagation(), this._dispatchChangeEvent();
+	}
+	_handleInput(e) {
+		e.stopPropagation(), this._dispatchInputEvent();
+	}
+	_updateFormValue() {
+		this._internals.setFormValue(this.checked ? this.value : null);
+	}
+	_dispatchChangeEvent() {
+		this.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	_dispatchInputEvent() {
+		this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	formResetCallback() {
+		this.checked = !1, this._updateFormValue();
+	}
+	render() {
+		return a`
       <label>
         <input
           type="checkbox"
-          name="${d(this.name)}"
-          value="${d(this.value)}"
+          name="${o(this.name)}"
+          value="${o(this.value)}"
           ?disabled=${this.disabled}
           ?checked=${this.checked}
           @change=${this._handleChange}
@@ -58,10 +59,9 @@ let o = class extends v {
         ${this.label}
       </label>
     `;
-  }
-};
-o.formAssociated = !0;
-o.styles = b`
+	}
+	static {
+		this.styles = t`
     :host {
       --typography-font-family: var(--fhi-font-family-default);
       --typography-font-size: var(--fhi-typography-body-medium-font-size);
@@ -243,29 +243,16 @@ o.styles = b`
       }
     }
   `;
-c([
-  a({ type: String })
-], o.prototype, "label", 2);
-c([
-  a({ type: String })
-], o.prototype, "name", 2);
-c([
-  a({ type: String })
-], o.prototype, "value", 2);
-c([
-  a({ type: String, reflect: !0 })
-], o.prototype, "status", 2);
-c([
-  a({ type: Boolean })
-], o.prototype, "checked", 2);
-c([
-  a({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-o = c([
-  k(x)
-], o);
-export {
-  o as FhiCheckbox,
-  x as FhiCheckboxSelector
+	}
 };
-//# sourceMappingURL=fhi-checkbox.js.map
+i([e({ type: String })], c.prototype, "label", void 0), i([e({ type: String })], c.prototype, "name", void 0), i([e({ type: String })], c.prototype, "value", void 0), i([e({
+	type: String,
+	reflect: !0
+})], c.prototype, "status", void 0), i([e({ type: Boolean })], c.prototype, "checked", void 0), i([e({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), c = i([n(s)], c);
+//#endregion
+export { c as FhiCheckbox, s as FhiCheckboxSelector };
+
+//# sourceMappingURL=fhi-checkbox.js.map

package/fhi-checkbox.js.map

@@ -1 +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/**\n * ## FHI Checkbox\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs}\n *\n * The `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\n * It allows users to make binary choices, such as selecting or deselecting an option.\n *\n * @tag fhi-checkbox\n * @element fhi-checkbox\n */\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n  /** @internal */\n  static readonly formAssociated = true;\n\n  /**\n   * The text label assigned to and displayed next to the checkbox.\n   * You should always provide a label.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.\n   * @type {string}\n   */\n  @property({ type: String }) name?: string = undefined;\n\n  /**\n   * The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.\n   * @type {string}\n   */\n  @property({ type: String }) value: string = 'on';\n\n  /**\n   * Sets the visual status of the checkbox. There is currently only one status available: `error`.\n   * The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.\n   * @reflect\n   * @type {'error' | undefined}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' | undefined;\n\n  /**\n   * Whether the checkbox is checked or not.\n   * @type {boolean}\n   */\n  @property({ type: Boolean }) checked? = false;\n\n  /**\n   * Disables the checkbox. This changes its appearance and makes it non-interactive.\n   * @reflect\n   * @type {boolean}\n   */\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  private _handleChange(event: Event): void {\n    this.checked = (event.target as HTMLInputElement).checked;\n    this._updateFormValue();\n\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n\n  private _handleInput(event: Event): void {\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private _updateFormValue() {\n    this._internals.setFormValue(this.checked ? this.value : null);\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the checkbox is checked or unchecked.\n     */\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the checkbox is checked or unchecked.\n     */\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\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        -webkit-font-smoothing: antialiased;\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      label,\n      input {\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":"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"}
+{"version":3,"file":"fhi-checkbox.js","names":[],"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/**\n * ## FHI Checkbox\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs}\n *\n * The `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\n * It allows users to make binary choices, such as selecting or deselecting an option.\n *\n * @tag fhi-checkbox\n * @element fhi-checkbox\n */\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n  /** @internal */\n  static readonly formAssociated = true;\n\n  /**\n   * The text label assigned to and displayed next to the checkbox.\n   * You should always provide a label.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.\n   * @type {string}\n   */\n  @property({ type: String }) name?: string = undefined;\n\n  /**\n   * The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.\n   * @type {string}\n   */\n  @property({ type: String }) value: string = 'on';\n\n  /**\n   * Sets the visual status of the checkbox. There is currently only one status available: `error`.\n   * The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.\n   * @reflect\n   * @type {'error' | undefined}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' | undefined;\n\n  /**\n   * Whether the checkbox is checked or not.\n   * @type {boolean}\n   */\n  @property({ type: Boolean }) checked? = false;\n\n  /**\n   * Disables the checkbox. This changes its appearance and makes it non-interactive.\n   * @reflect\n   * @type {boolean}\n   */\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  private _handleChange(event: Event): void {\n    this.checked = (event.target as HTMLInputElement).checked;\n    this._updateFormValue();\n\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n\n  private _handleInput(event: Event): void {\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private _updateFormValue() {\n    this._internals.setFormValue(this.checked ? this.value : null);\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the checkbox is checked or unchecked.\n     */\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the checkbox is checked or unchecked.\n     */\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\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        -webkit-font-smoothing: antialiased;\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      label,\n      input {\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"],"mappings":";;;AAIA,IAAa,IAAsB,gBAc5B,IAAA,cAA0B,EAAW;;wBAET;;CA4CjC,cAAc;EAEZ,AADA,MAAM,gBAtCqC,KAAA,eAMD,KAAA,gBAMA,qBAcJ,oBAOgB,IAMtD,KAAK,aAAa,KAAK,gBAAgB;CACzC;CAEA,oBAA0B;EAExB,AADA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB;CACxB;CAEA,cAAsB,GAAoB;EAKxC,AAJA,KAAK,UAAW,EAAM,OAA4B,SAClD,KAAK,iBAAiB,GAEtB,EAAM,gBAAgB,GACtB,KAAK,qBAAqB;CAC5B;CAEA,aAAqB,GAAoB;EAEvC,AADA,EAAM,gBAAgB,GACtB,KAAK,oBAAoB;CAC3B;CAEA,mBAA2B;EACzB,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;CAC/D;CAEA,uBAAqC;EAKnC,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CAC3D;CAEA,sBAAoC;EAKlC,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC1E;CAEA,oBAA2B;EAEzB,AADA,KAAK,UAAU,IACf,KAAK,iBAAiB;CACxB;CAEA,SAAS;EACP,OAAO,CAAI;;;;kBAIG,EAAU,KAAK,IAAI,EAAE;mBACpB,EAAU,KAAK,KAAK,EAAE;sBACnB,KAAK,SAAS;qBACf,KAAK,QAAQ;oBACd,KAAK,cAAc;mBACpB,KAAK,aAAa;;;;;;;;;;;;;;UAc3B,KAAK,MAAM;;;CAGnB;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsLrB;GAxSG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAQzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAO1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UA3C3C,EAAc,CAAmB,CAAA,GAAA,CAAA"}

package/fhi-data-table-cell.js

@@ -1,26 +1,21 @@
-import { i as d, n as s, a as f, b as c, t as p } from "./property-B2Ico5CW.js";
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, h = (e, a, r, l) => {
-  for (var t = l > 1 ? void 0 : l ? b(a, r) : a, o = e.length - 1, n; o >= 0; o--)
-    (n = e[o]) && (t = (l ? n(a, r, t) : n(t)) || t);
-  return l && t && y(a, r, t), t;
-};
-const u = "fhi-data-table-cell";
-let i = class extends f {
-  constructor() {
-    super(...arguments), this.variant = "body";
-  }
-  update(e) {
-    e.has("variant") && (this.role = this.variant === "header" ? "columnheader" : "cell"), super.update(e);
-  }
-  render() {
-    return c`
+import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
+//#region src/components/data-table/fhi-data-table-cell/fhi-data-table-cell.component.ts
+var o = "fhi-data-table-cell", s = class extends r {
+	constructor(...e) {
+		super(...e), this.variant = "body";
+	}
+	update(e) {
+		e.has("variant") && (this.role = this.variant === "header" ? "columnheader" : "cell"), super.update(e);
+	}
+	render() {
+		return a`
       <div class="cell-content">
         <slot></slot>
       </div>
     `;
-  }
-};
-i.styles = d`
+	}
+	static {
+		this.styles = t`
     :host {
       --fhi-data-table-cell-justify-content: unset;
       --fhi-data-table-cell-align-items: unset;
@@ -69,14 +64,13 @@ i.styles = d`
         var(--fhi-font-family-default);
     }
   `;
-h([
-  s({ type: String, reflect: !0 })
-], i.prototype, "variant", 2);
-i = h([
-  p(u)
-], i);
-export {
-  i as FhiDataTableCell,
-  u as FhiDataTableCellSelector
+	}
 };
-//# sourceMappingURL=fhi-data-table-cell.js.map
+i([e({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), s = i([n(o)], s);
+//#endregion
+export { s as FhiDataTableCell, o as FhiDataTableCellSelector };
+
+//# sourceMappingURL=fhi-data-table-cell.js.map

package/fhi-data-table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-data-table-cell.js","sources":["../../src/components/data-table/fhi-data-table-cell/fhi-data-table-cell.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiDataTableCellSelector = 'fhi-data-table-cell';\n\n/**\n * ## FHI Table Cell\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}\n *\n * The `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\n * It allows users to properly display data within a `<fhi-data-table-row>`.\n *\n * The `<fhi-data-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS `display: table-cell` to achieve the desired layout and styling.\n *\n * @tag fhi-data-table-cell\n * @element fhi-data-table-cell\n *\n * @slot - The content of the table cell, which can be any valid HTML content such as text, images, or other elements.\n */\n@customElement(FhiDataTableCellSelector)\nexport class FhiDataTableCell extends LitElement {\n  /**\n   * Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.\n   * @type {'header' | 'body'}\n   */\n  @property({ type: String, reflect: true })\n  variant: 'header' | 'body' = 'body';\n\n  protected update(changedProperties: PropertyValues): void {\n    if (changedProperties.has('variant')) {\n      this.role = this.variant === 'header' ? 'columnheader' : 'cell';\n    }\n\n    super.update(changedProperties);\n  }\n\n  render() {\n    return html`\n      <div class=\"cell-content\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-data-table-cell-justify-content: unset;\n      --fhi-data-table-cell-align-items: unset;\n\n      --fhi-data-table-cell-border-style: unset;\n      --fhi-data-table-cell-border-width: unset;\n      --fhi-data-table-cell-border-color: unset;\n    }\n\n    :host {\n      --fhi-data-table-cell-justify-content: start;\n      --fhi-data-table-cell-align-items: center;\n\n      display: table-cell;\n      vertical-align: middle;\n\n      padding: var(--fhi-spacing-150);\n      color: var(--fhi-color-neutral-text-default);\n\n      border-style: var(--fhi-data-table-cell-border-style);\n      border-width: var(--fhi-data-table-cell-border-width);\n      border-color: var(--fhi-data-table-cell-border-color);\n\n      .cell-content {\n        display: flex;\n        align-items: var(--fhi-data-table-cell-align-items);\n        justify-content: var(--fhi-data-table-cell-justify-content);\n      }\n    }\n\n    :host([variant='body']) {\n      letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n\n      font: var(--fhi-typography-body-medium-font-weight)\n        var(--fhi-typography-body-medium-font-size) /\n        var(--fhi-typography-body-medium-line-height)\n        var(--fhi-font-family-default);\n    }\n\n    :host([variant='header']) {\n      letter-spacing: var(--fhi-typography-title-medium-letter-spacing);\n\n      font: var(--fhi-typography-title-medium-font-weight)\n        var(--fhi-typography-title-medium-font-size) /\n        var(--fhi-typography-title-medium-line-height)\n        var(--fhi-font-family-default);\n    }\n  `;\n}\n"],"names":["FhiDataTableCellSelector","FhiDataTableCell","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAA2B;AAkBjC,IAAMC,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAML,KAAA,UAA6B;AAAA,EAAA;AAAA,EAEnB,OAAOC,GAAyC;AACxD,IAAIA,EAAkB,IAAI,SAAS,MACjC,KAAK,OAAO,KAAK,YAAY,WAAW,iBAAiB,SAG3D,MAAM,OAAOA,CAAiB;AAAA,EAChC;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AAmDF;AAzEaH,EAwBJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAlBhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAL9BN,EAMX,WAAA,WAAA,CAAA;AANWA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAwB;AAAA,GAC1BC,CAAA;"}
+{"version":3,"file":"fhi-data-table-cell.js","names":[],"sources":["../../src/components/data-table/fhi-data-table-cell/fhi-data-table-cell.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiDataTableCellSelector = 'fhi-data-table-cell';\n\n/**\n * ## FHI Table Cell\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}\n *\n * The `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\n * It allows users to properly display data within a `<fhi-data-table-row>`.\n *\n * The `<fhi-data-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS `display: table-cell` to achieve the desired layout and styling.\n *\n * @tag fhi-data-table-cell\n * @element fhi-data-table-cell\n *\n * @slot - The content of the table cell, which can be any valid HTML content such as text, images, or other elements.\n */\n@customElement(FhiDataTableCellSelector)\nexport class FhiDataTableCell extends LitElement {\n  /**\n   * Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.\n   * @type {'header' | 'body'}\n   */\n  @property({ type: String, reflect: true })\n  variant: 'header' | 'body' = 'body';\n\n  protected update(changedProperties: PropertyValues): void {\n    if (changedProperties.has('variant')) {\n      this.role = this.variant === 'header' ? 'columnheader' : 'cell';\n    }\n\n    super.update(changedProperties);\n  }\n\n  render() {\n    return html`\n      <div class=\"cell-content\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-data-table-cell-justify-content: unset;\n      --fhi-data-table-cell-align-items: unset;\n\n      --fhi-data-table-cell-border-style: unset;\n      --fhi-data-table-cell-border-width: unset;\n      --fhi-data-table-cell-border-color: unset;\n    }\n\n    :host {\n      --fhi-data-table-cell-justify-content: start;\n      --fhi-data-table-cell-align-items: center;\n\n      display: table-cell;\n      vertical-align: middle;\n\n      padding: var(--fhi-spacing-150);\n      color: var(--fhi-color-neutral-text-default);\n\n      border-style: var(--fhi-data-table-cell-border-style);\n      border-width: var(--fhi-data-table-cell-border-width);\n      border-color: var(--fhi-data-table-cell-border-color);\n\n      .cell-content {\n        display: flex;\n        align-items: var(--fhi-data-table-cell-align-items);\n        justify-content: var(--fhi-data-table-cell-justify-content);\n      }\n    }\n\n    :host([variant='body']) {\n      letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n\n      font: var(--fhi-typography-body-medium-font-weight)\n        var(--fhi-typography-body-medium-font-size) /\n        var(--fhi-typography-body-medium-line-height)\n        var(--fhi-font-family-default);\n    }\n\n    :host([variant='header']) {\n      letter-spacing: var(--fhi-typography-title-medium-letter-spacing);\n\n      font: var(--fhi-typography-title-medium-font-weight)\n        var(--fhi-typography-title-medium-font-size) /\n        var(--fhi-typography-title-medium-line-height)\n        var(--fhi-font-family-default);\n    }\n  `;\n}\n"],"mappings":";;AAGA,IAAa,IAA2B,uBAkBjC,IAAA,cAA+B,EAAW;;8BAMlB;;CAE7B,OAAiB,GAAyC;EAKxD,AAJI,EAAkB,IAAI,SAAS,MACjC,KAAK,OAAO,KAAK,YAAY,WAAW,iBAAiB,SAG3D,MAAM,OAAO,CAAiB;CAChC;CAEA,SAAS;EACP,OAAO,CAAI;;;;;CAKb;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDrB;GApEG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,UAN1C,EAAc,CAAwB,CAAA,GAAA,CAAA"}

package/fhi-data-table-row.js

@@ -1,55 +1,34 @@
-import { i as c, n as f, a as u, b as v, t as w } from "./property-B2Ico5CW.js";
-import { e as p } from "./base-D76d76ww.js";
-/**
- * @license
- * Copyright 2021 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function y(t) {
-  return (e, l) => {
-    const { slot: r, selector: a } = {}, i = "slot" + (r ? `[name=${r}]` : ":not([name])");
-    return p(e, l, { get() {
-      var h;
-      const o = (h = this.renderRoot) == null ? void 0 : h.querySelector(i), d = (o == null ? void 0 : o.assignedElements(t)) ?? [];
-      return a === void 0 ? d : d.filter((b) => b.matches(a));
-    } });
-  };
-}
-var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (t, e, l, r) => {
-  for (var a = r > 1 ? void 0 : r ? g(e, l) : e, i = t.length - 1, o; i >= 0; i--)
-    (o = t[i]) && (a = (r ? o(e, l, a) : o(a)) || a);
-  return r && a && m(e, l, a), a;
-};
-const C = "fhi-data-table-row";
-let s = class extends u {
-  constructor() {
-    super(...arguments), this.variant = "body";
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.role = "row";
-  }
-  update(t) {
-    t.has("variant") && this.variant !== "body" && this.variant !== "header" && (this.variant = "body"), super.update(t);
-  }
-  updated(t) {
-    t.has("variant") && this.setCellVariants(), super.updated(t);
-  }
-  handleSlotChange() {
-    this.setCellVariants();
-  }
-  setCellVariants() {
-    this.slotElements.forEach((t) => {
-      if (t.tagName.toLowerCase() === "fhi-data-table-cell") {
-        const e = t;
-        e.variant !== this.variant && (e.variant = this.variant);
-      }
-    });
-  }
-  render() {
-    return v`<slot @slotchange=${this.handleSlotChange}></slot>`;
-  }
-};
-s.styles = c`
+import { a as e, d as t, n, o as r, s as i, t as a, u as o } from "./decorate-DFXIek-k.js";
+//#region src/components/data-table/fhi-data-table-row/fhi-data-table-row.component.ts
+var s = "fhi-data-table-row", c = class extends i {
+	constructor(...e) {
+		super(...e), this.variant = "body";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.role = "row";
+	}
+	update(e) {
+		e.has("variant") && this.variant !== "body" && this.variant !== "header" && (this.variant = "body"), super.update(e);
+	}
+	updated(e) {
+		e.has("variant") && this.setCellVariants(), super.updated(e);
+	}
+	handleSlotChange() {
+		this.setCellVariants();
+	}
+	setCellVariants() {
+		this.slotElements.forEach((e) => {
+			if (e.tagName.toLowerCase() === "fhi-data-table-cell") {
+				let t = e;
+				t.variant !== this.variant && (t.variant = this.variant);
+			}
+		});
+	}
+	render() {
+		return o`<slot @slotchange=${this.handleSlotChange}></slot>`;
+	}
+	static {
+		this.styles = t`
     :host {
       --fhi-data-table-row-border-style: unset;
       --fhi-data-table-row-border-width: unset;
@@ -82,17 +61,13 @@ s.styles = c`
       }
     }
   `;
-n([
-  f({ type: String, reflect: !0 })
-], s.prototype, "variant", 2);
-n([
-  y()
-], s.prototype, "slotElements", 2);
-s = n([
-  w(C)
-], s);
-export {
-  s as FhiDataTableRow,
-  C as FhiDataTableRowSelector
+	}
 };
-//# sourceMappingURL=fhi-data-table-row.js.map
+a([e({
+	type: String,
+	reflect: !0
+})], c.prototype, "variant", void 0), a([n()], c.prototype, "slotElements", void 0), c = a([r(s)], c);
+//#endregion
+export { c as FhiDataTableRow, s as FhiDataTableRowSelector };
+
+//# sourceMappingURL=fhi-data-table-row.js.map