@folkehelseinstituttet/designsystem 0.30.0 → 0.32.0

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 (26) hide show
  1. package/custom-elements.json +621 -571
  2. package/fhi-body.js +10 -10
  3. package/fhi-body.js.map +1 -1
  4. package/fhi-button.js +12 -8
  5. package/fhi-button.js.map +1 -1
  6. package/fhi-date-input.js +62 -24
  7. package/fhi-date-input.js.map +1 -1
  8. package/fhi-display.js +13 -9
  9. package/fhi-display.js.map +1 -1
  10. package/fhi-headline.js +13 -9
  11. package/fhi-headline.js.map +1 -1
  12. package/fhi-label.js +10 -10
  13. package/fhi-label.js.map +1 -1
  14. package/fhi-modal-dialog.js +2 -2
  15. package/fhi-modal-dialog.js.map +1 -1
  16. package/fhi-tag.js +1 -1
  17. package/fhi-tag.js.map +1 -1
  18. package/fhi-text-input.js +88 -52
  19. package/fhi-text-input.js.map +1 -1
  20. package/fhi-title.js +13 -9
  21. package/fhi-title.js.map +1 -1
  22. package/fhi-tooltip.js +397 -395
  23. package/fhi-tooltip.js.map +1 -1
  24. package/index.js +354 -354
  25. package/package.json +12 -47
  26. package/web-types.json +280 -260
package/web-types.json CHANGED
@@ -1,53 +1,11 @@
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.30.0",
4
+ "version": "0.32.0",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
- {
10
- "name": "fhi-body",
11
- "description": "## FHI Body\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview\n\nThe `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-body component. This should be pure text.",
12
- "doc-url": "",
13
- "attributes": [
14
- {
15
- "name": "color",
16
- "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-body>\n```",
17
- "value": { "type": "string" }
18
- },
19
- {
20
- "name": "size",
21
- "description": "Sets the font size of the given text.",
22
- "value": {
23
- "type": "'large' | 'medium' | 'small'",
24
- "default": "'medium'"
25
- }
26
- }
27
- ],
28
- "slots": [
29
- {
30
- "name": "",
31
- "description": "The content of the fhi-body component. This should be pure text."
32
- }
33
- ],
34
- "events": [],
35
- "js": {
36
- "properties": [
37
- {
38
- "name": "color",
39
- "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-body>\n```",
40
- "type": "string"
41
- },
42
- {
43
- "name": "size",
44
- "description": "Sets the font size of the given text.",
45
- "type": "'large' | 'medium' | 'small'"
46
- }
47
- ],
48
- "events": []
49
- }
50
- },
51
9
  {
52
10
  "name": "fhi-button",
53
11
  "description": "## FHI Button\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-button--docs\n\nThe `<fhi-button>` component is used to create interactive buttons in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML `<button>` element to ensure consistent styling and behavior across your application.\n---\n\n\n### **Custom Events:**\n - **click** - Standard DOM event with the type `click`.\nThis event is dispatched when the button is clicked, either via mouse or keyboard interaction.\n\n### **Slot Section:**\n - _default_ - The content of the button. This should be pure text, an icon or both.",
@@ -66,11 +24,6 @@
66
24
  "description": "Disables the button. This changes its appearance and makes it non-interactive.",
67
25
  "value": { "type": "boolean", "default": "false" }
68
26
  },
69
- {
70
- "name": "icon-only",
71
- "description": "Styles the button for icon-only content.\n\nIf you only have an icon as the child of the button, then you should set this property to `true`.",
72
- "value": { "type": "boolean", "default": "false" }
73
- },
74
27
  {
75
28
  "name": "size",
76
29
  "description": "Sets the size of the button to one of the predefined options.\n\nSee: https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse",
@@ -94,6 +47,11 @@
94
47
  "type": "'strong' | 'subtle' | 'outlined' | 'text'",
95
48
  "default": "'strong'"
96
49
  }
