@folkehelseinstituttet/designsystem 0.40.3 → 0.40.5

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 (6) hide show
  1. package/fhi-checkbox.js +56 -96
  2. package/fhi-checkbox.js.map +1 -1
  3. package/fhi-radio.js +37 -96
  4. package/fhi-radio.js.map +1 -1
  5. package/package.json +1 -1
  6. package/web-types.json +1 -1
package/fhi-checkbox.js CHANGED
@@ -63,49 +63,7 @@ var s = "fhi-checkbox", c = class extends r {
63
63
  static {
64
64
  this.styles = t`
65
65
  :host {
66
- --typography-font-family: var(--fhi-font-family-default);
67
- --typography-font-size: var(--fhi-typography-body-medium-font-size);
68
- --typography-font-weight: var(--fhi-typography-body-medium-font-weight);
69
- --typography-line-height: var(--fhi-typography-body-medium-line-height);
70
- --typography-letter-spacing: var(
71
- --fhi-typography-body-medium-letter-spacing
72
- );
73
-
74
- --color-text: var(--fhi-color-neutral-text-default);
75
- --color-checkbox-checkmark: var(--fhi-color-neutral-text-inverted);
76
- --color-checkbox: var(--fhi-color-neutral-background-default);
77
- --color-checkbox-border: var(--fhi-color-neutral-border-default);
78
- --color-checkbox-hover: var(--fhi-color-accent-background-subtle);
79
- --color-checkbox-border-hover: var(--fhi-color-accent-border-strong);
80
- --color-checkbox-border-active: var(--fhi-color-accent-border-strong);
81
- --color-checkbox-active: var(--fhi-color-accent-surface-default);
82
- --color-checkbox-checked: var(--fhi-color-neutral-base-default);
83
- --color-checkbox-checked-hover: var(--fhi-color-accent-base-hover);
84
- --color-checkbox-checked-active: var(--fhi-color-accent-base-active);
85
- --color-checkbox-error: var(--fhi-color-danger-background-default);
86
- --color-checkbox-border-error: var(--fhi-color-danger-border-default);
87
- --color-checkbox-error-hover: var(--fhi-color-danger-background-subtle);
88
- --color-checkbox-border-error-hover: var(
89
- --fhi-color-danger-border-strong
90
- );
91
- --color-checkbox-error-active: var(--fhi-color-danger-surface-default);
92
- --color-checkbox-error-checked: var(--fhi-color-danger-base-default);
93
- --color-checkbox-checked-error-hover: var(--fhi-color-danger-base-hover);
94
- --color-checkbox-checked-error-active: var(
95
- --fhi-color-danger-base-active
96
- );
97
- --color-checkbox-outline: var(--fhi-color-accent-surface-hover);
98
- --color-checkbox-outline-error: var(--fhi-color-danger-surface-hover);
99
-
100
- --dimension-checkbox-gap: var(--fhi-spacing-050);
101
- --dimension-checkbox-border-radius: var(--fhi-border-radius-050);
102
- --dimension-checkbox-border-width: var(--fhi-dimension-border-width);
103
- --dimension-checkbox-size: 1.125rem;
104
- --dimension-checkbox-margin: 3px;
105
-
106
- --opacity-disabled: var(--fhi-opacity-disabled);
107
- --motion-checkbox-transition: var(--fhi-motion-ease-default)
108
- var(--fhi-motion-duration-quick);
66
+ --fhi-checkbox-color: currentcolor;
109
67
  }
110
68
 
111
69
  :host {
@@ -117,54 +75,55 @@ var s = "fhi-checkbox", c = class extends r {
117
75
  align-items: center;
118
76
  display: flex;
119
77
  position: relative;
120
- color: var(--color-text);
121
- font-family: var(--typography-font-family);
78
+ color: var(--fhi-checkbox-color);
79
+ font-family: var(--fhi-font-family-default);
122
80
  -webkit-font-smoothing: antialiased;
123
- font-size: var(--typography-font-size);
124
- font-weight: var(--typography-font-weight);
125
- line-height: var(--typography-line-height);
126
- letter-spacing: var(--typography-letter-spacing);
127
- gap: var(--dimension-checkbox-gap);
81
+ font-size: var(--fhi-typography-body-medium-font-size);
82
+ font-weight: var(--fhi-typography-body-medium-font-weight);
83
+ line-height: var(--fhi-typography-body-medium-line-height);
84
+ letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
85
+ gap: var(--fhi-spacing-050);
128
86
  }
129
87
 
130
88
  input[type='checkbox'] {
131
- margin: var(--dimension-checkbox-margin);
89
+ margin: 3px;
132
90
  appearance: none;
133
- width: var(--dimension-checkbox-size);
134
- height: var(--dimension-checkbox-size);
135
- background-color: var(--color-checkbox);
136
- border: var(--dimension-checkbox-border-width) solid
137
- var(--color-checkbox-border);
138
- border-radius: var(--dimension-checkbox-border-radius);
139
- transition: var(--motion-checkbox-transition);
91
+ width: 1.125rem;
92
+ height: 1.125rem;
93
+ background-color: var(--fhi-color-neutral-background-default);
94
+ border: var(--fhi-dimension-border-width) solid
95
+ var(--fhi-color-neutral-border-default);
96
+ border-radius: var(--fhi-border-radius-050);
97
+ transition: var(--fhi-motion-ease-default)
98
+ var(--fhi-motion-duration-quick);
140
99
 
141
100
  &:hover {
142
- background-color: var(--color-checkbox-hover);
143
- border-color: var(--color-checkbox-border-hover);
101
+ background-color: var(--fhi-color-accent-background-subtle);
102
+ border-color: var(--fhi-color-accent-border-strong);
144
103
  }
145
104
 
146
105
  &:active {
147
- background-color: var(--color-checkbox-active);
148
- outline: solid 5px var(--color-checkbox-outline);
149
- border-color: var(--color-checkbox-border-active);
106
+ background-color: var(--fhi-color-accent-surface-default);
107
+ outline: solid 5px var(--fhi-color-accent-surface-hover);
108
+ border-color: var(--fhi-color-accent-border-strong);
150
109
  }
151
110
 
152
111
  &:checked {
153
- background-color: var(--color-checkbox-checked);
154
- border-color: var(--color-checkbox-checked);
112
+ background-color: var(--fhi-color-neutral-base-default);
113
+ border-color: var(--fhi-color-neutral-base-default);
155
114
  ~ .checkmark {
156
- fill: var(--color-checkbox-checkmark);
115
+ fill: var(--fhi-color-neutral-text-inverted);
157
116
  visibility: visible;
158
117
  opacity: 1;
159
118
  }
160
119
 
161
120
  &:hover {
162
- background-color: var(--color-checkbox-checked-hover);
163
- border-color: var(--color-checkbox-checked-hover);
121
+ background-color: var(--fhi-color-accent-base-hover);
122
+ border-color: var(--fhi-color-accent-base-hover);
164
123
  }
165
124
  &:active {
166
- background-color: var(--color-checkbox-checked-active);
167
- border-color: var(--color-checkbox-checked-active);
125
+ background-color: var(--fhi-color-accent-base-active);
126
+ border-color: var(--fhi-color-accent-base-active);
168
127
  }
169
128
  }
170
129
  }
@@ -172,16 +131,17 @@ var s = "fhi-checkbox", c = class extends r {
172
131
  .checkmark {
173
132
  visibility: hidden;
174
133
  opacity: 0;
175
- transition: opacity var(--motion-checkbox-transition);
134
+ transition: opacity var(--fhi-motion-ease-default)
135
+ var(--fhi-motion-duration-quick);
176
136
  position: absolute;
177
- height: var(--dimension-checkbox-size);
178
- width: var(--dimension-checkbox-size);
179
- margin-left: var(--dimension-checkbox-margin);
137
+ height: 1.125rem;
138
+ width: 1.125rem;
139
+ margin-left: 3px;
180
140
  }
181
141
  }
182
142
 
183
143
  :host([disabled]) {
184
- opacity: var(--opacity-disabled);
144
+ opacity: var(--fhi-opacity-disabled);
185
145
  label,
186
146
  input {
187
147
  cursor: not-allowed;
@@ -189,55 +149,55 @@ var s = "fhi-checkbox", c = class extends r {
189
149
 
190
150
  input {
191
151
  &:hover {
192
- background-color: var(--color-checkbox);
193
- border-color: var(--color-checkbox-border);
152
+ background-color: var(--fhi-color-neutral-background-default);
153
+ border-color: var(--fhi-color-neutral-border-default);
194
154
  }
195
155
 
196
156
  &:active {
197
157
  outline: none;
198
- background-color: var(--color-checkbox);
199
- border-color: var(--color-checkbox-border);
158
+ background-color: var(--fhi-color-neutral-background-default);
159
+ border-color: var(--fhi-color-neutral-border-default);
200
160
  }
201
161
 
202
162
  &:checked:hover {
203
- background-color: var(--color-checkbox-checked);
204
- border-color: var(--color-checkbox-checked);
163
+ background-color: var(--fhi-color-neutral-base-default);
164
+ border-color: var(--fhi-color-neutral-base-default);
205
165
  }
206
166
 
207
167
  &:checked:active {
208
- background-color: var(--color-checkbox-checked);
209
- border-color: var(--color-checkbox-checked);
168
+ background-color: var(--fhi-color-neutral-base-default);
169
+ border-color: var(--fhi-color-neutral-base-default);
210
170
  }
211
171
  }
212
172
  }
213
173
 
214
174
  :host([status='error']:not([disabled])) {
215
175
  input[type='checkbox'] {
216
- background-color: var(--color-checkbox-error);
217
- border-color: var(--color-checkbox-border-error);
176
+ background-color: var(--fhi-color-danger-background-default);
177
+ border-color: var(--fhi-color-danger-border-default);
218
178
 
219
179
  &:hover {
220
- background-color: var(--color-checkbox-error-hover);
221
- border-color: var(--color-checkbox-border-error-hover);
180
+ background-color: var(--fhi-color-danger-background-subtle);
181
+ border-color: var(--fhi-color-danger-border-strong);
222
182
  }
223
183
 
224
184
  &:active {
225
- background-color: var(--color-checkbox-error-active);
226
- outline: solid 5px var(--color-checkbox-outline-error);
227
- border-color: var(--color-checkbox-border-error-hover);
185
+ background-color: var(--fhi-color-danger-surface-default);
186
+ outline: solid 5px var(--fhi-color-danger-surface-hover);
187
+ border-color: var(--fhi-color-danger-border-strong);
228
188
  }
229
189
 
230
190
  &:checked {
231
- background-color: var(--color-checkbox-error-checked);
232
- border-color: var(--color-checkbox-error-checked);
191
+ background-color: var(--fhi-color-danger-base-default);
192
+ border-color: var(--fhi-color-danger-base-default);
233
193
  &:hover {
234
- background-color: var(--color-checkbox-checked-error-hover);
235
- border-color: var(--color-checkbox-checked-error-hover);
194
+ background-color: var(--fhi-color-danger-base-hover);
195
+ border-color: var(--fhi-color-danger-base-hover);
236
196
  }
237
197
 
238
198
  &:active {
239
- background-color: var(--color-checkbox-checked-error-active);
240
- border-color: var(--color-checkbox-checked-error-active);
199
+ background-color: var(--fhi-color-danger-base-active);
200
+ border-color: var(--fhi-color-danger-base-active);
241
201
  }
242
202
  }
243
203
  }
package/fhi-checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-checkbox.js","names":[],"sources":["../../src/components/fhi-checkbox/fhi-checkbox.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiCheckboxSelector = 'fhi-checkbox';\n\n/**\n * ## FHI Checkbox\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs}\n *\n * The `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\n * It allows users to make binary choices, such as selecting or deselecting an option.\n *\n * @tag fhi-checkbox\n * @element fhi-checkbox\n */\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text label assigned to and displayed next to the checkbox.\n * You should always provide a label.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) name?: string = undefined;\n\n /**\n * The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) value: string = 'on';\n\n /**\n * Sets the visual status of the checkbox. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.\n * @reflect\n * @type {'error' | undefined}\n */\n @property({ type: String, reflect: true }) status?: 'error' | undefined;\n\n /**\n * Whether the checkbox is checked or not.\n * @type {boolean}\n */\n @property({ type: Boolean }) checked? = false;\n\n /**\n * Disables the checkbox. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._updateFormValue();\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _updateFormValue() {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n public formResetCallback() {\n this.checked = false;\n this._updateFormValue();\n }\n\n render() {\n return html`\n <label>\n <input\n type=\"checkbox\"\n name=\"${ifDefined(this.name)}\"\n value=\"${ifDefined(this.value)}\"\n ?disabled=${this.disabled}\n ?checked=${this.checked}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"checkmark\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.043 6.04295C12.4335 5.65243 13.0666 5.65243 13.4571 6.04295C13.8476 6.43348 13.8476 7.06649 13.4571 7.45702L8.95708 11.957C8.56655 12.3475 7.93354 12.3475 7.54302 11.957L5.29302 9.70702C4.90249 9.31649 4.90249 8.68348 5.29302 8.29295C5.65913 7.92684 6.23813 7.90424 6.63091 8.22459L6.70708 8.29295L8.25005 9.83592L12.043 6.04295Z\"\n />\n </svg>\n\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --typography-font-family: var(--fhi-font-family-default);\n --typography-font-size: var(--fhi-typography-body-medium-font-size);\n --typography-font-weight: var(--fhi-typography-body-medium-font-weight);\n --typography-line-height: var(--fhi-typography-body-medium-line-height);\n --typography-letter-spacing: var(\n --fhi-typography-body-medium-letter-spacing\n );\n\n --color-text: var(--fhi-color-neutral-text-default);\n --color-checkbox-checkmark: var(--fhi-color-neutral-text-inverted);\n --color-checkbox: var(--fhi-color-neutral-background-default);\n --color-checkbox-border: var(--fhi-color-neutral-border-default);\n --color-checkbox-hover: var(--fhi-color-accent-background-subtle);\n --color-checkbox-border-hover: var(--fhi-color-accent-border-strong);\n --color-checkbox-border-active: var(--fhi-color-accent-border-strong);\n --color-checkbox-active: var(--fhi-color-accent-surface-default);\n --color-checkbox-checked: var(--fhi-color-neutral-base-default);\n --color-checkbox-checked-hover: var(--fhi-color-accent-base-hover);\n --color-checkbox-checked-active: var(--fhi-color-accent-base-active);\n --color-checkbox-error: var(--fhi-color-danger-background-default);\n --color-checkbox-border-error: var(--fhi-color-danger-border-default);\n --color-checkbox-error-hover: var(--fhi-color-danger-background-subtle);\n --color-checkbox-border-error-hover: var(\n --fhi-color-danger-border-strong\n );\n --color-checkbox-error-active: var(--fhi-color-danger-surface-default);\n --color-checkbox-error-checked: var(--fhi-color-danger-base-default);\n --color-checkbox-checked-error-hover: var(--fhi-color-danger-base-hover);\n --color-checkbox-checked-error-active: var(\n --fhi-color-danger-base-active\n );\n --color-checkbox-outline: var(--fhi-color-accent-surface-hover);\n --color-checkbox-outline-error: var(--fhi-color-danger-surface-hover);\n\n --dimension-checkbox-gap: var(--fhi-spacing-050);\n --dimension-checkbox-border-radius: var(--fhi-border-radius-050);\n --dimension-checkbox-border-width: var(--fhi-dimension-border-width);\n --dimension-checkbox-size: 1.125rem;\n --dimension-checkbox-margin: 3px;\n\n --opacity-disabled: var(--fhi-opacity-disabled);\n --motion-checkbox-transition: var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n align-items: center;\n display: flex;\n position: relative;\n color: var(--color-text);\n font-family: var(--typography-font-family);\n -webkit-font-smoothing: antialiased;\n font-size: var(--typography-font-size);\n font-weight: var(--typography-font-weight);\n line-height: var(--typography-line-height);\n letter-spacing: var(--typography-letter-spacing);\n gap: var(--dimension-checkbox-gap);\n }\n\n input[type='checkbox'] {\n margin: var(--dimension-checkbox-margin);\n appearance: none;\n width: var(--dimension-checkbox-size);\n height: var(--dimension-checkbox-size);\n background-color: var(--color-checkbox);\n border: var(--dimension-checkbox-border-width) solid\n var(--color-checkbox-border);\n border-radius: var(--dimension-checkbox-border-radius);\n transition: var(--motion-checkbox-transition);\n\n &:hover {\n background-color: var(--color-checkbox-hover);\n border-color: var(--color-checkbox-border-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-active);\n outline: solid 5px var(--color-checkbox-outline);\n border-color: var(--color-checkbox-border-active);\n }\n\n &:checked {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n ~ .checkmark {\n fill: var(--color-checkbox-checkmark);\n visibility: visible;\n opacity: 1;\n }\n\n &:hover {\n background-color: var(--color-checkbox-checked-hover);\n border-color: var(--color-checkbox-checked-hover);\n }\n &:active {\n background-color: var(--color-checkbox-checked-active);\n border-color: var(--color-checkbox-checked-active);\n }\n }\n }\n\n .checkmark {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--motion-checkbox-transition);\n position: absolute;\n height: var(--dimension-checkbox-size);\n width: var(--dimension-checkbox-size);\n margin-left: var(--dimension-checkbox-margin);\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n label,\n input {\n cursor: not-allowed;\n }\n\n input {\n &:hover {\n background-color: var(--color-checkbox);\n border-color: var(--color-checkbox-border);\n }\n\n &:active {\n outline: none;\n background-color: var(--color-checkbox);\n border-color: var(--color-checkbox-border);\n }\n\n &:checked:hover {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n }\n\n &:checked:active {\n background-color: var(--color-checkbox-checked);\n border-color: var(--color-checkbox-checked);\n }\n }\n }\n\n :host([status='error']:not([disabled])) {\n input[type='checkbox'] {\n background-color: var(--color-checkbox-error);\n border-color: var(--color-checkbox-border-error);\n\n &:hover {\n background-color: var(--color-checkbox-error-hover);\n border-color: var(--color-checkbox-border-error-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-error-active);\n outline: solid 5px var(--color-checkbox-outline-error);\n border-color: var(--color-checkbox-border-error-hover);\n }\n\n &:checked {\n background-color: var(--color-checkbox-error-checked);\n border-color: var(--color-checkbox-error-checked);\n &:hover {\n background-color: var(--color-checkbox-checked-error-hover);\n border-color: var(--color-checkbox-checked-error-hover);\n }\n\n &:active {\n background-color: var(--color-checkbox-checked-error-active);\n border-color: var(--color-checkbox-checked-error-active);\n }\n }\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAsB,gBAc5B,IAAA,cAA0B,EAAW;;wBAET;;CA4CjC,cAAc;EAEZ,AADA,MAAM,gBAtCqC,KAAA,eAMD,KAAA,gBAMA,qBAcJ,oBAOgB,IAMtD,KAAK,aAAa,KAAK,gBAAgB;CACzC;CAEA,oBAA0B;EAExB,AADA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB;CACxB;CAEA,cAAsB,GAAoB;EAKxC,AAJA,KAAK,UAAW,EAAM,OAA4B,SAClD,KAAK,iBAAiB,GAEtB,EAAM,gBAAgB,GACtB,KAAK,qBAAqB;CAC5B;CAEA,aAAqB,GAAoB;EAEvC,AADA,EAAM,gBAAgB,GACtB,KAAK,oBAAoB;CAC3B;CAEA,mBAA2B;EACzB,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;CAC/D;CAEA,uBAAqC;EAKnC,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CAC3D;CAEA,sBAAoC;EAKlC,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC1E;CAEA,oBAA2B;EAEzB,AADA,KAAK,UAAU,IACf,KAAK,iBAAiB;CACxB;CAEA,SAAS;EACP,OAAO,CAAI;;;;kBAIG,EAAU,KAAK,IAAI,EAAE;mBACpB,EAAU,KAAK,KAAK,EAAE;sBACnB,KAAK,SAAS;qBACf,KAAK,QAAQ;oBACd,KAAK,cAAc;mBACpB,KAAK,aAAa;;;;;;;;;;;;;;UAc3B,KAAK,MAAM;;;CAGnB;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsLrB;GAxSG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAQzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAO1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UA3C3C,EAAc,CAAmB,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"fhi-checkbox.js","names":[],"sources":["../../src/components/fhi-checkbox/fhi-checkbox.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiCheckboxSelector = 'fhi-checkbox';\n\n/**\n * ## FHI Checkbox\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs}\n *\n * The `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\n * It allows users to make binary choices, such as selecting or deselecting an option.\n *\n * @tag fhi-checkbox\n * @element fhi-checkbox\n */\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text label assigned to and displayed next to the checkbox.\n * You should always provide a label.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) name?: string = undefined;\n\n /**\n * The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.\n * @type {string}\n */\n @property({ type: String }) value: string = 'on';\n\n /**\n * Sets the visual status of the checkbox. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.\n * @reflect\n * @type {'error' | undefined}\n */\n @property({ type: String, reflect: true }) status?: 'error' | undefined;\n\n /**\n * Whether the checkbox is checked or not.\n * @type {boolean}\n */\n @property({ type: Boolean }) checked? = false;\n\n /**\n * Disables the checkbox. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._updateFormValue();\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _updateFormValue() {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the checkbox is checked or unchecked.\n */\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n public formResetCallback() {\n this.checked = false;\n this._updateFormValue();\n }\n\n render() {\n return html`\n <label>\n <input\n type=\"checkbox\"\n name=\"${ifDefined(this.name)}\"\n value=\"${ifDefined(this.value)}\"\n ?disabled=${this.disabled}\n ?checked=${this.checked}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"checkmark\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.043 6.04295C12.4335 5.65243 13.0666 5.65243 13.4571 6.04295C13.8476 6.43348 13.8476 7.06649 13.4571 7.45702L8.95708 11.957C8.56655 12.3475 7.93354 12.3475 7.54302 11.957L5.29302 9.70702C4.90249 9.31649 4.90249 8.68348 5.29302 8.29295C5.65913 7.92684 6.23813 7.90424 6.63091 8.22459L6.70708 8.29295L8.25005 9.83592L12.043 6.04295Z\"\n />\n </svg>\n\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-checkbox-color: currentcolor;\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n align-items: center;\n display: flex;\n position: relative;\n color: var(--fhi-checkbox-color);\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n gap: var(--fhi-spacing-050);\n }\n\n input[type='checkbox'] {\n margin: 3px;\n appearance: none;\n width: 1.125rem;\n height: 1.125rem;\n background-color: var(--fhi-color-neutral-background-default);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n transition: var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n\n &:hover {\n background-color: var(--fhi-color-accent-background-subtle);\n border-color: var(--fhi-color-accent-border-strong);\n }\n\n &:active {\n background-color: var(--fhi-color-accent-surface-default);\n outline: solid 5px var(--fhi-color-accent-surface-hover);\n border-color: var(--fhi-color-accent-border-strong);\n }\n\n &:checked {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n ~ .checkmark {\n fill: var(--fhi-color-neutral-text-inverted);\n visibility: visible;\n opacity: 1;\n }\n\n &:hover {\n background-color: var(--fhi-color-accent-base-hover);\n border-color: var(--fhi-color-accent-base-hover);\n }\n &:active {\n background-color: var(--fhi-color-accent-base-active);\n border-color: var(--fhi-color-accent-base-active);\n }\n }\n }\n\n .checkmark {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n position: absolute;\n height: 1.125rem;\n width: 1.125rem;\n margin-left: 3px;\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n label,\n input {\n cursor: not-allowed;\n }\n\n input {\n &:hover {\n background-color: var(--fhi-color-neutral-background-default);\n border-color: var(--fhi-color-neutral-border-default);\n }\n\n &:active {\n outline: none;\n background-color: var(--fhi-color-neutral-background-default);\n border-color: var(--fhi-color-neutral-border-default);\n }\n\n &:checked:hover {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n }\n\n &:checked:active {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n }\n }\n }\n\n :host([status='error']:not([disabled])) {\n input[type='checkbox'] {\n background-color: var(--fhi-color-danger-background-default);\n border-color: var(--fhi-color-danger-border-default);\n\n &:hover {\n background-color: var(--fhi-color-danger-background-subtle);\n border-color: var(--fhi-color-danger-border-strong);\n }\n\n &:active {\n background-color: var(--fhi-color-danger-surface-default);\n outline: solid 5px var(--fhi-color-danger-surface-hover);\n border-color: var(--fhi-color-danger-border-strong);\n }\n\n &:checked {\n background-color: var(--fhi-color-danger-base-default);\n border-color: var(--fhi-color-danger-base-default);\n &:hover {\n background-color: var(--fhi-color-danger-base-hover);\n border-color: var(--fhi-color-danger-base-hover);\n }\n\n &:active {\n background-color: var(--fhi-color-danger-base-active);\n border-color: var(--fhi-color-danger-base-active);\n }\n }\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAsB,gBAc5B,IAAA,cAA0B,EAAW;;wBAET;;CA4CjC,cAAc;EAEZ,AADA,MAAM,gBAtCqC,KAAA,eAMD,KAAA,gBAMA,qBAcJ,oBAOgB,IAMtD,KAAK,aAAa,KAAK,gBAAgB;CACzC;CAEA,oBAA0B;EAExB,AADA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB;CACxB;CAEA,cAAsB,GAAoB;EAKxC,AAJA,KAAK,UAAW,EAAM,OAA4B,SAClD,KAAK,iBAAiB,GAEtB,EAAM,gBAAgB,GACtB,KAAK,qBAAqB;CAC5B;CAEA,aAAqB,GAAoB;EAEvC,AADA,EAAM,gBAAgB,GACtB,KAAK,oBAAoB;CAC3B;CAEA,mBAA2B;EACzB,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;CAC/D;CAEA,uBAAqC;EAKnC,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CAC3D;CAEA,sBAAoC;EAKlC,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC1E;CAEA,oBAA2B;EAEzB,AADA,KAAK,UAAU,IACf,KAAK,iBAAiB;CACxB;CAEA,SAAS;EACP,OAAO,CAAI;;;;kBAIG,EAAU,KAAK,IAAI,EAAE;mBACpB,EAAU,KAAK,KAAK,EAAE;sBACnB,KAAK,SAAS;qBACf,KAAK,QAAQ;oBACd,KAAK,cAAc;mBACpB,KAAK,aAAa;;;;;;;;;;;;;;UAc3B,KAAK,MAAM;;;CAGnB;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8IrB;GAhQG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAQzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAO1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UA3C3C,EAAc,CAAmB,CAAA,GAAA,CAAA"}
package/fhi-radio.js CHANGED
@@ -97,69 +97,7 @@ var c = "fhi-radio", l = class extends i {
97
97
  static {
98
98
  this.styles = t`
99
99
  :host {
100
- --motion-radio-transition: var(--fhi-motion-ease-default)
101
- var(--fhi-motion-duration-quick);
102
-
103
- --color-radio-label: var(--fhi-color-neutral-text-default);
104
- --color-radio-border: var(--fhi-color-neutral-border-default);
105
- --color-radio-background: var(--fhi-color-neutral-background-default);
106
-
107
- --color-radio-border-hover: var(--fhi-color-accent-border-strong);
108
- --color-radio-background-hover: var(--fhi-color-accent-background-subtle);
109
-
110
- --color-radio-background-active: var(--fhi-color-accent-surface-default);
111
-
112
- --color-radio-outline: var(--fhi-color-accent-surface-hover);
113
-
114
- --typography-radio-label-font-family: var(--fhi-font-family-default);
115
- -webkit-font-smoothing: antialiased;
116
- --typography-radio-label-font-size: var(
117
- --fhi-typography-body-medium-font-size
118
- );
119
-
120
- --typography-radio-label-font-weight: var(
121
- --fhi-typography-body-medium-font-weight
122
- );
123
-
124
- --typography-radio-label-line-height: var(
125
- --fhi-typography-body-medium-line-height
126
- );
127
- --typography-radio-label-letter-spacing: var(
128
- --fhi-typography-body-medium-letter-spacing
129
- );
130
-
131
- --dimension-radio-label-gap: var(--fhi-spacing-050);
132
- --dimension-radio-width: var(--fhi-spacing-250);
133
- --dimension-radio-height: var(--fhi-spacing-250);
134
- --dimension-radio-margin: 0.125rem;
135
- --dimension-radio-border-width: var(--fhi-dimension-border-width);
136
-
137
- --dimension-radio-dot-size: 1.125rem;
138
-
139
- /* Checked state */
140
- --dimension-radio-border-width-checked: var(
141
- --fhi-dimension-border-width-active
142
- );
143
-
144
- /* Error state */
145
- --color-radio-border-error: var(--fhi-color-danger-border-default);
146
- --color-radio-background-error: var(
147
- --fhi-color-danger-background-default
148
- );
149
-
150
- --color-radio-border-error-hover: var(--fhi-color-danger-border-strong);
151
- --color-radio-background-error-hover: var(
152
- --fhi-color-danger-background-subtle
153
- );
154
-
155
- --color-radio-background-error-active: var(
156
- --fhi-color-danger-surface-default
157
- );
158
-
159
- --color-radio-outline-error: var(--fhi-color-danger-surface-hover);
160
-
161
- /* Disabled state */
162
- --opacity-disabled: var(--fhi-opacity-disabled);
100
+ --fhi-radio-color: currentcolor;
163
101
  }
164
102
 
165
103
  :host {
@@ -170,13 +108,14 @@ var c = "fhi-radio", l = class extends i {
170
108
  label {
171
109
  display: flex;
172
110
  position: relative;
173
- gap: var(--dimension-radio-label-gap);
174
- color: var(--color-radio-label);
175
- font-family: var(--typography-radio-label-font-family);
176
- font-size: var(--typography-radio-label-font-size);
177
- font-weight: var(--typography-radio-label-font-weight);
178
- line-height: var(--typography-radio-label-line-height);
179
- letter-spacing: var(--typography-radio-label-letter-spacing);
111
+ gap: var(--fhi-spacing-050);
112
+ color: var(--fhi-radio-color);
113
+ font-family: var(--fhi-font-family-default);
114
+ -webkit-font-smoothing: antialiased;
115
+ font-size: var(--fhi-typography-body-medium-font-size);
116
+ font-weight: var(--fhi-typography-body-medium-font-weight);
117
+ line-height: var(--fhi-typography-body-medium-line-height);
118
+ letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
180
119
  }
181
120
 
182
121
  .radio-container {
@@ -186,33 +125,35 @@ var c = "fhi-radio", l = class extends i {
186
125
 
187
126
  input {
188
127
  appearance: none;
189
- margin: var(--dimension-radio-margin);
190
- width: var(--dimension-radio-width);
191
- height: var(--dimension-radio-height);
192
- background-color: var(--color-radio-background);
193
- border: var(--dimension-radio-border-width) solid
194
- var(--color-radio-border);
128
+ margin: 0.125rem;
129
+ width: var(--fhi-spacing-250);
130
+ height: var(--fhi-spacing-250);
131
+ background-color: var(--fhi-color-neutral-background-default);
132
+ border: var(--fhi-dimension-border-width) solid
133
+ var(--fhi-color-neutral-border-default);
195
134
  border-radius: var(--fhi-border-radius-full);
196
- transition: all var(--motion-radio-transition);
135
+ transition: all var(--fhi-motion-ease-default)
136
+ var(--fhi-motion-duration-quick);
197
137
  }
198
138
 
199
139
  .radio-dot {
200
140
  visibility: hidden;
201
141
  opacity: 0;
202
- transition: opacity var(--motion-radio-transition);
142
+ transition: opacity var(--fhi-motion-ease-default)
143
+ var(--fhi-motion-duration-quick);
203
144
  position: absolute;
204
145
  top: 50%;
205
146
  left: 50%;
206
147
  transform: translate(-50%, -50%);
207
- height: var(--dimension-radio-dot-size);
208
- width: var(--dimension-radio-dot-size);
148
+ height: 1.125rem;
149
+ width: 1.125rem;
209
150
  }
210
151
 
211
152
  input:checked {
212
- border-width: var(--dimension-radio-border-width-checked);
153
+ border-width: var(--fhi-dimension-border-width-active);
213
154
  ~ .radio-dot {
214
155
  circle {
215
- fill: var(--color-radio-border);
156
+ fill: var(--fhi-color-neutral-border-default);
216
157
  }
217
158
  visibility: visible;
218
159
  opacity: 1;
@@ -221,7 +162,7 @@ var c = "fhi-radio", l = class extends i {
221
162
  }
222
163
 
223
164
  :host([disabled]) {
224
- opacity: var(--opacity-disabled);
165
+ opacity: var(--fhi-opacity-disabled);
225
166
  label,
226
167
  input {
227
168
  cursor: not-allowed;
@@ -230,28 +171,28 @@ var c = "fhi-radio", l = class extends i {
230
171
 
231
172
  :host(:not(:disabled)) {
232
173
  input:hover:not(:checked) {
233
- border-color: var(--color-radio-border-hover);
234
- background-color: var(--color-radio-background-hover);
174
+ border-color: var(--fhi-color-accent-border-strong);
175
+ background-color: var(--fhi-color-accent-background-subtle);
235
176
  }
236
177
 
237
178
  input:active:not(:checked) {
238
- border-color: var(--color-radio-border-hover);
239
- background-color: var(--color-radio-background-active);
179
+ border-color: var(--fhi-color-accent-border-strong);
180
+ background-color: var(--fhi-color-accent-surface-default);
240
181
  outline: var(--fhi-dimension-border-width-focus) solid
241
- var(--color-radio-outline);
182
+ var(--fhi-color-accent-surface-hover);
242
183
  }
243
184
  }
244
185
 
245
186
  :host([status='error']) {
246
187
  input {
247
- border-color: var(--color-radio-border-error);
248
- background-color: var(--color-radio-background-error);
188
+ border-color: var(--fhi-color-danger-border-default);
189
+ background-color: var(--fhi-color-danger-background-default);
249
190
  }
250
191
 
251
192
  input:checked {
252
193
  ~ .radio-dot {
253
194
  circle {
254
- fill: var(--color-radio-border-error);
195
+ fill: var(--fhi-color-danger-border-default);
255
196
  }
256
197
  }
257
198
  }
@@ -259,14 +200,14 @@ var c = "fhi-radio", l = class extends i {
259
200
 
260
201
  :host([status='error']:not(:disabled)) {
261
202
  input:hover:not(:checked) {
262
- border-color: var(--color-radio-border-error-hover);
263
- background-color: var(--color-radio-background-error-hover);
203
+ border-color: var(--fhi-color-danger-border-strong);
204
+ background-color: var(--fhi-color-danger-background-subtle);
264
205
  }
265
206
 
266
207
  input:active:not(:checked) {
267
- border-color: var(--color-radio-border-error-hover);
268
- background-color: var(--color-radio-background-error-active);
269
- outline-color: var(--color-radio-outline-error);
208
+ border-color: var(--fhi-color-danger-border-strong);
209
+ background-color: var(--fhi-color-danger-surface-default);
210
+ outline-color: var(--fhi-color-danger-surface-hover);
270
211
  }
271
212
  }
272
213
  `;
package/fhi-radio.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-radio.js","names":[],"sources":["../../src/components/fhi-radio/fhi-radio.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiRadioSelector = 'fhi-radio';\n\n/**\n * ## FHI Radio\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-radio--docs}\n *\n * The `<fhi-radio>` component represents a single radio button.\n * It should be used within a group of options, allowing users to select one option from a set.\n *\n * @tag fhi-radio\n * @element fhi-radio\n */\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * The text label assigned to and displayed next to the radio.\n * You should always provide a label.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\n * All `<fhi-radio>` components with the same name belong to the same group.\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true }) name?: string = undefined;\n\n /**\n * Sets the visual status of the radio. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.\n * @reflect\n * @type {'error' | undefined}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Disables the radio. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n /**\n * Whether the radio button is checked or not.\n * @type {boolean}\n */\n @property({ type: Boolean }) checked? = false;\n\n /**\n * The value of the radio. This is submitted with the form data as a `value` when the radio is checked.\n * @type {string}\n */\n @property({ type: String }) value: string = 'on';\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _groupRoot: Document | HTMLFormElement;\n private _internals: ElementInternals;\n\n /**\n * Indicates if the radio button is part of a form.\n * @internal\n */\n public isFormElement = false;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n this._groupRoot = document;\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('focus', this._setFocusOnInput);\n\n this.isFormElement = !!this._internals.form;\n\n if (this.isFormElement) {\n this._updateFormValue();\n this._groupRoot = this._internals.form!;\n }\n\n // If the radio has a name then it is part of a group and needs keyboard navigation\n if (this.name) {\n this.addEventListener('keydown', this._handleKeyDown);\n this._SetTabbableRadios();\n }\n }\n\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeyDown);\n this.removeEventListener('focus', this._setFocusOnInput);\n }\n\n private _setFocusOnInput() {\n this._input.focus();\n }\n\n private _getRadioGroup() {\n return Array.from(\n this._groupRoot.querySelectorAll<FhiRadio>(\n `${FhiRadioSelector}[name=\"${this.name}\"]`,\n ),\n );\n }\n\n private _SetTabbableRadios() {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n // Only the checked radio should be tabbable\n radio.tabIndex = radio.checked ? 0 : -1;\n });\n\n // If none of the radios are checked, make the first one tabbable\n if (!radios.some(radio => radio.checked) && radios.length > 0) {\n radios[0].tabIndex = 0;\n }\n }\n\n public updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n\n // make sure the radio input can be programmatically toggeled. e.g by a form reset\n if (changedProperties.has('checked')) {\n this._input.checked = !!this.checked;\n this._updateFormValue();\n\n if (this.checked) {\n this.uncheckGroupMembers();\n }\n }\n\n // update the form value when the value or name input changes and the radio is already checked\n if (changedProperties.has('value') || changedProperties.has('name')) {\n if (this._input.checked) {\n this._updateFormValue();\n }\n }\n }\n\n public formResetCallback(): void {\n const radiosCheckedByDefault = this._getRadioGroup().filter(\n radio => typeof radio.getAttribute('checked') === 'string',\n );\n\n if (radiosCheckedByDefault.pop() === this) {\n this.checked = true;\n }\n\n this._updateFormValue();\n }\n\n private uncheckGroupMembers(): void {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n if (radio === this) {\n return;\n }\n\n if (radio.isFormElement && this._groupRoot === document) {\n return;\n }\n\n radio.checked = false;\n });\n }\n\n private _updateFormValue(): void {\n if (!this.isFormElement) {\n return;\n }\n\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n\n this.uncheckGroupMembers();\n\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the radio is checked or unchecked.\n */\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the radio is checked or unchecked.\n */\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n if (!arrows.includes(event.key)) {\n return;\n }\n\n event.preventDefault();\n\n const radios = this._getRadioGroup();\n\n if (radios.length < 2) {\n return;\n }\n\n const currentIndex = radios.indexOf(this);\n\n const nextIndex = currentIndex;\n let nextRadio: FhiRadio;\n\n if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n } else {\n nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n }\n\n nextRadio.focus();\n this.checked = false;\n nextRadio.checked = true;\n this._SetTabbableRadios();\n }\n\n render() {\n return html`\n <label>\n <div class=\"radio-container\">\n <input\n type=\"radio\"\n id=\"input-element\"\n name=\"${ifDefined(this.name)}\"\n value=\"${this.value}\"\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"radio-dot\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle r=\"6\" cx=\"9\" cy=\"9\" />\n </svg>\n </div>\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --motion-radio-transition: var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n\n --color-radio-label: var(--fhi-color-neutral-text-default);\n --color-radio-border: var(--fhi-color-neutral-border-default);\n --color-radio-background: var(--fhi-color-neutral-background-default);\n\n --color-radio-border-hover: var(--fhi-color-accent-border-strong);\n --color-radio-background-hover: var(--fhi-color-accent-background-subtle);\n\n --color-radio-background-active: var(--fhi-color-accent-surface-default);\n\n --color-radio-outline: var(--fhi-color-accent-surface-hover);\n\n --typography-radio-label-font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n --typography-radio-label-font-size: var(\n --fhi-typography-body-medium-font-size\n );\n\n --typography-radio-label-font-weight: var(\n --fhi-typography-body-medium-font-weight\n );\n\n --typography-radio-label-line-height: var(\n --fhi-typography-body-medium-line-height\n );\n --typography-radio-label-letter-spacing: var(\n --fhi-typography-body-medium-letter-spacing\n );\n\n --dimension-radio-label-gap: var(--fhi-spacing-050);\n --dimension-radio-width: var(--fhi-spacing-250);\n --dimension-radio-height: var(--fhi-spacing-250);\n --dimension-radio-margin: 0.125rem;\n --dimension-radio-border-width: var(--fhi-dimension-border-width);\n\n --dimension-radio-dot-size: 1.125rem;\n\n /* Checked state */\n --dimension-radio-border-width-checked: var(\n --fhi-dimension-border-width-active\n );\n\n /* Error state */\n --color-radio-border-error: var(--fhi-color-danger-border-default);\n --color-radio-background-error: var(\n --fhi-color-danger-background-default\n );\n\n --color-radio-border-error-hover: var(--fhi-color-danger-border-strong);\n --color-radio-background-error-hover: var(\n --fhi-color-danger-background-subtle\n );\n\n --color-radio-background-error-active: var(\n --fhi-color-danger-surface-default\n );\n\n --color-radio-outline-error: var(--fhi-color-danger-surface-hover);\n\n /* Disabled state */\n --opacity-disabled: var(--fhi-opacity-disabled);\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n display: flex;\n position: relative;\n gap: var(--dimension-radio-label-gap);\n color: var(--color-radio-label);\n font-family: var(--typography-radio-label-font-family);\n font-size: var(--typography-radio-label-font-size);\n font-weight: var(--typography-radio-label-font-weight);\n line-height: var(--typography-radio-label-line-height);\n letter-spacing: var(--typography-radio-label-letter-spacing);\n }\n\n .radio-container {\n display: flex;\n position: relative;\n }\n\n input {\n appearance: none;\n margin: var(--dimension-radio-margin);\n width: var(--dimension-radio-width);\n height: var(--dimension-radio-height);\n background-color: var(--color-radio-background);\n border: var(--dimension-radio-border-width) solid\n var(--color-radio-border);\n border-radius: var(--fhi-border-radius-full);\n transition: all var(--motion-radio-transition);\n }\n\n .radio-dot {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--motion-radio-transition);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: var(--dimension-radio-dot-size);\n width: var(--dimension-radio-dot-size);\n }\n\n input:checked {\n border-width: var(--dimension-radio-border-width-checked);\n ~ .radio-dot {\n circle {\n fill: var(--color-radio-border);\n }\n visibility: visible;\n opacity: 1;\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--opacity-disabled);\n label,\n input {\n cursor: not-allowed;\n }\n }\n\n :host(:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--color-radio-border-hover);\n background-color: var(--color-radio-background-hover);\n }\n\n input:active:not(:checked) {\n border-color: var(--color-radio-border-hover);\n background-color: var(--color-radio-background-active);\n outline: var(--fhi-dimension-border-width-focus) solid\n var(--color-radio-outline);\n }\n }\n\n :host([status='error']) {\n input {\n border-color: var(--color-radio-border-error);\n background-color: var(--color-radio-background-error);\n }\n\n input:checked {\n ~ .radio-dot {\n circle {\n fill: var(--color-radio-border-error);\n }\n }\n }\n }\n\n :host([status='error']:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--color-radio-border-error-hover);\n background-color: var(--color-radio-background-error-hover);\n }\n\n input:active:not(:checked) {\n border-color: var(--color-radio-border-error-hover);\n background-color: var(--color-radio-background-error-active);\n outline-color: var(--color-radio-outline-error);\n }\n }\n `;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"fhi-radio.js","names":[],"sources":["../../src/components/fhi-radio/fhi-radio.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiRadioSelector = 'fhi-radio';\n\n/**\n * ## FHI Radio\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-radio--docs}\n *\n * The `<fhi-radio>` component represents a single radio button.\n * It should be used within a group of options, allowing users to select one option from a set.\n *\n * @tag fhi-radio\n * @element fhi-radio\n */\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * The text label assigned to and displayed next to the radio.\n * You should always provide a label.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\n * All `<fhi-radio>` components with the same name belong to the same group.\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true }) name?: string = undefined;\n\n /**\n * Sets the visual status of the radio. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.\n * @reflect\n * @type {'error' | undefined}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Disables the radio. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n /**\n * Whether the radio button is checked or not.\n * @type {boolean}\n */\n @property({ type: Boolean }) checked? = false;\n\n /**\n * The value of the radio. This is submitted with the form data as a `value` when the radio is checked.\n * @type {string}\n */\n @property({ type: String }) value: string = 'on';\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _groupRoot: Document | HTMLFormElement;\n private _internals: ElementInternals;\n\n /**\n * Indicates if the radio button is part of a form.\n * @internal\n */\n public isFormElement = false;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n this._groupRoot = document;\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('focus', this._setFocusOnInput);\n\n this.isFormElement = !!this._internals.form;\n\n if (this.isFormElement) {\n this._updateFormValue();\n this._groupRoot = this._internals.form!;\n }\n\n // If the radio has a name then it is part of a group and needs keyboard navigation\n if (this.name) {\n this.addEventListener('keydown', this._handleKeyDown);\n this._SetTabbableRadios();\n }\n }\n\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeyDown);\n this.removeEventListener('focus', this._setFocusOnInput);\n }\n\n private _setFocusOnInput() {\n this._input.focus();\n }\n\n private _getRadioGroup() {\n return Array.from(\n this._groupRoot.querySelectorAll<FhiRadio>(\n `${FhiRadioSelector}[name=\"${this.name}\"]`,\n ),\n );\n }\n\n private _SetTabbableRadios() {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n // Only the checked radio should be tabbable\n radio.tabIndex = radio.checked ? 0 : -1;\n });\n\n // If none of the radios are checked, make the first one tabbable\n if (!radios.some(radio => radio.checked) && radios.length > 0) {\n radios[0].tabIndex = 0;\n }\n }\n\n public updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n\n // make sure the radio input can be programmatically toggeled. e.g by a form reset\n if (changedProperties.has('checked')) {\n this._input.checked = !!this.checked;\n this._updateFormValue();\n\n if (this.checked) {\n this.uncheckGroupMembers();\n }\n }\n\n // update the form value when the value or name input changes and the radio is already checked\n if (changedProperties.has('value') || changedProperties.has('name')) {\n if (this._input.checked) {\n this._updateFormValue();\n }\n }\n }\n\n public formResetCallback(): void {\n const radiosCheckedByDefault = this._getRadioGroup().filter(\n radio => typeof radio.getAttribute('checked') === 'string',\n );\n\n if (radiosCheckedByDefault.pop() === this) {\n this.checked = true;\n }\n\n this._updateFormValue();\n }\n\n private uncheckGroupMembers(): void {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n if (radio === this) {\n return;\n }\n\n if (radio.isFormElement && this._groupRoot === document) {\n return;\n }\n\n radio.checked = false;\n });\n }\n\n private _updateFormValue(): void {\n if (!this.isFormElement) {\n return;\n }\n\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n\n this.uncheckGroupMembers();\n\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the radio is checked or unchecked.\n */\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the radio is checked or unchecked.\n */\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n if (!arrows.includes(event.key)) {\n return;\n }\n\n event.preventDefault();\n\n const radios = this._getRadioGroup();\n\n if (radios.length < 2) {\n return;\n }\n\n const currentIndex = radios.indexOf(this);\n\n const nextIndex = currentIndex;\n let nextRadio: FhiRadio;\n\n if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n } else {\n nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n }\n\n nextRadio.focus();\n this.checked = false;\n nextRadio.checked = true;\n this._SetTabbableRadios();\n }\n\n render() {\n return html`\n <label>\n <div class=\"radio-container\">\n <input\n type=\"radio\"\n id=\"input-element\"\n name=\"${ifDefined(this.name)}\"\n value=\"${this.value}\"\n ?checked=${this.checked}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"radio-dot\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle r=\"6\" cx=\"9\" cy=\"9\" />\n </svg>\n </div>\n ${this.label}\n </label>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-radio-color: currentcolor;\n }\n\n :host {\n display: flex;\n align-items: center;\n width: max-content;\n\n label {\n display: flex;\n position: relative;\n gap: var(--fhi-spacing-050);\n color: var(--fhi-radio-color);\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n\n .radio-container {\n display: flex;\n position: relative;\n }\n\n input {\n appearance: none;\n margin: 0.125rem;\n width: var(--fhi-spacing-250);\n height: var(--fhi-spacing-250);\n background-color: var(--fhi-color-neutral-background-default);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-full);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n }\n\n .radio-dot {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 1.125rem;\n width: 1.125rem;\n }\n\n input:checked {\n border-width: var(--fhi-dimension-border-width-active);\n ~ .radio-dot {\n circle {\n fill: var(--fhi-color-neutral-border-default);\n }\n visibility: visible;\n opacity: 1;\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n label,\n input {\n cursor: not-allowed;\n }\n }\n\n :host(:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n\n input:active:not(:checked) {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-surface-default);\n outline: var(--fhi-dimension-border-width-focus) solid\n var(--fhi-color-accent-surface-hover);\n }\n }\n\n :host([status='error']) {\n input {\n border-color: var(--fhi-color-danger-border-default);\n background-color: var(--fhi-color-danger-background-default);\n }\n\n input:checked {\n ~ .radio-dot {\n circle {\n fill: var(--fhi-color-danger-border-default);\n }\n }\n }\n }\n\n :host([status='error']:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-subtle);\n }\n\n input:active:not(:checked) {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-surface-default);\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n }\n `;\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1 +1 @@
1
- {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.40.3","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
1
+ {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.40.5","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@folkehelseinstituttet/designsystem",
4
- "version": "0.40.3",
4
+ "version": "0.40.5",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {