@folkehelseinstituttet/designsystem 0.31.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 (23) hide show
  1. package/custom-elements.json +589 -579
  2. package/fhi-body.js +10 -10
  3. package/fhi-body.js.map +1 -1
  4. package/fhi-button.js +2 -2
  5. package/fhi-button.js.map +1 -1
  6. package/fhi-display.js +13 -9
  7. package/fhi-display.js.map +1 -1
  8. package/fhi-headline.js +13 -9
  9. package/fhi-headline.js.map +1 -1
  10. package/fhi-label.js +10 -10
  11. package/fhi-label.js.map +1 -1
  12. package/fhi-modal-dialog.js +2 -2
  13. package/fhi-modal-dialog.js.map +1 -1
  14. package/fhi-tag.js +1 -1
  15. package/fhi-tag.js.map +1 -1
  16. package/fhi-text-input.js.map +1 -1
  17. package/fhi-title.js +13 -9
  18. package/fhi-title.js.map +1 -1
  19. package/fhi-tooltip.js +397 -395
  20. package/fhi-tooltip.js.map +1 -1
  21. package/index.js +354 -354
  22. package/package.json +12 -47
  23. package/web-types.json +241 -241
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "title": "FHI Designsystem",
3
3
  "author": "FHI Designsystem team",
4
4
  "name": "@folkehelseinstituttet/designsystem",
5
- "version": "0.31.0",
5
+ "version": "0.32.0",
6
6
  "description": "The official design system for the Norwegian Institute of Public Health implemented as web components",
7
7
  "keywords": [
8
8
  "fhi",
@@ -55,25 +55,20 @@
55
55
  "publish:npm": "pnpm build && cd dist/npm && npm publish",
56
56
  "changelog:ci": "release-it --ci",
57
57
  "analyze": "cem analyze --litelement",
58
- "clean": "rimraf .temp"
58
+ "clean": "rimraf .temp",
59
+ "build-storybook": "storybook build"
59
60
  },
60
61
  "peerDependencies": {
61
62
  "lit": "~3.2.0"
62
63
  },
63
64
  "devDependencies": {
64
- "@chromatic-com/storybook": "~1.9.0",
65
65
  "@custom-elements-manifest/analyzer": "^0.10.10",
66
66
  "@esm-bundle/chai": "4.3.4-fix.0",
67
67
  "@open-wc/testing": "~4.0.0",
68
68
  "@playwright/test": "^1.57.0",
69
69
  "@release-it/conventional-changelog": "~10.0.2",
70
- "@storybook/addon-actions": "~8.3.7",
71
- "@storybook/addon-essentials": "~8.6.14",
72
- "@storybook/addon-links": "~8.3.7",
73
- "@storybook/blocks": "~8.3.7",
74
- "@storybook/test": "~8.6.14",
75
- "@storybook/web-components": "~8.6.14",
76
- "@storybook/web-components-vite": "~8.6.14",
70
+ "@storybook/addon-docs": "^10.2.8",
71
+ "@storybook/web-components-vite": "^10.2.8",
77
72
  "@types/mocha": "~10.0.10",
78
73
  "@types/node": "~22.5.5",
79
74
  "@wc-toolkit/cem-sorter": "^1.0.1",
@@ -84,12 +79,14 @@
84
79
  "@web/test-runner-playwright": "~0.11.1",
85
80
  "cross-env": "7.0.3",
86
81
  "custom-element-jet-brains-integration": "^1.7.0",
82
+ "eslint-plugin-storybook": "10.2.8",
87
83
  "lit": "~3.2.1",
88
84
  "mocha": "~10.7.3",
85
+ "playwright": "^1.58.2",
89
86
  "release-it": "~19.0.6",
90
87
  "rimraf": "^6.1.2",
91
- "storybook": "~8.6.15",
92
- "storybook-design-token": "^3.3.0",
88
+ "storybook": "^10.2.8",
89
+ "storybook-design-token": "^5.0.0",
93
90
  "svgo": "^3.3.2",
94
91
  "vite": "~6.4.1",
95
92
  "vite-plugin-generate-file": "~0.2.0",
@@ -100,41 +97,9 @@
100
97
  },
101
98
  "pnpm": {
102
99
  "overrides": {
103
- "vite@>=5.4.0 <5.4.6": ">=5.4.6",
104
- "vite@>=5.4.0 <=5.4.5": ">=5.4.6",
105
- "rollup@>=4.0.0 <4.22.4": ">=4.22.4",
106
- "@eslint/plugin-kit@<0.2.3": ">=0.2.3",
107
- "koa@>=2.0.0 <2.15.4": ">=2.15.4",
108
- "esbuild@<=0.24.2": ">=0.25.0",
109
- "vite@>=5.0.0 <=5.4.11": ">=5.4.12",
110
- "vite@>=5.0.0 <5.4.15": ">=5.4.15",
111
- "vite@>=5.0.0 <5.4.16": ">=5.4.16",
112
- "vite@>=5.0.0 <5.4.18": ">=5.4.18",
113
- "cookie@<0.7.0": ">=0.7.0",
114
- "@babel/runtime@<7.26.10": ">=7.26.10",
115
- "vite@>=5.0.0 <=5.4.18": ">=5.4.19",
116
- "vite@>=5.0.0 <5.4.17": ">=5.4.17",
117
- "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5",
118
- "path-to-regexp@<0.1.12": ">=0.1.12",
119
- "brace-expansion@>=1.0.0 <=1.1.11": ">=1.1.12",
120
- "brace-expansion@>=2.0.0 <=2.0.1": ">=2.0.2",
121
- "@eslint/plugin-kit@<0.3.4": ">=0.3.4",
122
- "koa@>=2.0.0 <2.16.2": ">=2.16.2",
123
- "vite-plugin-static-copy@>=0.4.3 <=2.3.1": ">=2.3.2",
124
- "vite@<=5.4.19": ">=5.4.20",
125
- "@conventional-changelog/git-client@<2.0.0": ">=2.0.0",
126
- "koa@<2.16.1": ">=2.16.1",
127
- "vite@>=5.2.6 <=5.4.20": ">=5.4.21",
128
- "playwright@<1.55.1": ">=1.55.1",
129
- "tar-fs@>=3.0.0 <3.1.1": ">=3.1.1",
130
- "form-data@>=4.0.0 <4.0.4": ">=4.0.4",
131
- "tar-fs@>=3.0.0 <3.0.9": ">=3.0.9",
132
- "tar-fs@>=3.0.0 <3.0.7": ">=3.0.7",
133
- "nanoid@<3.3.8": ">=3.3.8",
134
- "js-yaml@>=4.0.0 <4.1.1": ">=4.1.1",
135
- "glob@>=11.0.0 <11.1.0": ">=11.1.0",
136
- "qs@<6.14.1": ">=6.14.1",
137
- "storybook@>=8.0.0 <8.6.15": ">=8.6.15"
100
+ "undici@<6.23.0": ">=6.23.0",
101
+ "diff@>=5.0.0 <5.2.2": ">=5.2.2",
102
+ "qs@>=6.7.0 <=6.14.1": ">=6.14.2"
138
103
  }
139
104
  }
140
105
  }
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.31.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.",
@@ -381,58 +339,6 @@
381
339
  ]
382
340
  }
383
341
  },
384
- {
385
- "name": "fhi-display",
386
- "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.",
387
- "doc-url": "",
388
- "attributes": [
389
- {
390
- "name": "color",
391
- "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```",
392
- "value": { "type": "string" }
393
- },
394
- {
395
- "name": "level",
396
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
397
- "value": { "type": "1 | 2 | 3 | 4 | 5 | 6" }
398
- },
399
- {
400
- "name": "size",
401
- "description": "Sets the font size of the given text.",
402
- "value": {
403
- "type": "'large' | 'medium' | 'small'",
404
- "default": "'medium'"
405
- }
406
- }
407
- ],
408
- "slots": [
409
- {
410
- "name": "",
411
- "description": "The content of the fhi-display component. This should be pure text."
412
- }
413
- ],
414
- "events": [],
415
- "js": {
416
- "properties": [
417
- {
418
- "name": "color",
419
- "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```",
420
- "type": "string"
421
- },
422
- {
423
- "name": "level",
424
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
425
- "type": "1 | 2 | 3 | 4 | 5 | 6"
426
- },
427
- {
428
- "name": "size",
429
- "description": "Sets the font size of the given text.",
430
- "type": "'large' | 'medium' | 'small'"
431
- }
432
- ],
433
- "events": []
434
- }
435
- },
436
342
  {
437
343
  "name": "fhi-flex",
438
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.",
@@ -547,100 +453,6 @@
547
453
  "events": []
548
454
  }
549
455
  },
