@folkehelseinstituttet/designsystem 0.40.2 → 0.40.3

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 (4) hide show
  1. package/fhi-button.js +188 -536
  2. package/fhi-button.js.map +1 -1
  3. package/package.json +1 -1
  4. package/web-types.json +1 -1
package/fhi-button.js CHANGED
@@ -54,12 +54,12 @@ var o = "fhi-button", s = class extends r {
54
54
  this.iconOnly ||= !0, e.setAttribute("size", this._getIconSize());
55
55
  return;
56
56
  }
57
- this.size != "small" && (e.style.marginRight = "var(--dimension-icon-margin-right)"), e.style.marginLeft = "var(--dimension-icon-margin-left-offset)", e.setAttribute("size", this._getIconSize());
57
+ this.size != "small" && (e.style.marginRight = "var(--fhi-spacing-050)"), e.style.marginLeft = "calc(-1 * var(--fhi-spacing-050))", e.setAttribute("size", this._getIconSize());
58
58
  }
59
59
  let r = t[t.length - 1];
60
60
  if (r.nodeType === Node.ELEMENT_NODE && r.tagName.toLowerCase().startsWith("fhi-icon")) {
61
61
  let e = r;
62
- e.style.marginRight = "var(--dimension-icon-margin-right-offset)", this.size != "small" && (e.style.marginLeft = "var(--dimension-icon-margin-left)"), e.setAttribute("size", this._getIconSize());
62
+ e.style.marginRight = "calc(-1 * var(--fhi-spacing-050))", this.size != "small" && (e.style.marginLeft = "var(--fhi-spacing-050)"), e.setAttribute("size", this._getIconSize());
63
63
  }
64
64
  }
