@skf-design-system/ui-components 1.0.0-beta.7 → 1.0.1-beta.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$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": {
@@ -88,6 +88,278 @@
             "events": []
           }
         },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "button-label",
+              "description": "Close button aria-label",
+              "value": { "type": "string", "default": "'Close'" }
+            },
+            {
+              "name": "icon",
+              "description": "If defined, displays leading icon",
+              "value": { "type": "SkfIcon['name'] | undefined" }
+            },
+            {
+              "name": "persistent",
+              "description": "If true, renders with an close button and sets aria-role to `status`",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "severity",
+              "description": "If defined, gives the supplied appearance",
+              "value": {
+                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Alert message. **Notice!** See design principles for approved content"
+            },
+            { "name": "link", "description": "Slot for the link" }
+          ],
+          "events": [
+            {
+              "name": "skf-alert-close",
+              "description": "Fires when the close button is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "buttonLabel",
+                "description": "Close button aria-label",
+                "type": "string"
+              },
+              {
+                "name": "icon",
+                "description": "If defined, displays leading icon",
+                "type": "SkfIcon['name'] | undefined"
+              },
+              {
+                "name": "persistent",
+                "description": "If true, renders with an close button and sets aria-role to `status`",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "severity",
+                "description": "If defined, gives the supplied appearance",
+                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-alert-close",
+                "description": "Fires when the close button is clicked"
+              }
+            ]
+          }
+        },
+        {
+          "name": "skf-breadcrumb",
+          "description": "The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.\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": "size",
+              "description": "Displays an alternative size",
+              "value": { "type": "'md' | 'sm'", "default": "'md'" }
+            }
+          ],
+          "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": "size",
+                "description": "Displays an alternative size",
+                "type": "'md' | 'sm'"
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired when the item 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-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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "destructive",
+              "description": "If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "If true, removes border",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "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\""
+              }
+            },
+            {
+              "name": "iconOnly",
+              "description": "If true, removes border",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "icon-position",
+              "description": "Determines the positioning of the icon in relation to the text",
+              "value": { "type": "'left' | 'right'", "default": "'left'" }
+            },
+            {
+              "name": "loading",
+              "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-validate",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "If provided, displays an alternative size",
+              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }
+            },
+            {
+              "name": "type",
+              "description": "If provided, changes the button type",
+              "value": {
+                "type": "'button' | 'submit' | 'reset'",
+                "default": "'button'"
+              }
+            },
+            {
+              "name": "variant",
+              "description": "If provided, alters the appearance",
+              "value": {
+                "type": "'primary' | 'secondary' | 'tertiary'",
+                "default": "'primary'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The Primary content" }],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fires when the button is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "destructive",
+                "description": "If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "If true, removes border",
+                "type": "boolean"
+              },
+              {
+                "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\""
+              },
+              {
+                "name": "iconOnly",
+                "description": "If true, removes border",
+                "type": "boolean"
+              },
+              {
+                "name": "iconPosition",
+                "description": "Determines the positioning of the icon in relation to the text",
+                "type": "'left' | 'right'"
+              },
+              {
+                "name": "loading",
+                "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
+                "type": "boolean"
+              },
+              { "name": "noValidate", "type": "boolean" },
+              {
+                "name": "size",
+                "description": "If provided, displays an alternative size",
+                "type": "'sm' | 'md' | 'lg'"
+              },
+              {
+                "name": "type",
+                "description": "If provided, changes the button type",
+                "type": "'button' | 'submit' | 'reset'"
+              },
+              {
+                "name": "variant",
+                "description": "If provided, alters the appearance",
+                "type": "'primary' | 'secondary' | 'tertiary'"
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "description": "Fires when the button is clicked"
+              }
+            ]
+          }
+        },
         {
           "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",
@@ -155,7 +427,7 @@
             {
               "name": "checked",
               "description": "If true, outputs helping hints in console",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "string" }
             },
             {
               "name": "custom-invalid",
@@ -226,8 +498,7 @@
               },
               {
                 "name": "checked",
-                "description": "If true, outputs helping hints in console",
-                "type": "boolean | undefined"
+                "description": "If true, outputs helping hints in console"
               },
               {
                 "name": "customInvalid",
@@ -369,9 +640,110 @@
             ]
           }
         },
+        {
+          "name": "skf-datepicker",
+          "description": "A date picker component that allows users to select a date or a range of dates.\n---\n\n\n### **Events:**\n - **selected-date-changed** - When a date is selected\n- **selected-date-range-changed** - When a range of dates is selected\n\n### **Slots:**\n - _default_ - Default hint content placed inside the date picker\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the date picker _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "locale",
+              "description": "The locale to use for formatting the date",
+              "value": { "type": "string", "default": "'en-CA'" }
+            },
+            {
+              "name": "date",
+              "description": "The date to display in the date picker",
+              "value": { "type": "string" }
+            },
+            { "name": "id", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "invalid-dates",
+              "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "range",
+              "description": "If true, the date picker will allow the selection of a range of dates",
+              "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" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Default hint content placed inside the date picker"
+            }
+          ],
+          "events": [
+            {
+              "name": "selected-date-changed",
+              "description": "When a date is selected"
+            },
+            {
+              "name": "selected-date-range-changed",
+              "description": "When a range of dates is selected"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "locale",
+                "description": "The locale to use for formatting the date",
+                "type": "string"
+              },
+              {
+                "name": "date",
+                "description": "The date to display in the date picker",
+                "type": "string"
+              },
+              { "name": "id", "type": "string" },
+              {
+                "name": "invalidDates",
+                "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "range",
+                "description": "If true, the date picker will allow the selection of a range of dates",
+                "type": "boolean"
+              },
+              { "name": "selectedDate", "type": "Date | 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": "selectedDateRange", "type": "SkfDatePickerDateRange" }
+            ],
+            "events": [
+              {
+                "name": "selected-date-changed",
+                "description": "When a date is selected"
+              },
+              {
+                "name": "selected-date-range-changed",
+                "description": "When a range of dates is selected"
+              }
+            ]
+          }
+        },
         {
           "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 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- **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": [
             {
@@ -406,10 +778,6 @@
           ],
           "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"
@@ -487,78 +855,6 @@
             ]
           }
         },
