@folkehelseinstituttet/designsystem 0.40.6 → 0.41.0

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@folkehelseinstituttet/designsystem",
-  "version": "0.40.6",
+  "version": "0.41.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4727,6 +4727,168 @@
             "events": []
           }
         },
+        {
+          "name": "fhi-select-item",
+          "description": "## FHI Select Item\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-select--docs\n\nThe `<fhi-select-item>` component is used to represent an individual option within a `<fhi-select>` dropdown list.\nIt provides a labeled option element with selection state and value attribute.\n---\n\n\n### **Slot Section:**\n - _default_ - The default slot is used to provide text content for the `<fhi-select-item>` element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "The label attribute of the select item. This property is used to provide a descriptive label for the select item. If not provided, the content of the `value` attribute will be used instead.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "selected",
+              "description": "The selected attribute of the select item. This property is used to indicate whether the select item is selected or not.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "The value attribute of the select item. This property is used to identify the select item when submitting a form. If not provided, the text content will be used instead.",
+              "value": { "type": "string | null", "default": "null" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot is used to provide text content for the `<fhi-select-item>` element."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "The label attribute of the select item. This property is used to provide a descriptive label for the select item. If not provided, the content of the `value` attribute will be used instead.",
+                "type": "string | null"
+              },
+              {
+                "name": "selected",
+                "description": "The selected attribute of the select item. This property is used to indicate whether the select item is selected or not.",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "The value attribute of the select item. This property is used to identify the select item when submitting a form. If not provided, the text content will be used instead.",
+                "type": "string | null"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "fhi-select",
+          "description": "## FHI Select\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-select--docs\n\nThe `<fhi-select>` component is used to create a dropdown list of options for users to choose from.\nIt provides a labeled select element (`fhi-select-item`) with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n---\n\n\n### **Custom Events:**\n - **change** - Standard DOM event with the type `change`.\nThis event is dispatched when the chosen option of the select changes.\n- **input** - Standard DOM event with the type `input`.\nThis event is dispatched when the chosen option of the select changes.\n\n### **Slot Section:**\n - _default_ - The default slot is used to provide the options for the select element. Each option should be represented by a `<fhi-select-item>` element.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "The disabled attribute of the select element. This property is used to disable the select element.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "help-text",
+              "description": "The message shown above the Select.\nThis is often used to provide additional information to the user.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "label",
+              "description": "The label attribute of the select element. This property is used to provide a descriptive label for the select element.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "message",
+              "description": "The message attribute of the select element. This property is used to provide a validation message for the select element.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "name",
+              "description": "The name attribute of the select element. This property is used to identify the select element when submitting a form.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "status",
+              "description": "The status attribute of the select element. This property is used to indicate the validation status of the select element.",
+              "value": { "type": "'error' | undefined" }
+            },
+            {
+              "name": "value",
+              "description": "The value attribute of the select element. This property is used to identify the selected option when submitting a form.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot is used to provide the options for the select element. Each option should be represented by a `<fhi-select-item>` element."
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": "Event",
+              "description": "Standard DOM event with the type `change`.\nThis event is dispatched when the chosen option of the select changes."
+            },
+            {
+              "name": "input",
+              "type": "Event",
+              "description": "Standard DOM event with the type `input`.\nThis event is dispatched when the chosen option of the select changes."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "The disabled attribute of the select element. This property is used to disable the select element.",
+                "type": "boolean"
+              },
+              {
+                "name": "helpText",
+                "description": "The message shown above the Select.\nThis is often used to provide additional information to the user.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "The label attribute of the select element. This property is used to provide a descriptive label for the select element.",
+                "type": "string"
+              },
+              {
+                "name": "message",
+                "description": "The message attribute of the select element. This property is used to provide a validation message for the select element.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "The name attribute of the select element. This property is used to identify the select element when submitting a form.",
+                "type": "string"
+              },
+              { "name": "selectElement", "type": "HTMLSelectElement" },
+              { "name": "slotElements", "type": "Array<HTMLElement>" },
+              {
+                "name": "status",
+                "description": "The status attribute of the select element. This property is used to indicate the validation status of the select element.",
+                "type": "'error' | undefined"
+              },
+              {
+                "name": "value",
+                "description": "The value attribute of the select element. This property is used to identify the selected option when submitting a form.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "type": "Event",
+                "description": "Standard DOM event with the type `change`.\nThis event is dispatched when the chosen option of the select changes."
+              },
+              {
+                "name": "input",
+                "type": "Event",
+                "description": "Standard DOM event with the type `input`.\nThis event is dispatched when the chosen option of the select changes."
+              }
+            ]
+          }
+        },
         {
           "name": "fhi-body",
           "description": "## FHI Body\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview\n\nThe `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.\n---\n\n\n### **Slot Section:**\n - _default_ - The content of the fhi-body component. This should be pure text.",
@@ -4735,7 +4897,7 @@
             {
               "name": "color",
               "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```",
-              "value": { "type": "string", "default": "'currentcolor'" }
+              "value": { "type": "string" }
             },
             {
               "name": "size",
@@ -4777,7 +4939,7 @@
             {
               "name": "color",
               "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```",
-              "value": { "type": "string", "default": "'currentcolor'" }
+              "value": { "type": "string" }
             },
             {
               "name": "level",
@@ -4829,7 +4991,7 @@
             {
               "name": "color",
               "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```",
-              "value": { "type": "string", "default": "'currentcolor'" }
+              "value": { "type": "string" }
             },
             {
               "name": "level",
@@ -4881,7 +5043,7 @@
             {
               "name": "color",
               "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```",
-              "value": { "type": "string", "default": "'currentcolor'" }
+              "value": { "type": "string" }
             },
             {
               "name": "size",
@@ -4923,7 +5085,7 @@
             {
               "name": "color",
               "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```",
-              "value": { "type": "string", "default": "'currentcolor'" }
+              "value": { "type": "string" }
             },
             {
               "name": "level",