65
65
  render() {
@@ -78,385 +78,23 @@ var o = "fhi-button", s = class extends r {
78
78
  }
79
79
  static {
80
80
  this.styles = t`
81
- :host {
82
- --dimension-border-radius: var(--fhi-border-radius-full);
83
- --dimension-border-width: var(--fhi-dimension-border-width);
84
-
85
- --dimension-padding-small: calc(
86
- var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
87
- )
88
- calc(
89
- var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(
90
- --fhi-dimension-border-width
91
- )
92
- );
93
- --dimension-padding-medium: calc(
94
- var(--fhi-spacing-100) - var(--fhi-dimension-border-width)
95
- )
96
- calc(
97
- var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(
98
- --fhi-dimension-border-width
99
- )
100
- );
101
- --dimension-padding-large: calc(
102
- var(--fhi-spacing-200) - var(--fhi-dimension-border-width)
103
- )
104
- calc(
105
- var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(
106
- --fhi-dimension-border-width
107
- )
108
- );
109
- --dimension-padding-small-text: calc(
110
- var(--fhi-spacing-050) - var(--fhi-dimension-border-width)
111
- )
112
- calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));
113
-
114
- --dimension-padding-medium-text: calc(
115
- var(--fhi-spacing-100) - var(--fhi-dimension-border-width)
116
- )
117
- calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));
118
-
119
- --dimension-padding-large-text: calc(
120
- var(--fhi-spacing-200) - var(--fhi-dimension-border-width)
121
- )
122
- calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));
123
-
124
- /* Icon */
125
- --dimension-icon-margin-left: var(--fhi-spacing-050);
126
- --dimension-icon-margin-right: var(--fhi-spacing-050);
127
-
128
- /* Adjust for the button padding when the icon is present on either side */
129
- --dimension-icon-margin-left-offset: calc(-1 * var(--fhi-spacing-050));
130
- --dimension-icon-margin-right-offset: calc(-1 * var(--fhi-spacing-050));
131
-
132
- --dimension-icon-only-border-radius: var(--fhi-border-radius-full);
133
-
134
- /* Typography */
135
- --typography-font-family: var(--fhi-font-family-default);
136
- --typography-label-large-font-size: var(
137
- --fhi-typography-label-large-font-size
138
- );
139
- --typography-label-medium-font-size: var(
140
- --fhi-typography-label-medium-font-size
141
- );
142
- --typography-label-small-font-size: var(
143
- --fhi-typography-label-medium-font-size
144
- );
145
- --typography-label-large-font-weight: var(
146
- --fhi-typography-label-large-font-weight
147
- );
148
- --typography-label-medium-font-weight: var(
149
- --fhi-typography-label-medium-font-weight
150
- );
151
- --typography-label-small-font-weight: var(
152
- --fhi-typography-label-medium-font-weight
153
- );
154
- --typography-label-large-letter-spacing: var(
155
- --fhi-typography-label-large-letter-spacing
156
- );
157
- --typography-label-medium-letter-spacing: var(
158
- --fhi-typography-label-medium-letter-spacing
159
- );
160
- --typography-label-small-letter-spacing: var(
161
- --fhi-typography-label-medium-letter-spacing
162
- );
163
- --typography-label-large-line-height: var(
164
- --fhi-typography-label-large-line-height
165
- );
166
- --typography-label-small-line-height: var(
167
- --fhi-typography-label-medium-line-height
168
- );
169
- --typography-label-medium-line-height: var(
170
- --fhi-typography-label-medium-line-height
171
- );
172
-
173
- /* Accent Color */
174
- --color-accent-strong-background: var(--fhi-color-accent-base-default);
175
- --color-accent-strong-border: var(--fhi-color-accent-base-default);
176
- --color-accent-strong: var(--fhi-color-accent-text-inverted);
177
- --color-accent-strong-background-hover: var(
178
- --fhi-color-accent-base-hover
179
- );
180
- --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);
181
- --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);
182
- --color-accent-strong-background-active: var(
183
- --fhi-color-accent-base-active
184
- );
185
- --color-accent-strong-border-active: var(--fhi-color-accent-base-active);
186
- --color-accent-strong-active: var(--fhi-color-accent-text-inverted);
187
- --color-accent-strong-background-disabled: var(
188
- --fhi-color-accent-base-default
189
- );
190
- --color-accent-strong-border-disabled: var(
191
- --fhi-color-accent-base-default
192
- );
193
- --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);
194
-
195
- --color-accent-subtle-background: var(--fhi-color-accent-surface-default);
196
- --color-accent-subtle-border: var(--fhi-color-accent-surface-default);
197
- --color-accent-subtle: var(--fhi-color-accent-text-subtle);
198
- --color-accent-subtle-background-hover: var(
199
- --fhi-color-accent-surface-hover
200
- );
201
- --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);
202
- --color-accent-subtle-hover: var(--fhi-color-accent-text-default);
203
- --color-accent-subtle-background-active: var(
204
- --fhi-color-accent-surface-active
205
- );
206
- --color-accent-subtle-border-active: var(
207
- --fhi-color-accent-surface-active
208
- );
209
- --color-accent-subtle-active: var(--fhi-color-accent-text-default);
210
- --color-accent-subtle-background-disabled: var(
211
- --fhi-color-accent-surface-default
212
- );
213
- --color-accent-subtle-border-disabled: var(
214
- --fhi-color-accent-surface-default
215
- );
216
- --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);
217
-
218
- --color-accent-outlined-background: transparent;
219
- --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);
220
- --color-accent-outlined: var(--fhi-color-accent-text-subtle);
221
- --color-accent-outlined-background-hover: var(
222
- --fhi-color-accent-surface-default
223
- );
224
- --color-accent-outlined-border-hover: var(
225
- --fhi-color-accent-surface-default
226
- );
227
- --color-accent-outlined-hover: var(--fhi-color-accent-text-default);
228
- --color-accent-outlined-background-active: var(
229
- --fhi-color-accent-surface-hover
230
- );
231
- --color-accent-outlined-border-active: var(
232
- --fhi-color-accent-surface-hover
233
- );
234
- --color-accent-outlined-active: var(--fhi-color-accent-text-default);
235
- --color-accent-outlined-background-disabled: transparent;
236
- --color-accent-outlined-border-disabled: var(
237
- --fhi-color-accent-border-subtle
238
- );
239
- --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);
240
-
241
- --color-accent-text-background: transparent;
242
- --color-accent-text-border: transparent;
243
- --color-accent-text: var(--fhi-color-accent-text-subtle);
244
- --color-accent-text-background-hover: var(
245
- --fhi-color-accent-surface-default
246
- );
247
- --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);
248
- --color-accent-text-hover: var(--fhi-color-accent-text-default);
249
- --color-accent-text-background-active: var(
250
- --fhi-color-accent-surface-hover
251
- );
252
- --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);
253
- --color-accent-text-active: var(--fhi-color-accent-text-default);
254
- --color-accent-text-background-disabled: transparent;
255
- --color-accent-text-border-disabled: transparent;
256
- --color-accent-text-disabled: var(--fhi-color-accent-text-default);
257
-
258
- /* Neutral Color */
259
- --color-neutral-strong-background: var(--fhi-color-neutral-base-default);
260
- --color-neutral-strong-border: var(--fhi-color-neutral-base-default);
261
- --color-neutral-strong: var(--fhi-color-neutral-text-inverted);
262
- --color-neutral-strong-background-hover: var(
263
- --fhi-color-neutral-base-hover
264
- );
265
- --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);
266
- --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);
267
- --color-neutral-strong-background-active: var(
268
- --fhi-color-neutral-base-active
269
- );
270
- --color-neutral-strong-border-active: var(
271
- --fhi-color-neutral-base-active
272
- );
273
- --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);
274
- --color-neutral-strong-background-disabled: var(
275
- --fhi-color-neutral-base-default
276
- );
277
- --color-neutral-strong-border-disabled: var(
278
- --fhi-color-neutral-base-default
279
- );
280
- --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);
281
-
282
- --color-neutral-subtle-background: var(
283
- --fhi-color-neutral-surface-default
284
- );
285
- --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);
286
- --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);
287
- --color-neutral-subtle-background-hover: var(
288
- --fhi-color-neutral-surface-hover
289
- );
290
- --color-neutral-subtle-border-hover: var(
291
- --fhi-color-neutral-surface-hover
292
- );
293
- --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);
294
- --color-neutral-subtle-background-active: var(
295
- --fhi-color-neutral-surface-active
296
- );
297
- --color-neutral-subtle-border-active: var(
298
- --fhi-color-neutral-surface-active
299
- );
300
- --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);
301
- --color-neutral-subtle-background-disabled: var(
302
- --fhi-color-neutral-surface-default
303
- );
304
- --color-neutral-subtle-border-disabled: var(
305
- --fhi-color-neutral-surface-default
306
- );
307
- --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);
308
-
309
- --color-neutral-outlined-background: transparent;
310
- --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);
311
- --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);
312
- --color-neutral-outlined-background-hover: var(
313
- --fhi-color-neutral-surface-default
314
- );
315
- --color-neutral-outlined-border-hover: var(
316
- --fhi-color-neutral-surface-default
317
- );
318
- --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);
319
- --color-neutral-outlined-background-active: var(
320
- --fhi-color-neutral-surface-hover
321
- );
322
- --color-neutral-outlined-border-active: var(
323
- --fhi-color-neutral-surface-hover
324
- );
325
- --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);
326
- --color-neutral-outlined-background-disabled: transparent;
327
- --color-neutral-outlined-border-disabled: var(
328
- --fhi-color-neutral-border-subtle
329
- );
330
- --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);
331
-
332
- --color-neutral-text-background: transparent;
333
- --color-neutral-text-border: transparent;
334
- --color-neutral-text: var(--fhi-color-neutral-text-subtle);
335
- --color-neutral-text-background-hover: var(
336
- --fhi-color-neutral-surface-default
337
- );
338
- --color-neutral-text-border-hover: var(
339
- --fhi-color-neutral-surface-default
340
- );
341
- --color-neutral-text-hover: var(--fhi-color-neutral-text-default);
342
- --color-neutral-text-background-active: var(
343
- --fhi-color-neutral-surface-hover
344
- );
345
- --color-neutral-text-border-active: var(
346
- --fhi-color-neutral-surface-hover
347
- );
348
- --color-neutral-text-active: var(--fhi-color-neutral-text-default);
349
- --color-neutral-text-background-disabled: transparent;
350
- --color-neutral-text-border-disabled: transparent;
351
- --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);
352
-
353
- /* Danger Color */
354
- --color-danger-strong-background: var(--fhi-color-danger-base-default);
355
- --color-danger-strong-border: var(--fhi-color-danger-base-default);
356
- --color-danger-strong: var(--fhi-color-danger-text-inverted);
357
- --color-danger-strong-background-hover: var(
358
- --fhi-color-danger-base-hover
359
- );
360
- --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);
361
- --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);
362
- --color-danger-strong-background-active: var(
363
- --fhi-color-danger-base-active
364
- );
365
- --color-danger-strong-border-active: var(--fhi-color-danger-base-active);
366
- --color-danger-strong-active: var(--fhi-color-danger-text-inverted);
367
- --color-danger-strong-background-disabled: var(
368
- --fhi-color-danger-base-default
369
- );
370
- --color-danger-strong-border-disabled: var(
371
- --fhi-color-danger-base-default
372
- );
373
- --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);
374
-
375
- --color-danger-subtle-background: var(--fhi-color-danger-surface-default);
376
- --color-danger-subtle-border: var(--fhi-color-danger-surface-default);
377
- --color-danger-subtle: var(--fhi-color-danger-text-subtle);
378
- --color-danger-subtle-background-hover: var(
379
- --fhi-color-danger-surface-hover
380
- );
381
- --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);
382
- --color-danger-subtle-hover: var(--fhi-color-danger-text-default);
383
- --color-danger-subtle-background-active: var(
384
- --fhi-color-danger-surface-active
385
- );
386
- --color-danger-subtle-border-active: var(
387
- --fhi-color-danger-surface-active
388
- );
389
- --color-danger-subtle-active: var(--fhi-color-danger-text-default);
390
- --color-danger-subtle-background-disabled: var(
391
- --fhi-color-danger-surface-default
392
- );
393
- --color-danger-subtle-border-disabled: var(
394
- --fhi-color-danger-surface-default
395
- );
396
- --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);
397
-
398
- --color-danger-outlined-background: transparent;
399
- --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);
400
- --color-danger-outlined: var(--fhi-color-danger-text-subtle);
401
- --color-danger-outlined-background-hover: var(
402
- --fhi-color-danger-surface-default
403
- );
404
- --color-danger-outlined-border-hover: var(
405
- --fhi-color-danger-surface-default
406
- );
407
- --color-danger-outlined-hover: var(--fhi-color-danger-text-default);
408
- --color-danger-outlined-background-active: var(
409
- --fhi-color-danger-surface-hover
410
- );
411
- --color-danger-outlined-border-active: var(
412
- --fhi-color-danger-surface-hover
413
- );
414
- --color-danger-outlined-active: var(--fhi-color-danger-text-default);
415
- --color-danger-outlined-background-disabled: transparent;
416
- --color-danger-outlined-border-disabled: var(
417
- --fhi-color-danger-border-subtle
418
- );
419
- --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);
420
-
421
- --color-danger-text-background: transparent;
422
- --color-danger-text-border: transparent;
423
- --color-danger-text: var(--fhi-color-danger-text-subtle);
424
- --color-danger-text-background-hover: var(
425
- --fhi-color-danger-surface-default
426
- );
427
- --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);
428
- --color-danger-text-hover: var(--fhi-color-danger-text-default);
429
- --color-danger-text-background-active: var(
430
- --fhi-color-danger-surface-hover
431
- );
432
- --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);
433
- --color-danger-text-active: var(--fhi-color-danger-text-default);
434
- --color-danger-text-background-disabled: transparent;
435
- --color-danger-text-border-disabled: transparent;
436
- --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);
437
-
438
- --motion-transition: var(--fhi-motion-duration-quick)
439
- var(--fhi-motion-ease-default);
440
-
441
- --opacity-disabled: var(--fhi-opacity-disabled);
442
- }
443
-
444
81
  :host {
445
82
  display: block;
446
83
  width: fit-content;
447
84
 
448
85
  button {
449
- border-radius: var(--dimension-border-radius);
450
- border: solid var(--dimension-border-width);
451
- font-family: var(--typography-font-family);
86
+ border-radius: var(--fhi-border-radius-full);
87
+ border: solid var(--fhi-dimension-border-width);
88
+ font-family: var(--fhi-font-family-default);
452
89
  -webkit-font-smoothing: antialiased;
453
- transition: var(--motion-transition);
90
+ transition: var(--fhi-motion-duration-quick)
91
+ var(--fhi-motion-ease-default);
454
92
  width: 100%;
455
93
  justify-items: center;
456
94
 
457
95
  cursor: pointer;
458
96
  &:disabled {
459
- opacity: var(--opacity-disabled);
97
+ opacity: var(--fhi-opacity-disabled);
460
98
  cursor: not-allowed;
461
99
  }
462
100
  }
@@ -469,297 +107,311 @@ var o = "fhi-button", s = class extends r {
469
107
  }
470
108
 
471
109
  :host([size='large']) button {
472
- font-size: var(--typography-label-large-font-size);
473
- font-weight: var(--typography-label-large-font-weight);
474
- line-height: var(--typography-label-large-line-height);
475
- letter-spacing: var(--typography-label-large-letter-spacing);
476
- padding: var(--dimension-padding-large);
110
+ font-size: var(--fhi-typography-label-large-font-size);
111
+ font-weight: var(--fhi-typography-label-large-font-weight);
112
+ line-height: var(--fhi-typography-label-large-line-height);
113
+ letter-spacing: var(--fhi-typography-label-large-letter-spacing);
114
+ padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width))
115
+ calc(
116
+ var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(
117
+ --fhi-dimension-border-width
118
+ )
119
+ );
477
120
  }
478
121
 
479
122
  :host([size='large'][variant='text']) button {
480
- padding: var(--dimension-padding-large-text);
123
+ padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width))
124
+ calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));
481
125
  }
482
126
 
483
127
  :host([size='medium']) button {
484
- font-size: var(--typography-label-medium-font-size);
485
- font-weight: var(--typography-label-medium-font-weight);
486
- line-height: var(--typography-label-medium-line-height);
487
- letter-spacing: var(--typography-label-medium-letter-spacing);
488
- padding: var(--dimension-padding-medium);
128
+ font-size: var(--fhi-typography-label-medium-font-size);
129
+ font-weight: var(--fhi-typography-label-medium-font-weight);
130
+ line-height: var(--fhi-typography-label-medium-line-height);
131
+ letter-spacing: var(--fhi-typography-label-medium-letter-spacing);
132
+ padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width))
133
+ calc(
134
+ var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(
135
+ --fhi-dimension-border-width
136
+ )
137
+ );
489
138
  }
490
139
 
491
140
  :host([size='medium'][variant='text']) button {
492
- padding: var(--dimension-padding-medium-text);
141
+ padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width))
142
+ calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));
493
143
  }
494
144
 
495
145
  :host([size='small']) button {
496
- font-size: var(--typography-label-small-font-size);
497
- font-weight: var(--typography-label-small-font-weight);
498
- line-height: var(--typography-label-small-line-height);
499
- letter-spacing: var(--typography-label-small-letter-spacing);
500
- padding: var(--dimension-padding-small);
146
+ font-size: var(--fhi-typography-label-medium-font-size);
147
+ font-weight: var(--fhi-typography-label-medium-font-weight);
148
+ line-height: var(--fhi-typography-label-medium-line-height);
149
+ letter-spacing: var(--fhi-typography-label-medium-letter-spacing);
150
+ padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width))
151
+ calc(
152
+ var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(
153
+ --fhi-dimension-border-width
154
+ )
155
+ );
501
156
  }
502
157
 
503
158
  :host([size='small'][variant='text']) button {
504
- padding: var(--dimension-padding-small-text);
159
+ padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width))
160
+ calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));
505
161
  }
506
162
 
507
163
  :host([color='accent'][variant='strong']) button {
508
- background-color: var(--color-accent-strong-background);
509
- border-color: var(--color-accent-strong-border);
510
- color: var(--color-accent-strong);
164
+ background-color: var(--fhi-color-accent-base-default);
165
+ border-color: var(--fhi-color-accent-base-default);
166
+ color: var(--fhi-color-accent-text-inverted);
511
167
  &:hover {
512
- background-color: var(--color-accent-strong-background-hover);
513
- border-color: var(--color-accent-strong-border-hover);
514
- color: var(--color-accent-strong-hover);
168
+ background-color: var(--fhi-color-accent-base-hover);
169
+ border-color: var(--fhi-color-accent-base-hover);
170
+ color: var(--fhi-color-accent-text-inverted);
515
171
  }
516
172
  &:active {
517
- background-color: var(--color-accent-strong-background-active);
518
- border-color: var(--color-accent-strong-border-active);
519
- color: var(--color-accent-strong-active);
173
+ background-color: var(--fhi-color-accent-base-active);
174
+ border-color: var(--fhi-color-accent-base-active);
175
+ color: var(--fhi-color-accent-text-inverted);
520
176
  }
521
177
  &:disabled {
522
- background-color: var(--color-accent-strong-background-disabled);
523
- border-color: var(--color-accent-strong-border-disabled);
524
- color: var(--color-accent-strong-disabled);
178
+ background-color: var(--fhi-color-accent-base-default);
179
+ border-color: var(--fhi-color-accent-base-default);
180
+ color: var(--fhi-color-accent-text-inverted);
525
181
  }
526
182
  }
527
183
 
528
184
  :host([color='accent'][variant='subtle']) button {
529
- background-color: var(--color-accent-subtle-background);
530
- border-color: var(--color-accent-subtle-border);
531
- color: var(--color-accent-subtle);
185
+ background-color: var(--fhi-color-accent-surface-default);
186
+ border-color: var(--fhi-color-accent-surface-default);
187
+ color: var(--fhi-color-accent-text-subtle);
532
188
  &:hover {
533
- background-color: var(--color-accent-subtle-background-hover);
534
- border-color: var(--color-accent-subtle-border-hover);
535
- color: var(--color-accent-subtle-hover);
189
+ background-color: var(--fhi-color-accent-surface-hover);
190
+ border-color: var(--fhi-color-accent-surface-hover);
191
+ color: var(--fhi-color-accent-text-default);
536
192
  }
537
193
  &:active {
538
- background-color: var(--color-accent-subtle-background-active);
539
- border-color: var(--color-accent-subtle-border-active);
540
- color: var(--color-accent-subtle-active);
194
+ background-color: var(--fhi-color-accent-surface-active);
195
+ border-color: var(--fhi-color-accent-surface-active);
196
+ color: var(--fhi-color-accent-text-default);
541
197
  }
542
198
  &:disabled {
543
- background-color: var(--color-accent-subtle-background-disabled);
544
- border-color: var(--color-accent-subtle-border-disabled);
545
- color: var(--color-accent-subtle-disabled);
199
+ background-color: var(--fhi-color-accent-surface-default);
200
+ border-color: var(--fhi-color-accent-surface-default);
201
+ color: var(--fhi-color-accent-text-subtle);
546
202
  }
547
203
  }
548
204
 
549
205
  :host([color='accent'][variant='outlined']) button {
550
- background-color: var(--color-accent-outlined-background);
551
- border-color: var(--color-accent-outlined-border);
552
- color: var(--color-accent-outlined);
206
+ background-color: transparent;
207
+ border-color: var(--fhi-color-accent-border-subtle);
208
+ color: var(--fhi-color-accent-text-subtle);
553
209
  &:hover {
554
- background-color: var(--color-accent-outlined-background-hover);
555
- border-color: var(--color-accent-outlined-border-hover);
556
- color: var(--color-accent-outlined-hover);
210
+ background-color: var(--fhi-color-accent-surface-default);
211
+ border-color: var(--fhi-color-accent-surface-default);
212
+ color: var(--fhi-color-accent-text-default);
557
213
  }
558
214
  &:active {
559
- background-color: var(--color-accent-outlined-background-active);
560
- border-color: var(--color-accent-outlined-border-active);
561
- color: var(--color-accent-outlined-active);
215
+ background-color: var(--fhi-color-accent-surface-hover);
216
+ border-color: var(--fhi-color-accent-surface-hover);
217
+ color: var(--fhi-color-accent-text-default);
562
218
  }
563
219
  &:disabled {
564
- background-color: var(--color-accent-outlined-background-disabled);
565
- border-color: var(--color-accent-outlined-border-disabled);
566
- color: var(--color-accent-outlined-disabled);
220
+ background-color: transparent;
221
+ border-color: var(--fhi-color-accent-border-subtle);
222
+ color: var(--fhi-color-accent-text-subtle);
567
223
  }
568
224
  }
569
225
 
570
226
  :host([color='accent'][variant='text']) button {
571
- background-color: var(--color-accent-text-background);
572
- border-color: var(--color-accent-text-border);
573
- color: var(--color-accent-text);
227
+ background-color: transparent;
228
+ border-color: transparent;
229
+ color: var(--fhi-color-accent-text-subtle);
574
230
  &:hover {
575
- background-color: var(--color-accent-text-background-hover);
576
- border-color: var(--color-accent-text-border-hover);
577
- color: var(--color-accent-text-hover);
231
+ background-color: var(--fhi-color-accent-surface-default);
232
+ border-color: var(--fhi-color-accent-surface-default);
233
+ color: var(--fhi-color-accent-text-default);
578
234
  }
579
235
  &:active {
580
- background-color: var(--color-accent-text-background-active);
581
- border-color: var(--color-accent-text-border-active);
582
- color: var(--color-accent-text-active);
236
+ background-color: var(--fhi-color-accent-surface-hover);
237
+ border-color: var(--fhi-color-accent-surface-hover);
238
+ color: var(--fhi-color-accent-text-default);
583
239
  }
584
240
  &:disabled {
585
- background-color: var(--color-accent-text-background-disabled);
586
- border-color: var(--color-accent-text-border-disabled);
587
- color: var(--color-accent-text-disabled);
241
+ background-color: transparent;
242
+ border-color: transparent;
243
+ color: var(--fhi-color-accent-text-default);
588
244
  }
589
245
  }
590
246
 
591
247
  :host([color='neutral'][variant='strong']) button {
592
- background-color: var(--color-neutral-strong-background);
593
- border-color: var(--color-neutral-strong-border);
594
- color: var(--color-neutral-strong);
248
+ background-color: var(--fhi-color-neutral-base-default);
249
+ border-color: var(--fhi-color-neutral-base-default);
250
+ color: var(--fhi-color-neutral-text-inverted);
595
251
  &:hover {
596
- background-color: var(--color-neutral-strong-background-hover);
597
- border-color: var(--color-neutral-strong-border-hover);
598
- color: var(--color-neutral-strong-hover);
252
+ background-color: var(--fhi-color-neutral-base-hover);
253
+ border-color: var(--fhi-color-neutral-base-hover);
254
+ color: var(--fhi-color-neutral-text-inverted);
599
255
  }
600
256
  &:active {
601
- background-color: var(--color-neutral-strong-background-active);
602
- border-color: var(--color-neutral-strong-border-active);
603
- color: var(--color-neutral-strong-active);
257
+ background-color: var(--fhi-color-neutral-base-active);
258
+ border-color: var(--fhi-color-neutral-base-active);
259
+ color: var(--fhi-color-neutral-text-inverted);
604
260
  }
605
261
  &:disabled {
606
- background-color: var(--color-neutral-strong-background-disabled);
607
- border-color: var(--color-neutral-strong-border-disabled);
608
- color: var(--color-neutral-strong-disabled);
262
+ background-color: var(--fhi-color-neutral-base-default);
263
+ border-color: var(--fhi-color-neutral-base-default);
264
+ color: var(--fhi-color-neutral-text-inverted);
609
265
  }
610
266
  }
611
267
 
612
268
  :host([color='neutral'][variant='subtle']) button {
613
- background-color: var(--color-neutral-subtle-background);
614
- border-color: var(--color-neutral-subtle-border);
615
- color: var(--color-neutral-subtle);
269
+ background-color: var(--fhi-color-neutral-surface-default);
270
+ border-color: var(--fhi-color-neutral-surface-default);
271
+ color: var(--fhi-color-neutral-text-subtle);
616
272
  &:hover {
617
- background-color: var(--color-neutral-subtle-background-hover);
618
- border-color: var(--color-neutral-subtle-border-hover);
619
- color: var(--color-neutral-subtle-hover);
273
+ background-color: var(--fhi-color-neutral-surface-hover);
274
+ border-color: var(--fhi-color-neutral-surface-hover);
275
+ color: var(--fhi-color-neutral-text-default);
620
276
  }
621
277
  &:active {
622
- background-color: var(--color-neutral-subtle-background-active);
623
- border-color: var(--color-neutral-subtle-border-active);
624
- color: var(--color-neutral-subtle-active);
278
+ background-color: var(--fhi-color-neutral-surface-active);
279
+ border-color: var(--fhi-color-neutral-surface-active);
280
+ color: var(--fhi-color-neutral-text-default);
625
281
  }
626
282
  &:disabled {
627
- background-color: var(--color-neutral-subtle-background-disabled);
628
- border-color: var(--color-neutral-subtle-border-disabled);
629
- color: var(--color-neutral-subtle-disabled);
283
+ background-color: var(--fhi-color-neutral-surface-default);
284
+ border-color: var(--fhi-color-neutral-surface-default);
285
+ color: var(--fhi-color-neutral-text-default);
630
286
  }
631
287
  }
632
288
 
633
289
  :host([color='neutral'][variant='outlined']) button {
634
- background-color: var(--color-neutral-outlined-background);
635
- border-color: var(--color-neutral-outlined-border);
636
- color: var(--color-neutral-outlined);
290
+ background-color: transparent;
291
+ border-color: var(--fhi-color-neutral-border-subtle);
292
+ color: var(--fhi-color-neutral-text-subtle);
637
293
  &:hover {
638
- background-color: var(--color-neutral-outlined-background-hover);
639
- border-color: var(--color-neutral-outlined-border-hover);
640
- color: var(--color-neutral-outlined-hover);
294
+ background-color: var(--fhi-color-neutral-surface-default);
295
+ border-color: var(--fhi-color-neutral-surface-default);
296
+ color: var(--fhi-color-neutral-text-default);
641
297
  }
642
298
  &:active {
643
- background-color: var(--color-neutral-outlined-background-active);
644
- border-color: var(--color-neutral-outlined-border-active);
645
- color: var(--color-neutral-outlined-active);
299
+ background-color: var(--fhi-color-neutral-surface-hover);
300
+ border-color: var(--fhi-color-neutral-surface-hover);
301
+ color: var(--fhi-color-neutral-text-default);
646
302
  }
647
303
  &:disabled {
648
- background-color: var(--color-neutral-outlined-background-disabled);
649
- border-color: var(--color-neutral-outlined-border-disabled);
650
- color: var(--color-neutral-outlined-disabled);
304
+ background-color: transparent;
305
+ border-color: var(--fhi-color-neutral-border-subtle);
306
+ color: var(--fhi-color-neutral-text-subtle);
651
307
  }
652
308
  }
653
309
 
654
310
  :host([color='neutral'][variant='text']) button {
655
- background-color: var(--color-neutral-text-background);
656
- border-color: var(--color-neutral-text-border);
657
- color: var(--color-neutral-text);
311
+ background-color: transparent;
312
+ border-color: transparent;
313
+ color: var(--fhi-color-neutral-text-subtle);
658
314
  &:hover {
659
- background-color: var(--color-neutral-text-background-hover);
660
- border-color: var(--color-neutral-text-border-hover);
661
- color: var(--color-neutral-text-hover);
315
+ background-color: var(--fhi-color-neutral-surface-default);
316
+ border-color: var(--fhi-color-neutral-surface-default);
317
+ color: var(--fhi-color-neutral-text-default);
662
318
  }
663
319
  &:active {
664
- background-color: var(--color-neutral-text-background-active);
665
- border-color: var(--color-neutral-text-border-active);
666
- color: var(--color-neutral-text-active);
320
+ background-color: var(--fhi-color-neutral-surface-hover);
321
+ border-color: var(--fhi-color-neutral-surface-hover);
322
+ color: var(--fhi-color-neutral-text-default);
667
323
  }
668
324
  &:disabled {
669
- background-color: var(--color-neutral-text-background-disabled);
670
- border-color: var(--color-neutral-text-border-disabled);
671
- color: var(--color-neutral-text-disabled);
325
+ background-color: transparent;
326
+ border-color: transparent;
327
+ color: var(--fhi-color-neutral-text-subtle);
672
328
  }
673
329
  }
674
330
 
675
331
  :host([color='danger'][variant='strong']) button {
676
- background-color: var(--color-danger-strong-background);
677
- border-color: var(--color-danger-strong-border);
678
- color: var(--color-danger-strong);
332
+ background-color: var(--fhi-color-danger-base-default);
333
+ border-color: var(--fhi-color-danger-base-default);
334
+ color: var(--fhi-color-danger-text-inverted);
679
335
  &:hover {
680
- background-color: var(--color-danger-strong-background-hover);
681
- border-color: var(--color-danger-strong-border-hover);
682
- color: var(--color-danger-strong-hover);
336
+ background-color: var(--fhi-color-danger-base-hover);
337
+ border-color: var(--fhi-color-danger-base-hover);
338
+ color: var(--fhi-color-danger-text-inverted);
683
339
  }
684
340
  &:active {
685
- background-color: var(--color-danger-strong-background-active);
686
- border-color: var(--color-danger-strong-border-active);
687
- color: var(--color-danger-strong-active);
341
+ background-color: var(--fhi-color-danger-base-active);
342
+ border-color: var(--fhi-color-danger-base-active);
343
+ color: var(--fhi-color-danger-text-inverted);
688
344
  }
689
345
  &:disabled {
690
- background-color: var(--color-danger-strong-background-disabled);
691
- border-color: var(--color-danger-strong-border-disabled);
692
- color: var(--color-danger-strong-disabled);
346
+ background-color: var(--fhi-color-danger-base-default);
347
+ border-color: var(--fhi-color-danger-base-default);
348
+ color: var(--fhi-color-danger-text-inverted);
693
349
  }
694
350
  }
695
351
 
696
352
  :host([color='danger'][variant='subtle']) button {
697
- background-color: var(--color-danger-subtle-background);
698
- border-color: var(--color-danger-subtle-border);
699
- color: var(--color-danger-subtle);
353
+ background-color: var(--fhi-color-danger-surface-default);
354
+ border-color: var(--fhi-color-danger-surface-default);
355
+ color: var(--fhi-color-danger-text-subtle);
700
356
  &:hover {
701
- background-color: var(--color-danger-subtle-background-hover);
702
- border-color: var(--color-danger-subtle-border-hover);
703
- color: var(--color-danger-subtle-hover);
357
+ background-color: var(--fhi-color-danger-surface-hover);
358
+ border-color: var(--fhi-color-danger-surface-hover);
359
+ color: var(--fhi-color-danger-text-default);
704
360
  }
705
361
  &:active {
706
- background-color: var(--color-danger-subtle-background-active);
707
- border-color: var(--color-danger-subtle-border-active);
708
- color: var(--color-danger-subtle-active);
362
+ background-color: var(--fhi-color-danger-surface-active);
363
+ border-color: var(--fhi-color-danger-surface-active);
364
+ color: var(--fhi-color-danger-text-default);
709
365
  }
710
366
  &:disabled {
711
- background-color: var(--color-danger-subtle-background-disabled);
712
- border-color: var(--color-danger-subtle-border-disabled);
713
- color: var(--color-danger-subtle-disabled);
367
+ background-color: var(--fhi-color-danger-surface-default);
368
+ border-color: var(--fhi-color-danger-surface-default);
369
+ color: var(--fhi-color-danger-text-subtle);
714
370
  }
715
371
  }
716
372
 
717
373
  :host([color='danger'][variant='outlined']) button {
718
- background-color: var(--color-danger-outlined-background);
719
- border-color: var(--color-danger-outlined-border);
720
- color: var(--color-danger-outlined);
374
+ background-color: transparent;
375
+ border-color: var(--fhi-color-danger-border-subtle);
376
+ color: var(--fhi-color-danger-text-subtle);
721
377
  &:hover {
722
- background-color: var(--color-danger-outlined-background-hover);
723
- border-color: var(--color-danger-outlined-border-hover);
724
- color: var(--color-danger-outlined-hover);
378
+ background-color: var(--fhi-color-danger-surface-default);
379
+ border-color: var(--fhi-color-danger-surface-default);
380
+ color: var(--fhi-color-danger-text-default);
725
381
  }
726
382
  &:active {
727
- background-color: var(--color-danger-outlined-background-active);
728
- border-color: var(--color-danger-outlined-border-active);
729
- color: var(--color-danger-outlined-active);
383
+ background-color: var(--fhi-color-danger-surface-hover);
384
+ border-color: var(--fhi-color-danger-surface-hover);
385
+ color: var(--fhi-color-danger-text-default);
730
386
  }
731
387
  &:disabled {
732
- background-color: var(--color-danger-outlined-background-disabled);
733
- border-color: var(--color-danger-outlined-border-disabled);
734
- color: var(--color-danger-outlined-disabled);
388
+ background-color: transparent;
389
+ border-color: var(--fhi-color-danger-border-subtle);
390
+ color: var(--fhi-color-danger-text-subtle);
735
391
  }
736
392
  }
737
393
 
738
394
  :host([color='danger'][variant='text']) button {
739
- background-color: var(--color-danger-text-background);
740
- border-color: var(--color-danger-text-border);
741
- color: var(--color-danger-text);
395
+ background-color: transparent;
396
+ border-color: transparent;
397
+ color: var(--fhi-color-danger-text-subtle);
742
398
  &:hover {
743
- background-color: var(--color-danger-text-background-hover);
744
- border-color: var(--color-danger-text-border-hover);
745
- color: var(--color-danger-text-hover);
399
+ background-color: var(--fhi-color-danger-surface-default);
400
+ border-color: var(--fhi-color-danger-surface-default);
401
+ color: var(--fhi-color-danger-text-default);
746
402
  }
747
403
  &:active {
748
- background-color: var(--color-danger-text-background-active);
749
- border-color: var(--color-danger-text-border-active);
750
- color: var(--color-danger-text-active);
404
+ background-color: var(--fhi-color-danger-surface-hover);
405
+ border-color: var(--fhi-color-danger-surface-hover);
406
+ color: var(--fhi-color-danger-text-default);
751
407
  }
752
408
  &:disabled {
753
- background-color: var(--color-danger-text-background-disabled);
754
- border-color: var(--color-danger-text-border-disabled);
755
- color: var(--color-danger-text-disabled);
409
+ background-color: transparent;
410
+ border-color: transparent;
411
+ color: var(--fhi-color-danger-text-subtle);
756
412
  }
757
413
  }
758
414
 
759
- button[data-icon-only] {
760
- border-radius: var(--dimension-icon-only-border-radius);
761
- }
762
-
763
415
  :host([size='small']) button[data-icon-only] {
764
416
  padding: calc(0.375rem - var(--fhi-dimension-border-width));
765
417
  }
package/fhi-button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-button.js","names":[],"sources":["../../src/components/fhi-button/fhi-button.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n/**\n * ## FHI Button\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs}\n *\n * The `<fhi-button>` component is used to create interactive buttons in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<button>` element to ensure consistent styling and behavior across your application.\n *\n * @tag fhi-button\n * @element fhi-button\n *\n * @slot - The content of the button. This should be pure text, an icon or both.\n */\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * Sets the color of the button.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#color-farge}\n *\n * @reflect\n * @type {'accent' | 'neutral' | 'danger'}\n */\n @property({ type: String, reflect: true }) color:\n | 'accent'\n | 'neutral'\n | 'danger' = 'accent';\n\n /**\n *\n * Sets the button variant. The variant determines the button's visual style and emphasis.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#variant}\n *\n * @reflect\n * @type {'strong' | 'subtle' | 'outlined' | 'text'}\n */\n @property({ type: String, reflect: true }) variant:\n | 'strong'\n | 'subtle'\n | 'outlined'\n | 'text' = 'strong';\n\n /**\n * Sets the size of the button to one of the predefined options.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse}\n *\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Disables the button. 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 * Styles the button for icon-only content.\n *\n * If you only have an icon as the child of the button, then you should set this property to `true`.\n *\n * @deprecated This property is deprecated and will be removed in a future release. The button will automatically detect if it only contains an icon and apply the appropriate styling.\n *\n * @type {boolean}\n */\n @property({ type: Boolean, attribute: 'icon-only' })\n iconOnly: boolean = false;\n\n /**\n * Sets the button's type. This determines the button's behavior when used within a form.\n * The predefined types conform to standard HTML button types.\n *\n * For more information about button types, see: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n * @type {'button' | 'submit' | 'reset'}\n */\n @property({ type: String }) type: 'button' | 'submit' | 'reset' = 'submit';\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.onkeyup = this._handleKeyup.bind(this);\n this.onkeydown = this._handleKeydown.bind(this);\n this.onselectstart = this._handleSelectStart.bind(this);\n }\n\n protected update(_changedProperties: PropertyValues): void {\n // If a falsy value is provided, default to 'accent'.\n if (_changedProperties.has('color')) {\n if (!this.color) {\n this.color = 'accent';\n }\n }\n\n // If a falsy value is provided, default to 'strong'.\n if (_changedProperties.has('variant')) {\n if (!this.variant) {\n this.variant = 'strong';\n }\n }\n\n // If an invalid value is provided, default to 'medium'.\n if (_changedProperties.has('size')) {\n if (!this.size) {\n this.size = 'medium';\n }\n }\n\n if (_changedProperties.has('iconOnly')) {\n if (this.getAttribute('icon-only') !== null) {\n console.warn(\n \"The 'iconOnly' property is deprecated and will be removed in a future release. The button automatically detects if it only contains an icon and applies the appropriate styling.\",\n );\n }\n }\n\n super.update(_changedProperties);\n }\n\n /**\n * Programmatically clicks the button.\n */\n public click(): void {\n this._handleClick();\n }\n\n private _handleClick(event?: MouseEvent | KeyboardEvent): void {\n event?.preventDefault();\n event?.stopPropagation();\n\n if (this.disabled) {\n return;\n }\n\n this._dispatchClickEvent();\n\n if (this.type === 'submit') {\n this._internals.form?.requestSubmit();\n }\n\n if (this.type === 'reset') {\n this._internals.form?.reset();\n }\n }\n\n private _dispatchClickEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `click`.\n * This event is dispatched when the button is clicked, either via mouse or keyboard interaction.\n * */\n this.dispatchEvent(\n new MouseEvent('click', { bubbles: true, composed: true }),\n );\n }\n\n private _handleKeyup(event: KeyboardEvent): void {\n if (event.key === ' ' || event.key === 'Spacebar') {\n this._handleClick(event);\n\n const target = event.target as HTMLElement | null;\n target?.blur();\n target?.focus();\n }\n }\n\n private _handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this._handleClick(event);\n }\n }\n\n private _handleSelectStart(): boolean {\n return false;\n }\n\n private _getIconSize(): string {\n switch (this.size) {\n case 'small':\n return '1.25rem';\n case 'medium':\n case 'large':\n default:\n return '1.5rem';\n }\n }\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 the first node is an icon, style it.\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const firstIcon = firstNode as HTMLElement;\n\n if (this.iconOnly || validNodes.length === 1) {\n if (!this.iconOnly) {\n this.iconOnly = true;\n }\n\n firstIcon.setAttribute('size', this._getIconSize());\n return;\n }\n\n if (this.size != 'small') {\n firstIcon.style.marginRight = 'var(--dimension-icon-margin-right)';\n }\n firstIcon.style.marginLeft = 'var(--dimension-icon-margin-left-offset)';\n firstIcon.setAttribute('size', this._getIconSize());\n }\n\n const lastNode: Node = validNodes[validNodes.length - 1];\n\n // if the last node is an icon, style it.\n if (\n lastNode.nodeType === Node.ELEMENT_NODE &&\n (lastNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const lastIcon = lastNode as HTMLElement;\n\n lastIcon.style.marginRight = 'var(--dimension-icon-margin-right-offset)';\n if (this.size != 'small') {\n lastIcon.style.marginLeft = 'var(--dimension-icon-margin-left)';\n }\n lastIcon.setAttribute('size', this._getIconSize());\n }\n }\n\n render() {\n return html`<button\n ?disabled=${this.disabled}\n type=${this.type}\n @keyup=${this._handleKeyup}\n @keydown=${this._handleKeydown}\n @click=${this._handleClick}\n ?data-icon-only=${this.iconOnly}\n >\n <div class=\"slot-container\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </button>`;\n }\n\n static styles = css`\n :host {\n --dimension-border-radius: var(--fhi-border-radius-full);\n --dimension-border-width: var(--fhi-dimension-border-width);\n\n --dimension-padding-small: calc(\n var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n )\n calc(\n var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(\n --fhi-dimension-border-width\n )\n );\n --dimension-padding-medium: calc(\n var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n )\n calc(\n var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(\n --fhi-dimension-border-width\n )\n );\n --dimension-padding-large: calc(\n var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n )\n calc(\n var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(\n --fhi-dimension-border-width\n )\n );\n --dimension-padding-small-text: calc(\n var(--fhi-spacing-050) - var(--fhi-dimension-border-width)\n )\n calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));\n\n --dimension-padding-medium-text: calc(\n var(--fhi-spacing-100) - var(--fhi-dimension-border-width)\n )\n calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n\n --dimension-padding-large-text: calc(\n var(--fhi-spacing-200) - var(--fhi-dimension-border-width)\n )\n calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));\n\n /* Icon */\n --dimension-icon-margin-left: var(--fhi-spacing-050);\n --dimension-icon-margin-right: var(--fhi-spacing-050);\n\n /* Adjust for the button padding when the icon is present on either side */\n --dimension-icon-margin-left-offset: calc(-1 * var(--fhi-spacing-050));\n --dimension-icon-margin-right-offset: calc(-1 * var(--fhi-spacing-050));\n\n --dimension-icon-only-border-radius: var(--fhi-border-radius-full);\n\n /* Typography */\n --typography-font-family: var(--fhi-font-family-default);\n --typography-label-large-font-size: var(\n --fhi-typography-label-large-font-size\n );\n --typography-label-medium-font-size: var(\n --fhi-typography-label-medium-font-size\n );\n --typography-label-small-font-size: var(\n --fhi-typography-label-medium-font-size\n );\n --typography-label-large-font-weight: var(\n --fhi-typography-label-large-font-weight\n );\n --typography-label-medium-font-weight: var(\n --fhi-typography-label-medium-font-weight\n );\n --typography-label-small-font-weight: var(\n --fhi-typography-label-medium-font-weight\n );\n --typography-label-large-letter-spacing: var(\n --fhi-typography-label-large-letter-spacing\n );\n --typography-label-medium-letter-spacing: var(\n --fhi-typography-label-medium-letter-spacing\n );\n --typography-label-small-letter-spacing: var(\n --fhi-typography-label-medium-letter-spacing\n );\n --typography-label-large-line-height: var(\n --fhi-typography-label-large-line-height\n );\n --typography-label-small-line-height: var(\n --fhi-typography-label-medium-line-height\n );\n --typography-label-medium-line-height: var(\n --fhi-typography-label-medium-line-height\n );\n\n /* Accent Color */\n --color-accent-strong-background: var(--fhi-color-accent-base-default);\n --color-accent-strong-border: var(--fhi-color-accent-base-default);\n --color-accent-strong: var(--fhi-color-accent-text-inverted);\n --color-accent-strong-background-hover: var(\n --fhi-color-accent-base-hover\n );\n --color-accent-strong-border-hover: var(--fhi-color-accent-base-hover);\n --color-accent-strong-hover: var(--fhi-color-accent-text-inverted);\n --color-accent-strong-background-active: var(\n --fhi-color-accent-base-active\n );\n --color-accent-strong-border-active: var(--fhi-color-accent-base-active);\n --color-accent-strong-active: var(--fhi-color-accent-text-inverted);\n --color-accent-strong-background-disabled: var(\n --fhi-color-accent-base-default\n );\n --color-accent-strong-border-disabled: var(\n --fhi-color-accent-base-default\n );\n --color-accent-strong-disabled: var(--fhi-color-accent-text-inverted);\n\n --color-accent-subtle-background: var(--fhi-color-accent-surface-default);\n --color-accent-subtle-border: var(--fhi-color-accent-surface-default);\n --color-accent-subtle: var(--fhi-color-accent-text-subtle);\n --color-accent-subtle-background-hover: var(\n --fhi-color-accent-surface-hover\n );\n --color-accent-subtle-border-hover: var(--fhi-color-accent-surface-hover);\n --color-accent-subtle-hover: var(--fhi-color-accent-text-default);\n --color-accent-subtle-background-active: var(\n --fhi-color-accent-surface-active\n );\n --color-accent-subtle-border-active: var(\n --fhi-color-accent-surface-active\n );\n --color-accent-subtle-active: var(--fhi-color-accent-text-default);\n --color-accent-subtle-background-disabled: var(\n --fhi-color-accent-surface-default\n );\n --color-accent-subtle-border-disabled: var(\n --fhi-color-accent-surface-default\n );\n --color-accent-subtle-disabled: var(--fhi-color-accent-text-subtle);\n\n --color-accent-outlined-background: transparent;\n --color-accent-outlined-border: var(--fhi-color-accent-border-subtle);\n --color-accent-outlined: var(--fhi-color-accent-text-subtle);\n --color-accent-outlined-background-hover: var(\n --fhi-color-accent-surface-default\n );\n --color-accent-outlined-border-hover: var(\n --fhi-color-accent-surface-default\n );\n --color-accent-outlined-hover: var(--fhi-color-accent-text-default);\n --color-accent-outlined-background-active: var(\n --fhi-color-accent-surface-hover\n );\n --color-accent-outlined-border-active: var(\n --fhi-color-accent-surface-hover\n );\n --color-accent-outlined-active: var(--fhi-color-accent-text-default);\n --color-accent-outlined-background-disabled: transparent;\n --color-accent-outlined-border-disabled: var(\n --fhi-color-accent-border-subtle\n );\n --color-accent-outlined-disabled: var(--fhi-color-accent-text-subtle);\n\n --color-accent-text-background: transparent;\n --color-accent-text-border: transparent;\n --color-accent-text: var(--fhi-color-accent-text-subtle);\n --color-accent-text-background-hover: var(\n --fhi-color-accent-surface-default\n );\n --color-accent-text-border-hover: var(--fhi-color-accent-surface-default);\n --color-accent-text-hover: var(--fhi-color-accent-text-default);\n --color-accent-text-background-active: var(\n --fhi-color-accent-surface-hover\n );\n --color-accent-text-border-active: var(--fhi-color-accent-surface-hover);\n --color-accent-text-active: var(--fhi-color-accent-text-default);\n --color-accent-text-background-disabled: transparent;\n --color-accent-text-border-disabled: transparent;\n --color-accent-text-disabled: var(--fhi-color-accent-text-default);\n\n /* Neutral Color */\n --color-neutral-strong-background: var(--fhi-color-neutral-base-default);\n --color-neutral-strong-border: var(--fhi-color-neutral-base-default);\n --color-neutral-strong: var(--fhi-color-neutral-text-inverted);\n --color-neutral-strong-background-hover: var(\n --fhi-color-neutral-base-hover\n );\n --color-neutral-strong-border-hover: var(--fhi-color-neutral-base-hover);\n --color-neutral-strong-hover: var(--fhi-color-neutral-text-inverted);\n --color-neutral-strong-background-active: var(\n --fhi-color-neutral-base-active\n );\n --color-neutral-strong-border-active: var(\n --fhi-color-neutral-base-active\n );\n --color-neutral-strong-active: var(--fhi-color-neutral-text-inverted);\n --color-neutral-strong-background-disabled: var(\n --fhi-color-neutral-base-default\n );\n --color-neutral-strong-border-disabled: var(\n --fhi-color-neutral-base-default\n );\n --color-neutral-strong-disabled: var(--fhi-color-neutral-text-inverted);\n\n --color-neutral-subtle-background: var(\n --fhi-color-neutral-surface-default\n );\n --color-neutral-subtle-border: var(--fhi-color-neutral-surface-default);\n --color-neutral-subtle: var(--fhi-color-neutral-text-subtle);\n --color-neutral-subtle-background-hover: var(\n --fhi-color-neutral-surface-hover\n );\n --color-neutral-subtle-border-hover: var(\n --fhi-color-neutral-surface-hover\n );\n --color-neutral-subtle-hover: var(--fhi-color-neutral-text-default);\n --color-neutral-subtle-background-active: var(\n --fhi-color-neutral-surface-active\n );\n --color-neutral-subtle-border-active: var(\n --fhi-color-neutral-surface-active\n );\n --color-neutral-subtle-active: var(--fhi-color-neutral-text-default);\n --color-neutral-subtle-background-disabled: var(\n --fhi-color-neutral-surface-default\n );\n --color-neutral-subtle-border-disabled: var(\n --fhi-color-neutral-surface-default\n );\n --color-neutral-subtle-disabled: var(--fhi-color-neutral-text-default);\n\n --color-neutral-outlined-background: transparent;\n --color-neutral-outlined-border: var(--fhi-color-neutral-border-subtle);\n --color-neutral-outlined: var(--fhi-color-neutral-text-subtle);\n --color-neutral-outlined-background-hover: var(\n --fhi-color-neutral-surface-default\n );\n --color-neutral-outlined-border-hover: var(\n --fhi-color-neutral-surface-default\n );\n --color-neutral-outlined-hover: var(--fhi-color-neutral-text-default);\n --color-neutral-outlined-background-active: var(\n --fhi-color-neutral-surface-hover\n );\n --color-neutral-outlined-border-active: var(\n --fhi-color-neutral-surface-hover\n );\n --color-neutral-outlined-active: var(--fhi-color-neutral-text-default);\n --color-neutral-outlined-background-disabled: transparent;\n --color-neutral-outlined-border-disabled: var(\n --fhi-color-neutral-border-subtle\n );\n --color-neutral-outlined-disabled: var(--fhi-color-neutral-text-subtle);\n\n --color-neutral-text-background: transparent;\n --color-neutral-text-border: transparent;\n --color-neutral-text: var(--fhi-color-neutral-text-subtle);\n --color-neutral-text-background-hover: var(\n --fhi-color-neutral-surface-default\n );\n --color-neutral-text-border-hover: var(\n --fhi-color-neutral-surface-default\n );\n --color-neutral-text-hover: var(--fhi-color-neutral-text-default);\n --color-neutral-text-background-active: var(\n --fhi-color-neutral-surface-hover\n );\n --color-neutral-text-border-active: var(\n --fhi-color-neutral-surface-hover\n );\n --color-neutral-text-active: var(--fhi-color-neutral-text-default);\n --color-neutral-text-background-disabled: transparent;\n --color-neutral-text-border-disabled: transparent;\n --color-neutral-text-disabled: var(--fhi-color-neutral-text-subtle);\n\n /* Danger Color */\n --color-danger-strong-background: var(--fhi-color-danger-base-default);\n --color-danger-strong-border: var(--fhi-color-danger-base-default);\n --color-danger-strong: var(--fhi-color-danger-text-inverted);\n --color-danger-strong-background-hover: var(\n --fhi-color-danger-base-hover\n );\n --color-danger-strong-border-hover: var(--fhi-color-danger-base-hover);\n --color-danger-strong-hover: var(--fhi-color-danger-text-inverted);\n --color-danger-strong-background-active: var(\n --fhi-color-danger-base-active\n );\n --color-danger-strong-border-active: var(--fhi-color-danger-base-active);\n --color-danger-strong-active: var(--fhi-color-danger-text-inverted);\n --color-danger-strong-background-disabled: var(\n --fhi-color-danger-base-default\n );\n --color-danger-strong-border-disabled: var(\n --fhi-color-danger-base-default\n );\n --color-danger-strong-disabled: var(--fhi-color-danger-text-inverted);\n\n --color-danger-subtle-background: var(--fhi-color-danger-surface-default);\n --color-danger-subtle-border: var(--fhi-color-danger-surface-default);\n --color-danger-subtle: var(--fhi-color-danger-text-subtle);\n --color-danger-subtle-background-hover: var(\n --fhi-color-danger-surface-hover\n );\n --color-danger-subtle-border-hover: var(--fhi-color-danger-surface-hover);\n --color-danger-subtle-hover: var(--fhi-color-danger-text-default);\n --color-danger-subtle-background-active: var(\n --fhi-color-danger-surface-active\n );\n --color-danger-subtle-border-active: var(\n --fhi-color-danger-surface-active\n );\n --color-danger-subtle-active: var(--fhi-color-danger-text-default);\n --color-danger-subtle-background-disabled: var(\n --fhi-color-danger-surface-default\n );\n --color-danger-subtle-border-disabled: var(\n --fhi-color-danger-surface-default\n );\n --color-danger-subtle-disabled: var(--fhi-color-danger-text-subtle);\n\n --color-danger-outlined-background: transparent;\n --color-danger-outlined-border: var(--fhi-color-danger-border-subtle);\n --color-danger-outlined: var(--fhi-color-danger-text-subtle);\n --color-danger-outlined-background-hover: var(\n --fhi-color-danger-surface-default\n );\n --color-danger-outlined-border-hover: var(\n --fhi-color-danger-surface-default\n );\n --color-danger-outlined-hover: var(--fhi-color-danger-text-default);\n --color-danger-outlined-background-active: var(\n --fhi-color-danger-surface-hover\n );\n --color-danger-outlined-border-active: var(\n --fhi-color-danger-surface-hover\n );\n --color-danger-outlined-active: var(--fhi-color-danger-text-default);\n --color-danger-outlined-background-disabled: transparent;\n --color-danger-outlined-border-disabled: var(\n --fhi-color-danger-border-subtle\n );\n --color-danger-outlined-disabled: var(--fhi-color-danger-text-subtle);\n\n --color-danger-text-background: transparent;\n --color-danger-text-border: transparent;\n --color-danger-text: var(--fhi-color-danger-text-subtle);\n --color-danger-text-background-hover: var(\n --fhi-color-danger-surface-default\n );\n --color-danger-text-border-hover: var(--fhi-color-danger-surface-default);\n --color-danger-text-hover: var(--fhi-color-danger-text-default);\n --color-danger-text-background-active: var(\n --fhi-color-danger-surface-hover\n );\n --color-danger-text-border-active: var(--fhi-color-danger-surface-hover);\n --color-danger-text-active: var(--fhi-color-danger-text-default);\n --color-danger-text-background-disabled: transparent;\n --color-danger-text-border-disabled: transparent;\n --color-danger-text-disabled: var(--fhi-color-danger-text-subtle);\n\n --motion-transition: var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default);\n\n --opacity-disabled: var(--fhi-opacity-disabled);\n }\n\n :host {\n display: block;\n width: fit-content;\n\n button {\n border-radius: var(--dimension-border-radius);\n border: solid var(--dimension-border-width);\n font-family: var(--typography-font-family);\n -webkit-font-smoothing: antialiased;\n transition: var(--motion-transition);\n width: 100%;\n justify-items: center;\n\n cursor: pointer;\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n }\n\n .slot-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n }\n }\n\n :host([size='large']) button {\n font-size: var(--typography-label-large-font-size);\n font-weight: var(--typography-label-large-font-weight);\n line-height: var(--typography-label-large-line-height);\n letter-spacing: var(--typography-label-large-letter-spacing);\n padding: var(--dimension-padding-large);\n }\n\n :host([size='large'][variant='text']) button {\n padding: var(--dimension-padding-large-text);\n }\n\n :host([size='medium']) button {\n font-size: var(--typography-label-medium-font-size);\n font-weight: var(--typography-label-medium-font-weight);\n line-height: var(--typography-label-medium-line-height);\n letter-spacing: var(--typography-label-medium-letter-spacing);\n padding: var(--dimension-padding-medium);\n }\n\n :host([size='medium'][variant='text']) button {\n padding: var(--dimension-padding-medium-text);\n }\n\n :host([size='small']) button {\n font-size: var(--typography-label-small-font-size);\n font-weight: var(--typography-label-small-font-weight);\n line-height: var(--typography-label-small-line-height);\n letter-spacing: var(--typography-label-small-letter-spacing);\n padding: var(--dimension-padding-small);\n }\n\n :host([size='small'][variant='text']) button {\n padding: var(--dimension-padding-small-text);\n }\n\n :host([color='accent'][variant='strong']) button {\n background-color: var(--color-accent-strong-background);\n border-color: var(--color-accent-strong-border);\n color: var(--color-accent-strong);\n &:hover {\n background-color: var(--color-accent-strong-background-hover);\n border-color: var(--color-accent-strong-border-hover);\n color: var(--color-accent-strong-hover);\n }\n &:active {\n background-color: var(--color-accent-strong-background-active);\n border-color: var(--color-accent-strong-border-active);\n color: var(--color-accent-strong-active);\n }\n &:disabled {\n background-color: var(--color-accent-strong-background-disabled);\n border-color: var(--color-accent-strong-border-disabled);\n color: var(--color-accent-strong-disabled);\n }\n }\n\n :host([color='accent'][variant='subtle']) button {\n background-color: var(--color-accent-subtle-background);\n border-color: var(--color-accent-subtle-border);\n color: var(--color-accent-subtle);\n &:hover {\n background-color: var(--color-accent-subtle-background-hover);\n border-color: var(--color-accent-subtle-border-hover);\n color: var(--color-accent-subtle-hover);\n }\n &:active {\n background-color: var(--color-accent-subtle-background-active);\n border-color: var(--color-accent-subtle-border-active);\n color: var(--color-accent-subtle-active);\n }\n &:disabled {\n background-color: var(--color-accent-subtle-background-disabled);\n border-color: var(--color-accent-subtle-border-disabled);\n color: var(--color-accent-subtle-disabled);\n }\n }\n\n :host([color='accent'][variant='outlined']) button {\n background-color: var(--color-accent-outlined-background);\n border-color: var(--color-accent-outlined-border);\n color: var(--color-accent-outlined);\n &:hover {\n background-color: var(--color-accent-outlined-background-hover);\n border-color: var(--color-accent-outlined-border-hover);\n color: var(--color-accent-outlined-hover);\n }\n &:active {\n background-color: var(--color-accent-outlined-background-active);\n border-color: var(--color-accent-outlined-border-active);\n color: var(--color-accent-outlined-active);\n }\n &:disabled {\n background-color: var(--color-accent-outlined-background-disabled);\n border-color: var(--color-accent-outlined-border-disabled);\n color: var(--color-accent-outlined-disabled);\n }\n }\n\n :host([color='accent'][variant='text']) button {\n background-color: var(--color-accent-text-background);\n border-color: var(--color-accent-text-border);\n color: var(--color-accent-text);\n &:hover {\n background-color: var(--color-accent-text-background-hover);\n border-color: var(--color-accent-text-border-hover);\n color: var(--color-accent-text-hover);\n }\n &:active {\n background-color: var(--color-accent-text-background-active);\n border-color: var(--color-accent-text-border-active);\n color: var(--color-accent-text-active);\n }\n &:disabled {\n background-color: var(--color-accent-text-background-disabled);\n border-color: var(--color-accent-text-border-disabled);\n color: var(--color-accent-text-disabled);\n }\n }\n\n :host([color='neutral'][variant='strong']) button {\n background-color: var(--color-neutral-strong-background);\n border-color: var(--color-neutral-strong-border);\n color: var(--color-neutral-strong);\n &:hover {\n background-color: var(--color-neutral-strong-background-hover);\n border-color: var(--color-neutral-strong-border-hover);\n color: var(--color-neutral-strong-hover);\n }\n &:active {\n background-color: var(--color-neutral-strong-background-active);\n border-color: var(--color-neutral-strong-border-active);\n color: var(--color-neutral-strong-active);\n }\n &:disabled {\n background-color: var(--color-neutral-strong-background-disabled);\n border-color: var(--color-neutral-strong-border-disabled);\n color: var(--color-neutral-strong-disabled);\n }\n }\n\n :host([color='neutral'][variant='subtle']) button {\n background-color: var(--color-neutral-subtle-background);\n border-color: var(--color-neutral-subtle-border);\n color: var(--color-neutral-subtle);\n &:hover {\n background-color: var(--color-neutral-subtle-background-hover);\n border-color: var(--color-neutral-subtle-border-hover);\n color: var(--color-neutral-subtle-hover);\n }\n &:active {\n background-color: var(--color-neutral-subtle-background-active);\n border-color: var(--color-neutral-subtle-border-active);\n color: var(--color-neutral-subtle-active);\n }\n &:disabled {\n background-color: var(--color-neutral-subtle-background-disabled);\n border-color: var(--color-neutral-subtle-border-disabled);\n color: var(--color-neutral-subtle-disabled);\n }\n }\n\n :host([color='neutral'][variant='outlined']) button {\n background-color: var(--color-neutral-outlined-background);\n border-color: var(--color-neutral-outlined-border);\n color: var(--color-neutral-outlined);\n &:hover {\n background-color: var(--color-neutral-outlined-background-hover);\n border-color: var(--color-neutral-outlined-border-hover);\n color: var(--color-neutral-outlined-hover);\n }\n &:active {\n background-color: var(--color-neutral-outlined-background-active);\n border-color: var(--color-neutral-outlined-border-active);\n color: var(--color-neutral-outlined-active);\n }\n &:disabled {\n background-color: var(--color-neutral-outlined-background-disabled);\n border-color: var(--color-neutral-outlined-border-disabled);\n color: var(--color-neutral-outlined-disabled);\n }\n }\n\n :host([color='neutral'][variant='text']) button {\n background-color: var(--color-neutral-text-background);\n border-color: var(--color-neutral-text-border);\n color: var(--color-neutral-text);\n &:hover {\n background-color: var(--color-neutral-text-background-hover);\n border-color: var(--color-neutral-text-border-hover);\n color: var(--color-neutral-text-hover);\n }\n &:active {\n background-color: var(--color-neutral-text-background-active);\n border-color: var(--color-neutral-text-border-active);\n color: var(--color-neutral-text-active);\n }\n &:disabled {\n background-color: var(--color-neutral-text-background-disabled);\n border-color: var(--color-neutral-text-border-disabled);\n color: var(--color-neutral-text-disabled);\n }\n }\n\n :host([color='danger'][variant='strong']) button {\n background-color: var(--color-danger-strong-background);\n border-color: var(--color-danger-strong-border);\n color: var(--color-danger-strong);\n &:hover {\n background-color: var(--color-danger-strong-background-hover);\n border-color: var(--color-danger-strong-border-hover);\n color: var(--color-danger-strong-hover);\n }\n &:active {\n background-color: var(--color-danger-strong-background-active);\n border-color: var(--color-danger-strong-border-active);\n color: var(--color-danger-strong-active);\n }\n &:disabled {\n background-color: var(--color-danger-strong-background-disabled);\n border-color: var(--color-danger-strong-border-disabled);\n color: var(--color-danger-strong-disabled);\n }\n }\n\n :host([color='danger'][variant='subtle']) button {\n background-color: var(--color-danger-subtle-background);\n border-color: var(--color-danger-subtle-border);\n color: var(--color-danger-subtle);\n &:hover {\n background-color: var(--color-danger-subtle-background-hover);\n border-color: var(--color-danger-subtle-border-hover);\n color: var(--color-danger-subtle-hover);\n }\n &:active {\n background-color: var(--color-danger-subtle-background-active);\n border-color: var(--color-danger-subtle-border-active);\n color: var(--color-danger-subtle-active);\n }\n &:disabled {\n background-color: var(--color-danger-subtle-background-disabled);\n border-color: var(--color-danger-subtle-border-disabled);\n color: var(--color-danger-subtle-disabled);\n }\n }\n\n :host([color='danger'][variant='outlined']) button {\n background-color: var(--color-danger-outlined-background);\n border-color: var(--color-danger-outlined-border);\n color: var(--color-danger-outlined);\n &:hover {\n background-color: var(--color-danger-outlined-background-hover);\n border-color: var(--color-danger-outlined-border-hover);\n color: var(--color-danger-outlined-hover);\n }\n &:active {\n background-color: var(--color-danger-outlined-background-active);\n border-color: var(--color-danger-outlined-border-active);\n color: var(--color-danger-outlined-active);\n }\n &:disabled {\n background-color: var(--color-danger-outlined-background-disabled);\n border-color: var(--color-danger-outlined-border-disabled);\n color: var(--color-danger-outlined-disabled);\n }\n }\n\n :host([color='danger'][variant='text']) button {\n background-color: var(--color-danger-text-background);\n border-color: var(--color-danger-text-border);\n color: var(--color-danger-text);\n &:hover {\n background-color: var(--color-danger-text-background-hover);\n border-color: var(--color-danger-text-border-hover);\n color: var(--color-danger-text-hover);\n }\n &:active {\n background-color: var(--color-danger-text-background-active);\n border-color: var(--color-danger-text-border-active);\n color: var(--color-danger-text-active);\n }\n &:disabled {\n background-color: var(--color-danger-text-background-disabled);\n border-color: var(--color-danger-text-border-disabled);\n color: var(--color-danger-text-disabled);\n }\n }\n\n button[data-icon-only] {\n border-radius: var(--dimension-icon-only-border-radius);\n }\n\n :host([size='small']) button[data-icon-only] {\n padding: calc(0.375rem - var(--fhi-dimension-border-width));\n }\n\n :host([size='medium']) button[data-icon-only] {\n padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width));\n }\n\n :host([size='large']) button[data-icon-only] {\n padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n }\n `;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"fhi-button.js","names":[],"sources":["../../src/components/fhi-button/fhi-button.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiButtonSelector = 'fhi-button';\n\n/**\n * ## FHI Button\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs}\n *\n * The `<fhi-button>` component is used to create interactive buttons in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<button>` element to ensure consistent styling and behavior across your application.\n *\n * @tag fhi-button\n * @element fhi-button\n *\n * @slot - The content of the button. This should be pure text, an icon or both.\n */\n@customElement(FhiButtonSelector)\nexport class FhiButton extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * Sets the color of the button.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#color-farge}\n *\n * @reflect\n * @type {'accent' | 'neutral' | 'danger'}\n */\n @property({ type: String, reflect: true }) color:\n | 'accent'\n | 'neutral'\n | 'danger' = 'accent';\n\n /**\n *\n * Sets the button variant. The variant determines the button's visual style and emphasis.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#variant}\n *\n * @reflect\n * @type {'strong' | 'subtle' | 'outlined' | 'text'}\n */\n @property({ type: String, reflect: true }) variant:\n | 'strong'\n | 'subtle'\n | 'outlined'\n | 'text' = 'strong';\n\n /**\n * Sets the size of the button to one of the predefined options.\n *\n * See: {@link https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse}\n *\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Disables the button. 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 * Styles the button for icon-only content.\n *\n * If you only have an icon as the child of the button, then you should set this property to `true`.\n *\n * @deprecated This property is deprecated and will be removed in a future release. The button will automatically detect if it only contains an icon and apply the appropriate styling.\n *\n * @type {boolean}\n */\n @property({ type: Boolean, attribute: 'icon-only' })\n iconOnly: boolean = false;\n\n /**\n * Sets the button's type. This determines the button's behavior when used within a form.\n * The predefined types conform to standard HTML button types.\n *\n * For more information about button types, see: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n * @type {'button' | 'submit' | 'reset'}\n */\n @property({ type: String }) type: 'button' | 'submit' | 'reset' = 'submit';\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.onkeyup = this._handleKeyup.bind(this);\n this.onkeydown = this._handleKeydown.bind(this);\n this.onselectstart = this._handleSelectStart.bind(this);\n }\n\n protected update(_changedProperties: PropertyValues): void {\n // If a falsy value is provided, default to 'accent'.\n if (_changedProperties.has('color')) {\n if (!this.color) {\n this.color = 'accent';\n }\n }\n\n // If a falsy value is provided, default to 'strong'.\n if (_changedProperties.has('variant')) {\n if (!this.variant) {\n this.variant = 'strong';\n }\n }\n\n // If an invalid value is provided, default to 'medium'.\n if (_changedProperties.has('size')) {\n if (!this.size) {\n this.size = 'medium';\n }\n }\n\n if (_changedProperties.has('iconOnly')) {\n if (this.getAttribute('icon-only') !== null) {\n console.warn(\n \"The 'iconOnly' property is deprecated and will be removed in a future release. The button automatically detects if it only contains an icon and applies the appropriate styling.\",\n );\n }\n }\n\n super.update(_changedProperties);\n }\n\n /**\n * Programmatically clicks the button.\n */\n public click(): void {\n this._handleClick();\n }\n\n private _handleClick(event?: MouseEvent | KeyboardEvent): void {\n event?.preventDefault();\n event?.stopPropagation();\n\n if (this.disabled) {\n return;\n }\n\n this._dispatchClickEvent();\n\n if (this.type === 'submit') {\n this._internals.form?.requestSubmit();\n }\n\n if (this.type === 'reset') {\n this._internals.form?.reset();\n }\n }\n\n private _dispatchClickEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `click`.\n * This event is dispatched when the button is clicked, either via mouse or keyboard interaction.\n * */\n this.dispatchEvent(\n new MouseEvent('click', { bubbles: true, composed: true }),\n );\n }\n\n private _handleKeyup(event: KeyboardEvent): void {\n if (event.key === ' ' || event.key === 'Spacebar') {\n this._handleClick(event);\n\n const target = event.target as HTMLElement | null;\n target?.blur();\n target?.focus();\n }\n }\n\n private _handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this._handleClick(event);\n }\n }\n\n private _handleSelectStart(): boolean {\n return false;\n }\n\n private _getIconSize(): string {\n switch (this.size) {\n case 'small':\n return '1.25rem';\n case 'medium':\n case 'large':\n default:\n return '1.5rem';\n }\n }\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 the first node is an icon, style it.\n if (\n firstNode.nodeType === Node.ELEMENT_NODE &&\n (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const firstIcon = firstNode as HTMLElement;\n\n if (this.iconOnly || validNodes.length === 1) {\n if (!this.iconOnly) {\n this.iconOnly = true;\n }\n\n firstIcon.setAttribute('size', this._getIconSize());\n return;\n }\n\n if (this.size != 'small') {\n firstIcon.style.marginRight = 'var(--fhi-spacing-050)';\n }\n firstIcon.style.marginLeft = 'calc(-1 * var(--fhi-spacing-050))';\n firstIcon.setAttribute('size', this._getIconSize());\n }\n\n const lastNode: Node = validNodes[validNodes.length - 1];\n\n // if the last node is an icon, style it.\n if (\n lastNode.nodeType === Node.ELEMENT_NODE &&\n (lastNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const lastIcon = lastNode as HTMLElement;\n\n lastIcon.style.marginRight = 'calc(-1 * var(--fhi-spacing-050))';\n if (this.size != 'small') {\n lastIcon.style.marginLeft = 'var(--fhi-spacing-050)';\n }\n lastIcon.setAttribute('size', this._getIconSize());\n }\n }\n\n render() {\n return html`<button\n ?disabled=${this.disabled}\n type=${this.type}\n @keyup=${this._handleKeyup}\n @keydown=${this._handleKeydown}\n @click=${this._handleClick}\n ?data-icon-only=${this.iconOnly}\n >\n <div class=\"slot-container\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n </div>\n </button>`;\n }\n\n static styles = css`\n :host {\n display: block;\n width: fit-content;\n\n button {\n border-radius: var(--fhi-border-radius-full);\n border: solid var(--fhi-dimension-border-width);\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n transition: var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default);\n width: 100%;\n justify-items: center;\n\n cursor: pointer;\n &:disabled {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n }\n }\n\n .slot-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n }\n }\n\n :host([size='large']) button {\n font-size: var(--fhi-typography-label-large-font-size);\n font-weight: var(--fhi-typography-label-large-font-weight);\n line-height: var(--fhi-typography-label-large-line-height);\n letter-spacing: var(--fhi-typography-label-large-letter-spacing);\n padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width))\n calc(\n var(--fhi-spacing-300) + var(--fhi-spacing-050) - var(\n --fhi-dimension-border-width\n )\n );\n }\n\n :host([size='large'][variant='text']) button {\n padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width))\n calc(var(--fhi-spacing-300) - var(--fhi-dimension-border-width));\n }\n\n :host([size='medium']) button {\n font-size: var(--fhi-typography-label-medium-font-size);\n font-weight: var(--fhi-typography-label-medium-font-weight);\n line-height: var(--fhi-typography-label-medium-line-height);\n letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width))\n calc(\n var(--fhi-spacing-200) + var(--fhi-spacing-050) - var(\n --fhi-dimension-border-width\n )\n );\n }\n\n :host([size='medium'][variant='text']) button {\n padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width))\n calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\n }\n\n :host([size='small']) button {\n font-size: var(--fhi-typography-label-medium-font-size);\n font-weight: var(--fhi-typography-label-medium-font-weight);\n line-height: var(--fhi-typography-label-medium-line-height);\n letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width))\n calc(\n var(--fhi-spacing-150) + var(--fhi-spacing-050) - var(\n --fhi-dimension-border-width\n )\n );\n }\n\n :host([size='small'][variant='text']) button {\n padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width))\n calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));\n }\n\n :host([color='accent'][variant='strong']) button {\n background-color: var(--fhi-color-accent-base-default);\n border-color: var(--fhi-color-accent-base-default);\n color: var(--fhi-color-accent-text-inverted);\n &:hover {\n background-color: var(--fhi-color-accent-base-hover);\n border-color: var(--fhi-color-accent-base-hover);\n color: var(--fhi-color-accent-text-inverted);\n }\n &:active {\n background-color: var(--fhi-color-accent-base-active);\n border-color: var(--fhi-color-accent-base-active);\n color: var(--fhi-color-accent-text-inverted);\n }\n &:disabled {\n background-color: var(--fhi-color-accent-base-default);\n border-color: var(--fhi-color-accent-base-default);\n color: var(--fhi-color-accent-text-inverted);\n }\n }\n\n :host([color='accent'][variant='subtle']) button {\n background-color: var(--fhi-color-accent-surface-default);\n border-color: var(--fhi-color-accent-surface-default);\n color: var(--fhi-color-accent-text-subtle);\n &:hover {\n background-color: var(--fhi-color-accent-surface-hover);\n border-color: var(--fhi-color-accent-surface-hover);\n color: var(--fhi-color-accent-text-default);\n }\n &:active {\n background-color: var(--fhi-color-accent-surface-active);\n border-color: var(--fhi-color-accent-surface-active);\n color: var(--fhi-color-accent-text-default);\n }\n &:disabled {\n background-color: var(--fhi-color-accent-surface-default);\n border-color: var(--fhi-color-accent-surface-default);\n color: var(--fhi-color-accent-text-subtle);\n }\n }\n\n :host([color='accent'][variant='outlined']) button {\n background-color: transparent;\n border-color: var(--fhi-color-accent-border-subtle);\n color: var(--fhi-color-accent-text-subtle);\n &:hover {\n background-color: var(--fhi-color-accent-surface-default);\n border-color: var(--fhi-color-accent-surface-default);\n color: var(--fhi-color-accent-text-default);\n }\n &:active {\n background-color: var(--fhi-color-accent-surface-hover);\n border-color: var(--fhi-color-accent-surface-hover);\n color: var(--fhi-color-accent-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: var(--fhi-color-accent-border-subtle);\n color: var(--fhi-color-accent-text-subtle);\n }\n }\n\n :host([color='accent'][variant='text']) button {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-accent-text-subtle);\n &:hover {\n background-color: var(--fhi-color-accent-surface-default);\n border-color: var(--fhi-color-accent-surface-default);\n color: var(--fhi-color-accent-text-default);\n }\n &:active {\n background-color: var(--fhi-color-accent-surface-hover);\n border-color: var(--fhi-color-accent-surface-hover);\n color: var(--fhi-color-accent-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-accent-text-default);\n }\n }\n\n :host([color='neutral'][variant='strong']) button {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n color: var(--fhi-color-neutral-text-inverted);\n &:hover {\n background-color: var(--fhi-color-neutral-base-hover);\n border-color: var(--fhi-color-neutral-base-hover);\n color: var(--fhi-color-neutral-text-inverted);\n }\n &:active {\n background-color: var(--fhi-color-neutral-base-active);\n border-color: var(--fhi-color-neutral-base-active);\n color: var(--fhi-color-neutral-text-inverted);\n }\n &:disabled {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n color: var(--fhi-color-neutral-text-inverted);\n }\n }\n\n :host([color='neutral'][variant='subtle']) button {\n background-color: var(--fhi-color-neutral-surface-default);\n border-color: var(--fhi-color-neutral-surface-default);\n color: var(--fhi-color-neutral-text-subtle);\n &:hover {\n background-color: var(--fhi-color-neutral-surface-hover);\n border-color: var(--fhi-color-neutral-surface-hover);\n color: var(--fhi-color-neutral-text-default);\n }\n &:active {\n background-color: var(--fhi-color-neutral-surface-active);\n border-color: var(--fhi-color-neutral-surface-active);\n color: var(--fhi-color-neutral-text-default);\n }\n &:disabled {\n background-color: var(--fhi-color-neutral-surface-default);\n border-color: var(--fhi-color-neutral-surface-default);\n color: var(--fhi-color-neutral-text-default);\n }\n }\n\n :host([color='neutral'][variant='outlined']) button {\n background-color: transparent;\n border-color: var(--fhi-color-neutral-border-subtle);\n color: var(--fhi-color-neutral-text-subtle);\n &:hover {\n background-color: var(--fhi-color-neutral-surface-default);\n border-color: var(--fhi-color-neutral-surface-default);\n color: var(--fhi-color-neutral-text-default);\n }\n &:active {\n background-color: var(--fhi-color-neutral-surface-hover);\n border-color: var(--fhi-color-neutral-surface-hover);\n color: var(--fhi-color-neutral-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: var(--fhi-color-neutral-border-subtle);\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([color='neutral'][variant='text']) button {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-neutral-text-subtle);\n &:hover {\n background-color: var(--fhi-color-neutral-surface-default);\n border-color: var(--fhi-color-neutral-surface-default);\n color: var(--fhi-color-neutral-text-default);\n }\n &:active {\n background-color: var(--fhi-color-neutral-surface-hover);\n border-color: var(--fhi-color-neutral-surface-hover);\n color: var(--fhi-color-neutral-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([color='danger'][variant='strong']) button {\n background-color: var(--fhi-color-danger-base-default);\n border-color: var(--fhi-color-danger-base-default);\n color: var(--fhi-color-danger-text-inverted);\n &:hover {\n background-color: var(--fhi-color-danger-base-hover);\n border-color: var(--fhi-color-danger-base-hover);\n color: var(--fhi-color-danger-text-inverted);\n }\n &:active {\n background-color: var(--fhi-color-danger-base-active);\n border-color: var(--fhi-color-danger-base-active);\n color: var(--fhi-color-danger-text-inverted);\n }\n &:disabled {\n background-color: var(--fhi-color-danger-base-default);\n border-color: var(--fhi-color-danger-base-default);\n color: var(--fhi-color-danger-text-inverted);\n }\n }\n\n :host([color='danger'][variant='subtle']) button {\n background-color: var(--fhi-color-danger-surface-default);\n border-color: var(--fhi-color-danger-surface-default);\n color: var(--fhi-color-danger-text-subtle);\n &:hover {\n background-color: var(--fhi-color-danger-surface-hover);\n border-color: var(--fhi-color-danger-surface-hover);\n color: var(--fhi-color-danger-text-default);\n }\n &:active {\n background-color: var(--fhi-color-danger-surface-active);\n border-color: var(--fhi-color-danger-surface-active);\n color: var(--fhi-color-danger-text-default);\n }\n &:disabled {\n background-color: var(--fhi-color-danger-surface-default);\n border-color: var(--fhi-color-danger-surface-default);\n color: var(--fhi-color-danger-text-subtle);\n }\n }\n\n :host([color='danger'][variant='outlined']) button {\n background-color: transparent;\n border-color: var(--fhi-color-danger-border-subtle);\n color: var(--fhi-color-danger-text-subtle);\n &:hover {\n background-color: var(--fhi-color-danger-surface-default);\n border-color: var(--fhi-color-danger-surface-default);\n color: var(--fhi-color-danger-text-default);\n }\n &:active {\n background-color: var(--fhi-color-danger-surface-hover);\n border-color: var(--fhi-color-danger-surface-hover);\n color: var(--fhi-color-danger-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: var(--fhi-color-danger-border-subtle);\n color: var(--fhi-color-danger-text-subtle);\n }\n }\n\n :host([color='danger'][variant='text']) button {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-danger-text-subtle);\n &:hover {\n background-color: var(--fhi-color-danger-surface-default);\n border-color: var(--fhi-color-danger-surface-default);\n color: var(--fhi-color-danger-text-default);\n }\n &:active {\n background-color: var(--fhi-color-danger-surface-hover);\n border-color: var(--fhi-color-danger-surface-hover);\n color: var(--fhi-color-danger-text-default);\n }\n &:disabled {\n background-color: transparent;\n border-color: transparent;\n color: var(--fhi-color-danger-text-subtle);\n }\n }\n\n :host([size='small']) button[data-icon-only] {\n padding: calc(0.375rem - var(--fhi-dimension-border-width));\n }\n\n :host([size='medium']) button[data-icon-only] {\n padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width));\n }\n\n :host([size='large']) button[data-icon-only] {\n padding: calc(var(--fhi-spacing-200) - var(--fhi-dimension-border-width));\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.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-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.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"}}}
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.2",
4
+ "version": "0.40.3",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {