npm - @folkehelseinstituttet/designsystem - Versions diffs - 0.45.0 → 0.45.2 - Mend

@folkehelseinstituttet/designsystem 0.45.0 → 0.45.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/custom-elements.json +1 -1
package/{fhi-date-input.component-Bus7CeKM.js → fhi-date-input.component-C1cwkp36.js} +2 -2
package/{fhi-date-input.component-Bus7CeKM.js.map → fhi-date-input.component-C1cwkp36.js.map} +1 -1
package/fhi-date-input.js +1 -1
package/fhi-tag.js +22 -11
package/fhi-tag.js.map +1 -1
package/fhi-tag.manifest.json +1 -1
package/fhi-text-area.js +7 -9
package/fhi-text-area.js.map +1 -1
package/fhi-text-input.js +1 -1
package/fhi-text-input.js.map +1 -1
package/index.js +1 -1
package/package.json +1 -1
package/web-types.json +5 -4

package/{fhi-date-input.component-Bus7CeKM.js → fhi-date-input.component-C1cwkp36.js} RENAMED Viewed

@@ -100,7 +100,7 @@ var c = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent), l = "f
         line-height: var(--fhi-typography-label-small-line-height);
         letter-spacing: var(--fhi-typography-label-small-letter-spacing);
         color: var(--fhi-color-neutral-text-default);
