@folkehelseinstituttet/designsystem 0.47.0 → 0.47.1

package/fhi-icon-send.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-send.component.ts
 var o = "fhi-icon-send", s = class extends r {
 	constructor(...e) {

package/fhi-icon-share.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-share.component.ts
 var o = "fhi-icon-share", s = class extends r {
 	constructor(...e) {

package/fhi-icon-sheet.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-sheet.component.ts
 var o = "fhi-icon-sheet", s = class extends r {
 	constructor(...e) {

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();
@@ -28,10 +35,11 @@ var c = "fhi-radio", l = class extends i {
 		}), !e.some((e) => e.checked) && e.length > 0 && (e[0].tabIndex = 0);
 	}
 	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 +85,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 +235,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  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":"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"}

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

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 {

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