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

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": "0.0.0",
+  "version": "1.0.0-beta.7",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -27,7 +27,7 @@
             {
               "name": "gap",
               "description": "If true, adds a gap between each item",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "multiple",
@@ -67,7 +67,7 @@
               {
                 "name": "gap",
                 "description": "If true, adds a gap between each item",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "multiple",
@@ -88,111 +88,6 @@
             "events": []
           }
         },
-        {
-          "name": "skf-button",
-          "description": "Component to be used in forms or for interactivity\n---\n\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": "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": [],
-          "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": "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": "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",
@@ -201,17 +96,17 @@
             {
               "name": "no-border",
               "description": "If true, removes border",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "no-padding",
               "description": "If true, removes padding",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "stretch",
               "description": "If true, the Card fills the parent element height",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [{ "name": "", "description": "The card's main content" }],
@@ -221,94 +116,22 @@
               {
                 "name": "noBorder",
                 "description": "If true, removes border",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "noPadding",
                 "description": "If true, removes padding",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "stretch",
                 "description": "If true, the Card fills the parent element height",
-                "type": "boolean | undefined"
+                "type": "boolean"
               }
             ],
             "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": "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-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.",
@@ -339,11 +162,6 @@
               "description": "If true, forces component to invalid state until removed",
               "value": { "type": "boolean | undefined" }
             },
-            {
-              "name": "hide-label",
-              "description": "If true, hides the label visually",
-              "value": { "type": "boolean | undefined" }
-            },
             {
               "name": "indeterminate",
               "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
@@ -416,11 +234,6 @@
                 "description": "If true, forces component to invalid state until removed",
                 "type": "boolean | undefined"
               },
-              {
-                "name": "hideLabel",
-                "description": "If true, hides the label visually",
-                "type": "boolean | undefined"
-              },
               {
                 "name": "indeterminate",
                 "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
@@ -470,52 +283,6 @@
             ]
           }
         },
-        {
-          "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)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "color",
-              "description": "Defines the Divider color",
-              "value": {
-                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"",
-                "default": "'primary'"
-              }
-            },
-            {
-              "name": "decorative",
-              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "value": { "type": "boolean | undefined" }
-            },
-            {
-              "name": "vertical",
-              "description": "If true, renders the divider vertically",
-              "value": { "type": "boolean | undefined" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "color",
-                "description": "Defines the Divider color",
-                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
-              },
-              {
-                "name": "decorative",
-                "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-                "type": "boolean | undefined"
-              },
-              {
-                "name": "vertical",
-                "description": "If true, renders the divider vertically",
-                "type": "boolean | undefined"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "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",
@@ -524,12 +291,12 @@
             {
               "name": "animated",
               "description": "If true, will animate the expand/collapse state",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "expanded",
               "description": "If true, will set the collapse to be expanded by default",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "heading",
@@ -539,20 +306,17 @@
             {
               "name": "heading-as",
               "description": "Defines which heading element will be rendered",
-              "value": {
-                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"",
-                "default": "'h2'"
-              }
+              "value": { "type": "\"h2\" | \"h3\" | \"h4\"", "default": "'h2'" }
             },
             {
               "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 the heading in collapsed state",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [{ "name": "", "description": "Main content" }],
@@ -568,39 +332,395 @@
               {
                 "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": "truncate",
+                "description": "If true, will truncate the heading in collapsed state",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-collapse-toggle",
+                "type": "CustomEvent",
+                "description": "Event emitted when toggled"
+              }
+            ]
+          }
+        },
+        {
+          "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)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "close-button-aria-label",
+              "description": "If defined, sets the aria-label for the close button",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "heading",
+              "description": "Title for the modal/dialog",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "fullscreen",
+              "description": "If true, makes the dialog stretch edge to edge on screen",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-close-button",
+              "description": "If true, removes the close button",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-padding",
+              "description": "If defined, removes the inner padding",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "open",
+              "value": { "type": "boolean | null | undefined" }
+            }
+          ],
+          "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"
+            }
+          ],
+          "events": [
+            {
+              "name": "skf-dialog-open",
+              "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": "close",
+              "description": "Fires when the dialog is closed (after transitioned out)"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "closeButtonAriaLabel",
+                "description": "If defined, sets the aria-label for the close button",
+                "type": "string | undefined"
+              },
+              {
+                "name": "heading",
+                "description": "Title for the modal/dialog",
+                "type": "string | undefined"
+              },
+              {
+                "name": "fullscreen",
+                "description": "If true, makes the dialog stretch edge to edge on screen",
+                "type": "boolean"
+              },
+              {
+                "name": "noCloseButton",
+                "description": "If true, removes the close button",
+                "type": "boolean"
+              },
+              {
+                "name": "noPadding",
+                "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"
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-dialog-open",
+                "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": "close",
+                "description": "Fires when the dialog is closed (after transitioned out)"
+              }
+            ]
+          }
+        },
+        {
+          "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": "expanded",
-                "description": "If true, will set the collapse to be expanded by default",
-                "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)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "Defines the Divider color",
+              "value": {
+                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "decorative",
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "vertical",
+              "description": "If true, renders the divider vertically",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "Defines the Divider color",
+                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
+              },
+              {
+                "name": "decorative",
+                "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+                "type": "boolean"
+              },
+              {
+                "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": "heading",
-                "description": "Heading for the collapse",
-                "type": "string | 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": "headingAs",
-                "description": "Defines which heading element will be rendered",
-                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
+                "name": "size",
+                "description": "If provided, displays an alternative size",
+                "type": "'sm' | 'md' | 'lg'"
               },
               {
-                "name": "small",
-                "description": "If true, renders the small version",
-                "type": "boolean | undefined"
+                "name": "type",
+                "description": "If provided, changes the button type",
+                "type": "'button' | 'submit' | 'reset'"
               },
               {
-                "name": "truncate",
-                "description": "If true, will truncate the heading in collapsed state",
-                "type": "boolean | undefined"
+                "name": "variant",
+                "description": "If provided, alters the appearance",
+                "type": "'primary' | 'secondary'"
               }
             ],
             "events": [
               {
-                "name": "skf-collapse-toggle",
-                "type": "CustomEvent",
-                "description": "Event emitted when toggled"
+                "name": "click",
+                "description": "Fires when the button is clicked"
               }
             ]
           }
