@skf-design-system/ui-components 1.0.0-alpha.33 → 1.0.0-alpha.35

package/dist/web-types.json

@@ -1,26 +1,168 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@skf-design-system/ui-components",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
+        {
+          "name": "skf-icon",
+          "description": "The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "Sets the color of the icon",
+              "value": { "type": "IconColor", "default": "'primary'" }
+            },
+            {
+              "name": "label",
+              "description": "If defined, adds an alternate description to use for assistive devices",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "name",
+              "description": "Name of the icon to display",
+              "value": { "type": "Icon | undefined" }
+            },
+            {
+              "name": "size",
+              "description": "Size of the icon",
+              "value": { "type": "SkfIconSize", "default": "'md'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "Sets the color of the icon",
+                "type": "IconColor"
+              },
+              {
+                "name": "label",
+                "description": "If defined, adds an alternate description to use for assistive devices",
+                "type": "string | undefined"
+              },
+              {
+                "name": "name",
+                "description": "Name of the icon to display",
+                "type": "Icon | undefined"
+              },
+              {
+                "name": "size",
+                "description": "Size of the icon",
+                "type": "SkfIconSize"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-accordion-item",
+          "description": "The `<skf-accordion-item>` is used in conjunction with the `<skf-accordion>` component\n---\n\n\n### **Events:**\n - **skf-accordion-item-toggle** - Event emitted when toggled\n\n### **Methods:**\n - **setClose()** - Class method as alternative to manipulate attribute\n- **setOpen()** - Class method as alternative to manipulate attribute\n\n### **Slots:**\n - _default_ - Main content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "animated",
+              "description": "If true, will animate the expand/accordion-item state",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "expanded",
+              "description": "If true, will set the accordion-item to be expanded by default",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "heading",
+              "description": "Heading for the accordion-item",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "heading-as",
+              "description": "Defines which heading element will be rendered",
+              "value": {
+                "type": "SkfAccordionItemHeadingType",
+                "default": "'h2'"
+              }
+            },
+            {
+              "name": "small",
+              "description": "If true, renders the small version",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "truncate",
+              "description": "If true, will truncate the heading in accordion-item state",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "Main content" }],
+          "events": [
+            {
+              "name": "skf-accordion-item-toggle",
+              "type": "CustomEvent",
+              "description": "Event emitted when toggled"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "animated",
+                "description": "If true, will animate the expand/accordion-item state",
+                "type": "boolean"
+              },
+              {
+                "name": "expanded",
+                "description": "If true, will set the accordion-item to be expanded by default",
+                "type": "boolean"
+              },
+              {
+                "name": "heading",
+                "description": "Heading for the accordion-item",
+                "type": "string | undefined"
+              },
+              {
+                "name": "headingAs",
+                "description": "Defines which heading element will be rendered",
+                "type": "SkfAccordionItemHeadingType"
+              },
+              {
+                "name": "small",
+                "description": "If true, renders the small version",
+                "type": "boolean"
+              },
+              {
+                "name": "truncate",
+                "description": "If true, will truncate the heading in accordion-item state",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-accordion-item-toggle",
+                "type": "CustomEvent",
+                "description": "Event emitted when toggled"
+              }
+            ]
+          }
+        },
         {
           "name": "skf-accordion",
-          "description": "The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Slots:**\n - _default_ - Expects one or more <skf-accordion-item> element(s)",
+          "description": "The `<skf-accordion>` component consists of one or more `<skf-accordion-item>` item(s) working together\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles\n---\n\n\n### **Slots:**\n - _default_ - Expects one or more <skf-accordion-item> element(s)",
           "doc-url": "",
           "attributes": [
             {
               "name": "animated",
               "description": "If true, will animate the expand/collapse state",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "heading-as",
               "description": "Defines which heading element will be rendered",
               "value": {
-                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"",
+                "type": "SkfAccordionItemHeadingType",
                 "default": "'h2'"
               }
             },
@@ -32,17 +174,17 @@
             {
               "name": "multiple",
               "description": "If true, allowes multiple accordion items to open",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "small",
               "description": "If true, renders the small version",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "truncate",
               "description": "If true, will truncate all headings in collapsed state",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -57,12 +199,12 @@
               {
                 "name": "animated",
                 "description": "If true, will animate the expand/collapse state",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "headingAs",
                 "description": "Defines which heading element will be rendered",
-                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
+                "type": "SkfAccordionItemHeadingType"
               },
               {
                 "name": "gap",
@@ -72,17 +214,17 @@
               {
                 "name": "multiple",
                 "description": "If true, allowes multiple accordion items to open",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "small",
                 "description": "If true, renders the small version",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "truncate",
                 "description": "If true, will truncate all headings in collapsed state",
-                "type": "boolean | undefined"
+                "type": "boolean"
               }
             ],
             "events": []
@@ -90,14 +232,9 @@
         },
         {
           "name": "skf-alert",
-          "description": "The `<skf-alert>` is a type of notification that appears in-line\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - Slot for the link",
+          "description": "The `<skf-alert>` is a type of notification that appears in-line\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/990ec5-alert) for design principles\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - Slot for the link",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "closeable",
-              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-              "value": { "type": "boolean | undefined" }
-            },
             {
               "name": "button-label",
               "description": "Close button aria-label",
@@ -106,14 +243,17 @@
             {
               "name": "icon",
               "description": "If defined, displays leading icon",
-              "value": { "type": "SkfIcon['name'] | undefined" }
+              "value": { "type": "Icon | undefined" }
+            },
+            {
+              "name": "persistent",
+              "description": "If true, renders with an close button and sets aria-role to `status`",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "severity",
               "description": "If defined, gives the supplied appearance",
-              "value": {
-                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
-              }
+              "value": { "type": "Severity | undefined" }
             }
           ],
           "slots": [
@@ -126,16 +266,12 @@
           "events": [
             {
               "name": "skf-alert-close",
+              "type": "CustomEvent",
               "description": "Fires when the close button is clicked"
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "closeable",
-                "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-                "type": "boolean | undefined"
-              },
               {
                 "name": "buttonLabel",
                 "description": "Close button aria-label",
@@ -144,25 +280,147 @@
               {
                 "name": "icon",
                 "description": "If defined, displays leading icon",
-                "type": "SkfIcon['name'] | undefined"
+                "type": "Icon | undefined"
+              },
+              {
+                "name": "persistent",
+                "description": "If true, renders with an close button and sets aria-role to `status`",
+                "type": "boolean"
               },
               {
                 "name": "severity",
                 "description": "If defined, gives the supplied appearance",
-                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+                "type": "Severity | undefined"
               }
             ],
             "events": [
               {
                 "name": "skf-alert-close",
+                "type": "CustomEvent",
                 "description": "Fires when the close button is clicked"
               }
             ]
           }
         },
+        {
+          "name": "skf-breadcrumb-item",
+          "description": "The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component\n---\n\n\n### **Slots:**\n - _default_ - Label of the breadcrumb item",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "href",
+              "description": "If defined, loads url on click",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "Label of the breadcrumb item" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "href",
+                "description": "If defined, loads url on click",
+                "type": "string | undefined"
+              },
+              {
+                "name": "onClick",
+                "description": "If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined."
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-breadcrumb",
+          "description": "The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/3338ef-breadcrumbs) for design principles.\n---\n\n\n### **Events:**\n - **click** - Fired when the item is clicked\n\n### **Slots:**\n - _default_ - One or more `<skf-breadcrumb-item>`",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "aria-label for the breadcrumb control",
+              "value": { "type": "string", "default": "'Breadcrumb'" }
+            },
+            {
+              "name": "small",
+              "description": "If true, renders a smaller version",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "One or more `<skf-breadcrumb-item>`" }
+          ],
+          "events": [
+            { "name": "click", "description": "Fired when the item is clicked" }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "aria-label for the breadcrumb control",
+                "type": "string"
+              },
+              {
+                "name": "small",
+                "description": "If true, renders a smaller version",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired when the item is clicked"
+              }
+            ]
+          }
+        },
+        {
+          "name": "skf-loader",
+          "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "aria-label",
+              "description": "Defines the aria-label",
+              "value": { "type": "string", "default": "'Loading...'" }
+            },
+            {
+              "name": "invert",
+              "description": "If true, inverts the color (to be used on colored backgrounds)",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "Defines the size of the loader",
+              "value": { "type": "'md' | 'sm' | undefined", "default": "'md'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "ariaLabel",
+                "description": "Defines the aria-label",
+                "type": "string"
+              },
+              {
+                "name": "invert",
+                "description": "If true, inverts the color (to be used on colored backgrounds)",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "Defines the size of the loader",
+                "type": "'md' | 'sm' | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "skf-button",
-          "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n\n### **Slots:**\n - _default_ - The Primary content",
+          "description": "Component to be used in forms or for interactivity\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/02493d-buttons) for design principles\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n\n### **Slots:**\n - _default_ - The Primary content",
           "doc-url": "",
           "attributes": [
             {
@@ -178,22 +436,17 @@
             {
               "name": "icon",
               "description": "If provided, renders an icon before or after the text",
-              "value": {
-                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
-              }
+              "value": { "type": "Icon | undefined" }
             },
             {
-              "name": "iconOnly",
-              "description": "If true, removes border",
+              "name": "icon-only",
+              "description": "If true, button will take a square shape",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "icon-position",
-              "description": "If provided, determines the positioning of the icon in relation to the text",
-              "value": {
-                "type": "'left' | 'right' | undefined",
-                "default": "'left'"
-              }
+              "description": "Determines the positioning of the icon in relation to the text",
+              "value": { "type": "'left' | 'right'", "default": "'left'" }
             },
             {
               "name": "loading",
@@ -207,21 +460,21 @@
             {
               "name": "size",
               "description": "If provided, displays an alternative size",
-              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }
+              "value": {
+                "type": "'sm' | 'md' | 'lg' | undefined",
+                "default": "'md'"
+              }
             },
             {
               "name": "type",
               "description": "If provided, changes the button type",
-              "value": {
-                "type": "'button' | 'submit' | 'reset'",
-                "default": "'button'"
-              }
+              "value": { "type": "SkfButtonType", "default": "'button'" }
             },
             {
               "name": "variant",
               "description": "If provided, alters the appearance",
               "value": {
-                "type": "'primary' | 'secondary'",
+                "type": "'primary' | 'secondary' | 'tertiary'",
                 "default": "'primary'"
               }
             }
@@ -230,6 +483,7 @@
           "events": [
             {
               "name": "click",
+              "type": "CustomEvent",
               "description": "Fires when the button is clicked"
             }
           ],
@@ -248,17 +502,17 @@
               {
                 "name": "icon",
                 "description": "If provided, renders an icon before or after the text",
-                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+                "type": "Icon | undefined"
               },
               {
                 "name": "iconOnly",
-                "description": "If true, removes border",
+                "description": "If true, button will take a square shape",
                 "type": "boolean"
               },
               {
                 "name": "iconPosition",
-                "description": "If provided, determines the positioning of the icon in relation to the text",
-                "type": "'left' | 'right' | undefined"
+                "description": "Determines the positioning of the icon in relation to the text",
+                "type": "'left' | 'right'"
               },
               {
                 "name": "loading",
@@ -269,22 +523,23 @@
               {
                 "name": "size",
                 "description": "If provided, displays an alternative size",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'sm' | 'md' | 'lg' | undefined"
               },
               {
                 "name": "type",
                 "description": "If provided, changes the button type",
-                "type": "'button' | 'submit' | 'reset'"
+                "type": "SkfButtonType"
               },
               {
                 "name": "variant",
                 "description": "If provided, alters the appearance",
-                "type": "'primary' | 'secondary'"
+                "type": "'primary' | 'secondary' | 'tertiary'"
               }
             ],
             "events": [
               {
                 "name": "click",
+                "type": "CustomEvent",
                 "description": "Fires when the button is clicked"
               }
             ]
@@ -292,7 +547,7 @@
         },
         {
           "name": "skf-card",
-          "description": "The `<skf-card>` can be used to group related subjects in a container\n---\n\n\n### **Slots:**\n - _default_ - The card's main content",
+          "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles\n---\n\n\n### **Slots:**\n - _default_ - The card's main content",
           "doc-url": "",
           "attributes": [
             {
@@ -336,38 +591,38 @@
         },
         {
           "name": "skf-checkbox",
-          "description": "The `<skf-checkbox>` component is used to create a checkbox input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The Radios label. Alternatively, you can use the `label` attribute.",
+          "description": "The `<skf-checkbox>` component is used to create a checkbox input\n---\n\n\n### **Events:**\n - **change** - When the value of the input changes\n\n### **Slots:**\n - _default_ - The Radios label. Alternatively, you can use the `label` attribute.",
           "doc-url": "",
           "attributes": [
             {
               "name": "disabled",
               "description": "If true, sets disabled state",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
               "description": "If true, value is required or must be checked for the form to be submittable",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "debug",
               "description": "If defined, outputs helping hints in console",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "checked",
               "description": "If true, outputs helping hints in console",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "string" }
             },
             {
               "name": "custom-invalid",
               "description": "If true, forces component to invalid state until removed",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "indeterminate",
               "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "label",
@@ -387,14 +642,12 @@
             {
               "name": "severity",
               "description": "If defined, styles checkbox using provided severity",
-              "value": {
-                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
-              }
+              "value": { "type": "FormFieldSeverity | undefined" }
             },
             {
               "name": "show-valid",
               "description": "If true, displays valid state after interaction",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "size",
@@ -416,7 +669,8 @@
           "events": [
             {
               "name": "change",
-              "description": "{object} - When the value of the input changes"
+              "type": "Event",
+              "description": "When the value of the input changes"
             }
           ],
           "js": {
@@ -424,22 +678,21 @@
               {
                 "name": "debug",
                 "description": "If defined, outputs helping hints in console",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "checked",
-                "description": "If true, outputs helping hints in console",
-                "type": "boolean | undefined"
+                "description": "If true, outputs helping hints in console"
               },
               {
                 "name": "customInvalid",
                 "description": "If true, forces component to invalid state until removed",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "indeterminate",
                 "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "label",
@@ -459,12 +712,12 @@
               {
                 "name": "severity",
                 "description": "If defined, styles checkbox using provided severity",
-                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
+                "type": "FormFieldSeverity | undefined"
               },
               {
                 "name": "showValid",
                 "description": "If true, displays valid state after interaction",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "size",
@@ -480,100 +733,304 @@
             "events": [
               {
                 "name": "change",
-                "description": "{object} - When the value of the input changes"
+                "type": "Event",
+                "description": "When the value of the input changes"
               }
             ]
           }
         },
         {
-          "name": "skf-collapse",
-          "description": "The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Events:**\n - **skf-collapse-toggle** - Event emitted when toggled\n\n### **Methods:**\n - **setClose()** - Class method as alternative to manipulate attribute\n- **setOpen()** - Class method as alternative to manipulate attribute\n\n### **Slots:**\n - _default_ - Main content",
+          "name": "skf-datepicker-calendar",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            { "name": "eventid", "value": { "type": "string" } },
+            {
+              "name": "firstDayOfWeek",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "invalid-dates",
+              "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "locale",
+              "value": { "type": "string", "default": "'en-CA'" }
+            },
+            {
+              "name": "range",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selectable-from",
+              "description": "Earliest selectable date. (yyyy-mm-dd format)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "selectable-to",
+              "description": "Latest selectable date. (yyyy-mm-dd format)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "selected-date",
+              "value": { "type": "Date | undefined", "default": "undefined" }
+            },
+            {
+              "name": "selectedDateRange",
+              "value": {
+                "type": "{ start: Date | null; end: Date | null }",
+                "default": "{ start: null, end: null, }"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "eventid", "type": "string" },
+              { "name": "firstDayOfWeek", "type": "number" },
+              {
+                "name": "invalidDates",
+                "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+                "type": "string | undefined"
+              },
+              { "name": "locale", "type": "string" },
+              { "name": "range", "type": "boolean" },
+              {
+                "name": "selectableFrom",
+                "description": "Earliest selectable date. (yyyy-mm-dd format)",
+                "type": "string | undefined"
+              },
+              {
+                "name": "selectableTo",
+                "description": "Latest selectable date. (yyyy-mm-dd format)",
+                "type": "string | undefined"
+              },
+              { "name": "selectedDate", "type": "Date | undefined" },
+              {
+                "name": "selectedDateRange",
+                "type": "{ start: Date | null; end: Date | null }"
+              },
+              { "name": "_listenToKeyboard" },
+              { "name": "_handleKeyDown" },
+              { "name": "dateSelectable" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-datepicker",
+          "description": "\n---\n\n\n### **Methods:**\n - **clear()** - Clears the input field",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "custom-invalid",
+              "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "id",
+              "value": { "type": "string", "default": "'skf-datepicker-input'" }
+            },
+            {
+              "name": "label",
+              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "hide-label",
+              "description": "If true, hides the label visually",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "hint",
+              "description": "If defined, displays informational text below the field",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "invalid-dates",
+              "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "name",
+              "description": "If defined, adds name to the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "'YYYY-MM-DD'" }
+            },
+            {
+              "name": "range",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "readonly",
+              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "required-label",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "selectable-from",
+              "description": "Earliest selectable date. (yyyy-mm-dd format)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "selectable-to",
+              "description": "Latest selectable date. (yyyy-mm-dd format)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "severity",
+              "description": "If defined, displays provided severity state",
+              "value": {
+                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
+              }
+            },
+            {
+              "name": "size",
+              "description": "Size of the input",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+            },
+            {
+              "name": "validate-on",
+              "description": "Sets validation start",
+              "value": {
+                "type": "'input' | 'change' | 'submit'",
+                "default": "'change'"
+              }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the input field",
+              "value": { "type": "string | undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "focusTimeoutId",
+                "type": "ReturnType<typeof setTimeout> | undefined"
+              },
+              {
+                "name": "customInvalid",
+                "description": "If defined, forces component to invalid state until removed. Its value is used as hint text."
+              },
+              { "name": "id", "type": "string" },
+              {
+                "name": "label",
+                "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "hideLabel",
+                "description": "If true, hides the label visually",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "hint",
+                "description": "If defined, displays informational text below the field",
+                "type": "string | undefined"
+              },
+              {
+                "name": "invalidDates",
+                "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "name",
+                "description": "If defined, adds name to the input-element",
+                "type": "string | undefined"
+              },
+              { "name": "placeholder", "type": "string" },
+              { "name": "range", "type": "boolean" },
+              {
+                "name": "readonly",
+                "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "If defined, renders an alternative A11y text for the asterisk",
+                "type": "string | undefined"
+              },
+              {
+                "name": "selectableFrom",
+                "description": "Earliest selectable date. (yyyy-mm-dd format)",
+                "type": "string | undefined"
+              },
+              {
+                "name": "selectableTo",
+                "description": "Latest selectable date. (yyyy-mm-dd format)",
+                "type": "string | undefined"
+              },
+              {
+                "name": "severity",
+                "description": "If defined, displays provided severity state",
+                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
+              },
+              {
+                "name": "size",
+                "description": "Size of the input",
+                "type": "'sm' | 'md'"
+              },
+              {
+                "name": "validateOn",
+                "description": "Sets validation start",
+                "type": "'input' | 'change' | 'submit'"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the input field",
+                "type": "string | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-heading",
+          "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n\n\n### **Slots:**\n - _default_ - The headings content",
           "doc-url": "",
           "attributes": [
             {
-              "name": "animated",
-              "description": "If true, will animate the expand/collapse state",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "expanded",
-              "description": "If true, will set the collapse to be expanded by default",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "heading",
-              "description": "Heading for the collapse",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "heading-as",
-              "description": "Defines which heading element will be rendered",
-              "value": { "type": "\"h2\" | \"h3\" | \"h4\"", "default": "'h2'" }
-            },
-            {
-              "name": "small",
-              "description": "If true, renders the small version",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "as",
+              "description": "Controls which heading element will be rendered. Should not be used to affect appearance",
+              "value": { "type": "HeadingType", "default": "'h2'" }
             },
             {
-              "name": "truncate",
-              "description": "If true, will truncate the heading in collapsed state",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [{ "name": "", "description": "Main content" }],
-          "events": [
-            {
-              "name": "skf-collapse-toggle",
-              "type": "CustomEvent",
-              "description": "Event emitted when toggled"
+              "name": "styled-as",
+              "description": "If defined, changes the appearance of the heading",
+              "value": { "type": "HeadingType | undefined" }
             }
           ],
+          "slots": [{ "name": "", "description": "The headings content" }],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "animated",
-                "description": "If true, will animate the expand/collapse state",
-                "type": "boolean"
-              },
-              {
-                "name": "expanded",
-                "description": "If true, will set the collapse to be expanded by default",
-                "type": "boolean"
-              },
-              {
-                "name": "heading",
-                "description": "Heading for the collapse",
-                "type": "string | undefined"
-              },
-              {
-                "name": "headingAs",
-                "description": "Defines which heading element will be rendered",
-                "type": "\"h2\" | \"h3\" | \"h4\""
-              },
-              {
-                "name": "small",
-                "description": "If true, renders the small version",
-                "type": "boolean"
+                "name": "as",
+                "description": "Controls which heading element will be rendered. Should not be used to affect appearance",
+                "type": "HeadingType"
               },
               {
-                "name": "truncate",
-                "description": "If true, will truncate the heading in collapsed state",
-                "type": "boolean"
+                "name": "styledAs",
+                "description": "If defined, changes the appearance of the heading",
+                "type": "HeadingType | undefined"
               }
             ],
-            "events": [
-              {
-                "name": "skf-collapse-toggle",
-                "type": "CustomEvent",
-                "description": "Event emitted when toggled"
-              }
-            ]
+            "events": []
           }
         },
         {
           "name": "skf-dialog",
-          "description": "The `<skf-dialog>` is a component that open up a dialog with the content provided\n---\n\n\n### **Events:**\n - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)\n- **close** - Fires when the dialog is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The dialog component's content\n- **heading** - The dialog component's heading\n- **footer** - The dialog component's buttons goes here\n\n### **CSS Properties:**\n - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_\n- **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_",
+          "description": "The `<skf-dialog>` is a component that open up a dialog of type modal with the content provided. (MDN refrains from opening the dialog using the `open` attribute, however skf-dialog does not have that limitation)\n---\n\n\n### **Events:**\n - **skf-dialog-opened** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-closing** - Fires when the dialog is closing (before transitioned out)\n- **skf-dialog-closed** - Fires when the dialog is closed (after transitioned out)\n\n### **Methods:**\n - **showModal()** - Method that opens the dialog in modal state\n- **close()** - Method that closes the dialog\n\n### **Slots:**\n - _default_ - The dialog component's content\n- **footer** - The dialog component's buttons goes here\n\n### **CSS Properties:**\n - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_\n- **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_",
           "doc-url": "",
           "attributes": [
             {
@@ -603,15 +1060,12 @@
             },
             {
               "name": "open",
-              "value": { "type": "boolean | null | undefined" }
+              "description": "If true, indicates that the dialog is active and is available for interaction",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
             { "name": "", "description": "The dialog component's content" },
-            {
-              "name": "heading",
-              "description": "The dialog component's heading"
-            },
             {
               "name": "footer",
               "description": "The dialog component's buttons goes here"
@@ -619,15 +1073,18 @@
           ],
           "events": [
             {
-              "name": "skf-dialog-open",
+              "name": "skf-dialog-opened",
+              "type": "CustomEvent",
               "description": "Fires when the dialog is opened (after transitioned in)"
             },
             {
-              "name": "skf-dialog-close",
-              "description": "Fires when the dialog is closed (before transitioned out)"
+              "name": "skf-dialog-closing",
+              "type": "CustomEvent",
+              "description": "Fires when the dialog is closing (before transitioned out)"
             },
             {
-              "name": "close",
+              "name": "skf-dialog-closed",
+              "type": "CustomEvent",
               "description": "Fires when the dialog is closed (after transitioned out)"
             }
           ],
@@ -658,32 +1115,26 @@
                 "description": "If defined, removes the inner padding",
                 "type": "boolean"
               },
-              { "name": "open", "type": "boolean | null | undefined" },
-              {
-                "name": "onClose",
-                "description": "If provided, will run function on dialog close",
-                "type": "((event: Event) => void) | null | undefined"
-              },
-              {
-                "name": "showModal",
-                "description": "Method that opens the dialog in modal state"
-              },
               {
-                "name": "close",
-                "description": "Method that closes the dialog"
+                "name": "open",
+                "description": "If true, indicates that the dialog is active and is available for interaction",
+                "type": "boolean"
               }
             ],
             "events": [
               {
-                "name": "skf-dialog-open",
+                "name": "skf-dialog-opened",
+                "type": "CustomEvent",
                 "description": "Fires when the dialog is opened (after transitioned in)"
               },
               {
-                "name": "skf-dialog-close",
-                "description": "Fires when the dialog is closed (before transitioned out)"
+                "name": "skf-dialog-closing",
+                "type": "CustomEvent",
+                "description": "Fires when the dialog is closing (before transitioned out)"
               },
               {
-                "name": "close",
+                "name": "skf-dialog-closed",
+                "type": "CustomEvent",
                 "description": "Fires when the dialog is closed (after transitioned out)"
               }
             ]
@@ -697,10 +1148,7 @@
             {
               "name": "color",
               "description": "Defines the Divider color",
-              "value": {
-                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"",
-                "default": "'primary'"
-              }
+              "value": { "type": "SkfDividerColor", "default": "'primary'" }
             },
             {
               "name": "decorative",
@@ -719,7 +1167,7 @@
               {
                 "name": "color",
                 "description": "Defines the Divider color",
-                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
+                "type": "SkfDividerColor"
               },
               {
                 "name": "decorative",
@@ -736,98 +1184,201 @@
           }
         },
         {
-          "name": "skf-heading",
-          "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n\n\n### **Slots:**\n - _default_ - The headings content",
+          "name": "skf-drawer",
+          "description": "The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge\n---\n\n\n### **Events:**\n - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)\n- **skf-drawer-closing** - Fires when the drawer is closing (before transitioned out)\n- **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The Drawer's main content",
           "doc-url": "",
           "attributes": [
             {
-              "name": "as",
-              "description": "Controls which heading element will be rendered. Should not be used to affect appearance",
-              "value": {
-                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"",
-                "default": "'h1'"
+              "name": "close-button-aria-label",
+              "description": "If defined, sets the aria-label for the close button",
+              "value": { "type": "string", "default": "'Close dialog'" }
+            },
+            {
+              "name": "heading",
+              "description": "Heading for the Drawer",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "size",
+              "description": "Sets the max-width",
+              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }
+            },
+            {
+              "name": "open",
+              "description": "If true, Drawer is open",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placement",
+              "description": "Placement of the Drawer",
+              "value": { "type": "'left' | 'right'", "default": "'right'" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The Drawer's main content" }],
+          "events": [
+            {
+              "name": "skf-drawer-opened",
+              "type": "CustomEvent",
+              "description": "Fires when the drawer is opened (after transitioned in)"
+            },
+            {
+              "name": "skf-drawer-closing",
+              "type": "CustomEvent",
+              "description": "Fires when the drawer is closing (before transitioned out)"
+            },
+            {
+              "name": "skf-drawer-closed",
+              "type": "CustomEvent",
+              "description": "Fires when the drawer is closed (after transitioned out)"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "closeButtonAriaLabel",
+                "description": "If defined, sets the aria-label for the close button",
+                "type": "string"
+              },
+              {
+                "name": "heading",
+                "description": "Heading for the Drawer",
+                "type": "string | undefined"
+              },
+              {
+                "name": "size",
+                "description": "Sets the max-width",
+                "type": "'sm' | 'md' | 'lg'"
+              },
+              {
+                "name": "open",
+                "description": "If true, Drawer is open",
+                "type": "boolean"
+              },
+              {
+                "name": "placement",
+                "description": "Placement of the Drawer",
+                "type": "'left' | 'right'"
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-drawer-opened",
+                "type": "CustomEvent",
+                "description": "Fires when the drawer is opened (after transitioned in)"
+              },
+              {
+                "name": "skf-drawer-closing",
+                "type": "CustomEvent",
+                "description": "Fires when the drawer is closing (before transitioned out)"
+              },
+              {
+                "name": "skf-drawer-closed",
+                "type": "CustomEvent",
+                "description": "Fires when the drawer is closed (after transitioned out)"
               }
+            ]
+          }
+        },
+        {
+          "name": "skf-logo",
+          "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--mod-logo-height** - The height of the logo _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "title",
+              "description": "Defines the title of the logo",
+              "value": { "type": "string", "default": "'SKF logotype'" }
             },
             {
-              "name": "styled-as",
-              "description": "If provided, changes the appearance of the heading",
-              "value": { "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }
+              "name": "color",
+              "description": "Defines the color of the logo",
+              "value": { "type": "SkfLogoColor", "default": "'primary'" }
             }
           ],
-          "slots": [{ "name": "", "description": "The headings content" }],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "as",
-                "description": "Controls which heading element will be rendered. Should not be used to affect appearance",
-                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
+                "name": "title",
+                "description": "Defines the title of the logo",
+                "type": "string"
               },
               {
-                "name": "styledAs",
-                "description": "If provided, changes the appearance of the heading",
-                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
+                "name": "color",
+                "description": "Defines the color of the logo",
+                "type": "SkfLogoColor"
               }
             ],
             "events": []
           }
         },
         {
-          "name": "skf-icon",
-          "description": "The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text\n---\n",
+          "name": "skf-nav",
+          "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
           "doc-url": "",
           "attributes": [
             {
-              "name": "color",
-              "description": "Sets the color of the icon",
-              "value": {
-                "type": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\"",
-                "default": "'primary'"
-              }
+              "name": "vertical",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's main content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "vertical", "type": "boolean" }],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-header",
+          "description": "The `<skf-header>` component is to be used as the site-header in the app. The navigation will be collapsed to mobile-view if the menu items exceed the available width.\n---\n\n\n### **Slots:**\n - _default_ - Navigation items",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "compact",
+              "description": "If true, sets header to display in compact mode only (hanburger menu and drawer)",
+              "value": { "type": "string" }
             },
             {
-              "name": "label",
-              "description": "If defined, adds an alternate description to use for assistive devices",
-              "value": { "type": "string | undefined" }
+              "name": "hamburger-aria-label",
+              "description": "If defined, sets the aria-label for the hamburger button",
+              "value": { "type": "string", "default": "'Show navigation'" }
             },
             {
-              "name": "name",
-              "description": "Name of the icon to display",
-              "value": {
-                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
-              }
+              "name": "site-name",
+              "description": "If defined, sets the app or site's name",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "size",
-              "description": "Size of the icon",
-              "value": {
-                "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
-                "default": "'md'"
-              }
+              "name": "site-url",
+              "description": "If defined, sets the site's base-url for the \"logo-link\"",
+              "value": { "type": "string | undefined" }
             }
           ],
+          "slots": [{ "name": "", "description": "Navigation items" }],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "color",
-                "description": "Sets the color of the icon",
-                "type": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\""
+                "name": "compact",
+                "description": "If true, sets header to display in compact mode only (hanburger menu and drawer)"
               },
               {
-                "name": "label",
-                "description": "If defined, adds an alternate description to use for assistive devices",
-                "type": "string | undefined"
+                "name": "hamburgerAriaLabel",
+                "description": "If defined, sets the aria-label for the hamburger button",
+                "type": "string"
               },
               {
-                "name": "name",
-                "description": "Name of the icon to display",
-                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+                "name": "siteName",
+                "description": "If defined, sets the app or site's name",
+                "type": "string | undefined"
               },
               {
-                "name": "size",
-                "description": "Size of the icon",
-                "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+                "name": "siteUrl",
+                "description": "If defined, sets the site's base-url for the \"logo-link\"",
+                "type": "string | undefined"
               }
             ],
             "events": []
@@ -835,23 +1386,25 @@
         },
         {
           "name": "skf-input",
-          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
+          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
           "doc-url": "",
           "attributes": [
             {
               "name": "disabled",
               "description": "If true, sets disabled state",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
               "description": "If true, value is required or must be checked for the form to be submittable",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "autocomplete",
-              "description": "-m  }",
-              "value": { "type": "string" }
+              "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
+              "value": {
+                "type": "HTMLInputElement['autocomplete'] | undefined"
+              }
             },
             {
               "name": "button-aria-label-clear",
@@ -876,12 +1429,12 @@
             {
               "name": "debug",
               "description": "If true, outputs helping hints in console",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "hide-label",
               "description": "If true, hides the label visually",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "hint",
@@ -890,9 +1443,9 @@
             },
             {
               "name": "inputmode",
-              "description": "Tells what keyboard to use if applicable",
+              "description": "Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details.",
               "value": {
-                "type": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+                "type": "HTMLInputElement['inputMode']",
                 "default": "'text'"
               }
             },
@@ -944,7 +1497,7 @@
             {
               "name": "readonly",
               "description": "If true, makes the element not mutable, meaning the user can not edit the control",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required-label",
@@ -954,14 +1507,12 @@
             {
               "name": "severity",
               "description": "If defined, displays provided severity state",
-              "value": {
-                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
-              }
+              "value": { "type": "FormFieldSeverity | undefined" }
             },
             {
               "name": "show-valid",
               "description": "If true, displays valid state after interaction",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "size",
@@ -975,9 +1526,9 @@
             },
             {
               "name": "type",
-              "description": "Type of input control",
+              "description": "Type of input",
               "value": {
-                "type": "'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'",
+                "type": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'",
                 "default": "'text'"
               }
             },
@@ -992,7 +1543,7 @@
             {
               "name": "value",
               "description": "The current value of the input field",
-              "value": { "type": "string", "default": "''" }
+              "value": { "type": "string" }
             }
           ],
           "slots": [
@@ -1004,16 +1555,22 @@
           "events": [
             {
               "name": "change",
+              "type": "CustomEvent",
               "description": "Fires when the value of the input changes"
             },
             {
               "name": "invalid",
+              "type": "CustomEvent",
               "description": "Fires when the input is invalid"
             }
           ],
           "js": {
             "properties": [
-              { "name": "autocomplete", "description": "-m  }", "type": "" },
+              {
+                "name": "autocomplete",
+                "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
+                "type": "HTMLInputElement['autocomplete'] | undefined"
+              },
               {
                 "name": "buttonAriaLabelClear",
                 "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
@@ -1036,12 +1593,12 @@
               {
                 "name": "debug",
                 "description": "If true, outputs helping hints in console",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "hideLabel",
                 "description": "If true, hides the label visually",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "hint",
@@ -1050,8 +1607,8 @@
               },
               {
                 "name": "inputmode",
-                "description": "Tells what keyboard to use if applicable",
-                "type": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'"
+                "description": "Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details.",
+                "type": "HTMLInputElement['inputMode']"
               },
               {
                 "name": "label",
@@ -1101,7 +1658,7 @@
               {
                 "name": "readonly",
                 "description": "If true, makes the element not mutable, meaning the user can not edit the control",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "requiredLabel",
@@ -1111,12 +1668,12 @@
               {
                 "name": "severity",
                 "description": "If defined, displays provided severity state",
-                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
+                "type": "FormFieldSeverity | undefined"
               },
               {
                 "name": "showValid",
                 "description": "If true, displays valid state after interaction",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "size",
@@ -1130,8 +1687,8 @@
               },
               {
                 "name": "type",
-                "description": "Type of input control",
-                "type": "'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'"
+                "description": "Type of input",
+                "type": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'"
               },
               {
                 "name": "validateOn",
@@ -1140,17 +1697,18 @@
               },
               {
                 "name": "value",
-                "description": "The current value of the input field",
-                "type": "string"
+                "description": "The current value of the input field"
               }
             ],
             "events": [
               {
                 "name": "change",
+                "type": "CustomEvent",
                 "description": "Fires when the value of the input changes"
               },
               {
                 "name": "invalid",
+                "type": "CustomEvent",
                 "description": "Fires when the input is invalid"
               }
             ]
@@ -1177,7 +1735,7 @@
             {
               "name": "disabled",
               "description": "If true, disables the link",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "download",
@@ -1192,9 +1750,7 @@
             {
               "name": "icon",
               "description": "If defined, renders an icon before or after the text",
-              "value": {
-                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
-              }
+              "value": { "type": "Icon | undefined" }
             },
             {
               "name": "icon-placement",
@@ -1226,10 +1782,7 @@
             {
               "name": "type",
               "description": "Defines the type of button",
-              "value": {
-                "type": "'button' | 'submit' | 'reset'",
-                "default": "'button'"
-              }
+              "value": { "type": "SkfLinkType", "default": "'button'" }
             }
           ],
           "slots": [{ "name": "", "description": "The links' main content" }],
@@ -1249,7 +1802,7 @@
               {
                 "name": "disabled",
                 "description": "If true, disables the link",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "download",
@@ -1264,13 +1817,17 @@
               {
                 "name": "icon",
                 "description": "If defined, renders an icon before or after the text",
-                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+                "type": "Icon | undefined"
               },
               {
                 "name": "iconPlacement",
                 "description": "Defines the position of the icon in relation to the text",
                 "type": "'left' | 'right'"
               },
+              {
+                "name": "onClick",
+                "description": "If defined, accepts a function that runs on click. Forwards optional route as second argument."
+              },
               {
                 "name": "rel",
                 "description": "If defined, describes the relationship between a linked resource and the current document",
@@ -1294,141 +1851,15 @@
               {
                 "name": "type",
                 "description": "Defines the type of button",
-                "type": "'button' | 'submit' | 'reset'"
-              },
-              {
-                "name": "onClick",
-                "description": "If provided, custom function triggered by click where the second return parameter enables custom routing.",
-                "type": "function"
-              }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "skf-loader",
-          "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "aria-label",
-              "description": "Defines the aria-label",
-              "value": { "type": "string", "default": "'Loading...'" }
-            },
-            {
-              "name": "invert",
-              "description": "If true, inverts the color (to be used on colored backgrounds)",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "size",
-              "description": "Defines the size of the loader",
-              "value": { "type": "'md' | 'sm' | undefined", "default": "'md'" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "ariaLabel",
-                "description": "Defines the aria-label",
-                "type": "string"
-              },
-              {
-                "name": "invert",
-                "description": "If true, inverts the color (to be used on colored backgrounds)",
-                "type": "boolean"
-              },
-              {
-                "name": "size",
-                "description": "Defines the size of the loader",
-                "type": "'md' | 'sm' | undefined"
-              },
-              { "name": "role", "type": "string" },
-              { "name": "ariaLive", "type": "string" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "skf-logo",
-          "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--skf-logo-height** - The height of the logo _(default: undefined)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "title",
-              "description": "Defines the title of the logo",
-              "value": { "type": "string", "default": "'SKF logotype'" }
-            },
-            {
-              "name": "color",
-              "description": "Defines the color of the logo",
-              "value": {
-                "type": "\"primary\" | \"secondary\" | \"inverse\"",
-                "default": "'primary'"
-              }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "title",
-                "description": "Defines the title of the logo",
-                "type": "string"
-              },
-              {
-                "name": "color",
-                "description": "Defines the color of the logo",
-                "type": "\"primary\" | \"secondary\" | \"inverse\""
+                "type": "SkfLinkType"
               }
             ],
             "events": []
           }
         },
-        {
-          "name": "skf-menu",
-          "description": "The `<skf-menu>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **open** - Fired when the menu is opened\n- **close** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The menu popover content",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "The menu popover content" }],
-          "events": [
-            { "name": "open", "description": "Fired when the menu is opened" },
-            { "name": "close", "description": "Fired when the menu is closed" }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "placement",
-                "description": "The placement of the menu",
-                "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\""
-              },
-              {
-                "name": "isOpen",
-                "description": "Whether the menu is open",
-                "type": "boolean"
-              },
-              {
-                "name": "anchor",
-                "description": "The id of the element the menu will be anchored to",
-                "type": "string"
-              }
-            ],
-            "events": [
-              {
-                "name": "open",
-                "description": "Fired when the menu is opened"
-              },
-              {
-                "name": "close",
-                "description": "Fired when the menu is closed"
-              }
-            ]
-          }
-        },
         {
           "name": "skf-menu-item",
-          "description": "The `<skf-menu-item>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **my-tag-my-event** - Fired when something happens\n- **click** - Fired when the component is clicked\n- **mouseover** - Fired when the mouse is over the component\n- **mouseout** - Fired when the mouse is out of the component\n- **focus** - Fired when the component is focused\n- **blur** - Fired when the component is blurred\n- **change** - Fired when the component's value changes\n\n### **Slots:**\n - _default_ - The component's main content\n- **my-named-slot** - A named slot of the component",
+          "description": "The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
           "doc-url": "",
           "attributes": [
             {
@@ -1447,7 +1878,7 @@
             {
               "name": "disabled",
               "description": "If true, disables the link",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "download",
@@ -1462,9 +1893,7 @@
             {
               "name": "icon",
               "description": "If defined, renders an icon before or after the text",
-              "value": {
-                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
-              }
+              "value": { "type": "Icon | undefined" }
             },
             {
               "name": "icon-placement",
@@ -1496,52 +1925,16 @@
             {
               "name": "type",
               "description": "Defines the type of button",
-              "value": {
-                "type": "'button' | 'submit' | 'reset'",
-                "default": "'button'"
-              }
+              "value": { "type": "SkfLinkType", "default": "'button'" }
             }
           ],
           "slots": [
-            { "name": "", "description": "The component's main content" },
-            {
-              "name": "my-named-slot",
-              "description": "A named slot of the component"
-            }
-          ],
-          "events": [
-            {
-              "name": "my-tag-my-event",
-              "type": "CustomEvent",
-              "description": "Fired when something happens"
-            },
-            {
-              "name": "click",
-              "description": "Fired when the component is clicked"
-            },
-            {
-              "name": "mouseover",
-              "description": "Fired when the mouse is over the component"
-            },
-            {
-              "name": "mouseout",
-              "description": "Fired when the mouse is out of the component"
-            },
-            {
-              "name": "focus",
-              "description": "Fired when the component is focused"
-            },
-            {
-              "name": "blur",
-              "description": "Fired when the component is blurred"
-            },
-            {
-              "name": "change",
-              "description": "Fired when the component's value changes"
-            }
+            { "name": "", "description": "The component's main content" }
           ],
+          "events": [],
           "js": {
             "properties": [
+              { "name": "role", "type": "string" },
               {
                 "name": "as",
                 "description": "Defines the semantic element to render",
@@ -1555,7 +1948,7 @@
               {
                 "name": "disabled",
                 "description": "If true, disables the link",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "download",
@@ -1570,13 +1963,17 @@
               {
                 "name": "icon",
                 "description": "If defined, renders an icon before or after the text",
-                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+                "type": "Icon | undefined"
               },
               {
                 "name": "iconPlacement",
                 "description": "Defines the position of the icon in relation to the text",
                 "type": "'left' | 'right'"
               },
+              {
+                "name": "onClick",
+                "description": "If defined, accepts a function that runs on click. Forwards optional route as second argument."
+              },
               {
                 "name": "rel",
                 "description": "If defined, describes the relationship between a linked resource and the current document",
@@ -1600,52 +1997,98 @@
               {
                 "name": "type",
                 "description": "Defines the type of button",
-                "type": "'button' | 'submit' | 'reset'"
-              },
-              {
-                "name": "onClick",
-                "description": "If provided, custom function triggered by click where the second return parameter enables custom routing.",
-                "type": "function"
+                "type": "SkfLinkType"
               }
             ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-menu",
+          "description": "The `<skf-menu>` is a component that displays a list of actions or options\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the menu is opened\n- **skf-closed** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The menu popover content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "placement",
+              "description": "The placement of the menu",
+              "value": {
+                "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\"",
+                "default": "'bottom-start'"
+              }
+            },
+            {
+              "name": "anchor",
+              "description": "The id of the element the menu will be anchored to",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The menu popover content" }],
+          "events": [
+            {
+              "name": "skf-opened",
+              "type": "CustomEvent",
+              "description": "Fired when the menu is opened"
+            },
+            {
+              "name": "skf-closed",
+              "type": "CustomEvent",
+              "description": "Fired when the menu is closed"
+            }
+          ],
+          "js": {
+            "properties": [],
             "events": [
               {
-                "name": "my-tag-my-event",
+                "name": "skf-opened",
                 "type": "CustomEvent",
-                "description": "Fired when something happens"
-              },
-              {
-                "name": "click",
-                "description": "Fired when the component is clicked"
-              },
-              {
-                "name": "mouseover",
-                "description": "Fired when the mouse is over the component"
-              },
-              {
-                "name": "mouseout",
-                "description": "Fired when the mouse is out of the component"
-              },
-              {
-                "name": "focus",
-                "description": "Fired when the component is focused"
-              },
-              {
-                "name": "blur",
-                "description": "Fired when the component is blurred"
+                "description": "Fired when the menu is opened"
               },
               {
-                "name": "change",
-                "description": "Fired when the component's value changes"
+                "name": "skf-closed",
+                "type": "CustomEvent",
+                "description": "Fired when the menu is closed"
               }
             ]
           }
         },
+        {
+          "name": "skf-nav-item",
+          "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
+          "doc-url": "",
+          "attributes": [
+            { "name": "href", "value": { "type": "string", "default": "'#'" } },
+            { "name": "icon", "value": { "type": "Icon | undefined" } }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's main content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "href", "type": "string" },
+              { "name": "icon", "type": "Icon | undefined" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "skf-popover",
-          "description": "The `<skf-popover>` is a general purpose component that displays the slot content.\n---\n\n\n### **Events:**\n - **open** - Fired when the menu is opened\n- **close** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The popover content",
+          "description": "The `<skf-popover>` is a general purpose component that displays the slot content in a popover.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the menu is opened\n- **skf-closed** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The popover content",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "placement",
+              "description": "The placement of the popover",
+              "value": {
+                "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\"",
+                "default": "'bottom-start'"
+              }
+            },
+            {
+              "name": "anchor",
+              "description": "The id of the element the menu will be anchored to",
+              "value": { "type": "string" }
+            },
             {
               "name": "offset",
               "description": "If defined, sets a custom offset for the popover",
@@ -1659,8 +2102,16 @@
           ],
           "slots": [{ "name": "", "description": "The popover content" }],
           "events": [
-            { "name": "open", "description": "Fired when the menu is opened" },
-            { "name": "close", "description": "Fired when the menu is closed" }
+            {
+              "name": "skf-opened",
+              "type": "CustomEvent",
+              "description": "Fired when the menu is opened"
+            },
+            {
+              "name": "skf-closed",
+              "type": "CustomEvent",
+              "description": "Fired when the menu is closed"
+            }
           ],
           "js": {
             "properties": [
@@ -1673,31 +2124,17 @@
                 "name": "hideArrow",
                 "description": "If true, hides the arrow",
                 "type": "boolean"
-              },
-              { "name": "arrow", "type": "boolean" },
-              {
-                "name": "placement",
-                "description": "The placement of the menu",
-                "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\""
-              },
-              {
-                "name": "isOpen",
-                "description": "Whether the menu is open",
-                "type": "boolean"
-              },
-              {
-                "name": "anchor",
-                "description": "The id of the element the menu will be anchored to",
-                "type": "string"
               }
             ],
             "events": [
               {
-                "name": "open",
+                "name": "skf-opened",
+                "type": "CustomEvent",
                 "description": "Fired when the menu is opened"
               },
               {
-                "name": "close",
+                "name": "skf-closed",
+                "type": "CustomEvent",
                 "description": "Fired when the menu is closed"
               }
             ]
@@ -1748,33 +2185,33 @@
         },
         {
           "name": "skf-radio",
-          "description": "The `<skf-radio>` component is used to create a radio input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The radios label. Alternatively, you can use the `label` attribute.",
+          "description": "The `<skf-radio>` component is used to create a radio input\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles\n---\n\n\n### **Events:**\n - **change** - When the value of the input changes\n\n### **Slots:**\n - _default_ - The radios label. Alternatively, you can use the `label` attribute.",
           "doc-url": "",
           "attributes": [
             {
               "name": "disabled",
               "description": "If true, sets disabled state",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
               "description": "If true, value is required or must be checked for the form to be submittable",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "debug",
               "description": "If true, outputs helping hints in console",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "checked",
               "description": "If true, outputs helping hints in console",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "custom-invalid",
               "description": "If true, forces component to invalid state until removed",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "label",
@@ -1799,14 +2236,12 @@
             {
               "name": "severity",
               "description": "If defined, displays provided severity state",
-              "value": {
-                "type": "\"success\" | \"info\" | \"warning\" | \"alert\""
-              }
+              "value": { "type": "FormFieldSeverity | undefined" }
             },
             {
               "name": "show-valid",
               "description": "If true, displays valid state after interaction",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "value",
@@ -1823,7 +2258,8 @@
           "events": [
             {
               "name": "change",
-              "description": "{object} - When the value of the input changes"
+              "type": "Event",
+              "description": "When the value of the input changes"
             }
           ],
           "js": {
@@ -1831,17 +2267,17 @@
               {
                 "name": "debug",
                 "description": "If true, outputs helping hints in console",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "checked",
                 "description": "If true, outputs helping hints in console",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "customInvalid",
                 "description": "If true, forces component to invalid state until removed",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "label",
@@ -1866,12 +2302,12 @@
               {
                 "name": "severity",
                 "description": "If defined, displays provided severity state",
-                "type": "\"success\" | \"info\" | \"warning\" | \"alert\""
+                "type": "FormFieldSeverity | undefined"
               },
               {
                 "name": "showValid",
                 "description": "If true, displays valid state after interaction",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "value",
@@ -1882,20 +2318,194 @@
             "events": [
               {
                 "name": "change",
-                "description": "{object} - When the value of the input changes"
+                "type": "Event",
+                "description": "When the value of the input changes"
+              }
+            ]
+          }
+        },
+        {
+          "name": "skf-segmented-button-item",
+          "description": "The `<skf-segmented-button-item>` is used in conjunction with the `<skf-segmented-button>` component\n---\n\n\n### **Events:**\n - **skf-segmented-button-item-select** - Fired when selected\n\n### **Slots:**\n - _default_ - Label for the button",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, items is marked as disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selected",
+              "description": "If true, items is marked as selected",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "Sets the item value",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "Label for the button" }],
+          "events": [
+            {
+              "name": "skf-segmented-button-item-select",
+              "type": "CustomEvent",
+              "description": "Fired when selected"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, items is marked as disabled",
+                "type": "boolean"
+              },
+              {
+                "name": "selected",
+                "description": "If true, items is marked as selected",
+                "type": "boolean"
+              },
+              {
+                "name": "value",
+                "description": "Sets the item value",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-segmented-button-item-select",
+                "type": "CustomEvent",
+                "description": "Fired when selected"
               }
             ]
           }
         },
+        {
+          "name": "skf-segmented-button",
+          "description": "The `<skf-segmented-button>` component consists of multiple `<skf-segmented-button-item>`, working together.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/68ff54-segmented-buttons) for design principles\n---\n\n\n### **Slots:**\n - _default_ - One or more `<skf-segmented-button-item>`",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "multiple",
+              "description": "If true, allowes multiple items to be selected",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "One or more `<skf-segmented-button-item>`"
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "multiple",
+                "description": "If true, allowes multiple items to be selected",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-select-option-group",
+          "description": "The `<skf-select-option-group>` is a component that groups select-options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "'Default label'" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's placeholder content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "label", "type": "string" }],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-tag",
+          "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "description": "Specifies Tag size",
+              "value": { "type": "Size", "default": "'md'" }
+            },
+            {
+              "name": "icon",
+              "description": "If defined, displays leading/provided icon",
+              "value": { "type": "Icon | undefined" }
+            },
+            {
+              "name": "color",
+              "description": "If defined, gives the supplied appearance",
+              "value": { "type": "Severity | undefined" }
+            },
+            {
+              "name": "removable",
+              "description": "If true, adds trailing button to remove tag",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's placeholder content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "size",
+                "description": "Specifies Tag size",
+                "type": "Size"
+              },
+              {
+                "name": "icon",
+                "description": "If defined, displays leading/provided icon",
+                "type": "Icon | undefined"
+              },
+              {
+                "name": "color",
+                "description": "If defined, gives the supplied appearance",
+                "type": "Severity | undefined"
+              },
+              {
+                "name": "onClick",
+                "description": "If defined, accepts a function that runs on click"
+              },
+              {
+                "name": "onRemove",
+                "description": "If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`."
+              },
+              {
+                "name": "removable",
+                "description": "If true, adds trailing button to remove tag",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "skf-select",
-          "description": "The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option(s) changes\n- **invalid** - Fired when the select is invalid\n- **reset** - Fired when the form is reset\n- **skf-select:dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled\n- **skf-select-option:select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled\n\n### **Slots:**\n - _default_ - The select's placeholder content",
+          "description": "The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/91c9f0-select-and-combobox) for design principles\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option(s) changes\n- **invalid** - Fired when the select is invalid\n- **reset** - Fired when the form is reset\n- **skf-select-dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled\n- **skf-select-option-select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled\n\n### **Slots:**\n - _default_ - The select's placeholder content",
           "doc-url": "",
           "attributes": [
             {
               "name": "disabled",
-              "description": "If true, the select is disabled\t`default: false`",
-              "value": { "type": "boolean" }
+              "description": "If true, the select is disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "If true, the select is required",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "button-label",
@@ -1910,12 +2520,12 @@
             {
               "name": "hide-label",
               "description": "If true, hides the label visually",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "hide-tags",
               "description": "If true and mulltiple is true, no tags are displayed under the select",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "hint",
@@ -1940,7 +2550,7 @@
             {
               "name": "multiple",
               "description": "If true, allows for multiple options to be selected",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "name",
@@ -1955,12 +2565,12 @@
             {
               "name": "severity",
               "description": "If defined, displays provided severity state",
-              "value": { "type": "FormFieldBaseProps['severity'] | undefined" }
+              "value": { "type": "FormFieldSeverity | undefined" }
             },
             {
               "name": "show-valid",
               "description": "If true, displays valid state after interaction",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "size",
@@ -1974,19 +2584,27 @@
           "events": [
             {
               "name": "change",
+              "type": "Event",
               "description": "Fired when the selected option(s) changes"
             },
             {
               "name": "invalid",
+              "type": "Event",
               "description": "Fired when the select is invalid"
             },
-            { "name": "reset", "description": "Fired when the form is reset" },
             {
-              "name": "skf-select:dropdown",
+              "name": "reset",
+              "type": "Event",
+              "description": "Fired when the form is reset"
+            },
+            {
+              "name": "skf-select-dropdown",
+              "type": "CustomEvent",
               "description": "{detail: {expanded: boolean}} Fired when the select dropdown is toggled"
             },
             {
-              "name": "skf-select-option:select",
+              "name": "skf-select-option-select",
+              "type": "CustomEvent",
               "description": "{detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled"
             }
           ],
@@ -2005,12 +2623,12 @@
               {
                 "name": "hideLabel",
                 "description": "If true, hides the label visually",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "hideTags",
                 "description": "If true and mulltiple is true, no tags are displayed under the select",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "hint",
@@ -2043,7 +2661,7 @@
               {
                 "name": "multiple",
                 "description": "If true, allows for multiple options to be selected",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "name",
@@ -2058,12 +2676,12 @@
               {
                 "name": "severity",
                 "description": "If defined, displays provided severity state",
-                "type": "FormFieldBaseProps['severity'] | undefined"
+                "type": "FormFieldSeverity | undefined"
               },
               {
                 "name": "showValid",
                 "description": "If true, displays valid state after interaction",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "size",
@@ -2079,22 +2697,27 @@
             "events": [
               {
                 "name": "change",
+                "type": "Event",
                 "description": "Fired when the selected option(s) changes"
               },
               {
                 "name": "invalid",
+                "type": "Event",
                 "description": "Fired when the select is invalid"
               },
               {
                 "name": "reset",
+                "type": "Event",
                 "description": "Fired when the form is reset"
               },
               {
-                "name": "skf-select:dropdown",
+                "name": "skf-select-dropdown",
+                "type": "CustomEvent",
                 "description": "{detail: {expanded: boolean}} Fired when the select dropdown is toggled"
               },
               {
-                "name": "skf-select-option:select",
+                "name": "skf-select-option-select",
+                "type": "CustomEvent",
                 "description": "{detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled"
               }
             ]
@@ -2102,28 +2725,28 @@
         },
         {
           "name": "skf-select-option",
-          "description": "The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.\n---\n\n\n### **Events:**\n - **skf-select-option:select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.\n\n### **Slots:**\n - _default_ - The option's text content\n- **icon** - The option's slot for icon or custom meta information (svg).",
+          "description": "The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.\n---\n\n\n### **Events:**\n - **skf-select-option-select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.\n\n### **Slots:**\n - _default_ - The option's text content\n- **icon** - The option's slot for icon or custom meta information (svg).",
           "doc-url": "",
           "attributes": [
             {
               "name": "disabled",
               "description": "If true, prevents interaction with the option",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "icon",
               "description": "If defined, set an icon",
-              "value": { "type": "SkfIcon['name'] | undefined" }
+              "value": { "type": "Icon | undefined" }
             },
             {
               "name": "icon-color",
               "description": "If defined, sets provided color on the icon",
-              "value": { "type": "SeverityFgColor | undefined" }
+              "value": { "type": "IconColor | undefined" }
             },
             {
               "name": "selected",
               "description": "If true, sets the option as selected",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "short-label",
@@ -2145,7 +2768,7 @@
           ],
           "events": [
             {
-              "name": "skf-select-option:select",
+              "name": "skf-select-option-select",
               "description": "{detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected."
             }
           ],
@@ -2154,22 +2777,22 @@
               {
                 "name": "disabled",
                 "description": "If true, prevents interaction with the option",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "icon",
                 "description": "If defined, set an icon",
-                "type": "SkfIcon['name'] | undefined"
+                "type": "Icon | undefined"
               },
               {
                 "name": "iconColor",
                 "description": "If defined, sets provided color on the icon",
-                "type": "SeverityFgColor | undefined"
+                "type": "IconColor | undefined"
               },
               {
                 "name": "selected",
                 "description": "If true, sets the option as selected",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "shortLabel",
@@ -2190,50 +2813,31 @@
             ],
             "events": [
               {
-                "name": "skf-select-option:select",
+                "name": "skf-select-option-select",
                 "description": "{detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected."
               }
             ]
           }
         },
         {
-          "name": "skf-select-option-group",
-          "description": "The `<skf-select-option-group>` is a component that groups select-options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "label",
-              "value": { "type": "string", "default": "'Default label'" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The component's placeholder content" }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "label", "type": "string" }],
-            "events": []
-          }
-        },
-        {
-          "name": "skf-stepper",
-          "description": "The `<skf-stepper>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **skf-stepper-item-select** - Dispatched when the stepper item is selected\n\n### **Slots:**\n - _default_ - One or more `<skf-stepper-item>`",
+          "name": "skf-stepper-item",
+          "description": "The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component\n---\n\n\n### **Events:**\n - **skf-stepper-item-select** - Dispatched when the stepper item is selected\n\n### **Slots:**\n - _default_ - Label of the stepper item",
           "doc-url": "",
           "attributes": [
             {
-              "name": "activeIndex",
-              "description": "Sets the active item",
-              "value": { "type": "number", "default": "-1" }
+              "name": "state",
+              "description": "If defined, gives the supplied appearance",
+              "value": {
+                "type": "Extract<SkfStepperItemState, 'active' | 'completed'> | undefined"
+              }
             },
             {
-              "name": "linear",
-              "description": "If true, sets linear mode (user can't go back to completed steps due to dependencies)",
+              "name": "completed",
+              "description": "If true, item marked as completed",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "slots": [
-            { "name": "", "description": "One or more `<skf-stepper-item>`" }
-          ],
+          "slots": [{ "name": "", "description": "Label of the stepper item" }],
           "events": [
             {
               "name": "skf-stepper-item-select",
@@ -2243,15 +2847,17 @@
           "js": {
             "properties": [
               {
-                "name": "activeIndex",
-                "description": "Sets the active item",
-                "type": "number"
+                "name": "state",
+                "description": "If defined, gives the supplied appearance",
+                "type": "Extract<SkfStepperItemState, 'active' | 'completed'> | undefined"
               },
               {
-                "name": "linear",
-                "description": "If true, sets linear mode (user can't go back to completed steps due to dependencies)",
+                "name": "completed",
+                "description": "If true, item marked as completed",
                 "type": "boolean"
-              }
+              },
+              { "name": "_setInternalState" },
+              { "name": "role", "type": "string" }
             ],
             "events": [
               {
@@ -2262,48 +2868,48 @@
           }
         },
         {
-          "name": "skf-stepper-item",
-          "description": "The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component\n---\n\n\n### **Events:**\n - **skf-stepper-item-select** - Dispatched when the stepper item is selected\n\n### **Slots:**\n - _default_ - Label of the stepper item",
+          "name": "skf-stepper",
+          "description": "The `<skf-stepper>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **skf-stepper-item-select** - Dispatched when the stepper item is selected\n\n### **Slots:**\n - _default_ - One or more `<skf-stepper-item>`",
           "doc-url": "",
           "attributes": [
             {
-              "name": "state",
-              "description": "If defined, gives the supplied appearance",
-              "value": {
-                "type": "Extract<SkfStepperItemState, 'active' | 'completed'> | undefined"
-              }
+              "name": "active-index",
+              "description": "Sets the active item",
+              "value": { "type": "number", "default": "-1" }
             },
             {
-              "name": "completed",
-              "description": "If true, item marked as completed",
+              "name": "linear",
+              "description": "If true, sets linear mode (user can't go back to completed steps due to dependencies)",
               "value": { "type": "boolean", "default": "false" }
             }
           ],
-          "slots": [{ "name": "", "description": "Label of the stepper item" }],
+          "slots": [
+            { "name": "", "description": "One or more `<skf-stepper-item>`" }
+          ],
           "events": [
             {
               "name": "skf-stepper-item-select",
+              "type": "CustomEvent",
               "description": "Dispatched when the stepper item is selected"
             }
           ],
           "js": {
             "properties": [
               {
-                "name": "state",
-                "description": "If defined, gives the supplied appearance",
-                "type": "Extract<SkfStepperItemState, 'active' | 'completed'> | undefined"
+                "name": "activeIndex",
+                "description": "Sets the active item",
+                "type": "number"
               },
               {
-                "name": "completed",
-                "description": "If true, item marked as completed",
+                "name": "linear",
+                "description": "If true, sets linear mode (user can't go back to completed steps due to dependencies)",
                 "type": "boolean"
-              },
-              { "name": "_setInternalState" },
-              { "name": "role", "type": "string" }
+              }
             ],
             "events": [
               {
                 "name": "skf-stepper-item-select",
+                "type": "CustomEvent",
                 "description": "Dispatched when the stepper item is selected"
               }
             ]
@@ -2311,33 +2917,33 @@
         },
         {
           "name": "skf-switch",
-          "description": "The `<skf-switch>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.",
+          "description": "The `<skf-switch>` is a component that displays a list of actions or options\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/7282a2-switch) for design principle\n---\n\n\n### **Slots:**\n - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.",
           "doc-url": "",
           "attributes": [
             {
               "name": "disabled",
               "description": "If true, sets disabled state",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
               "description": "If true, value is required or must be checked for the form to be submittable",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "debug",
               "description": "If true, outputs helping hints in console",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "checked",
               "description": "If true, outputs helping hints in console",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "hide-label",
               "description": "If true, hides the label visually",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "label",
@@ -2377,17 +2983,17 @@
               {
                 "name": "debug",
                 "description": "If true, outputs helping hints in console",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "checked",
                 "description": "If true, outputs helping hints in console",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "hideLabel",
                 "description": "If true, hides the label visually",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "label",
@@ -2419,55 +3025,34 @@
           }
         },
         {
-          "name": "skf-tab",
-          "description": "The `<skf-tab>` is a component that displays a list of actions or options\n---\n\n\n### **Events:**\n - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected\n- **click** - Fired when the component is clicked\n\n### **Slots:**\n - _default_ - The tab's label",
+          "name": "skf-tab-panel",
+          "description": "The `<skf-tab-panel>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content",
           "doc-url": "",
           "attributes": [
             {
-              "name": "panel",
-              "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
+              "name": "name",
+              "description": "The tab panel's name.",
               "value": { "type": "string", "default": "''" }
             }
           ],
-          "slots": [{ "name": "", "description": "The tab's label" }],
-          "events": [
-            {
-              "name": "skf-tab-select",
-              "type": "CustomEvent",
-              "description": "{detail: { selected: true, tab: SkfTab }} Fires when the tab is selected"
-            },
-            {
-              "name": "click",
-              "description": "Fired when the component is clicked"
-            }
-          ],
+          "slots": [{ "name": "", "description": "The tab panel's content" }],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "panel",
-                "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
+                "name": "name",
+                "description": "The tab panel's name.",
                 "type": "string"
               },
-              { "name": "selected", "type": "boolean" },
-              { "name": "variant", "type": "SkfTabGroup['variant']" },
+              { "name": "active", "type": "boolean" },
               { "name": "role", "type": "string" }
             ],
-            "events": [
-              {
-                "name": "skf-tab-select",
-                "type": "CustomEvent",
-                "description": "{detail: { selected: true, tab: SkfTab }} Fires when the tab is selected"
-              },
-              {
-                "name": "click",
-                "description": "Fired when the component is clicked"
-              }
-            ]
+            "events": []
           }
         },
         {
-          "name": "skf-tab-group",
-          "description": "The `<skf-tab-group>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements\n- **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements",
+          "name": "skf-tabs",
+          "description": "The `<skf-tabs>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements\n- **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements",
           "doc-url": "",
           "attributes": [
             {
@@ -2542,97 +3127,50 @@
           }
         },
         {
-          "name": "skf-tab-panel",
-          "description": "The `<skf-tab-panel>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content",
+          "name": "skf-tab",
+          "description": "The `<skf-tab>` is a component that displays a list of actions or options\n---\n\n\n### **Events:**\n - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected\n- **click** - Fired when the component is clicked\n\n### **Slots:**\n - _default_ - The tab's label",
           "doc-url": "",
           "attributes": [
             {
-              "name": "name",
-              "description": "The tab panel's name.",
+              "name": "panel",
+              "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
               "value": { "type": "string", "default": "''" }
             }
           ],
-          "slots": [{ "name": "", "description": "The tab panel's content" }],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "name",
-                "description": "The tab panel's name.",
-                "type": "string"
-              },
-              { "name": "active", "type": "boolean" },
-              { "name": "role", "type": "string" }
-            ],
-            "events": []
-          }
-        },
-        {
-          "name": "skf-tag",
-          "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "size",
-              "description": "Specifies Tag size",
-              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }
-            },
-            {
-              "name": "icon",
-              "description": "If defined, displays leading/provided icon",
-              "value": {
-                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
-              }
-            },
+          "slots": [{ "name": "", "description": "The tab's label" }],
+          "events": [
             {
-              "name": "color",
-              "description": "If defined, gives the supplied appearance",
-              "value": {
-                "type": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
-              }
+              "name": "skf-tab-select",
+              "type": "CustomEvent",
+              "description": "{detail: { selected: true, tab: SkfTab }} Fires when the tab is selected"
             },
             {
-              "name": "removable",
-              "description": "If true, adds trailing button to remove tag",
-              "value": { "type": "boolean | undefined" }
+              "name": "click",
+              "description": "Fired when the component is clicked"
             }
           ],
-          "slots": [
-            { "name": "", "description": "The component's placeholder content" }
-          ],
-          "events": [],
           "js": {
             "properties": [
               {
-                "name": "size",
-                "description": "Specifies Tag size",
-                "type": "'sm' | 'md' | 'lg'"
-              },
-              {
-                "name": "icon",
-                "description": "If defined, displays leading/provided icon",
-                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
-              },
-              {
-                "name": "color",
-                "description": "If defined, gives the supplied appearance",
-                "type": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
-              },
-              {
-                "name": "onClick",
-                "description": "If defined, accepts a function that runs on click"
+                "name": "panel",
+                "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
+                "type": "string"
               },
+              { "name": "selected", "type": "boolean" },
+              { "name": "variant", "type": "SkfTabs['variant']" },
+              { "name": "role", "type": "string" }
+            ],
+            "events": [
               {
-                "name": "onRemove",
-                "description": "If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`."
+                "name": "skf-tab-select",
+                "type": "CustomEvent",
+                "description": "{detail: { selected: true, tab: SkfTab }} Fires when the tab is selected"
               },
               {
-                "name": "removable",
-                "description": "If true, adds trailing button to remove tag",
-                "type": "boolean | undefined"
+                "name": "click",
+                "description": "Fired when the component is clicked"
               }
-            ],
-            "events": []
+            ]
           }
         },
         {
@@ -2643,12 +3181,12 @@
             {
               "name": "disabled",
               "description": "If true, sets disabled state",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required",
               "description": "If true, value is required or must be checked for the form to be submittable",
-              "value": { "type": "boolean" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "cols",
@@ -2663,12 +3201,12 @@
             {
               "name": "debug",
               "description": "If true, outputs helping hints in console",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "hide-label",
               "description": "If true, hides the label visually",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "hint",
@@ -2703,7 +3241,7 @@
             {
               "name": "readonly",
               "description": "If true, makes the element not mutable, meaning the user can not edit the control",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "required-label",
@@ -2718,14 +3256,12 @@
             {
               "name": "severity",
               "description": "If defined, displays provided severity state",
-              "value": {
-                "type": "\"success\" | \"info\" | \"warning\" | \"alert\""
-              }
+              "value": { "type": "FormFieldSeverity | undefined" }
             },
             {
               "name": "show-valid",
               "description": "If true, displays valid state after interaction",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "size",
@@ -2776,12 +3312,12 @@
               {
                 "name": "debug",
                 "description": "If true, outputs helping hints in console",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "hideLabel",
                 "description": "If true, hides the label visually",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "hint",
@@ -2816,7 +3352,7 @@
               {
                 "name": "readonly",
                 "description": "If true, makes the element not mutable, meaning the user can not edit the control",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "requiredLabel",
@@ -2831,12 +3367,12 @@
               {
                 "name": "severity",
                 "description": "If defined, displays provided severity state",
-                "type": "\"success\" | \"info\" | \"warning\" | \"alert\""
+                "type": "FormFieldSeverity | undefined"
               },
               {
                 "name": "showValid",
                 "description": "If true, displays valid state after interaction",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "size",
@@ -2866,27 +3402,51 @@
             ]
           }
         },
+        {
+          "name": "skf-toast-wrapper",
+          "description": "The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.\n---\n\n\n### **Slots:**\n - _default_ - The alert components that the toast creates will render here.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "debug",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The alert components that the toast creates will render here."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "debug", "type": "boolean" }],
+            "events": []
+          }
+        },
         {
           "name": "skf-toast",
-          "description": "A simple toast component that displays a message to the user. Use by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant.\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+          "description": "A simple toast component that displays a message to the user. Invoke a toast message by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant. A transient toast will disappear after a set amount of time. Once toast is dismissed it will be removed from the DOM.\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
           "doc-url": "",
           "attributes": [
             {
-              "name": "closeable",
-              "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+              "name": "debug",
               "value": { "type": "boolean", "default": "false" }
             },
             {
-              "name": "debug",
+              "name": "icon",
+              "description": "If defined, displays leading icon",
+              "value": { "type": "Icon | undefined" }
+            },
+            {
+              "name": "persistent",
+              "description": "If true, renders with an close button and sets aria-role to `status`",
               "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "severity",
-              "description": "Severity of the toast.",
-              "value": {
-                "type": "'info' | 'success' | 'warning' | 'error'",
-                "default": "'info'"
-              }
+              "description": "If defined, gives the supplied appearance",
+              "value": { "type": "Severity", "default": "'info'" }
             },
             {
               "name": "timer",
@@ -2905,16 +3465,21 @@
           "events": [],
           "js": {
             "properties": [
+              { "name": "debug", "type": "boolean" },
+              {
+                "name": "icon",
+                "description": "If defined, displays leading icon",
+                "type": "Icon | undefined"
+              },
               {
-                "name": "closeable",
-                "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+                "name": "persistent",
+                "description": "If true, renders with an close button and sets aria-role to `status`",
                 "type": "boolean"
               },
-              { "name": "debug", "type": "boolean" },
               {
                 "name": "severity",
-                "description": "Severity of the toast.",
-                "type": "'info' | 'success' | 'warning' | 'error'"
+                "description": "If defined, gives the supplied appearance",
+                "type": "Severity"
               },
               {
                 "name": "timer",
@@ -2931,71 +3496,51 @@
           }
         },
         {
-          "name": "skf-toast-wrapper",
-          "description": "The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.\n---\n\n\n### **Slots:**\n - _default_ - The alert components that the toast creates will render here.",
+          "name": "skf-tooltip",
+          "description": "The `<skf-tooltip>` is a component that displays a tooltip.\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the dropdown is opened\n- **skf-closed** - Fired when the dropdown is closed\n\n### **Slots:**\n - _default_ - The tooltip popover content",
           "doc-url": "",
           "attributes": [
             {
-              "name": "debug",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
+              "name": "placement",
+              "description": "The placement of the dropdown",
+              "value": {
+                "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\"",
+                "default": "'bottom-start'"
+              }
+            },
             {
-              "name": "",
-              "description": "The alert components that the toast creates will render here."
+              "name": "anchor",
+              "description": "The id of the element the dropdown will be anchored to",
+              "value": { "type": "string" }
             }
           ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "debug", "type": "boolean" }],
-            "events": []
-          }
-        },
-        {
-          "name": "skf-tooltip",
-          "description": "The `<skf-tooltip>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **open** - Fired when the dropdown is opened\n- **close** - Fired when the dropdown is closed\n\n### **Slots:**\n - _default_ - The tooltip popover content",
-          "doc-url": "",
-          "attributes": [],
           "slots": [
             { "name": "", "description": "The tooltip popover content" }
           ],
           "events": [
             {
-              "name": "open",
+              "name": "skf-opened",
               "description": "Fired when the dropdown is opened"
             },
             {
-              "name": "close",
+              "name": "skf-closed",
               "description": "Fired when the dropdown is closed"
             }
           ],
           "js": {
             "properties": [
+              { "name": "role", "type": "string" },
               { "name": "offset", "type": "number" },
-              {
-                "name": "placement",
-                "description": "The placement of the dropdown",
-                "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"top-start\" | \"top-end\" | \"right-start\" | \"right-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\""
-              },
-              {
-                "name": "isOpen",
-                "description": "Whether the dropdown is open",
-                "type": "boolean"
-              },
-              {
-                "name": "anchor",
-                "description": "The id of the element the dropdown will be anchored to",
-                "type": "string"
-              }
+              { "name": "placement", "type": "string" },
+              { "name": "variant", "type": "string" }
             ],
             "events": [
               {
-                "name": "open",
+                "name": "skf-opened",
                 "description": "Fired when the dropdown is opened"
               },
               {
-                "name": "close",
+                "name": "skf-closed",
                 "description": "Fired when the dropdown is closed"
               }
             ]