50
+ },
51
+ {
52
+ "name": "icon-only",
53
+ "description": "Styles the button for icon-only content.\n\nIf you only have an icon as the child of the button, then you should set this property to `true`.",
54
+ "value": { "type": "boolean", "default": "false" }
97
55
  }
98
56
  ],
99
57
  "slots": [
@@ -121,11 +79,6 @@
121
79
  "description": "Disables the button. This changes its appearance and makes it non-interactive.",
122
80
  "type": "boolean"
123
81
  },
124
- {
125
- "name": "iconOnly",
126
- "description": "Styles the button for icon-only content.\n\nIf you only have an icon as the child of the button, then you should set this property to `true`.",
127
- "type": "boolean"
128
- },
129
82
  {
130
83
  "name": "size",
131
84
  "description": "Sets the size of the button to one of the predefined options.\n\nSee: https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse",
@@ -140,6 +93,11 @@
140
93
  "name": "variant",
141
94
  "description": "Sets the button variant. The variant determines the button's visual style and emphasis.\n\nSee: https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#variant",
142
95
  "type": "'strong' | 'subtle' | 'outlined' | 'text'"
96
+ },
97
+ {
98
+ "name": "iconOnly",
99
+ "description": "Styles the button for icon-only content.\n\nIf you only have an icon as the child of the button, then you should set this property to `true`.",
100
+ "type": "boolean"
143
101
  }
144
102
  ],
145
103
  "events": [
@@ -256,6 +214,11 @@
256
214
  "description": "Disables the input. This changes its appearance and makes it non-interactive.",
257
215
  "value": { "type": "boolean", "default": "false" }
258
216
  },
217
+ {
218
+ "name": "help-text",
219
+ "description": "The help-text shown above the input field.\nThis is often used to provide additional information to the user.",
220
+ "value": { "type": "string", "default": "undefined" }
221
+ },
259
222
  {
260
223
  "name": "label",
261
224
  "description": "The text that labels the input field.\nAn input field should always have a label to ensure accessibility.",
@@ -316,6 +279,11 @@
316
279
  "description": "Disables the input. This changes its appearance and makes it non-interactive.",
317
280
  "type": "boolean"
318
281
  },
282
+ {
283
+ "name": "helpText",
284
+ "description": "The help-text shown above the input field.\nThis is often used to provide additional information to the user.",
285
+ "type": "string"
286
+ },
319
287
  {
320
288
  "name": "label",
321
289
  "description": "The text that labels the input field.\nAn input field should always have a label to ensure accessibility.",
@@ -371,58 +339,6 @@
371
339
  ]
372
340
  }
373
341
  },
374
- {
375
- "name": "fhi-display",
376
- "description": "## FHI Display\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview\n\nThe `<fhi-display>` component is used to display large headline text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-display component. This should be pure text.",
377
- "doc-url": "",
378
- "attributes": [
379
- {
380
- "name": "color",
381
- "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-display>\n```",
382
- "value": { "type": "string" }
383
- },
384
- {
385
- "name": "level",
386
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
387
- "value": { "type": "1 | 2 | 3 | 4 | 5 | 6" }
388
- },
389
- {
390
- "name": "size",
391
- "description": "Sets the font size of the given text.",
392
- "value": {
393
- "type": "'large' | 'medium' | 'small'",
394
- "default": "'medium'"
395
- }
396
- }
397
- ],
398
- "slots": [
399
- {
400
- "name": "",
401
- "description": "The content of the fhi-display component. This should be pure text."
402
- }
403
- ],
404
- "events": [],
405
- "js": {
406
- "properties": [
407
- {
408
- "name": "color",
409
- "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-display>\n```",
410
- "type": "string"
411
- },
412
- {
413
- "name": "level",
414
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
415
- "type": "1 | 2 | 3 | 4 | 5 | 6"
416
- },
417
- {
418
- "name": "size",
419
- "description": "Sets the font size of the given text.",
420
- "type": "'large' | 'medium' | 'small'"
421
- }
422
- ],
423
- "events": []
424
- }
425
- },
426
342
  {
427
343
  "name": "fhi-flex",
428
344
  "description": "## FHI Flex\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-flex--docs\n\nThe `<fhi-flex>` component is a flexible container that utilizes CSS Flexbox to arrange its child elements in a responsive layout.\nIt allows for easy alignment, spacing, and direction control of its items.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the flex container. This can include any elements or text.",
@@ -537,100 +453,6 @@
537
453
  "events": []
538
454
  }
