@folkehelseinstituttet/designsystem 0.35.0 → 0.37.0

package/web-types.json

@@ -1,11 +1,91 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@folkehelseinstituttet/designsystem",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "fhi-data-table-cell",
+          "description": "## FHI Table Cell\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table-row>`.\n\nThe `<fhi-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.",
+              "value": { "type": "'header' | 'body'", "default": "'body'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "variant",
+                "description": "Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.",
+                "type": "'header' | 'body'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "fhi-data-table-row",
+          "description": "## FHI Table Row\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs\n\nThe `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.\n\nFor various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "variant",
+              "description": "Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\nIf the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.",
+              "value": { "type": "'header' | 'body'", "default": "'body'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "slotElements", "type": "Array<HTMLElement>" },
+              {
+                "name": "variant",
+                "description": "Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\nIf the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.",
+                "type": "'header' | 'body'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "fhi-data-table",
+          "description": "## FHI Table\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table>` component is an implementation of a table according to the FHI Design System guidelines.\nIt allows users to display tabular data in a structured format using `<fhi-data-table-row>` and `<fhi-data-table-cell>` components.\n\nThe `<fhi-data-table>` component does not use the native HTML `<table>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n\nExample usage:\n```html\n<fhi-data-table caption=\"Example Table\" columns=\"2fr 1fr 1fr\">\n  <fhi-data-table-row variant=\"header\">\n    <fhi-data-table-cell>Header 1</fhi-data-table-cell>\n    <fhi-data-table-cell>Header 2</fhi-data-table-cell>\n    <fhi-data-table-cell>Header 3</fhi-data-table-cell>\n  </fhi-data-table-row>\n <fhi-data-table-row>\n   <fhi-data-table-cell>Data 1</fhi-data-table-cell>\n   <fhi-data-table-cell>Data 2</fhi-data-table-cell>\n   <fhi-data-table-cell>Data 3</fhi-data-table-cell>\n </fhi-data-table-row>\n</fhi-data-table>\n```\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "caption",
+              "description": "The caption of the table. This should provide a brief description of the table's content.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "striped",
+              "description": "If set to true, the table will have alternating row colors (striped effect) for better readability.",
+              "value": { "type": "boolean" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "caption",
+                "description": "The caption of the table. This should provide a brief description of the table's content.",
+                "type": "string"
+              },
+              {
+                "name": "striped",
+                "description": "If set to true, the table will have alternating row colors (striped effect) for better readability.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "fhi-button",
           "description": "## FHI Button\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-button--docs\n\nThe `<fhi-button>` component is used to create interactive buttons in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML `<button>` element to ensure consistent styling and behavior across your application.\n---\n\n\n### **Custom Events:**\n - **click** - Standard DOM event with the type `click`.\nThis event is dispatched when the button is clicked, either via mouse or keyboard interaction.\n\n### **Slot Section:**\n - _default_ - The content of the button. This should be pure text, an icon or both.",
@@ -4624,7 +4704,7 @@
         },
         {
           "name": "fhi-display",
-          "description": "## FHI Display\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview\n\nThe `<fhi-display>` component is used to display large headline text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-display component. This should be pure text.",
+          "description": "## FHI Display\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview\n\nThe `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor standard headline text, use the `<fhi-headline>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-display component. This should be pure text.",
           "doc-url": "",
           "attributes": [
             {
@@ -4676,7 +4756,7 @@
         },
         {
           "name": "fhi-headline",
-          "description": "## FHI Headline\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview\n\nThe `<fhi-headline>` component is used to display headline text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-headline component. This should be pure text.",
+          "description": "## FHI Headline\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview\n\nThe `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor larger, more prominent headline text, use the `<fhi-display>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-headline component. This should be pure text.",
           "doc-url": "",
           "attributes": [
             {
@@ -4770,7 +4850,7 @@
         },
         {
           "name": "fhi-title",
-          "description": "## FHI Title\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-title--preview\n\nThe `<fhi-title>` component is used to display title text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-title component. This should be pure text.",
+          "description": "## FHI Title\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-title--preview\n\nThe `<fhi-title>` component is used to display smaller, less prominent title text in accordance with the FHI Design System guidelines.\n\nFor standard headline text, use the `<fhi-headline>` component instead.\n\nFor larger, more prominent headline text, use the `<fhi-display>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-title component. This should be pure text.",
           "doc-url": "",
           "attributes": [
             {

package/query-NJDNu0-P.js

@@ -1,26 +0,0 @@
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const l = (r, t, e) => (e.configurable = !0, e.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(r, t, e), e);
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function i(r, t) {
-  return (e, n, f) => {
-    const u = (c) => {
-      var o;
-      return ((o = c.renderRoot) == null ? void 0 : o.querySelector(r)) ?? null;
-    };
-    return l(e, n, { get() {
-      return u(this);
-    } });
-  };
-}
-export {
-  i as e
-};
-//# sourceMappingURL=query-NJDNu0-P.js.map

package/query-NJDNu0-P.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"query-NJDNu0-P.js","sources":["../../../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/base.js","../../../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query.js"],"sourcesContent":["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst e=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&\"object\"!=typeof t&&Object.defineProperty(e,t,c),c);export{e as desc};\n//# sourceMappingURL=base.js.map\n","import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function e(e,r){return(n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;if(r){const{get:e,set:r}=\"object\"==typeof s?n:i??(()=>{const t=Symbol();return{get(){return this[t]},set(e){this[t]=e}}})();return t(n,s,{get(){let t=e.call(this);return void 0===t&&(t=o(this),(null!==t||this.hasUpdated)&&r.call(this,t)),t}})}return t(n,s,{get(){return o(this)}})}}export{e as query};\n//# sourceMappingURL=query.js.map\n"],"names":["e","c","r","n","s","i","o","t","_a"],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,MAAMA,IAAE,CAACA,GAAE,GAAEC,OAAKA,EAAE,eAAa,IAAGA,EAAE,aAAW,IAAG,QAAQ,YAAoB,OAAO,KAAjB,YAAoB,OAAO,eAAeD,GAAE,GAAEC,CAAC,GAAEA;ACJvH;AAAA;AAAA;AAAA;AAAA;AAIG,SAASD,EAAEA,GAAEE,GAAE;AAAC,SAAM,CAACC,GAAEC,GAAEC,MAAI;AAAC,UAAMC,IAAE,CAAAC,MAAC;ADL5C,UAAAC;ACK8C,eAAAA,IAAAD,EAAE,eAAF,gBAAAC,EAAc,cAAcR,OAAI;AAAA;AAAwP,WAAOO,EAAEJ,GAAEC,GAAE,EAAC,MAAK;AAAC,aAAOE,EAAE,IAAI;AAAA,IAAC,EAAC,CAAC;AAAA,EAAC;AAAC;","x_google_ignoreList":[0,1]}