@folkehelseinstituttet/designsystem 0.30.0 → 0.32.0

package/custom-elements.json

@@ -2,104 +2,6 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "src/components/fhi-body/fhi-body.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "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.",
-          "name": "FhiBody",
-          "slots": [
-            {
-              "description": "The content of the fhi-body component. This should be pure text.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "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```",
-              "attribute": "color"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the font size of the given text.",
-              "reflects": true,
-              "attribute": "size"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "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```",
-              "fieldName": "color"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the font size of the given text.",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "fhi-body",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "FhiBodySelector",
-          "type": {
-            "text": "string"
-          },
-          "default": "'fhi-body'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "",
-          "declaration": {
-            "name": "FhiBody",
-            "module": "src/components/fhi-body/fhi-body.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FhiBody",
-          "declaration": {
-            "name": "FhiBody",
-            "module": "src/components/fhi-body/fhi-body.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FhiBodySelector",
-          "declaration": {
-            "name": "FhiBodySelector",
-            "module": "src/components/fhi-body/fhi-body.component.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/fhi-button/fhi-button.component.ts",
@@ -269,16 +171,6 @@
               "readonly": true,
               "default": "true"
             },
-            {
-              "kind": "field",
-              "name": "iconOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "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`.",
-              "attribute": "icon-only"
-            },
             {
               "kind": "field",
               "name": "size",
@@ -310,6 +202,17 @@
               "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",
               "reflects": true,
               "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "iconOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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`.",
+              "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.",
+              "attribute": "icon-only"
             }
           ],
           "events": [
@@ -340,15 +243,6 @@
               "description": "Disables the button. This changes its appearance and makes it non-interactive.",
               "fieldName": "disabled"
             },
-            {
-              "name": "icon-only",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "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`.",
-              "fieldName": "iconOnly"
-            },
             {
               "name": "size",
               "type": {
@@ -375,6 +269,16 @@
               "default": "'strong'",
               "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",
               "fieldName": "variant"
+            },
+            {
+              "name": "icon-only",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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`.",
+              "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.",
+              "fieldName": "iconOnly"
             }
           ],
           "superclass": {
@@ -823,6 +727,16 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "undefined",
+              "description": "The help-text shown above the input field.\nThis is often used to provide additional information to the user.",
+              "attribute": "help-text"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -931,6 +845,15 @@
               "description": "Disables the input.  This changes its appearance and makes it non-interactive.",
               "fieldName": "disabled"
             },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "undefined",
+              "description": "The help-text shown above the input field.\nThis is often used to provide additional information to the user.",
+              "fieldName": "helpText"
+            },
             {
               "name": "label",
               "type": {
@@ -1045,121 +968,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/fhi-display/fhi-display.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "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.",
-          "name": "FhiDisplay",
-          "slots": [
-            {
-              "description": "The content of the fhi-display component. This should be pure text.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "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```",
-              "attribute": "color"
-            },
-            {
-              "kind": "field",
-              "name": "level",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
-              "attribute": "level"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the font size of the given text.",
-              "reflects": true,
-              "attribute": "size"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "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```",
-              "fieldName": "color"
-            },
-            {
-              "name": "level",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
-              "fieldName": "level"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the font size of the given text.",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "fhi-display",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "FhiDisplaySelector",
-          "type": {
-            "text": "string"
-          },
-          "default": "'fhi-display'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "",
-          "declaration": {
-            "name": "FhiDisplay",
-            "module": "src/components/fhi-display/fhi-display.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FhiDisplay",
-          "declaration": {
-            "name": "FhiDisplay",
-            "module": "src/components/fhi-display/fhi-display.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FhiDisplaySelector",
-          "declaration": {
-            "name": "FhiDisplaySelector",
-            "module": "src/components/fhi-display/fhi-display.component.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/fhi-flex/fhi-flex.component.ts",
@@ -1412,219 +1220,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/fhi-headline/fhi-headline.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "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.",
-          "name": "FhiHeadline",
-          "slots": [
-            {
-              "description": "The content of the fhi-headline component. This should be pure text.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "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```",
-              "attribute": "color"
-            },
-            {
-              "kind": "field",
-              "name": "level",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
-              "attribute": "level"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the size of the text styles.",
-              "reflects": true,
-              "attribute": "size"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "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```",
-              "fieldName": "color"
-            },
-            {
-              "name": "level",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
-              "fieldName": "level"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the size of the text styles.",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "fhi-headline",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "FhiHeadlineSelector",
-          "type": {
-            "text": "string"
-          },
-          "default": "'fhi-headline'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "",
-          "declaration": {
-            "name": "FhiHeadline",
-            "module": "src/components/fhi-headline/fhi-headline.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FhiHeadline",
-          "declaration": {
-            "name": "FhiHeadline",
-            "module": "src/components/fhi-headline/fhi-headline.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FhiHeadlineSelector",
-          "declaration": {
-            "name": "FhiHeadlineSelector",
-            "module": "src/components/fhi-headline/fhi-headline.component.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/fhi-label/fhi-label.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "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.",
-          "name": "FhiLabel",
-          "slots": [
-            {
-              "description": "The content of the fhi-label component. This should be pure text.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "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```",
-              "attribute": "color"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the font size of the given text.",
-              "reflects": true,
-              "attribute": "size"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "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```",
-              "fieldName": "color"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the font size of the given text.",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "fhi-label",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "FhiLabelSelector",
-          "type": {
-            "text": "string"
-          },
-          "default": "'fhi-label'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "",
-          "declaration": {
-            "name": "FhiLabel",
-            "module": "src/components/fhi-label/fhi-label.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FhiLabel",
-          "declaration": {
-            "name": "FhiLabel",
-            "module": "src/components/fhi-label/fhi-label.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FhiLabelSelector",
-          "declaration": {
-            "name": "FhiLabelSelector",
-            "module": "src/components/fhi-label/fhi-label.component.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts",
@@ -2423,6 +2018,16 @@
               "reflects": true,
               "attribute": "disabled"
             },
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true"
+            },
             {
               "kind": "method",
               "name": "formResetCallback",
@@ -2487,6 +2092,16 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string"
+              },
+              "default": "undefined",
+              "description": "The message shown above the input field.\nThis is often used to provide additional information to the user.",
+              "attribute": "help-text"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -2523,7 +2138,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "null",
+              "default": "undefined",
               "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.",
               "attribute": "placeholder"
             },
@@ -2585,6 +2200,15 @@
               "description": "Disables the input.  This changes its appearance and makes it non-interactive.",
               "fieldName": "disabled"
             },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "undefined",
+              "description": "The message shown above the input field.\nThis is often used to provide additional information to the user.",
+              "fieldName": "helpText"
+            },
             {
               "name": "label",
               "type": {
@@ -2616,7 +2240,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "null",
+              "default": "undefined",
               "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.",
               "fieldName": "placeholder"
             },
@@ -2692,146 +2316,31 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/fhi-title/fhi-title.component.ts",
+      "path": "src/components/fhi-tooltip/fhi-tooltip.component.ts",
       "declarations": [
         {
           "kind": "class",
-          "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.",
-          "name": "FhiTitle",
+          "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.",
+          "name": "FhiTooltip",
           "slots": [
             {
-              "description": "The content of the fhi-title component. This should be pure text.",
+              "description": "The content that will trigger the tooltip.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "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```",
-              "attribute": "color"
+              "name": "__handlePotentialEscapeKeyPress",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "level",
+              "name": "_anchor",
               "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
+                "text": "HTMLElement"
               },
-              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
-              "attribute": "level"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the size of the text styles.",
-              "reflects": true,
-              "attribute": "size"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "string"
-              },
-              "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```",
-              "fieldName": "color"
-            },
-            {
-              "name": "level",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
-              "fieldName": "level"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the size of the text styles.",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "fhi-title",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "FhiTitleSelector",
-          "type": {
-            "text": "string"
-          },
-          "default": "'fhi-title'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "",
-          "declaration": {
-            "name": "FhiTitle",
-            "module": "src/components/fhi-title/fhi-title.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FhiTitle",
-          "declaration": {
-            "name": "FhiTitle",
-            "module": "src/components/fhi-title/fhi-title.component.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "FhiTitleSelector",
-          "declaration": {
-            "name": "FhiTitleSelector",
-            "module": "src/components/fhi-title/fhi-title.component.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/fhi-tooltip/fhi-tooltip.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "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.",
-          "name": "FhiTooltip",
-          "slots": [
-            {
-              "description": "The content that will trigger the tooltip.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "__handlePotentialEscapeKeyPress",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_anchor",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -13530,6 +13039,547 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/typography/fhi-body/fhi-body.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "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.",
+          "name": "FhiBody",
+          "slots": [
+            {
+              "description": "The content of the fhi-body component. This should be pure text.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "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```",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'large' | 'medium' | 'small'"
+              },
+              "default": "'medium'",
+              "description": "Sets the font size of the given text.",
+              "reflects": true,
+              "attribute": "size"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "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```",
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'large' | 'medium' | 'small'"
+              },
+              "default": "'medium'",
+              "description": "Sets the font size of the given text.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "fhi-body",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "FhiBodySelector",
+          "type": {
+            "text": "string"
+          },
+          "default": "'fhi-body'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "",
+          "declaration": {
+            "name": "FhiBody",
+            "module": "src/components/typography/fhi-body/fhi-body.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FhiBody",
+          "declaration": {
+            "name": "FhiBody",
+            "module": "src/components/typography/fhi-body/fhi-body.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FhiBodySelector",
+          "declaration": {
+            "name": "FhiBodySelector",
+            "module": "src/components/typography/fhi-body/fhi-body.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/typography/fhi-display/fhi-display.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "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.",
+          "name": "FhiDisplay",
+          "slots": [
+            {
+              "description": "The content of the fhi-display component. This should be pure text.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "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```",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "level",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
+              },
+              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
+              "attribute": "level"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'large' | 'medium' | 'small'"
+              },
+              "default": "'medium'",
+              "description": "Sets the font size of the given text.",
+              "reflects": true,
+              "attribute": "size"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "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```",
+              "fieldName": "color"
+            },
+            {
+              "name": "level",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
+              },
+              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
+              "fieldName": "level"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'large' | 'medium' | 'small'"
+              },
+              "default": "'medium'",
+              "description": "Sets the font size of the given text.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "fhi-display",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "FhiDisplaySelector",
+          "type": {
+            "text": "string"
+          },
+          "default": "'fhi-display'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "",
+          "declaration": {
+            "name": "FhiDisplay",
+            "module": "src/components/typography/fhi-display/fhi-display.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FhiDisplay",
+          "declaration": {
+            "name": "FhiDisplay",
+            "module": "src/components/typography/fhi-display/fhi-display.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FhiDisplaySelector",
+          "declaration": {
+            "name": "FhiDisplaySelector",
+            "module": "src/components/typography/fhi-display/fhi-display.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/typography/fhi-headline/fhi-headline.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "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.",
+          "name": "FhiHeadline",
+          "slots": [
+            {
+              "description": "The content of the fhi-headline component. This should be pure text.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "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```",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "level",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
+              },
+              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
+              "attribute": "level"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'large' | 'medium' | 'small'"
+              },
+              "default": "'medium'",
+              "description": "Sets the size of the text styles.",
+              "reflects": true,
+              "attribute": "size"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "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```",
+              "fieldName": "color"
+            },
+            {
+              "name": "level",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
+              },
+              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
+              "fieldName": "level"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'large' | 'medium' | 'small'"
+              },
+              "default": "'medium'",
+              "description": "Sets the size of the text styles.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "fhi-headline",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "FhiHeadlineSelector",
+          "type": {
+            "text": "string"
+          },
+          "default": "'fhi-headline'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "",
+          "declaration": {
+            "name": "FhiHeadline",
+            "module": "src/components/typography/fhi-headline/fhi-headline.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FhiHeadline",
+          "declaration": {
+            "name": "FhiHeadline",
+            "module": "src/components/typography/fhi-headline/fhi-headline.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FhiHeadlineSelector",
+          "declaration": {
+            "name": "FhiHeadlineSelector",
+            "module": "src/components/typography/fhi-headline/fhi-headline.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/typography/fhi-label/fhi-label.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "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.",
+          "name": "FhiLabel",
+          "slots": [
+            {
+              "description": "The content of the fhi-label component. This should be pure text.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "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```",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'large' | 'medium' | 'small'"
+              },
+              "default": "'medium'",
+              "description": "Sets the font size of the given text.",
+              "reflects": true,
+              "attribute": "size"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "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```",
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'large' | 'medium' | 'small'"
+              },
+              "default": "'medium'",
+              "description": "Sets the font size of the given text.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "fhi-label",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "FhiLabelSelector",
+          "type": {
+            "text": "string"
+          },
+          "default": "'fhi-label'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "",
+          "declaration": {
+            "name": "FhiLabel",
+            "module": "src/components/typography/fhi-label/fhi-label.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FhiLabel",
+          "declaration": {
+            "name": "FhiLabel",
+            "module": "src/components/typography/fhi-label/fhi-label.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FhiLabelSelector",
+          "declaration": {
+            "name": "FhiLabelSelector",
+            "module": "src/components/typography/fhi-label/fhi-label.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/typography/fhi-title/fhi-title.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "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.",
+          "name": "FhiTitle",
+          "slots": [
+            {
+              "description": "The content of the fhi-title component. This should be pure text.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "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```",
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "level",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
+              },
+              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
+              "attribute": "level"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'large' | 'medium' | 'small'"
+              },
+              "default": "'medium'",
+              "description": "Sets the size of the text styles.",
+              "reflects": true,
+              "attribute": "size"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "string"
+              },
+              "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```",
+              "fieldName": "color"
+            },
+            {
+              "name": "level",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
+              },
+              "description": "Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.",
+              "fieldName": "level"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'large' | 'medium' | 'small'"
+              },
+              "default": "'medium'",
+              "description": "Sets the size of the text styles.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "fhi-title",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "FhiTitleSelector",
+          "type": {
+            "text": "string"
+          },
+          "default": "'fhi-title'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "",
+          "declaration": {
+            "name": "FhiTitle",
+            "module": "src/components/typography/fhi-title/fhi-title.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FhiTitle",
+          "declaration": {
+            "name": "FhiTitle",
+            "module": "src/components/typography/fhi-title/fhi-title.component.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FhiTitleSelector",
+          "declaration": {
+            "name": "FhiTitleSelector",
+            "module": "src/components/typography/fhi-title/fhi-title.component.ts"
+          }
+        }
+      ]
     }
   ]
 }