-        {
-          "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",
-          "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",
-              "value": { "type": "string", "default": "'Close'" }
-            },
-            {
-              "name": "icon",
-              "description": "If defined, displays leading icon",
-              "value": { "type": "SkfIcon['name'] | undefined" }
-            },
-            {
-              "name": "severity",
-              "description": "If defined, gives the supplied appearance",
-              "value": {
-                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
-              }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Alert message. **Notice!** See design principles for approved content"
-            },
-            { "name": "link", "description": "Slot for the link" }
-          ],
-          "events": [
-            {
-              "name": "skf-alert-close",
-              "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",
-                "type": "string"
-              },
-              {
-                "name": "icon",
-                "description": "If defined, displays leading icon",
-                "type": "SkfIcon['name'] | undefined"
-              },
-              {
-                "name": "severity",
-                "description": "If defined, gives the supplied appearance",
-                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
-              }
-            ],
-            "events": [
-              {
-                "name": "skf-alert-close",
-                "description": "Fires when the close button is clicked"
-              }
-            ]
-          }
-        },
         {
           "name": "skf-divider",
           "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
@@ -598,131 +894,11 @@
               },
               {
                 "name": "vertical",
-                "description": "If true, renders the divider vertically",
-                "type": "boolean"
-              }
-            ],
-            "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",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "destructive",
-              "description": "If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "disabled",
-              "description": "If true, removes border",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "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\""
-              }
-            },
-            {
-              "name": "icon-position",
-              "description": "If provided, determines the positioning of the icon in relation to the text",
-              "value": {
-                "type": "'left' | 'right' | undefined",
-                "default": "'left'"
-              }
-            },
-            {
-              "name": "loading",
-              "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "no-validate",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "size",
-              "description": "If provided, displays an alternative size",
-              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }
-            },
-            {
-              "name": "type",
-              "description": "If provided, changes the button type",
-              "value": {
-                "type": "'button' | 'submit' | 'reset'",
-                "default": "'button'"
-              }
-            },
-            {
-              "name": "variant",
-              "description": "If provided, alters the appearance",
-              "value": {
-                "type": "'primary' | 'secondary'",
-                "default": "'primary'"
-              }
-            }
-          ],
-          "slots": [{ "name": "", "description": "The Primary content" }],
-          "events": [
-            {
-              "name": "click",
-              "description": "Fires when the button is clicked"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "destructive",
-                "description": "If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`.",
-                "type": "boolean"
-              },
-              {
-                "name": "disabled",
-                "description": "If true, removes border",
-                "type": "boolean"
-              },
-              {
-                "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\""
-              },
-              {
-                "name": "iconPosition",
-                "description": "If provided, determines the positioning of the icon in relation to the text",
-                "type": "'left' | 'right' | undefined"
-              },
-              {
-                "name": "loading",
-                "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
-                "type": "boolean"
-              },
-              { "name": "noValidate", "type": "boolean" },
-              {
-                "name": "size",
-                "description": "If provided, displays an alternative size",
-                "type": "'sm' | 'md' | 'lg'"
-              },
-              {
-                "name": "type",
-                "description": "If provided, changes the button type",
-                "type": "'button' | 'submit' | 'reset'"
-              },
-              {
-                "name": "variant",
-                "description": "If provided, alters the appearance",
-                "type": "'primary' | 'secondary'"
-              }
-            ],
-            "events": [
-              {
-                "name": "click",
-                "description": "Fires when the button is clicked"
+                "description": "If true, renders the divider vertically",
+                "type": "boolean"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -1119,36 +1295,306 @@
                 "type": "string | undefined"
               },
               {
-                "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'"
+                "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'"
+              },
+              {
+                "name": "validateOn",
+                "description": "Sets validation start",
+                "type": "'input' | 'change' | 'submit'"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the input field",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "description": "Fires when the value of the input changes"
+              },
+              {
+                "name": "invalid",
+                "description": "Fires when the input is invalid"
+              }
+            ]
+          }
+        },
+        {
+          "name": "skf-link",
+          "description": "The `<skf-link>` can be used as either a regular link or a link styled semantic button\n---\n\n\n### **Slots:**\n - _default_ - The links' main content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "as",
+              "description": "Defines the semantic element to render",
+              "value": { "type": "'button' | 'a'", "default": "'a'" }
+            },
+            {
+              "name": "color",
+              "description": "Defines the text-color",
+              "value": {
+                "type": "'primary' | 'inverse'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "If true, disables the link",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "download",
+              "description": "If defined, downloads the url",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "href",
+              "description": "If defined, loads url on click",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "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\""
+              }
+            },
+            {
+              "name": "icon-placement",
+              "description": "Defines the position of the icon in relation to the text",
+              "value": { "type": "'left' | 'right'", "default": "'left'" }
+            },
+            {
+              "name": "rel",
+              "description": "If defined, describes the relationship between a linked resource and the current document",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "route",
+              "description": "If defined, used on conjunction with onClick property, second argument",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "stretch",
+              "description": "If true, fills the parents horizontal axis",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "target",
+              "description": "If defined, specifies where to open the linked document",
+              "value": {
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              }
+            },
+            {
+              "name": "type",
+              "description": "Defines the type of button",
+              "value": {
+                "type": "'button' | 'submit' | 'reset'",
+                "default": "'button'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The links' main content" }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "as",
+                "description": "Defines the semantic element to render",
+                "type": "'button' | 'a'"
+              },
+              {
+                "name": "color",
+                "description": "Defines the text-color",
+                "type": "'primary' | 'inverse'"
+              },
+              {
+                "name": "disabled",
+                "description": "If true, disables the link",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "download",
+                "description": "If defined, downloads the url",
+                "type": "string | undefined"
+              },
+              {
+                "name": "href",
+                "description": "If defined, loads url on click",
+                "type": "string | undefined"
+              },
+              {
+                "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\""
+              },
+              {
+                "name": "iconPlacement",
+                "description": "Defines the position of the icon in relation to the text",
+                "type": "'left' | 'right'"
+              },
+              {
+                "name": "rel",
+                "description": "If defined, describes the relationship between a linked resource and the current document",
+                "type": "string | undefined"
+              },
+              {
+                "name": "route",
+                "description": "If defined, used on conjunction with onClick property, second argument",
+                "type": "string | undefined"
+              },
+              {
+                "name": "stretch",
+                "description": "If true, fills the parents horizontal axis",
+                "type": "boolean"
+              },
+              {
+                "name": "target",
+                "description": "If defined, specifies where to open the linked document",
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              {
+                "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\""
+              }
+            ],
+            "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": "validateOn",
-                "description": "Sets validation start",
-                "type": "'input' | 'change' | 'submit'"
+                "name": "isOpen",
+                "description": "Whether the menu is open",
+                "type": "boolean"
               },
               {
-                "name": "value",
-                "description": "The current value of the input field",
+                "name": "anchor",
+                "description": "The id of the element the menu will be anchored to",
                 "type": "string"
               }
             ],
             "events": [
               {
-                "name": "change",
-                "description": "Fires when the value of the input changes"
+                "name": "open",
+                "description": "Fired when the menu is opened"
               },
               {
-                "name": "invalid",
-                "description": "Fires when the input is invalid"
+                "name": "close",
+                "description": "Fired when the menu is closed"
               }
             ]
           }
         },
         {
-          "name": "skf-link",
-          "description": "The `<skf-link>` can be used as either a regular link or a link styled semantic button\n---\n\n\n### **Slots:**\n - _default_ - The links' main content",
+          "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",
           "doc-url": "",
           "attributes": [
             {
@@ -1222,8 +1668,44 @@
               }
             }
           ],