539
455
  },
540
- {
541
- "name": "fhi-headline",
542
- "description": "## FHI Headline\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview\n\nThe `<fhi-headline>` component is used to display headline text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-headline component. This should be pure text.",
543
- "doc-url": "",
544
- "attributes": [
545
- {
546
- "name": "color",
547
- "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-headline>\n```",
548
- "value": { "type": "string" }
549
- },
550
- {
551
- "name": "level",
552
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
553
- "value": { "type": "1 | 2 | 3 | 4 | 5 | 6" }
554
- },
555
- {
556
- "name": "size",
557
- "description": "Sets the size of the text styles.",
558
- "value": {
559
- "type": "'large' | 'medium' | 'small'",
560
- "default": "'medium'"
561
- }
562
- }
563
- ],
564
- "slots": [
565
- {
566
- "name": "",
567
- "description": "The content of the fhi-headline component. This should be pure text."
568
- }
569
- ],
570
- "events": [],
571
- "js": {
572
- "properties": [
573
- {
574
- "name": "color",
575
- "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-headline>\n```",
576
- "type": "string"
577
- },
578
- {
579
- "name": "level",
580
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
581
- "type": "1 | 2 | 3 | 4 | 5 | 6"
582
- },
583
- {
584
- "name": "size",
585
- "description": "Sets the size of the text styles.",
586
- "type": "'large' | 'medium' | 'small'"
587
- }
588
- ],
589
- "events": []
590
- }
591
- },
592
- {
593
- "name": "fhi-label",
594
- "description": "## FHI Label\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview\n\nThe `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-label component. This should be pure text.",
595
- "doc-url": "",
596
- "attributes": [
597
- {
598
- "name": "color",
599
- "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-label>\n```",
600
- "value": { "type": "string" }
601
- },
602
- {
603
- "name": "size",
604
- "description": "Sets the font size of the given text.",
605
- "value": {
606
- "type": "'large' | 'medium' | 'small'",
607
- "default": "'medium'"
608
- }
609
- }
610
- ],
611
- "slots": [
612
- {
613
- "name": "",
614
- "description": "The content of the fhi-label component. This should be pure text."
615
- }
616
- ],
617
- "events": [],
618
- "js": {
619
- "properties": [
620
- {
621
- "name": "color",
622
- "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-label>\n```",
623
- "type": "string"
624
- },
625
- {
626
- "name": "size",
627
- "description": "Sets the font size of the given text.",
628
- "type": "'large' | 'medium' | 'small'"
629
- }
630
- ],
631
- "events": []
632
- }
633
- },
634
456
  {
635
457
  "name": "fhi-modal-dialog",
636
458
  "description": "## FHI Modal Dialog\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-modal-dialog--docs\n\nThe `fhi-modal-dialog` component is used to display important information or prompt the user for input in a modal window.\nIt overlays the main content and usually requires user interaction before returning to the underlying page.\n---\n\n\n### **Custom Events:**\n - **close** - Standard DOM event with the type `close`\nThis event is fired whenever the dialog is closed.\n- **toggle** - Standard DOM event with the type `toggle`\nThis event is fired whenever the dialog is opened or closed.\n\n### **Slot Section:**\n - **body** - The main content of the dialog. Typically contains text or form elements.\n- **footer** - The footer content of the dialog, typically containing action buttons.",
@@ -853,6 +675,11 @@
853
675
  "description": "Disables the input. This changes its appearance and makes it non-interactive.",
854
676
  "value": { "type": "boolean", "default": "false" }
855
677
  },
