@folkehelseinstituttet/designsystem 0.31.0 → 0.33.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",
@@ -1066,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",
@@ -1368,6 +1155,16 @@
               "default": "'medium'",
               "description": "Sets the gap between items within the grid container. It can be one of the preset values, a rem or px value, or a number.\nIf you give a number, it will be treated as pixels.",
               "attribute": "gap"
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Sets the number of rows in the grid layout.",
+              "attribute": "rows"
             }
           ],
           "attributes": [
@@ -1388,6 +1185,15 @@
               "default": "'medium'",
               "description": "Sets the gap between items within the grid container. It can be one of the preset values, a rem or px value, or a number.\nIf you give a number, it will be treated as pixels.",
               "fieldName": "gap"
+            },
+            {
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Sets the number of rows in the grid layout.",
+              "fieldName": "rows"
             }
           ],
           "superclass": {
@@ -1435,252 +1241,39 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/fhi-headline/fhi-headline.component.ts",
+      "path": "src/components/fhi-modal-dialog/fhi-modal-dialog.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",
+          "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.",
+          "name": "FhiModalDialog",
           "slots": [
             {
-              "description": "The content of the fhi-headline component. This should be pure text.",
-              "name": ""
+              "description": "The main content of the dialog. Typically contains text or form elements.",
+              "name": "body"
+            },
+            {
+              "description": "The footer content of the dialog, typically containing action buttons.",
+              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "color",
+              "name": "_bodyOverflowStyle",
               "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"
+              "privacy": "private",
+              "default": "''"
             },
             {
               "kind": "field",
-              "name": "level",
+              "name": "_dialog",
               "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
+                "text": "HTMLDialogElement"
               },
-              "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",
-      "declarations": [
-        {
-          "kind": "class",
-          "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.",
-          "name": "FhiModalDialog",
-          "slots": [
-            {
-              "description": "The main content of the dialog. Typically contains text or form elements.",
-              "name": "body"
-            },
-            {
-              "description": "The footer content of the dialog, typically containing action buttons.",
-              "name": "footer"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "_bodyOverflowStyle",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "''"
-            },
-            {
-              "kind": "field",
-              "name": "_dialog",
-              "type": {
-                "text": "HTMLDialogElement"
-              },
-              "privacy": "private"
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -2444,6 +2037,16 @@
               "reflects": true,
               "attribute": "disabled"
             },
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true"
+            },
             {
               "kind": "method",
               "name": "formResetCallback",
@@ -2732,156 +2335,41 @@
     },
     {
       "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"
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'large' | 'medium' | 'small'"
-              },
-              "default": "'medium'",
-              "description": "Sets the size of the text styles.",
-              "reflects": true,
-              "attribute": "size"
-            }
-          ],
-          "attributes": [
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "private"
+            },
             {
-              "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"
-            },
-            {
-              "kind": "method",
-              "name": "_handleClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_handleMouseEnter",
-              "privacy": "private"
+              "kind": "method",
+              "name": "_handleMouseEnter",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -13570,6 +13058,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"
+          }
+        }
+      ]
     }
   ]
 }