-          "slots": [{ "name": "", "description": "The links' main content" }],
-          "events": [],
+          "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"
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -1292,88 +1774,99 @@
                 "type": "function"
               }
             ],
-            "events": []
+            "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": "skf-loader",
-          "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities\n---\n",
+          "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",
           "doc-url": "",
           "attributes": [
             {
-              "name": "aria-label",
-              "description": "Defines the aria-label",
-              "value": { "type": "string", "default": "'Loading...'" }
+              "name": "offset",
+              "description": "If defined, sets a custom offset for the popover",
+              "value": { "type": "number", "default": "8" }
             },
             {
-              "name": "invert",
-              "description": "If true, inverts the color (to be used on colored backgrounds)",
+              "name": "hideArrow",
+              "description": "If true, hides the arrow",
               "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "size",
-              "description": "Defines the size of the loader",
-              "value": { "type": "'md' | 'sm' | undefined", "default": "'md'" }
             }
           ],
-          "events": [],
+          "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" }
+          ],
           "js": {
             "properties": [
               {
-                "name": "ariaLabel",
-                "description": "Defines the aria-label",
-                "type": "string"
+                "name": "offset",
+                "description": "If defined, sets a custom offset for the popover",
+                "type": "number"
               },
               {
-                "name": "invert",
-                "description": "If true, inverts the color (to be used on colored backgrounds)",
+                "name": "hideArrow",
+                "description": "If true, hides the arrow",
                 "type": "boolean"
               },
+              { "name": "arrow", "type": "boolean" },
               {
-                "name": "size",
-                "description": "Defines the size of the loader",
-                "type": "'md' | 'sm' | undefined"
+                "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": "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": "isOpen",
+                "description": "Whether the menu is open",
+                "type": "boolean"
               },
               {
-                "name": "color",
-                "description": "Defines the color of the logo",
-                "type": "\"primary\" | \"secondary\" | \"inverse\""
+                "name": "anchor",
+                "description": "The id of the element the menu will be anchored to",
+                "type": "string"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "open",
+                "description": "Fired when the menu is opened"
+              },
+              {
+                "name": "close",
+                "description": "Fired when the menu is closed"
+              }
+            ]
           }
         },
         {
@@ -1888,6 +2381,100 @@
             "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>`",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "activeIndex",
+              "description": "Sets the active item",
+              "value": { "type": "number", "default": "-1" }
+            },
+            {
+              "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": "One or more `<skf-stepper-item>`" }
+          ],
+          "events": [
+            {
+              "name": "skf-stepper-item-select",
+              "description": "Dispatched when the stepper item is selected"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "activeIndex",
+                "description": "Sets the active item",
+                "type": "number"
+              },
+              {
+                "name": "linear",
+                "description": "If true, sets linear mode (user can't go back to completed steps due to dependencies)",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-stepper-item-select",
+                "description": "Dispatched when the stepper item is selected"
+              }
+            ]
+          }
+        },
+        {
+          "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": "state",
+              "description": "If defined, gives the supplied appearance",
+              "value": {
+                "type": "Extract<SkfStepperItemState, 'active' | 'completed'> | undefined"
+              }
+            },
+            {
+              "name": "completed",
+              "description": "If true, item marked as completed",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "Label of the stepper item" }],
+          "events": [
+            {
+              "name": "skf-stepper-item-select",
+              "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": "completed",
+                "description": "If true, item marked as completed",
+                "type": "boolean"
+              },
+              { "name": "_setInternalState" },
+              { "name": "role", "type": "string" }
+            ],
+            "events": [
+              {
+                "name": "skf-stepper-item-select",
+                "description": "Dispatched when the stepper item is selected"
+              }
+            ]
+          }
+        },
         {
           "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.",
@@ -2451,21 +3038,23 @@
           "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",
-              "value": { "type": "boolean", "default": "false" }
+              "name": "icon",
+              "description": "If defined, displays leading icon",
+              "value": { "type": "SkfAlert['icon'] | undefined" }
+            },
+            {
+              "name": "persistent",
+              "description": "If true, renders with an close button and sets aria-role to `status`",
+              "value": { "type": "SkfAlert['persistent']", "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": "SkfAlert['severity']", "default": "'info'" }
             },
             {
               "name": "timer",
@@ -2484,16 +3073,21 @@
           "events": [],
           "js": {
             "properties": [
+              { "name": "debug", "type": "boolean" },
               {
-                "name": "closeable",
-                "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
-                "type": "boolean"
+                "name": "icon",
+                "description": "If defined, displays leading icon",
+                "type": "SkfAlert['icon'] | undefined"
+              },
+              {
+                "name": "persistent",
+                "description": "If true, renders with an close button and sets aria-role to `status`",
+                "type": "SkfAlert['persistent']"
               },
-              { "name": "debug", "type": "boolean" },
               {
                 "name": "severity",
-                "description": "Severity of the toast.",
-                "type": "'info' | 'success' | 'warning' | 'error'"
+                "description": "If defined, gives the supplied appearance",
+                "type": "SkfAlert['severity']"
               },
               {
                 "name": "timer",
@@ -2530,6 +3124,55 @@
             "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",
+              "description": "Fired when the dropdown is opened"
+            },
+            {
+              "name": "close",
+              "description": "Fired when the dropdown is closed"
+            }
+          ],
+          "js": {
+            "properties": [
+              { "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"
+              }
+            ],
+            "events": [
+              {
+                "name": "open",
+                "description": "Fired when the dropdown is opened"
+              },
+              {
+                "name": "close",
+                "description": "Fired when the dropdown is closed"
+              }
+            ]
+          }
         }
       ]
     }