678
+ {
679
+ "name": "help-text",
680
+ "description": "The message shown above the input field.\nThis is often used to provide additional information to the user.",
681
+ "value": { "type": "string", "default": "undefined" }
682
+ },
856
683
  {
857
684
  "name": "label",
858
685
  "description": "The text that labels the input field.\nAn input field should always have a label to ensure accessibility.",
@@ -871,7 +698,7 @@
871
698
  {
872
699
  "name": "placeholder",
873
700
  "description": "Sets the placeholder text for the input field.\nThis text is displayed when the input field is empty, providing a hint to the user about the expected input.",
874
- "value": { "type": "string", "default": "null" }
701
+ "value": { "type": "string", "default": "undefined" }
875
702
  },
876
703
  {
877
704
  "name": "readonly",
@@ -908,6 +735,11 @@
908
735
  "description": "Disables the input. This changes its appearance and makes it non-interactive.",
909
736
  "type": "boolean"
910
737
  },
738
+ {
739
+ "name": "helpText",
740
+ "description": "The message shown above the input field.\nThis is often used to provide additional information to the user.",
741
+ "type": "string"
742
+ },
911
743
  {
912
744
  "name": "label",
913
745
  "description": "The text that labels the input field.\nAn input field should always have a label to ensure accessibility.",
@@ -944,70 +776,18 @@
944
776
  "type": "string"
945
777
  }
946
778
  ],
947
- "events": [
948
- {
949
- "name": "change",
950
- "type": "Event",
951
- "description": "Standard DOM event with the type `change`.\nThis event is dispatched when the value of the input changes."
952
- },
953
- {
954
- "name": "input",
955
- "type": "Event",
956
- "description": "Standard DOM event with the type `input`.\nThis event is dispatched when the value of the input changes."
957
- }
958
- ]
959
- }
960
- },
961
- {
962
- "name": "fhi-title",
963
- "description": "## FHI Title\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-title--preview\n\nThe `<fhi-title>` component is used to display title text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-title component. This should be pure text.",
964
- "doc-url": "",
965
- "attributes": [
966
- {
967
- "name": "color",
968
- "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-title color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-title>\n```",
969
- "value": { "type": "string" }
970
- },
971
- {
972
- "name": "level",
973
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
974
- "value": { "type": "1 | 2 | 3 | 4 | 5 | 6" }
975
- },
976
- {
977
- "name": "size",
978
- "description": "Sets the size of the text styles.",
979
- "value": {
980
- "type": "'large' | 'medium' | 'small'",
981
- "default": "'medium'"
982
- }
983
- }
984
- ],
985
- "slots": [
986
- {
987
- "name": "",
988
- "description": "The content of the fhi-title component. This should be pure text."
989
- }
990
- ],
991
- "events": [],
992
- "js": {
993
- "properties": [
994
- {
995
- "name": "color",
996
- "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-title color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-title>\n```",
997
- "type": "string"
998
- },
779
+ "events": [
999
780
  {
1000
- "name": "level",
1001
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
1002
- "type": "1 | 2 | 3 | 4 | 5 | 6"
781
+ "name": "change",
782
+ "type": "Event",
783
+ "description": "Standard DOM event with the type `change`.\nThis event is dispatched when the value of the input changes."
1003
784
  },
1004
785
  {
1005
- "name": "size",
1006
- "description": "Sets the size of the text styles.",
1007
- "type": "'large' | 'medium' | 'small'"
786
+ "name": "input",
787
+ "type": "Event",
788
+ "description": "Standard DOM event with the type `input`.\nThis event is dispatched when the value of the input changes."
1008
789
  }
1009
- ],
1010
- "events": []
790
+ ]
1011
791
  }
1012
792
  },
1013
793
  {
@@ -4789,6 +4569,246 @@
4789
4569
  ],
4790
4570
  "events": []