@@ -718,6 +838,11 @@
               "description": "If true, value is required or must be checked for the form to be submittable",
               "value": { "type": "boolean" }
             },
+            {
+              "name": "autocomplete",
+              "description": "-m  }",
+              "value": { "type": "string" }
+            },
             {
               "name": "button-aria-label-clear",
               "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
@@ -878,6 +1003,7 @@
           ],
           "js": {
             "properties": [
+              { "name": "autocomplete", "description": "-m  }", "type": "" },
               {
                 "name": "buttonAriaLabelClear",
                 "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
@@ -1067,8 +1193,8 @@
             },
             {
               "name": "rel",
-              "description": "Defines the relationship of the target object to the link object",
-              "value": { "type": "string", "default": "'noreferrer noopener'" }
+              "description": "If defined, describes the relationship between a linked resource and the current document",
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "route",
@@ -1078,7 +1204,7 @@
             {
               "name": "stretch",
               "description": "If true, fills the parents horizontal axis",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "target",
@@ -1137,8 +1263,8 @@
               },
               {
                 "name": "rel",
-                "description": "Defines the relationship of the target object to the link object",
-                "type": "string"
+                "description": "If defined, describes the relationship between a linked resource and the current document",
+                "type": "string | undefined"
               },
               {
                 "name": "route",
@@ -1148,7 +1274,7 @@
               {
                 "name": "stretch",
                 "description": "If true, fills the parents horizontal axis",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "target",
@@ -1182,7 +1308,7 @@
             {
               "name": "invert",
               "description": "If true, inverts the color (to be used on colored backgrounds)",
-              "value": { "type": "boolean | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "size",
@@ -1201,7 +1327,7 @@
               {
                 "name": "invert",
                 "description": "If true, inverts the color (to be used on colored backgrounds)",
-                "type": "boolean | undefined"
+                "type": "boolean"
               },
               {
                 "name": "size",
@@ -1226,7 +1352,7 @@
             },
             {
               "name": "color",
-              "description": "If defined, sets color of the logo",
+              "description": "Defines the color of the logo",
               "value": {
                 "type": "\"primary\" | \"secondary\" | \"inverse\"",
                 "default": "'primary'"
@@ -1243,13 +1369,56 @@
               },
               {
                 "name": "color",
-                "description": "If defined, sets color of the logo",
+                "description": "Defines the color of the logo",
                 "type": "\"primary\" | \"secondary\" | \"inverse\""
               }
             ],
             "events": []
           }
         },
+        {
+          "name": "skf-progress",
+          "description": "The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "animated",
+              "description": "If true, the progress-bar's fill value is animated",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "max",
+              "description": "Describes how much work the task indicated by the progress element requires",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "value",
+              "description": "Specifies how much of the task that has been completed",
+              "value": { "type": "number", "default": "0" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "animated",
+                "description": "If true, the progress-bar's fill value is animated",
+                "type": "boolean"
+              },
+              {
+                "name": "max",
+                "description": "Describes how much work the task indicated by the progress element requires",
+                "type": "number"
+              },
+              {
+                "name": "value",
+                "description": "Specifies how much of the task that has been completed",
+                "type": "number"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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.",
@@ -1280,11 +1449,6 @@
               "description": "If true, forces component to invalid state until removed",
               "value": { "type": "boolean | undefined" }
             },
-            {
-              "name": "hide-label",
-              "description": "If true, hides the label visually",
-              "value": { "type": "boolean | undefined" }
-            },
             {
               "name": "label",
               "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
@@ -1352,11 +1516,6 @@
                 "description": "If true, forces component to invalid state until removed",
                 "type": "boolean | undefined"
               },
-              {
-                "name": "hideLabel",
-                "description": "If true, hides the label visually",
-                "type": "boolean | undefined"
-              },
               {
                 "name": "label",
                 "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
@@ -1532,11 +1691,11 @@
                 "type": "string | undefined"
               },
               {
-                "name": "getSelectedValues",
+                "name": "selectedValues",
                 "description": "A readonly property that returns the selected value(s) in a array"
               },
               {
-                "name": "getSelectedOptionsText",
+                "name": "selectedOptionsText",
                 "description": "A readonly property that returns the selected slot(s) text content in a array"
               },
               {
@@ -1632,7 +1791,7 @@
             {
               "name": "icon-color",
               "description": "If defined, sets provided color on the icon",
-              "value": { "type": "IconColor | undefined" }
+              "value": { "type": "SeverityFgColor | undefined" }
             },
             {
               "name": "selected",
@@ -1678,7 +1837,7 @@
               {
                 "name": "iconColor",
                 "description": "If defined, sets provided color on the icon",
-                "type": "IconColor | undefined"
+                "type": "SeverityFgColor | undefined"
               },
               {
                 "name": "selected",
@@ -1838,6 +1997,155 @@
             "events": []
           }
         },
+        {
+          "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": "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'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"
+            }
+          ],
+          "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.",
+                "type": "string"
+              },
+              { "name": "selected", "type": "boolean" },
+              { "name": "variant", "type": "SkfTabGroup['variant']" },
+              { "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"
+              }
+            ]
+          }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "default-selected",
+              "description": "Sets the default selected tab",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "no-border",
+              "description": "If true, removes border",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-padding",
+              "description": "If true, removes padding",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "stretch",
+              "description": "If true, component fills the parent element height",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "variant",
+              "description": "Sets the appearance of the tabs",
+              "value": {
+                "type": "'compressed' | 'expanded'",
+                "default": "'expanded'"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements"
+            },
+            {
+              "name": "tabs",
+              "description": "Used for grouping tabs in the tab group. Must be <skf-tab> elements"
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "defaultSelected",
+                "description": "Sets the default selected tab",
+                "type": "number"
+              },
+              {
+                "name": "noBorder",
+                "description": "If true, removes border",
+                "type": "boolean"
+              },
+              {
+                "name": "noPadding",
+                "description": "If true, removes padding",
+                "type": "boolean"
+              },
+              {
+                "name": "stretch",
+                "description": "If true, component fills the parent element height",
+                "type": "boolean"
+              },
+              {
+                "name": "variant",
+                "description": "Sets the appearance of the tabs",
+                "type": "'compressed' | 'expanded'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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": "name",
+              "description": "The tab panel's name.",
+              "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",
@@ -2136,6 +2444,92 @@
               }
             ]
           }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "closeable",
+              "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "debug",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "severity",
+              "description": "Severity of the toast.",
+              "value": {
+                "type": "'info' | 'success' | 'warning' | 'error'",
+                "default": "'info'"
+              }
+            },
+            {
+              "name": "timer",
+              "description": "Time in seconds before the toast disappears.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "topOffset",
+              "description": "offsets where toasts emerge vertically",
+              "value": { "type": "number | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's placeholder content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "closeable",
+                "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+                "type": "boolean"
+              },
+              { "name": "debug", "type": "boolean" },
+              {
+                "name": "severity",
+                "description": "Severity of the toast.",
+                "type": "'info' | 'success' | 'warning' | 'error'"
+              },
+              {
+                "name": "timer",
+                "description": "Time in seconds before the toast disappears.",
+                "type": "number"
+              },
+              {
+                "name": "topOffset",
+                "description": "offsets where toasts emerge vertically",
+                "type": "number | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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": []
+          }
         }
       ]
     }