-        margin: 0 0 var(--fhi-spacing-050) 0;
+        padding: 0 0 var(--fhi-spacing-050) 0;
       }
       label:has(+ p) {
         margin: 0 0 0 0;
@@ -275,4 +275,4 @@ a([e({ type: String })], u.prototype, "label", void 0), a([e({ type: String })],
 //#endregion
 export { l as n, u as t };
-//# sourceMappingURL=fhi-date-input.component-Bus7CeKM.js.map
+//# sourceMappingURL=fhi-date-input.component-C1cwkp36.js.map

package/{fhi-date-input.component-Bus7CeKM.js.map → fhi-date-input.component-C1cwkp36.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fhi-date-input.component-Bus7CeKM.js","names":[],"sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/*\n Check if the browser is Safari\n * @returns `true` if the browser is Safari\n /\nconst isSafari = () => {\n return /^((?!chrome\|android).)safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` \| undefined; // YYYY-MM-DD\n\n/*\n ## FHI Date input\n \n {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n \n The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n \n @tag fhi-date-input\n * @element fhi-date-input\n \n /\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n /** @internal /\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 help-text 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 minium date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n /\n @property({ type: String }) min?: FhiDateValue = undefined;\n\n /\n Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n /\n @property({ type: String }) max?: FhiDateValue = 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 = 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\n set name(newName: string \| undefined) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _value?: string = '';\n\n /\n The default value of the input field, formatted as `YYYY-MM-DD`.\n \n You can fetch the current value of the date 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(): FhiDateValue {\n return this._value as FhiDateValue;\n }\n\n set value(newValue: FhiDateValue) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value ?? null);\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 ?? null);\n }\n\n private _handleChange(): void {\n this._dispatchChangeEvent();\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 _handleInput(event: Event): void {\n this.value = this._input.value as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n event.stopPropagation();\n this._dispatchInputEvent();\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 _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') as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _showDate(event?: KeyboardEvent) {\n if (\n event &&\n event.type == 'keydown' &&\n event.key !== 'Enter' &&\n event.code !== 'Space'\n ) {\n return;\n }\n this._input.showPicker();\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 type=\"date\"\n id=\"input-element\"\n name=${ifDefined(this.name)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\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 <span\n class=\"date-icon\"\n @click=${this._showDate}\n @keydown=${this._showDate}\n tabindex=${isSafari() ? '-1' : '0'}\n role=\"button\"\n aria-label=\"Vis datovelger\"\n aria-haspopup=\"true\"\n ><fhi-icon-calendar></fhi-icon-calendar\n ></span>\n </div>\n ${this.message && html`<p class=\"message\">${this.message}</p>`}\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 width: calc(var(--fhi-spacing-1000) 2);\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 margin: 0 0 var(--fhi-spacing-050) 0;\n }\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input[type='date'] {\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 box-sizing: border-box;\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\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-background-default);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n width: 100%;\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 }\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 [type='date']::-webkit-inner-spin-button {\n opacity: 0;\n }\n [type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n\n &:target {\n outline: solid;\n font-size: 5rem;\n }\n }\n .input-container {\n height: var(--fhi-spacing-500);\n position: relative;\n }\n .date-icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--fhi-spacing-100);\n height: fit-content;\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n border-radius: var(--fhi-border-radius-050);\n &:focus {\n outline: solid var(--fhi-color-accent-border-default);\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n input[type='date'] {\n &:hover {\n border-color: var(--fhi-color-neutral-border-default);\n background-color: var(--fhi-color-neutral-background-default);\n }\n }\n .date-icon {\n background-color: unset;\n &:focus {\n outline: none;\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input[type='date'] {\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 &:hover + .date-icon {\n background-color: unset;\n }\n }\n .date-icon {\n background-color: unset;\n display: none;\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--fhi-color-danger-text-default);\n }\n input[type='date'] {\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 .date-icon {\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\n }\n }\n\n @-moz-document url-prefix() {\n :host {\n .date-icon {\n display: none;\n visibility: hidden;\n }\n }\n }\n `;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"fhi-date-input.component-C1cwkp36.js","names":[],"sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/*\n Check if the browser is Safari\n * @returns `true` if the browser is Safari\n /\nconst isSafari = () => {\n return /^((?!chrome\|android).)safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` \| undefined; // YYYY-MM-DD\n\n/*\n ## FHI Date input\n \n {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n \n The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n \n @tag fhi-date-input\n * @element fhi-date-input\n \n /\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n /** @internal /\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 help-text 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 minium date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n /\n @property({ type: String }) min?: FhiDateValue = undefined;\n\n /\n Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n /\n @property({ type: String }) max?: FhiDateValue = 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 = 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\n set name(newName: string \| undefined) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _value?: string = '';\n\n /\n The default value of the input field, formatted as `YYYY-MM-DD`.\n \n You can fetch the current value of the date 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(): FhiDateValue {\n return this._value as FhiDateValue;\n }\n\n set value(newValue: FhiDateValue) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value ?? null);\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 ?? null);\n }\n\n private _handleChange(): void {\n this._dispatchChangeEvent();\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 _handleInput(event: Event): void {\n this.value = this._input.value as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n event.stopPropagation();\n this._dispatchInputEvent();\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 _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') as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _showDate(event?: KeyboardEvent) {\n if (\n event &&\n event.type == 'keydown' &&\n event.key !== 'Enter' &&\n event.code !== 'Space'\n ) {\n return;\n }\n this._input.showPicker();\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 type=\"date\"\n id=\"input-element\"\n name=${ifDefined(this.name)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\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 <span\n class=\"date-icon\"\n @click=${this._showDate}\n @keydown=${this._showDate}\n tabindex=${isSafari() ? '-1' : '0'}\n role=\"button\"\n aria-label=\"Vis datovelger\"\n aria-haspopup=\"true\"\n ><fhi-icon-calendar></fhi-icon-calendar\n ></span>\n </div>\n ${this.message && html`<p class=\"message\">${this.message}</p>`}\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 width: calc(var(--fhi-spacing-1000) 2);\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 label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input[type='date'] {\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 box-sizing: border-box;\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\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-background-default);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n width: 100%;\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 }\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 [type='date']::-webkit-inner-spin-button {\n opacity: 0;\n }\n [type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n\n &:target {\n outline: solid;\n font-size: 5rem;\n }\n }\n .input-container {\n height: var(--fhi-spacing-500);\n position: relative;\n }\n .date-icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--fhi-spacing-100);\n height: fit-content;\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n border-radius: var(--fhi-border-radius-050);\n &:focus {\n outline: solid var(--fhi-color-accent-border-default);\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n input[type='date'] {\n &:hover {\n border-color: var(--fhi-color-neutral-border-default);\n background-color: var(--fhi-color-neutral-background-default);\n }\n }\n .date-icon {\n background-color: unset;\n &:focus {\n outline: none;\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input[type='date'] {\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 &:hover + .date-icon {\n background-color: unset;\n }\n }\n .date-icon {\n background-color: unset;\n display: none;\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--fhi-color-danger-text-default);\n }\n input[type='date'] {\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 .date-icon {\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\n }\n }\n\n @-moz-document url-prefix() {\n :host {\n .date-icon {\n display: none;\n visibility: hidden;\n }\n }\n }\n `;\n}\n"],"mappings":"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"}

package/fhi-date-input.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import "./fhi-icon-calendar.js";
-import { n as e, t } from "./fhi-date-input.component-Bus7CeKM.js";
+import { n as e, t } from "./fhi-date-input.component-C1cwkp36.js";
 export { t as FhiDateInput, e as FhiDateInputSelector };

package/fhi-tag.js CHANGED Viewed

@@ -5,17 +5,30 @@ var o = "fhi-tag", s = class extends r {
 	constructor(...e) {
 		super(...e), this.color = "neutral", this.variant = "subtle";
 	}
+	_getFirstValidNode(e) {
+		return e.assignedNodes().filter((e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && e.textContent?.trim())[0];
+	}
+	_setIconStyles(e) {
+		e.setAttribute("size", "1rem"), e.style.marginInlineEnd = "var(--fhi-spacing-050)";
+	}
 	_handleSlotChange(e) {
-		let t = e.target.assignedNodes().filter((e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && e.textContent?.trim());
-		if (t.length === 0) return;
-		let n = t[0];
-		if (n.nodeType === Node.ELEMENT_NODE && n.tagName.toLowerCase().startsWith("fhi-icon")) {
-			let e = n;
-			e.setAttribute("size", "1rem"), e.style.marginLeft = "calc(-1 * var(--fhi-spacing-050))";
+		let t = this._getFirstValidNode(e.target);
+		if (t && t.nodeType === Node.ELEMENT_NODE && t.tagName.toLowerCase().startsWith("fhi-icon")) {
+			console.warn("Icon have been moved to the 'icon' slot. The current usage is deprecated and will no longer be supported in a future release. See documentation for more information: https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs#ikon");
+			let e = t;
+			this._setIconStyles(e);
+		}
+	}
+	_handleIconSlotChange(e) {
+		let t = this._getFirstValidNode(e.target);
+		if (t && t.nodeType === Node.ELEMENT_NODE && t.tagName.toLowerCase().startsWith("fhi-icon")) {
+			let e = t;
+			this._setIconStyles(e);
 		}
 	}
 	render() {
 		return a`
+      <slot name="icon" @slotchange=${this._handleIconSlotChange}></slot>
       <fhi-body size="small">
         <slot
           class="slot-container"
@@ -46,13 +59,11 @@ var o = "fhi-tag", s = class extends r {
       .slot-container {
         display: flex;
         align-items: center;
-        gap: var(--fhi-spacing-050);
       }
-      & fhi-body {
-        color: inherit;
-        text-wrap: nowrap;
+      slot[name='icon'] {
+        justify-content: center;
+        align-self: stretch;
       }
     }

package/fhi-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fhi-tag.js","names":[],"sources":["../../src/components/fhi-tag/fhi-tag.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiTagSelector = 'fhi-tag';\n\n/*\n ## FHI Tag\n \n {@link https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs}\n \n The `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n \n @tag fhi-tag\n * @element fhi-tag\n \n @slot - ~~The~~ ~~content~~ of the tag. ~~This~~ ~~should~~ be ~~pure~~ text ~~with,~~ or ~~without,~~ ~~an icon~~.\n /\n@customElement(FhiTagSelector)\nexport class FhiTag extends LitElement {\n /\n Sets the color theme of the tag.\n * @reflect\n * @type {'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'}\n /\n @property({ type: String, reflect: true }) color:\n \| 'neutral'\n \| 'accent'\n \| 'success'\n \| 'warning'\n \| 'danger'\n \| 'info' = 'neutral';\n\n /\n Sets the variant of the tag, which determines its visual style.\n * @reflect\n * @type {'subtle' \| 'bordered'}\n /\n @property({ type: String, reflect: true })\n variant: 'subtle' \| 'bordered' = 'subtle';\n\n private ~~_handleSlotChange~~(~~event~~: ~~Event~~): ~~void~~ {\n const ~~nodes~~ = ~~(event~~.~~target as HTMLSlotElement).~~assignedNodes()~~;\n~~\n ~~const validNodes = nodes~~.filter(\n node =>\n node.nodeType === Node.ELEMENT_NODE \|\|\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n );\n\n if (validNodes~~.length~~ ~~===~~ 0) {\n ~~return~~;\n }\n\n const firstNode: ~~Node~~ = ~~validNodes[0]~~;\n\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = firstNode as HTMLElement;\n\n ~~icon~~.~~setAttribute~~(~~'size',~~ ~~'1rem'~~);\n ~~icon~~.~~style~~.~~marginLeft~~ ~~= 'calc~~(-1 ~~var~~(--fhi-~~spacing-050~~))';\n }\n }\n\n render() {\n return html`\n <fhi-body size=\"small\">\n <slot\n class=\"slot-container\"\n @slotchange=${this._handleSlotChange}\n ></slot>\n </fhi-body>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-tag-border-color: unset;\n }\n\n :host {\n --fhi-tag-border-color: transparent;\n\n display: flex;\n width: fit-content;\n align-items: center;\n\n border: 1px solid var(--fhi-tag-border-color);\n border-radius: var(--fhi-border-radius-050);\n\n height: calc(var(--fhi-spacing-300) - 2px);\n padding: 0 calc(var(--fhi-spacing-100) - 1px);\n\n .slot-container {\n display: flex;\n align-items: center;\n~~\n gap: var(--fhi-spacing-050);\n~~ }\n\n & ~~fhi-body~~ {\n ~~color~~: ~~inherit~~;\n ~~text~~-~~wrap~~: ~~nowrap~~;\n }\n }\n\n :host([color='neutral']) {\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-neutral-surface-active);\n }\n }\n\n :host([color='accent']) {\n color: var(--fhi-color-accent-text-default);\n background-color: var(--fhi-color-accent-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-accent-surface-active);\n }\n }\n\n :host([color='success']) {\n color: var(--fhi-color-success-text-default);\n background-color: var(--fhi-color-success-surface-default);\n\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-success-surface-active);\n }\n }\n\n :host([color='warning']) {\n color: var(--fhi-color-warning-text-default);\n background-color: var(--fhi-color-warning-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-warning-surface-active);\n }\n }\n\n :host([color='danger']) {\n color: var(--fhi-color-danger-text-default);\n background-color: var(--fhi-color-danger-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-danger-surface-active);\n }\n }\n\n :host([color='info']) {\n color: var(--fhi-color-info-text-default);\n background-color: var(--fhi-color-info-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-info-surface-active);\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAiB,~~WAevB~~,IAAA,cAAqB,EAAW;;4BAYxB,0BAQoB;;CAEjC,~~kBAA0B~~,~~GAAoB~~;~~EAG5C~~,~~IAAM~~,~~IAFS~~,~~EAAM~~,~~OAA2B~~,~~cAE7B~~,~~EAAM,QACvB,~~MACE,EAAK,aAAa,KAAK,gBACtB,EAAK,aAAa,KAAK,aAAa,EAAK,aAAa,KAAK,~~CAChE~~;~~EAEA~~,~~IAAI~~,~~EAAW~~,~~WAAW~~,~~GACxB~~;~~EAGF~~,IAAM,~~IAAkB~~,~~EAAW~~;~~EAEnC~~,~~IACE~~,EAAU,aAAa,KAAK,gBAC3B,EAAsB,QAAQ,YAAY,EAAE,WAAW,UAAU,GAClE;GACA,IAAM,IAAO;~~GAGb~~,~~AADA~~,~~EAAK~~,aAAa,QAAQ,~~MAAM~~,~~GAChC~~,~~EAAK~~,~~MAAM~~,~~aAAa~~;EAC1B;CACF;CAEA,SAAS;EACP,OAAO,CAAI;;;;~~wBAIS~~,KAAK,kBAAkB;;;;CAI7C;;gBAEgB,CAAG~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFrB~~;~~GArIG~~,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAaxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,UApB1C,EAAc,CAAc,CAAA,GAAA,CAAA"}
1	+ {"version":3,"file":"fhi-tag.js","names":[],"sources":["../../src/components/fhi-tag/fhi-tag.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiTagSelector = 'fhi-tag';\n\n/*\n ## FHI Tag\n \n {@link https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs}\n \n The `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n \n @tag fhi-tag\n * @element fhi-tag\n \n @slot icon - Optional icon to be displayed in the tag.\n * @slot - The text content of the tag.\n /\n@customElement(FhiTagSelector)\nexport class FhiTag extends LitElement {\n /\n Sets the color theme of the tag.\n * @reflect\n * @type {'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'}\n /\n @property({ type: String, reflect: true }) color:\n \| 'neutral'\n \| 'accent'\n \| 'success'\n \| 'warning'\n \| 'danger'\n \| 'info' = 'neutral';\n\n /\n Sets the variant of the tag, which determines its visual style.\n * @reflect\n * @type {'subtle' \| 'bordered'}\n */\n @property({ type: String, reflect: true })\n variant: 'subtle' \| 'bordered' = 'subtle';\n\n private _getFirstValidNode(slot: HTMLSlotElement): Node \| undefined {\n const validNodes = slot\n .assignedNodes()\n .filter(\n node =>\n node.nodeType === Node.ELEMENT_NODE \|\|\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n );\n\n return validNodes[0];\n }\n\n private _setIconStyles(icon: HTMLElement): void {\n icon.setAttribute('size', '1rem');\n icon.style.marginInlineEnd = 'var(--fhi-spacing-050)';\n }\n\n private _handleSlotChange(event: Event): void {\n const firstNode = this._getFirstValidNode(event.target as HTMLSlotElement);\n\n if (!firstNode) {\n return;\n }\n\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n console.warn(\n \"Icon have been moved to the 'icon' slot. The current usage is deprecated and will no longer be supported in a future release. See documentation for more information: https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs#ikon\",\n );\n const icon = firstNode as HTMLElement;\n this._setIconStyles(icon);\n }\n }\n\n private _handleIconSlotChange(event: Event): void {\n const firstNode = this._getFirstValidNode(event.target as HTMLSlotElement);\n\n if (!firstNode) {\n return;\n }\n\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = firstNode as HTMLElement;\n this._setIconStyles(icon);\n }\n }\n\n render() {\n return html`\n <slot name=\"icon\" @slotchange=${this._handleIconSlotChange}></slot>\n <fhi-body size=\"small\">\n <slot\n class=\"slot-container\"\n @slotchange=${this._handleSlotChange}\n ></slot>\n </fhi-body>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-tag-border-color: unset;\n }\n\n :host {\n --fhi-tag-border-color: transparent;\n\n display: flex;\n width: fit-content;\n align-items: center;\n\n border: 1px solid var(--fhi-tag-border-color);\n border-radius: var(--fhi-border-radius-050);\n\n height: calc(var(--fhi-spacing-300) - 2px);\n padding: 0 calc(var(--fhi-spacing-100) - 1px);\n\n .slot-container {\n display: flex;\n align-items: center;\n }\n\n slot[name='icon'] {\n justify-content: center;\n align-self: stretch;\n }\n }\n\n :host([color='neutral']) {\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-neutral-surface-active);\n }\n }\n\n :host([color='accent']) {\n color: var(--fhi-color-accent-text-default);\n background-color: var(--fhi-color-accent-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-accent-surface-active);\n }\n }\n\n :host([color='success']) {\n color: var(--fhi-color-success-text-default);\n background-color: var(--fhi-color-success-surface-default);\n\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-success-surface-active);\n }\n }\n\n :host([color='warning']) {\n color: var(--fhi-color-warning-text-default);\n background-color: var(--fhi-color-warning-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-warning-surface-active);\n }\n }\n\n :host([color='danger']) {\n color: var(--fhi-color-danger-text-default);\n background-color: var(--fhi-color-danger-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-danger-surface-active);\n }\n }\n\n :host([color='info']) {\n color: var(--fhi-color-info-text-default);\n background-color: var(--fhi-color-info-surface-default);\n &:host([variant='bordered']) {\n border-color: var(--fhi-color-info-surface-active);\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAiB,WAgBvB,IAAA,cAAqB,EAAW;;4BAYxB,0BAQoB;;CAEjC,mBAA2B,GAAyC;EASlE,OARmB,EAChB,cAAc,EACd,QACC,MACE,EAAK,aAAa,KAAK,gBACtB,EAAK,aAAa,KAAK,aAAa,EAAK,aAAa,KAAK,CAG3D,EAAW;CACpB;CAEA,eAAuB,GAAyB;EAE9C,AADA,EAAK,aAAa,QAAQ,MAAM,GAChC,EAAK,MAAM,kBAAkB;CAC/B;CAEA,kBAA0B,GAAoB;EAC5C,IAAM,IAAY,KAAK,mBAAmB,EAAM,MAAyB;EAEpE,SAKH,EAAU,aAAa,KAAK,gBAC3B,EAAsB,QAAQ,YAAY,EAAE,WAAW,UAAU,GAClE;GACA,QAAQ,KACN,0OACF;GACA,IAAM,IAAO;GACb,KAAK,eAAe,CAAI;EAC1B;CACF;CAEA,sBAA8B,GAAoB;EAChD,IAAM,IAAY,KAAK,mBAAmB,EAAM,MAAyB;EAEpE,SAKH,EAAU,aAAa,KAAK,gBAC3B,EAAsB,QAAQ,YAAY,EAAE,WAAW,UAAU,GAClE;GACA,IAAM,IAAO;GACb,KAAK,eAAe,CAAI;EAC1B;CACF;CAEA,SAAS;EACP,OAAO,CAAI;sCACuB,KAAK,sBAAsB;;;;wBAIzC,KAAK,kBAAkB;;;;CAI7C;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8ErB;GA9JG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAaxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,UApB1C,EAAc,CAAc,CAAA,GAAA,CAAA"}

package/fhi-tag.manifest.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"kind":"javascript-module","path":"src/components/fhi-tag/fhi-tag.component.ts","declarations":[{"kind":"class","description":"## FHI Tag\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-tag--docs\n\nThe `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.","name":"FhiTag","slots":[{"description":"The content of the tag. ~~This~~ ~~should~~ be ~~pure~~ ~~text~~ ~~with,~~ ~~or without~~, an ~~icon.~~","name":""}],"~~members~~":[{"kind":"method","name":"_handleSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"color","type":{"text":"'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'"},"default":"'neutral'","description":"Sets the color theme of the tag.","reflects":true,"attribute":"color"},{"kind":"field","name":"variant","type":{"text":"'subtle' \| 'bordered'"},"default":"'subtle'","description":"Sets the variant of the tag, which determines its visual style.","reflects":true,"attribute":"variant"}],"attributes":[{"name":"color","type":{"text":"'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'"},"default":"'neutral'","description":"Sets the color theme of the tag.","fieldName":"color"},{"name":"variant","type":{"text":"'subtle' \| 'bordered'"},"default":"'subtle'","description":"Sets the variant of the tag, which determines its visual style.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-tag","customElement":true},{"kind":"variable","name":"FhiTagSelector","type":{"text":"string"},"default":"'fhi-tag'"}]}
1	+ {"kind":"javascript-module","path":"src/components/fhi-tag/fhi-tag.component.ts","declarations":[{"kind":"class","description":"## FHI Tag\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-tag--docs\n\nThe `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.","name":"FhiTag","slots":[{"description":"The text content of the tag.","name":""},{"description":"Optional icon to be displayed in the tag.","name":"icon"}],"members":[{"kind":"method","name":"_getFirstValidNode","privacy":"private","return":{"type":{"text":"Node \| undefined"}},"parameters":[{"name":"slot","type":{"text":"HTMLSlotElement"}}]},{"kind":"method","name":"_handleIconSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_handleSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_setIconStyles","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"icon","type":{"text":"HTMLElement"}}]},{"kind":"field","name":"color","type":{"text":"'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'"},"default":"'neutral'","description":"Sets the color theme of the tag.","reflects":true,"attribute":"color"},{"kind":"field","name":"variant","type":{"text":"'subtle' \| 'bordered'"},"default":"'subtle'","description":"Sets the variant of the tag, which determines its visual style.","reflects":true,"attribute":"variant"}],"attributes":[{"name":"color","type":{"text":"'neutral' \| 'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'"},"default":"'neutral'","description":"Sets the color theme of the tag.","fieldName":"color"},{"name":"variant","type":{"text":"'subtle' \| 'bordered'"},"default":"'subtle'","description":"Sets the variant of the tag, which determines its visual style.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-tag","customElement":true},{"kind":"variable","name":"FhiTagSelector","type":{"text":"string"},"default":"'fhi-tag'"}]}

package/fhi-text-area.js CHANGED Viewed

@@ -85,8 +85,9 @@ var c = "fhi-text-area", l = class extends i {
           var(--fhi-color-neutral-border-default);
         border-radius: var(--fhi-border-radius-050);
         background-color: var(--fhi-color-neutral-background-default);
-        transition: border-color var(--fhi-motion-ease-default) var(--fhi-motion-duration-quick);
+        transition: border-color var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
         &:hover {
           border-color: var(--fhi-color-accent-border-default);
         }
@@ -115,7 +116,8 @@ var c = "fhi-text-area", l = class extends i {
         font-size: var(--fhi-typography-body-medium-font-size);
         line-height: var(--fhi-typography-body-medium-line-height);
         letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
-        transition: background-color var(--fhi-motion-ease-default) var(--fhi-motion-duration-quick);
+        transition: background-color var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
         &::placeholder {
           color: var(--fhi-color-neutral-base-default);
@@ -125,7 +127,7 @@ var c = "fhi-text-area", l = class extends i {
           border-color: var(--fhi-color-accent-border-default);
           background-color: var(--fhi-color-accent-background-subtle);
         }
         &:focus {
           background-color: var(--fhi-color-accent-background-default);
         }
@@ -133,11 +135,7 @@ var c = "fhi-text-area", l = class extends i {
       label {
         color: var(--fhi-color-neutral-text-default);
-        margin: 0;
-      }
-      label + .textarea-container {
-        margin-top: var(--fhi-spacing-050);
+        padding: 0 0 var(--fhi-spacing-050) 0;
       }
       .help-text {

package/fhi-text-area.js.map CHANGED Viewed

	@@ -1 +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) 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) 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 margin: 0;\n }\n\n label + .textarea-container {\n margin-top: var(--fhi-spacing-050);\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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"}
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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"}

package/fhi-text-input.js CHANGED Viewed

@@ -105,7 +105,7 @@ var c = "fhi-text-input", l = class extends i {
         line-height: var(--fhi-typography-label-small-line-height);
         letter-spacing: var(--fhi-typography-label-small-letter-spacing);
         color: var(--fhi-color-neutral-text-default);
-        margin: 0 0 var(--fhi-spacing-050) 0;
+        padding: 0 0 var(--fhi-spacing-050) 0;
       }
       label:has(+ p) {

package/fhi-text-input.js.map CHANGED Viewed

	@@ -1 +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 margin: 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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"}
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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"}

package/index.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { FhiBody as i, FhiBodySelector as a } from "./fhi-body.js";
 import { FhiCallout as o, FhiCalloutSelector as s } from "./fhi-callout.js";
 import { FhiCheckbox as c, FhiCheckboxSelector as l } from "./fhi-checkbox.js";
 import { FhiIconCalendar as u, FhiIconCalendarSelector as d } from "./fhi-icon-calendar.js";
-import { n as f, t as p } from "./fhi-date-input.component-Bus7CeKM.js";
+import { n as f, t as p } from "./fhi-date-input.component-C1cwkp36.js";
 import { FhiFlex as m, FhiFlexSelector as h } from "./fhi-flex.js";
 import { FhiGrid as g, FhiGridSelector as _ } from "./fhi-grid.js";
 import { FhiLink as v, FhiLinkSelector as y } from "./fhi-link.js";

package/package.json CHANGED Viewed

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

package/web-types.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@folkehelseinstituttet/designsystem",
-  "version": "0.45.0",
+  "version": "0.45.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -858,7 +858,7 @@
         },
         {
           "name": "fhi-tag",
-          "description": "## FHI Tag\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-tag--docs\n\nThe `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the tag. This should be pure text with, or without, an icon.",
+          "description": "## FHI Tag\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-tag--docs\n\nThe `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n\n---\n\n\n### **Slot Section:**\n - _default_ - The text content of the tag.\n- **icon** - Optional icon to be displayed in the tag.",
           "doc-url": "",
           "attributes": [
             {
@@ -879,9 +879,10 @@
             }
           ],
           "slots": [
+            { "name": "", "description": "The text content of the tag." },
             {
-              "name": "",
-              "description": "The content of the tag. This should be pure text with, or without, an icon."
+              "name": "icon",
+              "description": "Optional icon to be displayed in the tag."
             }
           ],
           "events": [],