@folkehelseinstituttet/designsystem 0.40.4 → 0.40.6

package/fhi-radio.js

@@ -97,69 +97,7 @@ var c = "fhi-radio", l = class extends i {
 	static {
 		this.styles = t`
     :host {
-      --motion-radio-transition: var(--fhi-motion-ease-default)
-        var(--fhi-motion-duration-quick);
-
-      --color-radio-label: var(--fhi-color-neutral-text-default);
-      --color-radio-border: var(--fhi-color-neutral-border-default);
-      --color-radio-background: var(--fhi-color-neutral-background-default);
-
-      --color-radio-border-hover: var(--fhi-color-accent-border-strong);
-      --color-radio-background-hover: var(--fhi-color-accent-background-subtle);
-
-      --color-radio-background-active: var(--fhi-color-accent-surface-default);
-
-      --color-radio-outline: var(--fhi-color-accent-surface-hover);
-
-      --typography-radio-label-font-family: var(--fhi-font-family-default);
-      -webkit-font-smoothing: antialiased;
-      --typography-radio-label-font-size: var(
-        --fhi-typography-body-medium-font-size
-      );
-
-      --typography-radio-label-font-weight: var(
-        --fhi-typography-body-medium-font-weight
-      );
-
-      --typography-radio-label-line-height: var(
-        --fhi-typography-body-medium-line-height
-      );
-      --typography-radio-label-letter-spacing: var(
-        --fhi-typography-body-medium-letter-spacing
-      );
-
-      --dimension-radio-label-gap: var(--fhi-spacing-050);
-      --dimension-radio-width: var(--fhi-spacing-250);
-      --dimension-radio-height: var(--fhi-spacing-250);
-      --dimension-radio-margin: 0.125rem;
-      --dimension-radio-border-width: var(--fhi-dimension-border-width);
-
-      --dimension-radio-dot-size: 1.125rem;
-
-      /* Checked state */
-      --dimension-radio-border-width-checked: var(
-        --fhi-dimension-border-width-active
-      );
-
-      /* Error state */
-      --color-radio-border-error: var(--fhi-color-danger-border-default);
-      --color-radio-background-error: var(
-        --fhi-color-danger-background-default
-      );
-
-      --color-radio-border-error-hover: var(--fhi-color-danger-border-strong);
-      --color-radio-background-error-hover: var(
-        --fhi-color-danger-background-subtle
-      );
-
-      --color-radio-background-error-active: var(
-        --fhi-color-danger-surface-default
-      );
-
-      --color-radio-outline-error: var(--fhi-color-danger-surface-hover);
-
-      /* Disabled state */
-      --opacity-disabled: var(--fhi-opacity-disabled);
+      --fhi-radio-color: currentcolor;
     }
 
     :host {
@@ -170,13 +108,14 @@ var c = "fhi-radio", l = class extends i {
       label {
         display: flex;
         position: relative;
-        gap: var(--dimension-radio-label-gap);
-        color: var(--color-radio-label);
-        font-family: var(--typography-radio-label-font-family);
-        font-size: var(--typography-radio-label-font-size);
-        font-weight: var(--typography-radio-label-font-weight);
-        line-height: var(--typography-radio-label-line-height);
-        letter-spacing: var(--typography-radio-label-letter-spacing);
+        gap: var(--fhi-spacing-050);
+        color: var(--fhi-radio-color);
+        font-family: var(--fhi-font-family-default);
+        -webkit-font-smoothing: antialiased;
+        font-size: var(--fhi-typography-body-medium-font-size);
+        font-weight: var(--fhi-typography-body-medium-font-weight);
+        line-height: var(--fhi-typography-body-medium-line-height);
+        letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
       }
 
       .radio-container {
@@ -186,33 +125,35 @@ var c = "fhi-radio", l = class extends i {
 
       input {
         appearance: none;
-        margin: var(--dimension-radio-margin);
-        width: var(--dimension-radio-width);
-        height: var(--dimension-radio-height);
-        background-color: var(--color-radio-background);
-        border: var(--dimension-radio-border-width) solid
-          var(--color-radio-border);
+        margin: 0.125rem;
+        width: var(--fhi-spacing-250);
+        height: var(--fhi-spacing-250);
+        background-color: var(--fhi-color-neutral-background-default);
+        border: var(--fhi-dimension-border-width) solid
+          var(--fhi-color-neutral-border-default);
         border-radius: var(--fhi-border-radius-full);
-        transition: all var(--motion-radio-transition);
+        transition: all var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
       }
 
       .radio-dot {
         visibility: hidden;
         opacity: 0;
-        transition: opacity var(--motion-radio-transition);
+        transition: opacity var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        height: var(--dimension-radio-dot-size);
-        width: var(--dimension-radio-dot-size);
+        height: 1.125rem;
+        width: 1.125rem;
       }
 
       input:checked {
-        border-width: var(--dimension-radio-border-width-checked);
+        border-width: var(--fhi-dimension-border-width-active);
         ~ .radio-dot {
           circle {
-            fill: var(--color-radio-border);
+            fill: var(--fhi-color-neutral-border-default);
           }
           visibility: visible;
           opacity: 1;
@@ -221,7 +162,7 @@ var c = "fhi-radio", l = class extends i {
     }
 
     :host([disabled]) {
-      opacity: var(--opacity-disabled);
+      opacity: var(--fhi-opacity-disabled);
       label,
       input {
         cursor: not-allowed;
@@ -230,43 +171,41 @@ var c = "fhi-radio", l = class extends i {
 
     :host(:not(:disabled)) {
       input:hover:not(:checked) {
-        border-color: var(--color-radio-border-hover);
-        background-color: var(--color-radio-background-hover);
+        border-color: var(--fhi-color-accent-border-strong);
+        background-color: var(--fhi-color-accent-background-subtle);
       }
 
       input:active:not(:checked) {
-        border-color: var(--color-radio-border-hover);
-        background-color: var(--color-radio-background-active);
+        border-color: var(--fhi-color-accent-border-strong);
+        background-color: var(--fhi-color-accent-surface-default);
         outline: var(--fhi-dimension-border-width-focus) solid
-          var(--color-radio-outline);
+          var(--fhi-color-accent-surface-hover);
       }
-    }
 
-    :host([status='error']) {
-      input {
-        border-color: var(--color-radio-border-error);
-        background-color: var(--color-radio-background-error);
-      }
+      &:host([status='error']) {
+        input {
+          border-color: var(--fhi-color-danger-border-default);
+          background-color: var(--fhi-color-danger-background-default);
+        }
 
-      input:checked {
-        ~ .radio-dot {
-          circle {
-            fill: var(--color-radio-border-error);
+        input:checked {
+          ~ .radio-dot {
+            circle {
+              fill: var(--fhi-color-danger-border-default);
+            }
           }
         }
-      }
-    }
 
-    :host([status='error']:not(:disabled)) {
-      input:hover:not(:checked) {
-        border-color: var(--color-radio-border-error-hover);
-        background-color: var(--color-radio-background-error-hover);
-      }
+        input:hover:not(:checked) {
+          border-color: var(--fhi-color-danger-border-strong);
+          background-color: var(--fhi-color-danger-background-subtle);
+        }
 
-      input:active:not(:checked) {
-        border-color: var(--color-radio-border-error-hover);
-        background-color: var(--color-radio-background-error-active);
-        outline-color: var(--color-radio-outline-error);
+        input:active:not(:checked) {
+          border-color: var(--fhi-color-danger-border-strong);
+          background-color: var(--fhi-color-danger-surface-default);
+          outline-color: var(--fhi-color-danger-surface-hover);
+        }
       }
     }
   `;

package/fhi-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-radio.js","names":[],"sources":["../../src/components/fhi-radio/fhi-radio.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiRadioSelector = 'fhi-radio';\n\n/**\n * ## FHI Radio\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-radio--docs}\n *\n * The `<fhi-radio>` component represents a single radio button.\n * It should be used within a group of options, allowing users to select one option from a set.\n *\n * @tag fhi-radio\n * @element fhi-radio\n */\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text label assigned to and displayed next to the radio.\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 radio. This is submitted with the form data as a `key` when the checkbox is checked.\n   * All `<fhi-radio>` components with the same name belong to the same group.\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true }) name?: string = undefined;\n\n  /**\n   * Sets the visual status of the radio. There is currently only one status available: `error`.\n   * The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.\n   * @reflect\n   * @type {'error' | undefined}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Disables the radio. 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   * Whether the radio button is checked or not.\n   * @type {boolean}\n   */\n  @property({ type: Boolean }) checked? = false;\n\n  /**\n   * The value of the radio. This is submitted with the form data as a `value` when the radio is checked.\n   * @type {string}\n   */\n  @property({ type: String }) value: string = 'on';\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _groupRoot: Document | HTMLFormElement;\n  private _internals: ElementInternals;\n\n  /**\n   * Indicates if the radio button is part of a form.\n   * @internal\n   */\n  public isFormElement = false;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n    this._groupRoot = document;\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._setFocusOnInput);\n\n    this.isFormElement = !!this._internals.form;\n\n    if (this.isFormElement) {\n      this._updateFormValue();\n      this._groupRoot = this._internals.form!;\n    }\n\n    // If the radio has a name then it is part of a group and needs keyboard navigation\n    if (this.name) {\n      this.addEventListener('keydown', this._handleKeyDown);\n      this._SetTabbableRadios();\n    }\n  }\n\n  public disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeyDown);\n    this.removeEventListener('focus', this._setFocusOnInput);\n  }\n\n  private _setFocusOnInput() {\n    this._input.focus();\n  }\n\n  private _getRadioGroup() {\n    return Array.from(\n      this._groupRoot.querySelectorAll<FhiRadio>(\n        `${FhiRadioSelector}[name=\"${this.name}\"]`,\n      ),\n    );\n  }\n\n  private _SetTabbableRadios() {\n    const radios = this._getRadioGroup();\n\n    radios.forEach(radio => {\n      // Only the checked radio should be tabbable\n      radio.tabIndex = radio.checked ? 0 : -1;\n    });\n\n    // If none of the radios are checked, make the first one tabbable\n    if (!radios.some(radio => radio.checked) && radios.length > 0) {\n      radios[0].tabIndex = 0;\n    }\n  }\n\n  public updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    // make sure the radio input can be programmatically toggeled. e.g by a form reset\n    if (changedProperties.has('checked')) {\n      this._input.checked = !!this.checked;\n      this._updateFormValue();\n\n      if (this.checked) {\n        this.uncheckGroupMembers();\n      }\n    }\n\n    // update the form value when the value or name input changes and the radio is already checked\n    if (changedProperties.has('value') || changedProperties.has('name')) {\n      if (this._input.checked) {\n        this._updateFormValue();\n      }\n    }\n  }\n\n  public formResetCallback(): void {\n    const radiosCheckedByDefault = this._getRadioGroup().filter(\n      radio => typeof radio.getAttribute('checked') === 'string',\n    );\n\n    if (radiosCheckedByDefault.pop() === this) {\n      this.checked = true;\n    }\n\n    this._updateFormValue();\n  }\n\n  private uncheckGroupMembers(): void {\n    const radios = this._getRadioGroup();\n\n    radios.forEach(radio => {\n      if (radio === this) {\n        return;\n      }\n\n      if (radio.isFormElement && this._groupRoot === document) {\n        return;\n      }\n\n      radio.checked = false;\n    });\n  }\n\n  private _updateFormValue(): void {\n    if (!this.isFormElement) {\n      return;\n    }\n\n    this._internals.setFormValue(this.checked ? this.value : null);\n  }\n\n  private _handleChange(event: Event): void {\n    this.checked = (event.target as HTMLInputElement).checked;\n\n    this.uncheckGroupMembers();\n\n    this._updateFormValue();\n\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n  private _handleInput(event: Event): void {\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the radio 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 radio is checked or unchecked.\n     */\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent): void {\n    const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n    if (!arrows.includes(event.key)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const radios = this._getRadioGroup();\n\n    if (radios.length < 2) {\n      return;\n    }\n\n    const currentIndex = radios.indexOf(this);\n\n    const nextIndex = currentIndex;\n    let nextRadio: FhiRadio;\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n    } else {\n      nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n    }\n\n    nextRadio.focus();\n    this.checked = false;\n    nextRadio.checked = true;\n    this._SetTabbableRadios();\n  }\n\n  render() {\n    return html`\n      <label>\n        <div class=\"radio-container\">\n          <input\n            type=\"radio\"\n            id=\"input-element\"\n            name=\"${ifDefined(this.name)}\"\n            value=\"${this.value}\"\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this._handleChange}\n            @input=${this._handleInput}\n          />\n          <svg\n            class=\"radio-dot\"\n            viewBox=\"0 0 18 18\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle r=\"6\" cx=\"9\" cy=\"9\" />\n          </svg>\n        </div>\n        ${this.label}\n      </label>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --motion-radio-transition: var(--fhi-motion-ease-default)\n        var(--fhi-motion-duration-quick);\n\n      --color-radio-label: var(--fhi-color-neutral-text-default);\n      --color-radio-border: var(--fhi-color-neutral-border-default);\n      --color-radio-background: var(--fhi-color-neutral-background-default);\n\n      --color-radio-border-hover: var(--fhi-color-accent-border-strong);\n      --color-radio-background-hover: var(--fhi-color-accent-background-subtle);\n\n      --color-radio-background-active: var(--fhi-color-accent-surface-default);\n\n      --color-radio-outline: var(--fhi-color-accent-surface-hover);\n\n      --typography-radio-label-font-family: var(--fhi-font-family-default);\n      -webkit-font-smoothing: antialiased;\n      --typography-radio-label-font-size: var(\n        --fhi-typography-body-medium-font-size\n      );\n\n      --typography-radio-label-font-weight: var(\n        --fhi-typography-body-medium-font-weight\n      );\n\n      --typography-radio-label-line-height: var(\n        --fhi-typography-body-medium-line-height\n      );\n      --typography-radio-label-letter-spacing: var(\n        --fhi-typography-body-medium-letter-spacing\n      );\n\n      --dimension-radio-label-gap: var(--fhi-spacing-050);\n      --dimension-radio-width: var(--fhi-spacing-250);\n      --dimension-radio-height: var(--fhi-spacing-250);\n      --dimension-radio-margin: 0.125rem;\n      --dimension-radio-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-radio-dot-size: 1.125rem;\n\n      /* Checked state */\n      --dimension-radio-border-width-checked: var(\n        --fhi-dimension-border-width-active\n      );\n\n      /* Error state */\n      --color-radio-border-error: var(--fhi-color-danger-border-default);\n      --color-radio-background-error: var(\n        --fhi-color-danger-background-default\n      );\n\n      --color-radio-border-error-hover: var(--fhi-color-danger-border-strong);\n      --color-radio-background-error-hover: var(\n        --fhi-color-danger-background-subtle\n      );\n\n      --color-radio-background-error-active: var(\n        --fhi-color-danger-surface-default\n      );\n\n      --color-radio-outline-error: var(--fhi-color-danger-surface-hover);\n\n      /* Disabled state */\n      --opacity-disabled: var(--fhi-opacity-disabled);\n    }\n\n    :host {\n      display: flex;\n      align-items: center;\n      width: max-content;\n\n      label {\n        display: flex;\n        position: relative;\n        gap: var(--dimension-radio-label-gap);\n        color: var(--color-radio-label);\n        font-family: var(--typography-radio-label-font-family);\n        font-size: var(--typography-radio-label-font-size);\n        font-weight: var(--typography-radio-label-font-weight);\n        line-height: var(--typography-radio-label-line-height);\n        letter-spacing: var(--typography-radio-label-letter-spacing);\n      }\n\n      .radio-container {\n        display: flex;\n        position: relative;\n      }\n\n      input {\n        appearance: none;\n        margin: var(--dimension-radio-margin);\n        width: var(--dimension-radio-width);\n        height: var(--dimension-radio-height);\n        background-color: var(--color-radio-background);\n        border: var(--dimension-radio-border-width) solid\n          var(--color-radio-border);\n        border-radius: var(--fhi-border-radius-full);\n        transition: all var(--motion-radio-transition);\n      }\n\n      .radio-dot {\n        visibility: hidden;\n        opacity: 0;\n        transition: opacity var(--motion-radio-transition);\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        height: var(--dimension-radio-dot-size);\n        width: var(--dimension-radio-dot-size);\n      }\n\n      input:checked {\n        border-width: var(--dimension-radio-border-width-checked);\n        ~ .radio-dot {\n          circle {\n            fill: var(--color-radio-border);\n          }\n          visibility: visible;\n          opacity: 1;\n        }\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      label,\n      input {\n        cursor: not-allowed;\n      }\n    }\n\n    :host(:not(:disabled)) {\n      input:hover:not(:checked) {\n        border-color: var(--color-radio-border-hover);\n        background-color: var(--color-radio-background-hover);\n      }\n\n      input:active:not(:checked) {\n        border-color: var(--color-radio-border-hover);\n        background-color: var(--color-radio-background-active);\n        outline: var(--fhi-dimension-border-width-focus) solid\n          var(--color-radio-outline);\n      }\n    }\n\n    :host([status='error']) {\n      input {\n        border-color: var(--color-radio-border-error);\n        background-color: var(--color-radio-background-error);\n      }\n\n      input:checked {\n        ~ .radio-dot {\n          circle {\n            fill: var(--color-radio-border-error);\n          }\n        }\n      }\n    }\n\n    :host([status='error']:not(:disabled)) {\n      input:hover:not(:checked) {\n        border-color: var(--color-radio-border-error-hover);\n        background-color: var(--color-radio-background-error-hover);\n      }\n\n      input:active:not(:checked) {\n        border-color: var(--color-radio-border-error-hover);\n        background-color: var(--color-radio-background-error-active);\n        outline-color: var(--color-radio-outline-error);\n      }\n    }\n  `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAmB,aAczB,IAAA,cAAuB,EAAW;;wBACN;;CAwDjC,cAAc;EAGZ,AAFA,MAAM,gBAlDqC,KAAA,eAQc,KAAA,iBAQG,KAAA,mBAON,mBAMhB,iBAMI,2BAYrB,IAIrB,KAAK,aAAa,KAAK,gBAAgB,GACvC,KAAK,aAAa;CACpB;CAEA,oBAAiC;EAa/B,AAZA,MAAM,kBAAkB,GAExB,KAAK,iBAAiB,SAAS,KAAK,gBAAgB,GAEpD,KAAK,gBAAgB,CAAC,CAAC,KAAK,WAAW,MAEnC,KAAK,kBACP,KAAK,iBAAiB,GACtB,KAAK,aAAa,KAAK,WAAW,OAIhC,KAAK,SACP,KAAK,iBAAiB,WAAW,KAAK,cAAc,GACpD,KAAK,mBAAmB;CAE5B;CAEA,uBAAoC;EAGlC,AAFA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,WAAW,KAAK,cAAc,GACvD,KAAK,oBAAoB,SAAS,KAAK,gBAAgB;CACzD;CAEA,mBAA2B;EACzB,KAAK,OAAO,MAAM;CACpB;CAEA,iBAAyB;EACvB,OAAO,MAAM,KACX,KAAK,WAAW,iBACd,GAAG,EAAiB,SAAS,KAAK,KAAK,GACzC,CACF;CACF;CAEA,qBAA6B;EAC3B,IAAM,IAAS,KAAK,eAAe;EAQnC,AANA,EAAO,SAAQ,MAAS;GAEtB,EAAM,WAAW,EAAM,UAAU,IAAI;EACvC,CAAC,GAGG,CAAC,EAAO,MAAK,MAAS,EAAM,OAAO,KAAK,EAAO,SAAS,MAC1D,EAAO,GAAG,WAAW;CAEzB;CAEA,QAAe,GAAyC;EActD,AAbA,MAAM,QAAQ,CAAiB,GAG3B,EAAkB,IAAI,SAAS,MACjC,KAAK,OAAO,UAAU,CAAC,CAAC,KAAK,SAC7B,KAAK,iBAAiB,GAElB,KAAK,WACP,KAAK,oBAAoB,KAKzB,EAAkB,IAAI,OAAO,KAAK,EAAkB,IAAI,MAAM,MAC5D,KAAK,OAAO,WACd,KAAK,iBAAiB;CAG5B;CAEA,oBAAiC;EAS/B,AAR+B,KAAK,eAAe,EAAE,QACnD,MAAS,OAAO,EAAM,aAAa,SAAS,KAAM,QAGhD,EAAuB,IAAI,MAAM,SACnC,KAAK,UAAU,KAGjB,KAAK,iBAAiB;CACxB;CAEA,sBAAoC;EAGlC,KAFoB,eAEpB,EAAO,SAAQ,MAAS;GAClB,MAAU,SAIV,EAAM,iBAAiB,KAAK,eAAe,aAI/C,EAAM,UAAU;EAClB,CAAC;CACH;CAEA,mBAAiC;EAC1B,KAAK,iBAIV,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;CAC/D;CAEA,cAAsB,GAAoB;EAQxC,AAPA,KAAK,UAAW,EAAM,OAA4B,SAElD,KAAK,oBAAoB,GAEzB,KAAK,iBAAiB,GAEtB,EAAM,gBAAgB,GACtB,KAAK,qBAAqB;CAC5B;CACA,aAAqB,GAAoB;EAEvC,AADA,EAAM,gBAAgB,GACtB,KAAK,oBAAoB;CAC3B;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,eAAuB,GAA4B;EAGjD,IAAI,CAAC;GAFW;GAAW;GAAa;GAAa;EAEhD,EAAO,SAAS,EAAM,GAAG,GAC5B;EAGF,EAAM,eAAe;EAErB,IAAM,IAAS,KAAK,eAAe;EAEnC,IAAI,EAAO,SAAS,GAClB;EAKF,IAAM,IAFe,EAAO,QAAQ,IAElB,GACd;EAWJ,AATA,AAGE,IAHE,EAAM,QAAQ,aAAa,EAAM,QAAQ,cAC/B,EAAO,MAAc,IAAI,EAAO,SAAS,IAAI,IAAY,KAEzD,EAAO,MAAc,EAAO,SAAS,IAAI,IAAI,IAAY,IAGvE,EAAU,MAAM,GAChB,KAAK,UAAU,IACf,EAAU,UAAU,IACpB,KAAK,mBAAmB;CAC1B;CAEA,SAAS;EACP,OAAO,CAAI;;;;;;oBAMK,EAAU,KAAK,IAAI,EAAE;qBACpB,KAAK,MAAM;uBACT,KAAK,QAAQ;wBACZ,KAAK,SAAS;sBAChB,KAAK,cAAc;qBACpB,KAAK,aAAa;;;;;;;;;;UAU7B,KAAK,MAAM;;;CAGnB;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+KrB;GA5aG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAQzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAQxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAMzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAM1B,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAEzB,EAAM,gBAAgB,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,UA9CxB,EAAc,CAAgB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"fhi-radio.js","names":[],"sources":["../../src/components/fhi-radio/fhi-radio.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiRadioSelector = 'fhi-radio';\n\n/**\n * ## FHI Radio\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-radio--docs}\n *\n * The `<fhi-radio>` component represents a single radio button.\n * It should be used within a group of options, allowing users to select one option from a set.\n *\n * @tag fhi-radio\n * @element fhi-radio\n */\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text label assigned to and displayed next to the radio.\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 radio. This is submitted with the form data as a `key` when the checkbox is checked.\n   * All `<fhi-radio>` components with the same name belong to the same group.\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true }) name?: string = undefined;\n\n  /**\n   * Sets the visual status of the radio. There is currently only one status available: `error`.\n   * The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.\n   * @reflect\n   * @type {'error' | undefined}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Disables the radio. 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   * Whether the radio button is checked or not.\n   * @type {boolean}\n   */\n  @property({ type: Boolean }) checked? = false;\n\n  /**\n   * The value of the radio. This is submitted with the form data as a `value` when the radio is checked.\n   * @type {string}\n   */\n  @property({ type: String }) value: string = 'on';\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _groupRoot: Document | HTMLFormElement;\n  private _internals: ElementInternals;\n\n  /**\n   * Indicates if the radio button is part of a form.\n   * @internal\n   */\n  public isFormElement = false;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n    this._groupRoot = document;\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._setFocusOnInput);\n\n    this.isFormElement = !!this._internals.form;\n\n    if (this.isFormElement) {\n      this._updateFormValue();\n      this._groupRoot = this._internals.form!;\n    }\n\n    // If the radio has a name then it is part of a group and needs keyboard navigation\n    if (this.name) {\n      this.addEventListener('keydown', this._handleKeyDown);\n      this._SetTabbableRadios();\n    }\n  }\n\n  public disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeyDown);\n    this.removeEventListener('focus', this._setFocusOnInput);\n  }\n\n  private _setFocusOnInput() {\n    this._input.focus();\n  }\n\n  private _getRadioGroup() {\n    return Array.from(\n      this._groupRoot.querySelectorAll<FhiRadio>(\n        `${FhiRadioSelector}[name=\"${this.name}\"]`,\n      ),\n    );\n  }\n\n  private _SetTabbableRadios() {\n    const radios = this._getRadioGroup();\n\n    radios.forEach(radio => {\n      // Only the checked radio should be tabbable\n      radio.tabIndex = radio.checked ? 0 : -1;\n    });\n\n    // If none of the radios are checked, make the first one tabbable\n    if (!radios.some(radio => radio.checked) && radios.length > 0) {\n      radios[0].tabIndex = 0;\n    }\n  }\n\n  public updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    // make sure the radio input can be programmatically toggeled. e.g by a form reset\n    if (changedProperties.has('checked')) {\n      this._input.checked = !!this.checked;\n      this._updateFormValue();\n\n      if (this.checked) {\n        this.uncheckGroupMembers();\n      }\n    }\n\n    // update the form value when the value or name input changes and the radio is already checked\n    if (changedProperties.has('value') || changedProperties.has('name')) {\n      if (this._input.checked) {\n        this._updateFormValue();\n      }\n    }\n  }\n\n  public formResetCallback(): void {\n    const radiosCheckedByDefault = this._getRadioGroup().filter(\n      radio => typeof radio.getAttribute('checked') === 'string',\n    );\n\n    if (radiosCheckedByDefault.pop() === this) {\n      this.checked = true;\n    }\n\n    this._updateFormValue();\n  }\n\n  private uncheckGroupMembers(): void {\n    const radios = this._getRadioGroup();\n\n    radios.forEach(radio => {\n      if (radio === this) {\n        return;\n      }\n\n      if (radio.isFormElement && this._groupRoot === document) {\n        return;\n      }\n\n      radio.checked = false;\n    });\n  }\n\n  private _updateFormValue(): void {\n    if (!this.isFormElement) {\n      return;\n    }\n\n    this._internals.setFormValue(this.checked ? this.value : null);\n  }\n\n  private _handleChange(event: Event): void {\n    this.checked = (event.target as HTMLInputElement).checked;\n\n    this.uncheckGroupMembers();\n\n    this._updateFormValue();\n\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n  private _handleInput(event: Event): void {\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the radio 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 radio is checked or unchecked.\n     */\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent): void {\n    const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n    if (!arrows.includes(event.key)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const radios = this._getRadioGroup();\n\n    if (radios.length < 2) {\n      return;\n    }\n\n    const currentIndex = radios.indexOf(this);\n\n    const nextIndex = currentIndex;\n    let nextRadio: FhiRadio;\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n    } else {\n      nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n    }\n\n    nextRadio.focus();\n    this.checked = false;\n    nextRadio.checked = true;\n    this._SetTabbableRadios();\n  }\n\n  render() {\n    return html`\n      <label>\n        <div class=\"radio-container\">\n          <input\n            type=\"radio\"\n            id=\"input-element\"\n            name=\"${ifDefined(this.name)}\"\n            value=\"${this.value}\"\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this._handleChange}\n            @input=${this._handleInput}\n          />\n          <svg\n            class=\"radio-dot\"\n            viewBox=\"0 0 18 18\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle r=\"6\" cx=\"9\" cy=\"9\" />\n          </svg>\n        </div>\n        ${this.label}\n      </label>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-radio-color: currentcolor;\n    }\n\n    :host {\n      display: flex;\n      align-items: center;\n      width: max-content;\n\n      label {\n        display: flex;\n        position: relative;\n        gap: var(--fhi-spacing-050);\n        color: var(--fhi-radio-color);\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        font-size: var(--fhi-typography-body-medium-font-size);\n        font-weight: var(--fhi-typography-body-medium-font-weight);\n        line-height: var(--fhi-typography-body-medium-line-height);\n        letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n      }\n\n      .radio-container {\n        display: flex;\n        position: relative;\n      }\n\n      input {\n        appearance: none;\n        margin: 0.125rem;\n        width: var(--fhi-spacing-250);\n        height: var(--fhi-spacing-250);\n        background-color: var(--fhi-color-neutral-background-default);\n        border: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n        border-radius: var(--fhi-border-radius-full);\n        transition: all var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n      }\n\n      .radio-dot {\n        visibility: hidden;\n        opacity: 0;\n        transition: opacity var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        height: 1.125rem;\n        width: 1.125rem;\n      }\n\n      input:checked {\n        border-width: var(--fhi-dimension-border-width-active);\n        ~ .radio-dot {\n          circle {\n            fill: var(--fhi-color-neutral-border-default);\n          }\n          visibility: visible;\n          opacity: 1;\n        }\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      label,\n      input {\n        cursor: not-allowed;\n      }\n    }\n\n    :host(:not(:disabled)) {\n      input:hover:not(:checked) {\n        border-color: var(--fhi-color-accent-border-strong);\n        background-color: var(--fhi-color-accent-background-subtle);\n      }\n\n      input:active:not(:checked) {\n        border-color: var(--fhi-color-accent-border-strong);\n        background-color: var(--fhi-color-accent-surface-default);\n        outline: var(--fhi-dimension-border-width-focus) solid\n          var(--fhi-color-accent-surface-hover);\n      }\n\n      &:host([status='error']) {\n        input {\n          border-color: var(--fhi-color-danger-border-default);\n          background-color: var(--fhi-color-danger-background-default);\n        }\n\n        input:checked {\n          ~ .radio-dot {\n            circle {\n              fill: var(--fhi-color-danger-border-default);\n            }\n          }\n        }\n\n        input:hover:not(:checked) {\n          border-color: var(--fhi-color-danger-border-strong);\n          background-color: var(--fhi-color-danger-background-subtle);\n        }\n\n        input:active:not(:checked) {\n          border-color: var(--fhi-color-danger-border-strong);\n          background-color: var(--fhi-color-danger-surface-default);\n          outline-color: var(--fhi-color-danger-surface-hover);\n        }\n      }\n    }\n  `;\n}\n"],"mappings":"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"}

package/package.json

@@ -1 +1 @@
-{"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.40.4","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
+{"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.40.6","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@folkehelseinstituttet/designsystem",
-  "version": "0.40.4",
+  "version": "0.40.6",
   "description-markup": "markdown",
   "contributions": {
     "html": {