4791
4571
  }
4572
+ },
4573
+ {
4574
+ "name": "fhi-body",
4575
+ "description": "## FHI Body\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview\n\nThe `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-body component. This should be pure text.",
4576
+ "doc-url": "",
4577
+ "attributes": [
4578
+ {
4579
+ "name": "color",
4580
+ "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-body>\n```",
4581
+ "value": { "type": "string" }
4582
+ },
4583
+ {
4584
+ "name": "size",
4585
+ "description": "Sets the font size of the given text.",
4586
+ "value": {
4587
+ "type": "'large' | 'medium' | 'small'",
4588
+ "default": "'medium'"
4589
+ }
4590
+ }
4591
+ ],
4592
+ "slots": [
4593
+ {
4594
+ "name": "",
4595
+ "description": "The content of the fhi-body component. This should be pure text."
4596
+ }
4597
+ ],
4598
+ "events": [],
4599
+ "js": {
4600
+ "properties": [
4601
+ {
4602
+ "name": "color",
4603
+ "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-body>\n```",
4604
+ "type": "string"
4605
+ },
4606
+ {
4607
+ "name": "size",
4608
+ "description": "Sets the font size of the given text.",
4609
+ "type": "'large' | 'medium' | 'small'"
4610
+ }
4611
+ ],
4612
+ "events": []
4613
+ }
4614
+ },
4615
+ {
4616
+ "name": "fhi-display",
4617
+ "description": "## FHI Display\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview\n\nThe `<fhi-display>` component is used to display large headline text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-display component. This should be pure text.",
4618
+ "doc-url": "",
4619
+ "attributes": [
4620
+ {
4621
+ "name": "color",
4622
+ "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-display>\n```",
4623
+ "value": { "type": "string" }
4624
+ },
4625
+ {
4626
+ "name": "level",
4627
+ "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
4628
+ "value": { "type": "1 | 2 | 3 | 4 | 5 | 6" }
4629
+ },
4630
+ {
4631
+ "name": "size",
4632
+ "description": "Sets the font size of the given text.",
4633
+ "value": {
4634
+ "type": "'large' | 'medium' | 'small'",
4635
+ "default": "'medium'"
4636
+ }
4637
+ }
4638
+ ],
4639
+ "slots": [
4640
+ {
4641
+ "name": "",
4642
+ "description": "The content of the fhi-display component. This should be pure text."
4643
+ }
4644
+ ],
4645
+ "events": [],
4646
+ "js": {
4647
+ "properties": [
4648
+ {
4649
+ "name": "color",
4650
+ "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-display>\n```",
4651
+ "type": "string"
4652
+ },
4653
+ {
4654
+ "name": "level",
4655
+ "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
4656
+ "type": "1 | 2 | 3 | 4 | 5 | 6"
4657
+ },
4658
+ {
4659
+ "name": "size",
4660
+ "description": "Sets the font size of the given text.",
4661
+ "type": "'large' | 'medium' | 'small'"
4662
+ }
4663
+ ],
4664
+ "events": []
4665
+ }
4666
+ },
4667
+ {
4668
+ "name": "fhi-headline",
4669
+ "description": "## FHI Headline\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview\n\nThe `<fhi-headline>` component is used to display headline text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-headline component. This should be pure text.",
4670
+ "doc-url": "",
4671
+ "attributes": [
4672
+ {
4673
+ "name": "color",
4674
+ "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-headline>\n```",
4675
+ "value": { "type": "string" }
4676
+ },
4677
+ {
4678
+ "name": "level",
4679
+ "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
4680
+ "value": { "type": "1 | 2 | 3 | 4 | 5 | 6" }
4681
+ },
4682
+ {
4683
+ "name": "size",
4684
+ "description": "Sets the size of the text styles.",
4685
+ "value": {
4686
+ "type": "'large' | 'medium' | 'small'",
4687
+ "default": "'medium'"
4688
+ }
4689
+ }
4690
+ ],
4691
+ "slots": [
4692
+ {
4693
+ "name": "",
4694
+ "description": "The content of the fhi-headline component. This should be pure text."
4695
+ }
4696
+ ],
4697
+ "events": [],
4698
+ "js": {
4699
+ "properties": [
4700
+ {
4701
+ "name": "color",
4702
+ "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-headline>\n```",
4703
+ "type": "string"
4704
+ },
4705
+ {
4706
+ "name": "level",
4707
+ "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
4708
+ "type": "1 | 2 | 3 | 4 | 5 | 6"
4709
+ },
4710
+ {
4711
+ "name": "size",
4712
+ "description": "Sets the size of the text styles.",
4713
+ "type": "'large' | 'medium' | 'small'"
4714
+ }
4715
+ ],
4716
+ "events": []
4717
+ }
4718
+ },
4719
+ {
4720
+ "name": "fhi-label",
4721
+ "description": "## FHI Label\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview\n\nThe `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-label component. This should be pure text.",
4722
+ "doc-url": "",
4723
+ "attributes": [
4724
+ {
4725
+ "name": "color",
4726
+ "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-label>\n```",
4727
+ "value": { "type": "string" }
4728
+ },
4729
+ {
4730
+ "name": "size",
4731
+ "description": "Sets the font size of the given text.",
4732
+ "value": {
4733
+ "type": "'large' | 'medium' | 'small'",
4734
+ "default": "'medium'"
4735
+ }
4736
+ }
4737
+ ],
4738
+ "slots": [
4739
+ {
4740
+ "name": "",
4741
+ "description": "The content of the fhi-label component. This should be pure text."
4742
+ }
4743
+ ],
4744
+ "events": [],
4745
+ "js": {
4746
+ "properties": [
4747
+ {
4748
+ "name": "color",
4749
+ "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-label>\n```",
4750
+ "type": "string"
4751
+ },
4752
+ {
4753
+ "name": "size",
4754
+ "description": "Sets the font size of the given text.",
4755
+ "type": "'large' | 'medium' | 'small'"
4756
+ }
4757
+ ],
4758
+ "events": []
4759
+ }
4760
+ },
4761
+ {
4762
+ "name": "fhi-title",
4763
+ "description": "## FHI Title\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-title--preview\n\nThe `<fhi-title>` component is used to display title text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-title component. This should be pure text.",
4764
+ "doc-url": "",
4765
+ "attributes": [
4766
+ {
4767
+ "name": "color",
4768
+ "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-title color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-title>\n```",
4769
+ "value": { "type": "string" }
4770
+ },
4771
+ {
4772
+ "name": "level",
4773
+ "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
4774
+ "value": { "type": "1 | 2 | 3 | 4 | 5 | 6" }
4775
+ },
4776
+ {
4777
+ "name": "size",
4778
+ "description": "Sets the size of the text styles.",
4779
+ "value": {
4780
+ "type": "'large' | 'medium' | 'small'",
4781
+ "default": "'medium'"
4782
+ }
4783
+ }
4784
+ ],
4785
+ "slots": [
4786
+ {
4787
+ "name": "",
4788
+ "description": "The content of the fhi-title component. This should be pure text."
4789
+ }
4790
+ ],
4791
+ "events": [],
4792
+ "js": {
4793
+ "properties": [
4794
+ {
4795
+ "name": "color",
4796
+ "description": "Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-title color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-title>\n```",
4797
+ "type": "string"
4798
+ },
4799
+ {
4800
+ "name": "level",
4801
+ "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
4802
+ "type": "1 | 2 | 3 | 4 | 5 | 6"
4803
+ },
4804
+ {
4805
+ "name": "size",
4806
+ "description": "Sets the size of the text styles.",
4807
+ "type": "'large' | 'medium' | 'small'"
4808
+ }
4809
+ ],
4810
+ "events": []
4811
+ }
4792
4812
  }
4793
4813
  ]
4794
4814
  }