550
- {
551
- "name": "fhi-headline",
552
- "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.",
553
- "doc-url": "",
554
- "attributes": [
555
- {
556
- "name": "color",
557
- "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```",
558
- "value": { "type": "string" }
559
- },
560
- {
561
- "name": "level",
562
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
563
- "value": { "type": "1 | 2 | 3 | 4 | 5 | 6" }
564
- },
565
- {
566
- "name": "size",
567
- "description": "Sets the size of the text styles.",
568
- "value": {
569
- "type": "'large' | 'medium' | 'small'",
570
- "default": "'medium'"
571
- }
572
- }
573
- ],
574
- "slots": [
575
- {
576
- "name": "",
577
- "description": "The content of the fhi-headline component. This should be pure text."
578
- }
579
- ],
580
- "events": [],
581
- "js": {
582
- "properties": [
583
- {
584
- "name": "color",
585
- "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```",
586
- "type": "string"
587
- },
588
- {
589
- "name": "level",
590
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
591
- "type": "1 | 2 | 3 | 4 | 5 | 6"
592
- },
593
- {
594
- "name": "size",
595
- "description": "Sets the size of the text styles.",
596
- "type": "'large' | 'medium' | 'small'"
597
- }
598
- ],
599
- "events": []
600
- }
601
- },
602
- {
603
- "name": "fhi-label",
604
- "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.",
605
- "doc-url": "",
606
- "attributes": [
607
- {
608
- "name": "color",
609
- "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```",
610
- "value": { "type": "string" }
611
- },
612
- {
613
- "name": "size",
614
- "description": "Sets the font size of the given text.",
615
- "value": {
616
- "type": "'large' | 'medium' | 'small'",
617
- "default": "'medium'"
618
- }
619
- }
620
- ],
621
- "slots": [
622
- {
623
- "name": "",
624
- "description": "The content of the fhi-label component. This should be pure text."
625
- }
626
- ],
627
- "events": [],
628
- "js": {
629
- "properties": [
630
- {
631
- "name": "color",
632
- "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```",
633
- "type": "string"
634
- },
635
- {
636
- "name": "size",
637
- "description": "Sets the font size of the given text.",
638
- "type": "'large' | 'medium' | 'small'"
639
- }
640
- ],
641
- "events": []
642
- }
643
- },
644
456
  {
645
457
  "name": "fhi-modal-dialog",
646
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.",
@@ -978,58 +790,6 @@
978
790
  ]
979
791
  }
980
792
  },
981
- {
982
- "name": "fhi-title",
983
- "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.",
984
- "doc-url": "",
985
- "attributes": [
986
- {
987
- "name": "color",
988
- "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```",
989
- "value": { "type": "string" }
990
- },
991
- {
992
- "name": "level",
993
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
994
- "value": { "type": "1 | 2 | 3 | 4 | 5 | 6" }
995
- },
996
- {
997
- "name": "size",
998
- "description": "Sets the size of the text styles.",
999
- "value": {
1000
- "type": "'large' | 'medium' | 'small'",
1001
- "default": "'medium'"
1002
- }
1003
- }
1004
- ],
1005
- "slots": [
1006
- {
1007
- "name": "",
1008
- "description": "The content of the fhi-title component. This should be pure text."
1009
- }
1010
- ],
1011
- "events": [],
1012
- "js": {
1013
- "properties": [
1014
- {
1015
- "name": "color",
1016
- "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```",
1017
- "type": "string"
1018
- },
1019
- {
1020
- "name": "level",
1021
- "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
1022
- "type": "1 | 2 | 3 | 4 | 5 | 6"
1023
- },
1024
- {
1025
- "name": "size",
1026
- "description": "Sets the size of the text styles.",
1027
- "type": "'large' | 'medium' | 'small'"
1028
- }
1029
- ],
1030
- "events": []
1031
- }
1032
- },
1033
793
  {
1034
794
  "name": "fhi-tooltip",
1035
795
  "description": "## FHI Tooltip\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-tooltip--docs\n\nThe `<fhi-tooltip>` component provides contextual information when users hover over or focus on an element.\nIt is designed to enhance user experience by offering additional details without cluttering the interface.\n---\n\n\n### **Slot Section:**\n - _default_ - The content that will trigger the tooltip.",
@@ -4809,6 +4569,246 @@
4809
4569
  ],
4810
4570
  "events": []
4811
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
+ }
4812
4812
  }
4813
4813
  ]
4814
4814
  }