@folkehelseinstituttet/designsystem 0.45.4 → 0.47.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.45.4",
+  "version": "0.47.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4978,6 +4978,109 @@
             "events": []
           }
         },
+        {
+          "name": "fhi-segmented-control-item",
+          "description": "## FHI Segmented Control Item\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-segmented-control--docs\n\nThe <fhi-segmented-control-item> component represents an individual choice within a <fhi-segmented-control>. It can display text content with or without an icon.\n\n---\n\n\n### **Slot Section:**\n - _default_ - The default slot. Used for placing the text content.\n- **icon** - Slot for placing an icon.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "selected",
+              "description": "Whether the segmented control button is selected or not.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "The value of the segmented control item.\nIf not specified, the value will be derived from the items text content.",
+              "value": { "type": "string | null", "default": "null" }
+            },
+            {
+              "name": "variant",
+              "description": "Sets the segmented control item's visual style and emphasis. This is automatically inherited from the parent segmented control.",
+              "value": { "type": "'strong' | 'subtle'", "default": "'strong'" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot. Used for placing the text content."
+            },
+            { "name": "icon", "description": "Slot for placing an icon." }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "contentSlot", "type": "HTMLSlotElement" },
+              { "name": "iconSlotElements", "type": "Array<HTMLElement>" },
+              {
+                "name": "selected",
+                "description": "Whether the segmented control button is selected or not.",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "The value of the segmented control item.\nIf not specified, the value will be derived from the items text content.",
+                "type": "string | null"
+              },
+              {
+                "name": "variant",
+                "description": "Sets the segmented control item's visual style and emphasis. This is automatically inherited from the parent segmented control.",
+                "type": "'strong' | 'subtle'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "fhi-segmented-control",
+          "description": "## FHI Segmented Control\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-segmented-control--docs\n\nThe <fhi-segmented-control> component lets the user select one option from a group of related choices. Each choice is defined with a <fhi-segmented-control-item> element.\n\nThe choice should affect the content within the same context.\n\nExample usage:\n```html\n<fhi-segmented-control value=\"item2\">\n  <fhi-segmented-control-item value=\"item1\">Item 1</fhi-segmented-control-item>\n  <fhi-segmented-control-item value=\"item2\">Item 2</fhi-segmented-control-item>\n  <fhi-segmented-control-item value=\"item3\">Item 3</fhi-segmented-control-item>\n</fhi-segmented-control>\n```\n\n---\n\n\n### **Custom Events:**\n - **change** - Standard DOM event with the type `change`.\nThis event is dispatched when the selected item of the segmented control changes.\n\n### **Slot Section:**\n - _default_ - The default slot. Used for placing <fhi-segmented-control-item> elements.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "The currently selected value of the segmented control.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "variant",
+              "description": "The visual style of the segmented control. This will be applied to all segmented control items within the group.",
+              "value": { "type": "'strong' | 'subtle'", "default": "'strong'" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The default slot. Used for placing <fhi-segmented-control-item> elements."
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": "Event",
+              "description": "Standard DOM event with the type `change`.\nThis event is dispatched when the selected item of the segmented control changes."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The currently selected value of the segmented control.",
+                "type": "string"
+              },
+              {
+                "name": "variant",
+                "description": "The visual style of the segmented control. This will be applied to all segmented control items within the group.",
+                "type": "'strong' | 'subtle'"
+              }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "type": "Event",
+                "description": "Standard DOM event with the type `change`.\nThis event is dispatched when the selected item of the segmented control changes."
+              }
+            ]
+          }
+        },
         {
           "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\n### **Slot Section:**\n - _default_ - The default slot is used to provide text content for the `<fhi-select-item>` element.",
@@ -5150,6 +5253,11 @@
               "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" }
             },
+            {
+              "name": "emphasized",
+              "description": "Sets the text to be in italics and semantically emphasized.\n\nExample:\n\n </fhi-body>\n```",
+              "value": { "type": "boolean" }
+            },
             {
               "name": "size",
               "description": "Sets the font size of the given text.",
@@ -5157,6 +5265,11 @@
                 "type": "'large' | 'medium' | 'small'",
                 "default": "'medium'"
               }
+            },
+            {
+              "name": "strong",
+              "description": "Sets the text to be bold and semantically important.\n\nExample:\n\n </fhi-body>\n```",
+              "value": { "type": "boolean" }
             }
           ],
           "slots": [
@@ -5173,10 +5286,20 @@
                 "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```",
                 "type": "string"
               },
+              {
+                "name": "emphasized",
+                "description": "Sets the text to be in italics and semantically emphasized.\n\nExample:\n\n </fhi-body>\n```",
+                "type": "boolean"
+              },
               {
                 "name": "size",
                 "description": "Sets the font size of the given text.",
                 "type": "'large' | 'medium' | 'small'"
+              },
+              {
+                "name": "strong",
+                "description": "Sets the text to be bold and semantically important.\n\nExample:\n\n </fhi-body>\n```",
+                "type": "boolean"
               }
             ],
             "events": []