@folkehelseinstituttet/designsystem 0.47.0 → 0.47.2

package/fhi-icon-square-check-big.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 //#region src/components/icons/fhi-icon-square-check-big.component.ts
 var o = "fhi-icon-square-check-big", s = class extends r {
 	constructor(...e) {

package/fhi-icon-square-check.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 //#region src/components/icons/fhi-icon-square-check.component.ts
 var o = "fhi-icon-square-check", s = class extends r {
 	constructor(...e) {

package/fhi-icon-square-pen.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 //#region src/components/icons/fhi-icon-square-pen.component.ts
 var o = "fhi-icon-square-pen", s = class extends r {
 	constructor(...e) {

package/fhi-icon-square-x.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 //#region src/components/icons/fhi-icon-square-x.component.ts
 var o = "fhi-icon-square-x", s = class extends r {
 	constructor(...e) {

package/fhi-icon-square.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 //#region src/components/icons/fhi-icon-square.component.ts
 var o = "fhi-icon-square", s = class extends r {
 	constructor(...e) {

package/fhi-icon-trash.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 //#region src/components/icons/fhi-icon-trash.component.ts
 var o = "fhi-icon-trash", s = class extends r {
 	constructor(...e) {

package/fhi-icon-triangle-alert.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 //#region src/components/icons/fhi-icon-triangle-alert.component.ts
 var o = "fhi-icon-triangle-alert", s = class extends r {
 	constructor(...e) {

package/fhi-icon-upload.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 //#region src/components/icons/fhi-icon-upload.component.ts
 var o = "fhi-icon-upload", s = class extends r {
 	constructor(...e) {

package/fhi-icon-user.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 //#region src/components/icons/fhi-icon-user.component.ts
 var o = "fhi-icon-user", s = class extends r {
 	constructor(...e) {

package/fhi-icon-x.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 //#region src/components/icons/fhi-icon-x.component.ts
 var o = "fhi-icon-x", s = class extends r {
 	constructor(...e) {

package/fhi-label.js

@@ -1,5 +1,5 @@
-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";
+import { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
+import { t as o } from "./if-defined-Bwi1u9Ry.js";
 //#region src/components/typography/fhi-label/fhi-label.component.ts
 var s = "fhi-label", c = class extends r {
 	constructor(...e) {

package/fhi-link.js

@@ -1,5 +1,5 @@
-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";
+import { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
+import { t as o } from "./if-defined-Bwi1u9Ry.js";
 //#region src/components/fhi-link/fhi-link.component.ts
 var s = "fhi-link", c = class extends r {
 	get rel() {

package/fhi-modal-dialog.js

@@ -1,4 +1,4 @@
-import { a as e, d as t, o as n, r, s as i, t as a, u as o } from "./decorate-DFXIek-k.js";
+import { a as e, f as t, o as n, r, s as i, t as a, u as o } from "./decorate-Cy1UktZk.js";
 import "./fhi-button.js";
 import "./fhi-icon-x.js";
 import "./fhi-headline.js";

package/fhi-radio.js

@@ -1,16 +1,23 @@
-import { a as e, d as t, o as n, r, s as i, t as a, u as o } from "./decorate-DFXIek-k.js";
-import { t as s } from "./if-defined-Dl-W5B5_.js";
+import { a as e, f as t, o as n, r, s as i, t as a, u as o } from "./decorate-Cy1UktZk.js";
+import { t as s } from "./if-defined-Bwi1u9Ry.js";
 import "./fhi-body.js";
+import { t as c } from "./live-CT8jbeEb.js";
 //#region src/components/fhi-radio/fhi-radio.component.ts
-var c = "fhi-radio", l = class extends i {
+var l = "fhi-radio", u = class extends i {
 	static {
 		this.formAssociated = !0;
 	}
+	get isFormElement() {
+		return !!this._internals.form;
+	}
+	get _groupRoot() {
+		return this._internals.form ?? document;
+	}
 	constructor() {
-		super(), this.label = void 0, this.name = void 0, this.status = void 0, this.disabled = !1, this.checked = !1, this.value = "on", this.isFormElement = !1, this._internals = this.attachInternals(), this._groupRoot = document;
+		super(), this.label = void 0, this.name = void 0, this.status = void 0, this.disabled = !1, this.checked = !1, this.value = "on", this._internals = this.attachInternals();
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.addEventListener("focus", this._setFocusOnInput), this.isFormElement = !!this._internals.form, this.isFormElement && (this._updateFormValue(), this._groupRoot = this._internals.form), this.name && (this.addEventListener("keydown", this._handleKeyDown), this._SetTabbableRadios());
+		super.connectedCallback(), this.addEventListener("focus", this._setFocusOnInput), this._updateFormValue(), this.name && (this.addEventListener("keydown", this._handleKeyDown), this._SetTabbableRadios());
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeyDown), this.removeEventListener("focus", this._setFocusOnInput);
@@ -19,7 +26,7 @@ var c = "fhi-radio", l = class extends i {
 		this._input.focus();
 	}
 	_getRadioGroup() {
-		return Array.from(this._groupRoot.querySelectorAll(`${c}[name="${this.name}"]`));
+		return Array.from(this._groupRoot.querySelectorAll(`${l}[name="${this.name}"]`));
 	}
 	_SetTabbableRadios() {
 		let e = this._getRadioGroup();
@@ -27,11 +34,15 @@ var c = "fhi-radio", l = class extends i {
 			e.tabIndex = e.checked ? 0 : -1;
 		}), !e.some((e) => e.checked) && e.length > 0 && (e[0].tabIndex = 0);
 	}
+	willUpdate(e) {
+		e.has("value") && (this.value = this.value ?? "on");
+	}
 	updated(e) {
-		super.updated(e), e.has("checked") && (this._input.checked = !!this.checked, this._updateFormValue(), this.checked && this.uncheckGroupMembers()), (e.has("value") || e.has("name")) && this._input.checked && this._updateFormValue(), (e.has("helpText") || e.has("label")) && !this.label && this.helpText && console.error("The \"help-text\" property is set, but the \"label\" property is not. It is required to provide a label when using help text.");
+		super.updated(e), e.has("checked") && (this._updateFormValue(), this.checked && this.uncheckGroupMembers()), (e.has("value") || e.has("name")) && this._input.checked && this._updateFormValue(), (e.has("helpText") || e.has("label")) && !this.label && this.helpText && console.error("The \"help-text\" property is set, but the \"label\" property is not. It is required to provide a label when using help text.");
 	}
 	formResetCallback() {
-		this._getRadioGroup().filter((e) => typeof e.getAttribute("checked") == "string").pop() === this && (this.checked = !0), this._updateFormValue();
+		let e = this._getRadioGroup().filter((e) => typeof e.getAttribute("checked") == "string");
+		this.checked = e.pop() === this, this._updateFormValue();
 	}
 	uncheckGroupMembers() {
 		this._getRadioGroup().forEach((e) => {
@@ -77,7 +88,7 @@ var c = "fhi-radio", l = class extends i {
           id="input-element"
           name="${s(this.name)}"
           value="${this.value}"
-          ?checked=${this.checked}
+          .checked=${c(this.checked ?? !1)}
           ?disabled=${this.disabled}
           @change=${this._handleChange}
           @input=${this._handleInput}
@@ -227,20 +238,20 @@ var c = "fhi-radio", l = class extends i {
   `;
 	}
 };
-a([e({ type: String })], l.prototype, "label", void 0), a([e({
+a([e({ type: String })], u.prototype, "label", void 0), a([e({
 	type: String,
 	reflect: !0
-})], l.prototype, "name", void 0), a([e({
+})], u.prototype, "name", void 0), a([e({
 	type: String,
 	reflect: !0
-})], l.prototype, "status", void 0), a([e({
+})], u.prototype, "status", void 0), a([e({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "disabled", void 0), a([e({ type: Boolean })], l.prototype, "checked", void 0), a([e({ type: String })], l.prototype, "value", void 0), a([e({
+})], u.prototype, "disabled", void 0), a([e({ type: Boolean })], u.prototype, "checked", void 0), a([e({ type: String })], u.prototype, "value", void 0), a([e({
 	type: String,
 	attribute: "help-text"
-})], l.prototype, "helpText", void 0), a([r("#input-element")], l.prototype, "_input", void 0), l = a([n(c)], l);
+})], u.prototype, "helpText", void 0), a([r("#input-element")], u.prototype, "_input", void 0), u = a([n(l)], u);
 //#endregion
-export { l as FhiRadio, c as FhiRadioSelector };
+export { u as FhiRadio, l as FhiRadioSelector };
 
 //# sourceMappingURL=fhi-radio.js.map

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\nimport '../typography/fhi-body/fhi-body.component';\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  /**\n   * The help text shown below the label.\n   * This is used to provide additional information or descriptions to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string;\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    if (changedProperties.has('helpText') || changedProperties.has('label')) {\n      if (!this.label && this.helpText) {\n        console.error(\n          'The \"help-text\" property is set, but the \"label\" property is not. It is required to provide a label when using help text.',\n        );\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      <div class=\"radio-wrapper\">\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 && html`<label for=\"input-element\">${this.label}</label>`}\n      ${this.helpText\n        ? html`<fhi-body size=\"small\" class=\"help-text\"\n            >${this.helpText}</fhi-body\n          >`\n        : ''}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-radio-color: currentcolor;\n    }\n\n    :host {\n      display: grid;\n      width: max-content;\n      height: fit-content;\n      grid-template-columns: auto auto;\n      color: var(--fhi-radio-color);\n      padding-left: 0.125rem;\n\n      .radio-wrapper {\n        display: flex;\n        position: relative;\n        height: fit-content;\n      }\n\n      label {\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      label,\n      fhi-body {\n        grid-column: 2;\n        padding-left: 6px;\n      }\n\n      input {\n        margin: 0.125rem 0 0.125rem 0;\n        appearance: none;\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        &:not(:focus-visible) {\n          outline-color: var(--fhi-color-accent-surface-hover);\n        }\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        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      .help-text {\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      * {\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          &:not(:focus-visible) {\n            outline-color: var(--fhi-color-danger-surface-hover);\n          }\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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"}
+{"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';\nimport { live } from 'lit/directives/live.js';\n\nimport '../typography/fhi-body/fhi-body.component';\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  /**\n   * The help text shown below the label.\n   * This is used to provide additional information or descriptions to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string;\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _internals: ElementInternals;\n\n  /**\n   * Indicates if the radio button is part of a form.\n   * @internal\n   */\n  public get isFormElement(): boolean {\n    return !!this._internals.form;\n  }\n\n  private get _groupRoot(): Document | HTMLFormElement {\n    return this._internals.form ?? document;\n  }\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._setFocusOnInput);\n\n    this._updateFormValue();\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  protected willUpdate(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('value')) {\n      this.value = this.value ?? 'on';\n    }\n  }\n\n  public updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('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    if (changedProperties.has('helpText') || changedProperties.has('label')) {\n      if (!this.label && this.helpText) {\n        console.error(\n          'The \"help-text\" property is set, but the \"label\" property is not. It is required to provide a label when using help text.',\n        );\n      }\n    }\n  }\n\n  public formResetCallback(): void {\n    const radiosCheckedByDefault = this._getRadioGroup().filter(\n      radio => typeof radio.getAttribute('checked') === 'string',\n    );\n\n    this.checked = radiosCheckedByDefault.pop() === this;\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      <div class=\"radio-wrapper\">\n        <input\n          type=\"radio\"\n          id=\"input-element\"\n          name=\"${ifDefined(this.name)}\"\n          value=\"${this.value}\"\n          .checked=${live(this.checked ?? false)}\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 && html`<label for=\"input-element\">${this.label}</label>`}\n      ${this.helpText\n        ? html`<fhi-body size=\"small\" class=\"help-text\"\n            >${this.helpText}</fhi-body\n          >`\n        : ''}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-radio-color: currentcolor;\n    }\n\n    :host {\n      display: grid;\n      width: max-content;\n      height: fit-content;\n      grid-template-columns: auto auto;\n      color: var(--fhi-radio-color);\n      padding-left: 0.125rem;\n\n      .radio-wrapper {\n        display: flex;\n        position: relative;\n        height: fit-content;\n      }\n\n      label {\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      label,\n      fhi-body {\n        grid-column: 2;\n        padding-left: 6px;\n      }\n\n      input {\n        margin: 0.125rem 0 0.125rem 0;\n        appearance: none;\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        &:not(:focus-visible) {\n          outline-color: var(--fhi-color-accent-surface-hover);\n        }\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        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      .help-text {\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      * {\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          &:not(:focus-visible) {\n            outline-color: var(--fhi-color-danger-surface-hover);\n          }\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":";;;;;AAOA,IAAa,IAAmB,aAczB,IAAA,cAAuB,EAAW;;wBACN;;CA4DjC,IAAW,gBAAyB;EAClC,OAAO,CAAC,CAAC,KAAK,WAAW;CAC3B;CAEA,IAAY,aAAyC;EACnD,OAAO,KAAK,WAAW,QAAQ;CACjC;CAEA,cAAc;EAEZ,AADA,MAAM,gBA9DqC,KAAA,eAQc,KAAA,iBAQG,KAAA,mBAON,mBAMhB,iBAMI,MA4B1C,KAAK,aAAa,KAAK,gBAAgB;CACzC;CAEA,oBAAiC;EAQ/B,AAPA,MAAM,kBAAkB,GAExB,KAAK,iBAAiB,SAAS,KAAK,gBAAgB,GAEpD,KAAK,iBAAiB,GAGlB,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,WAAqB,GAAyC;EAC5D,AAAI,EAAkB,IAAI,OAAO,MAC/B,KAAK,QAAQ,KAAK,SAAS;CAE/B;CAEA,QAAe,GAAyC;EAkBtD,AAjBA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,SAAS,MACjC,KAAK,iBAAiB,GAElB,KAAK,WACP,KAAK,oBAAoB,KAKzB,EAAkB,IAAI,OAAO,KAAK,EAAkB,IAAI,MAAM,MAC5D,KAAK,OAAO,WACd,KAAK,iBAAiB,IAItB,EAAkB,IAAI,UAAU,KAAK,EAAkB,IAAI,OAAO,MAChE,CAAC,KAAK,SAAS,KAAK,YACtB,QAAQ,MACN,+HACF;CAGN;CAEA,oBAAiC;EAC/B,IAAM,IAAyB,KAAK,eAAe,EAAE,QACnD,MAAS,OAAO,EAAM,aAAa,SAAS,KAAM,QACpD;EAIA,AAFA,KAAK,UAAU,EAAuB,IAAI,MAAM,MAEhD,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;;;;;kBAKG,EAAU,KAAK,IAAI,EAAE;mBACpB,KAAK,MAAM;qBACT,EAAK,KAAK,WAAW,EAAK,EAAE;sBAC3B,KAAK,SAAS;oBAChB,KAAK,cAAc;mBACpB,KAAK,aAAa;;;;;;;;;;QAU7B,KAAK,SAAS,CAAI,8BAA8B,KAAK,MAAM,UAAU;QACrE,KAAK,WACH,CAAI;eACC,KAAK,SAAS;eAEnB,GAAG;;CAEX;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgIrB;GAhZG,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,MAOzB,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAEjD,EAAM,gBAAgB,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,UArDxB,EAAc,CAAgB,CAAA,GAAA,CAAA"}

package/fhi-radio.manifest.json

@@ -1 +1 @@
-{"kind":"javascript-module","path":"src/components/fhi-radio/fhi-radio.component.ts","declarations":[{"kind":"class","description":"## FHI Radio\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-radio--docs\n\nThe `<fhi-radio>` component represents a single radio button.\nIt should be used within a group of options, allowing users to select one option from a set.","name":"FhiRadio","members":[{"kind":"method","name":"_dispatchChangeEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_dispatchInputEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_getRadioGroup","privacy":"private"},{"kind":"field","name":"_groupRoot","type":{"text":"Document | HTMLFormElement"},"privacy":"private","default":"document"},{"kind":"method","name":"_handleChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_handleInput","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_handleKeyDown","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"KeyboardEvent"}}]},{"kind":"field","name":"_input","type":{"text":"HTMLInputElement"},"privacy":"private"},{"kind":"field","name":"_internals","type":{"text":"ElementInternals"},"privacy":"private"},{"kind":"method","name":"_setFocusOnInput","privacy":"private"},{"kind":"method","name":"_SetTabbableRadios","privacy":"private"},{"kind":"method","name":"_updateFormValue","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"field","name":"checked","type":{"text":"boolean"},"default":"false","description":"Whether the radio button is checked or not.","attribute":"checked"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the radio. This changes its appearance and makes it non-interactive.","reflects":true,"attribute":"disabled"},{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"readonly":true,"default":"true"},{"kind":"method","name":"formResetCallback","privacy":"public","return":{"type":{"text":"void"}}},{"kind":"field","name":"helpText","type":{"text":"string"},"description":"The help text shown below the label.\nThis is used to provide additional information or descriptions to the user.","attribute":"help-text"},{"kind":"field","name":"label","type":{"text":"string"},"default":"undefined","description":"The text label assigned to and displayed next to the radio.\nYou should always provide a label.","attribute":"label"},{"kind":"field","name":"name","type":{"text":"string"},"default":"undefined","description":"The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\nAll `<fhi-radio>` components with the same name belong to the same group.","reflects":true,"attribute":"name"},{"kind":"field","name":"status","type":{"text":"'error' | undefined"},"default":"undefined","description":"Sets the visual status of the radio. There is currently only one status available: `error`.\nThe `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.","reflects":true,"attribute":"status"},{"kind":"method","name":"uncheckGroupMembers","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"field","name":"value","type":{"text":"string"},"default":"'on'","description":"The value of the radio. This is submitted with the form data as a `value` when the radio is checked.","attribute":"value"}],"events":[{"name":"change","type":{"text":"Event"},"description":"Standard DOM event with the type `change`.\nThis event is dispatched when the radio is checked or unchecked."},{"name":"input","type":{"text":"Event"},"description":"Standard DOM event with the type `input`.\nThis event is dispatched when the radio is checked or unchecked."}],"attributes":[{"name":"checked","type":{"text":"boolean"},"default":"false","description":"Whether the radio button is checked or not.","fieldName":"checked"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the radio. This changes its appearance and makes it non-interactive.","fieldName":"disabled"},{"name":"help-text","type":{"text":"string"},"description":"The help text shown below the label.\nThis is used to provide additional information or descriptions to the user.","fieldName":"helpText"},{"name":"label","type":{"text":"string"},"default":"undefined","description":"The text label assigned to and displayed next to the radio.\nYou should always provide a label.","fieldName":"label"},{"name":"name","type":{"text":"string"},"default":"undefined","description":"The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\nAll `<fhi-radio>` components with the same name belong to the same group.","fieldName":"name"},{"name":"status","type":{"text":"'error' | undefined"},"default":"undefined","description":"Sets the visual status of the radio. There is currently only one status available: `error`.\nThe `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.","fieldName":"status"},{"name":"value","type":{"text":"string"},"default":"'on'","description":"The value of the radio. This is submitted with the form data as a `value` when the radio is checked.","fieldName":"value"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-radio","customElement":true},{"kind":"variable","name":"FhiRadioSelector","type":{"text":"string"},"default":"'fhi-radio'"}]}
+{"kind":"javascript-module","path":"src/components/fhi-radio/fhi-radio.component.ts","declarations":[{"kind":"class","description":"## FHI Radio\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-radio--docs\n\nThe `<fhi-radio>` component represents a single radio button.\nIt should be used within a group of options, allowing users to select one option from a set.","name":"FhiRadio","members":[{"kind":"method","name":"_dispatchChangeEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_dispatchInputEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_getRadioGroup","privacy":"private"},{"kind":"field","name":"_groupRoot","type":{"text":"Document | HTMLFormElement"},"privacy":"private","readonly":true},{"kind":"method","name":"_handleChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_handleInput","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_handleKeyDown","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"KeyboardEvent"}}]},{"kind":"field","name":"_input","type":{"text":"HTMLInputElement"},"privacy":"private"},{"kind":"field","name":"_internals","type":{"text":"ElementInternals"},"privacy":"private"},{"kind":"method","name":"_setFocusOnInput","privacy":"private"},{"kind":"method","name":"_SetTabbableRadios","privacy":"private"},{"kind":"method","name":"_updateFormValue","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"field","name":"checked","type":{"text":"boolean"},"default":"false","description":"Whether the radio button is checked or not.","attribute":"checked"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the radio. This changes its appearance and makes it non-interactive.","reflects":true,"attribute":"disabled"},{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"readonly":true,"default":"true"},{"kind":"method","name":"formResetCallback","privacy":"public","return":{"type":{"text":"void"}}},{"kind":"field","name":"helpText","type":{"text":"string"},"description":"The help text shown below the label.\nThis is used to provide additional information or descriptions to the user.","attribute":"help-text"},{"kind":"field","name":"label","type":{"text":"string"},"default":"undefined","description":"The text label assigned to and displayed next to the radio.\nYou should always provide a label.","attribute":"label"},{"kind":"field","name":"name","type":{"text":"string"},"default":"undefined","description":"The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\nAll `<fhi-radio>` components with the same name belong to the same group.","reflects":true,"attribute":"name"},{"kind":"field","name":"status","type":{"text":"'error' | undefined"},"default":"undefined","description":"Sets the visual status of the radio. There is currently only one status available: `error`.\nThe `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.","reflects":true,"attribute":"status"},{"kind":"method","name":"uncheckGroupMembers","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"field","name":"value","type":{"text":"string"},"default":"'on'","description":"The value of the radio. This is submitted with the form data as a `value` when the radio is checked.","attribute":"value"}],"events":[{"name":"change","type":{"text":"Event"},"description":"Standard DOM event with the type `change`.\nThis event is dispatched when the radio is checked or unchecked."},{"name":"input","type":{"text":"Event"},"description":"Standard DOM event with the type `input`.\nThis event is dispatched when the radio is checked or unchecked."}],"attributes":[{"name":"checked","type":{"text":"boolean"},"default":"false","description":"Whether the radio button is checked or not.","fieldName":"checked"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the radio. This changes its appearance and makes it non-interactive.","fieldName":"disabled"},{"name":"help-text","type":{"text":"string"},"description":"The help text shown below the label.\nThis is used to provide additional information or descriptions to the user.","fieldName":"helpText"},{"name":"label","type":{"text":"string"},"default":"undefined","description":"The text label assigned to and displayed next to the radio.\nYou should always provide a label.","fieldName":"label"},{"name":"name","type":{"text":"string"},"default":"undefined","description":"The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\nAll `<fhi-radio>` components with the same name belong to the same group.","fieldName":"name"},{"name":"status","type":{"text":"'error' | undefined"},"default":"undefined","description":"Sets the visual status of the radio. There is currently only one status available: `error`.\nThe `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.","fieldName":"status"},{"name":"value","type":{"text":"string"},"default":"'on'","description":"The value of the radio. This is submitted with the form data as a `value` when the radio is checked.","fieldName":"value"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-radio","customElement":true},{"kind":"variable","name":"FhiRadioSelector","type":{"text":"string"},"default":"'fhi-radio'"}]}

package/fhi-segmented-control-item.js

@@ -1,4 +1,4 @@
-import { a as e, d as t, n, o as r, r as i, s as a, t as o, u as s } from "./decorate-DFXIek-k.js";
+import { a as e, f as t, n, o as r, r as i, s as a, t as o, u as s } from "./decorate-Cy1UktZk.js";
 //#region src/components/segmented-control/fhi-segmented-control-item/fhi-segmented-control-item.component.ts
 var c = "fhi-segmented-control-item", l = class extends a {
 	constructor(...e) {

package/fhi-segmented-control.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 import { FhiSegmentedControlItemSelector as o } from "./fhi-segmented-control-item.js";
 //#region src/components/segmented-control/fhi-segmented-control/fhi-segmented-control.component.ts
 var s = "fhi-segmented-control", c = class extends r {

package/fhi-select-item.js

@@ -1,4 +1,4 @@
-import { a as e, o as t, s as n, t as r } from "./decorate-DFXIek-k.js";
+import { a as e, o as t, s as n, t as r } from "./decorate-Cy1UktZk.js";
 //#region src/components/select/fhi-select-item/fhi-select-item.component.ts
 var i = "fhi-select-item", a = class extends n {
 	constructor(...e) {

package/fhi-select.js

@@ -1,4 +1,4 @@
-import { a as e, d as t, n, o as r, r as i, s as a, t as o, u as s } from "./decorate-DFXIek-k.js";
+import { a as e, f as t, n, o as r, r as i, s as a, t as o, u as s } from "./decorate-Cy1UktZk.js";
 import "./fhi-body.js";
 import "./fhi-label.js";
 import "./fhi-icon-chevron-down.js";

package/fhi-tag.js

@@ -1,4 +1,4 @@
-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 { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 import "./fhi-body.js";
 //#region src/components/fhi-tag/fhi-tag.component.ts
 var o = "fhi-tag", s = class extends r {

package/fhi-text-area.js

@@ -1,5 +1,5 @@
-import { a as e, d as t, o as n, r, s as i, t as a, u as o } from "./decorate-DFXIek-k.js";
-import { t as s } from "./if-defined-Dl-W5B5_.js";
+import { a as e, f as t, o as n, r, s as i, t as a, u as o } from "./decorate-Cy1UktZk.js";
+import { t as s } from "./if-defined-Bwi1u9Ry.js";
 import "./fhi-body.js";
 import "./fhi-label.js";
 //#region src/components/fhi-text-area/fhi-text-area.component.ts
@@ -19,7 +19,7 @@ var c = "fhi-text-area", l = class extends i {
 	}
 	set value(e) {
 		let t = this._value;
-		this._value = e, this.requestUpdate("value", t), this._internals.setFormValue(this._value);
+		this._value = e ?? "", this.requestUpdate("value", t), this._internals.setFormValue(this._value);
 	}
 	constructor() {
 		super(), this.label = void 0, this.message = void 0, this.helpText = void 0, this.placeholder = void 0, this.status = void 0, this.readonly = !1, this.disabled = !1, this.rows = 2, this._name = void 0, this._value = "", this._internals = this.attachInternals();

package/fhi-text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-text-area.js","names":[],"sources":["../../src/components/fhi-text-area/fhi-text-area.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';\nimport '../typography/fhi-body/fhi-body.component';\nimport '../typography/fhi-label/fhi-label.component';\n\nexport const FhiTextAreaSelector = 'fhi-text-area';\n\n/**\n * ## FHI Text Area\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-area--docs}\n *\n * The `<fhi-text-area>` component is used to collect user input in forms.\n * It provides a labeled text area with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-area\n * @element fhi-text-area\n */\n@customElement(FhiTextAreaSelector)\nexport class FhiTextArea extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the text area.\n   * A text area should always have a label to ensure accessibility.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The message shown beneath the text area.\n   * This is often used to provide additional information or feedback to the user.\n   * @type {string}\n   */\n  @property({ type: String }) message?: string = undefined;\n\n  /**\n   * The message shown above the text area.\n   * This is often used to provide additional information to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string =\n    undefined;\n\n  /**\n   * Sets the placeholder text for the text area.\n   * This text is displayed when the text area is empty, providing a hint to the user about the expected input.\n   * @type {string}\n   */\n  @property({ type: String }) placeholder?: string = undefined;\n\n  /**\n   * Sets the visual status of the text area. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the text area, such as invalid or missing data.\n   * @reflect\n   * @type {'error'}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Sets the text area to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  /**\n   * Disables the text area.  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   * Sets the number of visible text lines for the text area.\n   * @reflect\n   * @type {number}\n   */\n  @property({ type: Number }) rows? = 2;\n\n  @query('#textarea-element')\n  private _textarea!: HTMLTextAreaElement;\n\n  private _name?: string = undefined;\n\n  /**\n   * The name of the text area. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for text areas.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name}\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n  set name(newName: string) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _value: string = '';\n\n  /**\n   * The default value of the text area.\n   *\n   * You can fetch the current value of the text area by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n   *\n   * This attribute conforms with the standard HTML `value` attribute for text areas.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/value}\n   *\n   * @type {string}\n   */\n  @property({ type: String })\n  get value(): string {\n    return this._value;\n  }\n\n  set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleChange(event: Event): void {\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n\n  private handleInput(event: Event): void {\n    this.value = this._textarea.value;\n    this._internals.setFormValue(this.value);\n\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') || '';\n    this._internals.setFormValue(this.value);\n  }\n\n  render() {\n    return html`\n      ${this.label &&\n      html`<label for=\"textarea-element\"\n        ><fhi-label size=\"small\">${this.label}</fhi-label></label\n      > `}\n      ${this.helpText\n        ? html`\n            <fhi-body class=\"help-text\" size=\"small\">${this.helpText}</fhi-body>\n          `\n        : ''}\n      <div class=\"textarea-container\">\n        <textarea\n          id=\"textarea-element\"\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          .value=${this.value}\n          ?readonly=${this.readonly}\n          ?disabled=${this.disabled}\n          rows=${ifDefined(this.rows)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n        ></textarea>\n      </div>\n      ${this.message\n        ? html`\n            <fhi-body size=\"small\" class=\"message\">${this.message}</fhi-body>\n          `\n        : ''}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fhi-font-family-default);\n      -webkit-font-smoothing: antialiased;\n\n      .textarea-container {\n        overflow: hidden;\n        border: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n        border-radius: var(--fhi-border-radius-050);\n        background-color: var(--fhi-color-neutral-background-default);\n        transition: border-color var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n\n        &:hover {\n          border-color: var(--fhi-color-accent-border-default);\n        }\n\n        &:focus-within {\n          border-color: var(--fhi-color-accent-border-strong);\n          background-color: var(--fhi-color-accent-background-default);\n          outline: auto;\n          outline-color: -webkit-focus-ring-color;\n        }\n      }\n\n      textarea {\n        box-sizing: border-box;\n        display: block;\n        width: 100%;\n        resize: vertical;\n        min-height: var(--fhi-spacing-500);\n        padding: var(--fhi-spacing-100) var(--fhi-spacing-150);\n        color: var(--fhi-color-neutral-text-default);\n        background-color: transparent;\n        margin: 0;\n        border: none;\n        font-family: var(--fhi-font-family-default);\n        font-weight: var(--fhi-typography-body-medium-font-weight);\n        font-size: var(--fhi-typography-body-medium-font-size);\n        line-height: var(--fhi-typography-body-medium-line-height);\n        letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n        transition: background-color var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n\n        &::placeholder {\n          color: var(--fhi-color-neutral-base-default);\n        }\n\n        &:hover:not(:disabled):not([readonly]) {\n          border-color: var(--fhi-color-accent-border-default);\n          background-color: var(--fhi-color-accent-background-subtle);\n        }\n\n        &:focus {\n          background-color: var(--fhi-color-accent-background-default);\n        }\n      }\n\n      label {\n        color: var(--fhi-color-neutral-text-default);\n        padding: 0 0 var(--fhi-spacing-050) 0;\n      }\n\n      .help-text {\n        color: var(--fhi-color-neutral-text-subtle);\n        margin: 0 0 var(--fhi-spacing-050) 0;\n      }\n\n      .message {\n        margin: var(--fhi-spacing-050) 0 0 0;\n        color: var(--fhi-color-neutral-text-default);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      cursor: not-allowed;\n      label,\n      textarea,\n      .textarea-container {\n        cursor: not-allowed;\n      }\n      .textarea-container {\n        &:hover {\n          border-color: var(--fhi-color-neutral-border-default);\n          background-color: var(--fhi-color-neutral-background-default);\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      .textarea-container {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--fhi-color-danger-text-default);\n      }\n      .textarea-container {\n        border-color: var(--fhi-color-danger-border-strong);\n        background-color: var(--fhi-color-danger-background-default);\n      }\n      textarea {\n        color: var(--fhi-color-neutral-text-default);\n        &:hover {\n          background-color: var(--fhi-color-danger-background-default);\n        }\n      }\n      .message {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      .help-text {\n        color: var(--fhi-color-danger-text-default);\n      }\n    }\n  `;\n}\n"],"mappings":"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"}
+{"version":3,"file":"fhi-text-area.js","names":[],"sources":["../../src/components/fhi-text-area/fhi-text-area.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';\nimport '../typography/fhi-body/fhi-body.component';\nimport '../typography/fhi-label/fhi-label.component';\n\nexport const FhiTextAreaSelector = 'fhi-text-area';\n\n/**\n * ## FHI Text Area\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-area--docs}\n *\n * The `<fhi-text-area>` component is used to collect user input in forms.\n * It provides a labeled text area with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-area\n * @element fhi-text-area\n */\n@customElement(FhiTextAreaSelector)\nexport class FhiTextArea extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the text area.\n   * A text area should always have a label to ensure accessibility.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The message shown beneath the text area.\n   * This is often used to provide additional information or feedback to the user.\n   * @type {string}\n   */\n  @property({ type: String }) message?: string = undefined;\n\n  /**\n   * The message shown above the text area.\n   * This is often used to provide additional information to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string =\n    undefined;\n\n  /**\n   * Sets the placeholder text for the text area.\n   * This text is displayed when the text area is empty, providing a hint to the user about the expected input.\n   * @type {string}\n   */\n  @property({ type: String }) placeholder?: string = undefined;\n\n  /**\n   * Sets the visual status of the text area. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the text area, such as invalid or missing data.\n   * @reflect\n   * @type {'error'}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Sets the text area to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  /**\n   * Disables the text area.  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   * Sets the number of visible text lines for the text area.\n   * @reflect\n   * @type {number}\n   */\n  @property({ type: Number }) rows? = 2;\n\n  @query('#textarea-element')\n  private _textarea!: HTMLTextAreaElement;\n\n  private _name?: string = undefined;\n\n  /**\n   * The name of the text area. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for text areas.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name}\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n  set name(newName: string) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _value: string = '';\n\n  /**\n   * The default value of the text area.\n   *\n   * You can fetch the current value of the text area by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n   *\n   * This attribute conforms with the standard HTML `value` attribute for text areas.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/value}\n   *\n   * @type {string}\n   */\n  @property({ type: String })\n  get value(): string {\n    return this._value;\n  }\n\n  set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue ?? '';\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleChange(event: Event): void {\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n\n  private handleInput(event: Event): void {\n    this.value = this._textarea.value;\n    this._internals.setFormValue(this.value);\n\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') || '';\n    this._internals.setFormValue(this.value);\n  }\n\n  render() {\n    return html`\n      ${this.label &&\n      html`<label for=\"textarea-element\"\n        ><fhi-label size=\"small\">${this.label}</fhi-label></label\n      > `}\n      ${this.helpText\n        ? html`\n            <fhi-body class=\"help-text\" size=\"small\">${this.helpText}</fhi-body>\n          `\n        : ''}\n      <div class=\"textarea-container\">\n        <textarea\n          id=\"textarea-element\"\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          .value=${this.value}\n          ?readonly=${this.readonly}\n          ?disabled=${this.disabled}\n          rows=${ifDefined(this.rows)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n        ></textarea>\n      </div>\n      ${this.message\n        ? html`\n            <fhi-body size=\"small\" class=\"message\">${this.message}</fhi-body>\n          `\n        : ''}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fhi-font-family-default);\n      -webkit-font-smoothing: antialiased;\n\n      .textarea-container {\n        overflow: hidden;\n        border: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n        border-radius: var(--fhi-border-radius-050);\n        background-color: var(--fhi-color-neutral-background-default);\n        transition: border-color var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n\n        &:hover {\n          border-color: var(--fhi-color-accent-border-default);\n        }\n\n        &:focus-within {\n          border-color: var(--fhi-color-accent-border-strong);\n          background-color: var(--fhi-color-accent-background-default);\n          outline: auto;\n          outline-color: -webkit-focus-ring-color;\n        }\n      }\n\n      textarea {\n        box-sizing: border-box;\n        display: block;\n        width: 100%;\n        resize: vertical;\n        min-height: var(--fhi-spacing-500);\n        padding: var(--fhi-spacing-100) var(--fhi-spacing-150);\n        color: var(--fhi-color-neutral-text-default);\n        background-color: transparent;\n        margin: 0;\n        border: none;\n        font-family: var(--fhi-font-family-default);\n        font-weight: var(--fhi-typography-body-medium-font-weight);\n        font-size: var(--fhi-typography-body-medium-font-size);\n        line-height: var(--fhi-typography-body-medium-line-height);\n        letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n        transition: background-color var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n\n        &::placeholder {\n          color: var(--fhi-color-neutral-base-default);\n        }\n\n        &:hover:not(:disabled):not([readonly]) {\n          border-color: var(--fhi-color-accent-border-default);\n          background-color: var(--fhi-color-accent-background-subtle);\n        }\n\n        &:focus {\n          background-color: var(--fhi-color-accent-background-default);\n        }\n      }\n\n      label {\n        color: var(--fhi-color-neutral-text-default);\n        padding: 0 0 var(--fhi-spacing-050) 0;\n      }\n\n      .help-text {\n        color: var(--fhi-color-neutral-text-subtle);\n        margin: 0 0 var(--fhi-spacing-050) 0;\n      }\n\n      .message {\n        margin: var(--fhi-spacing-050) 0 0 0;\n        color: var(--fhi-color-neutral-text-default);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      cursor: not-allowed;\n      label,\n      textarea,\n      .textarea-container {\n        cursor: not-allowed;\n      }\n      .textarea-container {\n        &:hover {\n          border-color: var(--fhi-color-neutral-border-default);\n          background-color: var(--fhi-color-neutral-background-default);\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      .textarea-container {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--fhi-color-danger-text-default);\n      }\n      .textarea-container {\n        border-color: var(--fhi-color-danger-border-strong);\n        background-color: var(--fhi-color-danger-background-default);\n      }\n      textarea {\n        color: var(--fhi-color-neutral-text-default);\n        &:hover {\n          background-color: var(--fhi-color-danger-background-default);\n        }\n      }\n      .message {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      .help-text {\n        color: var(--fhi-color-danger-text-default);\n      }\n    }\n  `;\n}\n"],"mappings":"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"}

package/fhi-text-input.js

@@ -1,5 +1,5 @@
-import { a as e, d as t, o as n, r, s as i, t as a, u as o } from "./decorate-DFXIek-k.js";
-import { t as s } from "./if-defined-Dl-W5B5_.js";
+import { a as e, f as t, o as n, r, s as i, t as a, u as o } from "./decorate-Cy1UktZk.js";
+import { t as s } from "./if-defined-Bwi1u9Ry.js";
 //#region src/components/fhi-text-input/fhi-text-input.component.ts
 var c = "fhi-text-input", l = class extends i {
 	static {
@@ -17,7 +17,7 @@ var c = "fhi-text-input", l = class extends i {
 	}
 	set value(e) {
 		let t = this._value;
-		this._value = e, this.requestUpdate("value", t), this._internals.setFormValue(this._value);
+		this._value = e ?? "", this.requestUpdate("value", t), this._internals.setFormValue(this._value);
 	}
 	constructor() {
 		super(), this.label = void 0, this.message = void 0, this.helpText = void 0, this.placeholder = void 0, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();

package/fhi-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-text-input.js","names":[],"sources":["../../src/components/fhi-text-input/fhi-text-input.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 FhiTextInputSelector = 'fhi-text-input';\n\n/**\n * ## FHI Text Input\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n *\n * The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-input\n * @element fhi-text-input\n */\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the input field.\n   * An input field should always have a label to ensure accessibility.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The message shown beneath the input field.\n   * This is often used to provide additional information or feedback to the user.\n   * @type {string}\n   */\n  @property({ type: String }) message?: string = undefined;\n\n  /**\n   * The message shown above the input field.\n   * This is often used to provide additional information to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string =\n    undefined;\n\n  /**\n   * Sets the placeholder text for the input field.\n   * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n   * @type {string}\n   */\n  @property({ type: String }) placeholder?: string = undefined;\n\n  /**\n   * Sets the visual status of the input. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n   * @reflect\n   * @type {'error'}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  /**\n   * Disables the input.  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  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _name?: string = undefined;\n\n  /**\n   * The name of the input. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n  set name(newName: string) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _value: string = '';\n\n  /**\n   * The default value of the input field.\n   *\n   * You can fetch the current value of the text input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n   *\n   * This attribute conforms with the standard HTML `value` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n   *\n   * @type {string}\n   */\n  @property({ type: String })\n  get value(): string {\n    return this._value;\n  }\n\n  set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    this._internals.setFormValue(this.value);\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleChange(event: Event): void {\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n\n  private handleInput(event: Event): void {\n    this.value = this._input.value;\n    this._internals.setFormValue(this.value);\n\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && this._internals.form) {\n      this._internals.form!.requestSubmit();\n    }\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') || '';\n    this._internals.setFormValue(this.value);\n  }\n\n  private _handleStartSlotChange(event: Event): void {\n    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n    if (\n      iconNode.nodeType === Node.ELEMENT_NODE &&\n      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = iconNode as HTMLElement;\n      this._input.style.paddingLeft = 'var(--fhi-spacing-500)';\n      icon.setAttribute('size', '1.5rem');\n    } else {\n      console.error(\n        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n      );\n    }\n  }\n\n  private _handleEndSlotChange(event: Event): void {\n    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n\n    if (\n      iconNode.nodeType === Node.ELEMENT_NODE &&\n      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = iconNode as HTMLElement;\n      this._input.style.paddingRight = 'var(--fhi-spacing-500)';\n      icon.setAttribute('size', '1.5rem');\n    } else {\n      console.error(\n        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n      );\n    }\n  }\n\n  render() {\n    return html`\n      ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n      ${this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ''}\n      <div class=\"input-container\">\n        <input\n          id=\"input-element\"\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          .value=${this.value}\n          ?readonly=${this.readonly}\n          ?disabled=${this.disabled}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @keydown=${this.handleKeyDown}\n        />\n        <slot name=\"start\" @slotchange=${this._handleStartSlotChange}> </slot>\n        <slot name=\"end\" @slotchange=${this._handleEndSlotChange}> </slot>\n      </div>\n      ${this.message ? html`<p class=\"message\">${this.message}</p>` : ''}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-text-input-placeholder-color: unset;\n    }\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fhi-font-family-default);\n      -webkit-font-smoothing: antialiased;\n\n      --fhi-text-input-placeholder-color: var(--fhi-color-neutral-base-default);\n\n      label {\n        font-weight: var(--fhi-typography-label-small-font-weight);\n        font-size: var(--fhi-typography-label-small-font-size);\n        line-height: var(--fhi-typography-label-small-line-height);\n        letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n        color: var(--fhi-color-neutral-text-default);\n        padding: 0 0 var(--fhi-spacing-050) 0;\n      }\n\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input {\n        box-sizing: border-box;\n        flex: 1 1 auto;\n        height: var(--fhi-spacing-500);\n        border: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n        border-radius: var(--fhi-border-radius-050);\n        padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);\n        color: var(--fhi-color-neutral-text-default);\n        background-color: var(--fhi-color-neutral-background-default);\n        font-family: var(--fhi-font-family-default);\n        font-weight: var(--fhi-typography-body-medium-font-weight);\n        font-size: var(--fhi-typography-body-medium-font-size);\n        line-height: var(--fhi-typography-body-medium-line-height);\n        letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n        transition: all var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n        &:hover {\n          border-color: var(--fhi-color-accent-border-default);\n          background-color: var(--fhi-color-accent-background-subtle);\n        }\n        &:focus {\n          border-color: var(--fhi-color-accent-border-strong);\n          background-color: var(--fhi-color-accent-background-default);\n        }\n        &::placeholder {\n          color: var(--fhi-text-input-placeholder-color);\n        }\n      }\n\n      slot[name='start'] {\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n\n      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {\n        color: var(--fhi-color-accent-text-subtle);\n      }\n      input:not([disabled]):not([readonly]):active ~ slot[name='start'],\n      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {\n        color: var(--fhi-color-accent-text-default);\n      }\n\n      .message {\n        margin: var(--fhi-spacing-050) 0 0 0;\n        color: var(--fhi-color-neutral-text-default);\n        font-weight: var(--fhi-typography-body-small-font-weight);\n        font-size: var(--fhi-typography-body-small-font-size);\n        line-height: var(--fhi-typography-body-small-line-height);\n        letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n      }\n\n      .help-text {\n        color: var(--fhi-color-neutral-text-subtle);\n        font-weight: var(--fhi-typography-body-small-font-weight);\n        font-size: var(--fhi-typography-body-small-font-size);\n        line-height: var(--fhi-typography-body-small-line-height);\n        letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n        margin: 0 0 var(--fhi-spacing-050) 0;\n      }\n\n      .input-container {\n        position: relative;\n        display: flex;\n      }\n\n      slot[name='start'] {\n        display: block;\n        position: absolute;\n        left: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-left: 8px;\n        height: fit-content;\n        pointer-events: none;\n      }\n\n      slot[name='end'] {\n        display: block;\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: 8px;\n        height: fit-content;\n        pointer-events: none;\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      cursor: not-allowed;\n      label,\n      input {\n        cursor: not-allowed;\n      }\n      input {\n        &:hover {\n          border-color: var(--fhi-color-neutral-border-default);\n          background-color: var(--fhi-color-neutral-background-default);\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--fhi-color-danger-text-default);\n      }\n      input {\n        border-color: var(--fhi-color-danger-border-strong);\n        background-color: var(--fhi-color-danger-background-default);\n        color: var(--fhi-color-danger-text-default);\n      }\n      .message {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      .help-text {\n        color: var(--fhi-color-danger-text-default);\n      }\n      slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n\n      input:hover ~ slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      input:focus ~ slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n    }\n  `;\n}\n"],"mappings":"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"}
+{"version":3,"file":"fhi-text-input.js","names":[],"sources":["../../src/components/fhi-text-input/fhi-text-input.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 FhiTextInputSelector = 'fhi-text-input';\n\n/**\n * ## FHI Text Input\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n *\n * The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-input\n * @element fhi-text-input\n */\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the input field.\n   * An input field should always have a label to ensure accessibility.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The message shown beneath the input field.\n   * This is often used to provide additional information or feedback to the user.\n   * @type {string}\n   */\n  @property({ type: String }) message?: string = undefined;\n\n  /**\n   * The message shown above the input field.\n   * This is often used to provide additional information to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string =\n    undefined;\n\n  /**\n   * Sets the placeholder text for the input field.\n   * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n   * @type {string}\n   */\n  @property({ type: String }) placeholder?: string = undefined;\n\n  /**\n   * Sets the visual status of the input. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n   * @reflect\n   * @type {'error'}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  /**\n   * Disables the input.  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  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _name?: string = undefined;\n\n  /**\n   * The name of the input. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n  set name(newName: string) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _value: string = '';\n\n  /**\n   * The default value of the input field.\n   *\n   * You can fetch the current value of the text input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n   *\n   * This attribute conforms with the standard HTML `value` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n   *\n   * @type {string}\n   */\n  @property({ type: String })\n  get value(): string {\n    return this._value;\n  }\n\n  set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue ?? '';\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    this._internals.setFormValue(this.value);\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private handleChange(event: Event): void {\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n\n  private handleInput(event: Event): void {\n    this.value = this._input.value;\n    this._internals.setFormValue(this.value);\n\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && this._internals.form) {\n      this._internals.form!.requestSubmit();\n    }\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') || '';\n    this._internals.setFormValue(this.value);\n  }\n\n  private _handleStartSlotChange(event: Event): void {\n    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n    if (\n      iconNode.nodeType === Node.ELEMENT_NODE &&\n      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = iconNode as HTMLElement;\n      this._input.style.paddingLeft = 'var(--fhi-spacing-500)';\n      icon.setAttribute('size', '1.5rem');\n    } else {\n      console.error(\n        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n      );\n    }\n  }\n\n  private _handleEndSlotChange(event: Event): void {\n    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n\n    if (\n      iconNode.nodeType === Node.ELEMENT_NODE &&\n      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = iconNode as HTMLElement;\n      this._input.style.paddingRight = 'var(--fhi-spacing-500)';\n      icon.setAttribute('size', '1.5rem');\n    } else {\n      console.error(\n        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n      );\n    }\n  }\n\n  render() {\n    return html`\n      ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n      ${this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ''}\n      <div class=\"input-container\">\n        <input\n          id=\"input-element\"\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          .value=${this.value}\n          ?readonly=${this.readonly}\n          ?disabled=${this.disabled}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @keydown=${this.handleKeyDown}\n        />\n        <slot name=\"start\" @slotchange=${this._handleStartSlotChange}> </slot>\n        <slot name=\"end\" @slotchange=${this._handleEndSlotChange}> </slot>\n      </div>\n      ${this.message ? html`<p class=\"message\">${this.message}</p>` : ''}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-text-input-placeholder-color: unset;\n    }\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fhi-font-family-default);\n      -webkit-font-smoothing: antialiased;\n\n      --fhi-text-input-placeholder-color: var(--fhi-color-neutral-base-default);\n\n      label {\n        font-weight: var(--fhi-typography-label-small-font-weight);\n        font-size: var(--fhi-typography-label-small-font-size);\n        line-height: var(--fhi-typography-label-small-line-height);\n        letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n        color: var(--fhi-color-neutral-text-default);\n        padding: 0 0 var(--fhi-spacing-050) 0;\n      }\n\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input {\n        box-sizing: border-box;\n        flex: 1 1 auto;\n        height: var(--fhi-spacing-500);\n        border: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n        border-radius: var(--fhi-border-radius-050);\n        padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);\n        color: var(--fhi-color-neutral-text-default);\n        background-color: var(--fhi-color-neutral-background-default);\n        font-family: var(--fhi-font-family-default);\n        font-weight: var(--fhi-typography-body-medium-font-weight);\n        font-size: var(--fhi-typography-body-medium-font-size);\n        line-height: var(--fhi-typography-body-medium-line-height);\n        letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n        transition: all var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n        &:hover {\n          border-color: var(--fhi-color-accent-border-default);\n          background-color: var(--fhi-color-accent-background-subtle);\n        }\n        &:focus {\n          border-color: var(--fhi-color-accent-border-strong);\n          background-color: var(--fhi-color-accent-background-default);\n        }\n        &::placeholder {\n          color: var(--fhi-text-input-placeholder-color);\n        }\n      }\n\n      slot[name='start'] {\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n\n      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {\n        color: var(--fhi-color-accent-text-subtle);\n      }\n      input:not([disabled]):not([readonly]):active ~ slot[name='start'],\n      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {\n        color: var(--fhi-color-accent-text-default);\n      }\n\n      .message {\n        margin: var(--fhi-spacing-050) 0 0 0;\n        color: var(--fhi-color-neutral-text-default);\n        font-weight: var(--fhi-typography-body-small-font-weight);\n        font-size: var(--fhi-typography-body-small-font-size);\n        line-height: var(--fhi-typography-body-small-line-height);\n        letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n      }\n\n      .help-text {\n        color: var(--fhi-color-neutral-text-subtle);\n        font-weight: var(--fhi-typography-body-small-font-weight);\n        font-size: var(--fhi-typography-body-small-font-size);\n        line-height: var(--fhi-typography-body-small-line-height);\n        letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n        margin: 0 0 var(--fhi-spacing-050) 0;\n      }\n\n      .input-container {\n        position: relative;\n        display: flex;\n      }\n\n      slot[name='start'] {\n        display: block;\n        position: absolute;\n        left: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-left: 8px;\n        height: fit-content;\n        pointer-events: none;\n      }\n\n      slot[name='end'] {\n        display: block;\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: 8px;\n        height: fit-content;\n        pointer-events: none;\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      cursor: not-allowed;\n      label,\n      input {\n        cursor: not-allowed;\n      }\n      input {\n        &:hover {\n          border-color: var(--fhi-color-neutral-border-default);\n          background-color: var(--fhi-color-neutral-background-default);\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--fhi-color-danger-text-default);\n      }\n      input {\n        border-color: var(--fhi-color-danger-border-strong);\n        background-color: var(--fhi-color-danger-background-default);\n        color: var(--fhi-color-danger-text-default);\n      }\n      .message {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      .help-text {\n        color: var(--fhi-color-danger-text-default);\n      }\n      slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n\n      input:hover ~ slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      input:focus ~ slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n    }\n  `;\n}\n"],"mappings":"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"}

package/fhi-title.js

@@ -1,6 +1,6 @@
-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";
-import { t as s } from "./unsafe-html-CBTN3162.js";
+import { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
+import { t as o } from "./if-defined-Bwi1u9Ry.js";
+import { t as s } from "./unsafe-html-Bl-zY61x.js";
 //#region src/components/typography/fhi-title/fhi-title.component.ts
 var c = "fhi-title", l = class extends r {
 	constructor(...e) {

package/{fhi-tooltip.component-O9cZeuTN.js → fhi-tooltip.component-CyNQ5alT.js}

@@ -1,4 +1,4 @@
-import { a as e, d as t, i as n, o as r, r as i, s as a, t as o, u as s } from "./decorate-DFXIek-k.js";
+import { a as e, f as t, i as n, o as r, r as i, s as a, t as o, u as s } from "./decorate-Cy1UktZk.js";
 //#region ../../node_modules/.pnpm/@floating-ui+utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var c = Math.min, l = Math.max, u = Math.round, d = Math.floor, f = (e) => ({
 	x: e,
@@ -878,4 +878,4 @@ o([e({ type: String })], $.prototype, "message", void 0), o([e({ type: String })
 //#endregion
 export { Ye as n, $ as t };
 
-//# sourceMappingURL=fhi-tooltip.component-O9cZeuTN.js.map
+//# sourceMappingURL=fhi-tooltip.component-CyNQ5alT.js.map