@skf-design-system/ui-components 0.0.1-beta.4 → 1.0.0-alpha.28

package/dist/web-types.json

@@ -8,7 +8,7 @@
       "elements": [
         {
           "name": "skf-accordion",
-          "description": "The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.\n\nSee [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6256cb1b44eba592d319d92e) for design principles.\n---\n\n\n### **Slots:**\n - _default_ - Expects one or more <skf-accordion-item> element(s)",
+          "description": "The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Slots:**\n - _default_ - Expects one or more <skf-accordion-item> element(s)",
           "doc-url": "",
           "attributes": [
             {
@@ -18,15 +18,15 @@
             },
             {
               "name": "heading-as",
-              "description": "Controls which heading element will be rendered",
+              "description": "Defines which heading element will be rendered",
               "value": {
-                "type": "Exclude<HeadingType, 'h1'>",
+                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"",
                 "default": "'h2'"
               }
             },
             {
               "name": "gap",
-              "description": "If provided, adds a gap between each item",
+              "description": "If true, adds a gap between each item",
               "value": { "type": "boolean | undefined" }
             },
             {
@@ -61,12 +61,12 @@
               },
               {
                 "name": "headingAs",
-                "description": "Controls which heading element will be rendered",
-                "type": "Exclude<HeadingType, 'h1'>"
+                "description": "Defines which heading element will be rendered",
+                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               {
                 "name": "gap",
-                "description": "If provided, adds a gap between each item",
+                "description": "If true, adds a gap between each item",
                 "type": "boolean | undefined"
               },
               {
@@ -90,12 +90,12 @@
         },
         {
           "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** - lodjvodjvodjo",
+          "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 with an close button",
+              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
               "value": { "type": "boolean | undefined" }
             },
             {
@@ -111,7 +111,9 @@
             {
               "name": "severity",
               "description": "If defined, gives the supplied appearance",
-              "value": { "type": "SeverityFgColor | undefined" }
+              "value": {
+                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              }
             }
           ],
           "slots": [
@@ -119,7 +121,7 @@
               "name": "",
               "description": "Alert message. **Notice!** See design principles for approved content"
             },
-            { "name": "link", "description": "lodjvodjvodjo" }
+            { "name": "link", "description": "Slot for the link" }
           ],
           "events": [
             {
@@ -131,7 +133,7 @@
             "properties": [
               {
                 "name": "closeable",
-                "description": "If true, alert is being used as a toast with an close button",
+                "description": "If true, alert is being used as a toast (alertdialog) with an close button",
                 "type": "boolean | undefined"
               },
               {
@@ -147,7 +149,7 @@
               {
                 "name": "severity",
                 "description": "If defined, gives the supplied appearance",
-                "type": "SeverityFgColor | undefined"
+                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
               }
             ],
             "events": [
@@ -160,7 +162,7 @@
         },
         {
           "name": "skf-button",
-          "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Slots:**\n - _default_ - The Primary content",
+          "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": [
             {
@@ -193,6 +195,10 @@
               "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",
@@ -216,7 +222,12 @@
             }
           ],
           "slots": [{ "name": "", "description": "The Primary content" }],
-          "events": [],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fires when the button is clicked"
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -244,6 +255,7 @@
                 "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",
@@ -260,7 +272,12 @@
                 "type": "'primary' | 'secondary'"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "click",
+                "description": "Fires when the button is clicked"
+              }
+            ]
           }
         },
         {
@@ -271,17 +288,17 @@
             {
               "name": "no-border",
               "description": "If true, removes border",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "no-padding",
               "description": "If true, removes padding",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "stretch",
               "description": "If true, the Card fills the parent element height",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean | undefined" }
             }
           ],
           "slots": [{ "name": "", "description": "The card's main content" }],
@@ -291,17 +308,17 @@
               {
                 "name": "noBorder",
                 "description": "If true, removes border",
-                "type": "boolean"
+                "type": "boolean | undefined"
               },
               {
                 "name": "noPadding",
                 "description": "If true, removes padding",
-                "type": "boolean"
+                "type": "boolean | undefined"
               },
               {
                 "name": "stretch",
                 "description": "If true, the Card fills the parent element height",
-                "type": "boolean"
+                "type": "boolean | undefined"
               }
             ],
             "events": []
@@ -309,7 +326,7 @@
         },
         {
           "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** - Alternatively, you can use the `label` attribute",
+          "description": "The `<skf-checkbox>` component is used to create a checkbox input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The Radios label. Alternatively, you can use the `label` attribute.",
           "doc-url": "",
           "attributes": [
             {
@@ -337,11 +354,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",
@@ -362,21 +374,23 @@
               "description": "If defined, renders an alternative A11y text for the asterisk",
               "value": { "type": "string | undefined" }
             },
-            {
-              "name": "size",
-              "description": "Size of the checkbox",
-              "value": { "type": "'sm' | 'md'", "default": "'md'" }
-            },
             {
               "name": "severity",
               "description": "If defined, styles checkbox using provided severity",
-              "value": { "type": "FormFieldBaseProps['severity'] | undefined" }
+              "value": {
+                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
+              }
             },
             {
               "name": "show-valid",
-              "description": "If defined, displays valid state after interaction",
+              "description": "If true, displays valid state after interaction",
               "value": { "type": "boolean | undefined" }
             },
+            {
+              "name": "size",
+              "description": "Size of the checkbox",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+            },
             {
               "name": "value",
               "description": "The current value of the input field",
@@ -385,8 +399,8 @@
           ],
           "slots": [
             {
-              "name": "Default",
-              "description": "Alternatively, you can use the `label` attribute"
+              "name": "",
+              "description": "The Radios label. Alternatively, you can use the `label` attribute."
             }
           ],
           "events": [
@@ -412,11 +426,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",
@@ -437,21 +446,21 @@
                 "description": "If defined, renders an alternative A11y text for the asterisk",
                 "type": "string | undefined"
               },
-              {
-                "name": "size",
-                "description": "Size of the checkbox",
-                "type": "'sm' | 'md'"
-              },
               {
                 "name": "severity",
                 "description": "If defined, styles checkbox using provided severity",
-                "type": "FormFieldBaseProps['severity'] | undefined"
+                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
               },
               {
                 "name": "showValid",
-                "description": "If defined, displays valid state after interaction",
+                "description": "If true, displays valid state after interaction",
                 "type": "boolean | undefined"
               },
+              {
+                "name": "size",
+                "description": "Size of the checkbox",
+                "type": "'sm' | 'md'"
+              },
               {
                 "name": "value",
                 "description": "The current value of the input field",
@@ -468,18 +477,18 @@
         },
         {
           "name": "skf-collapse",
-          "description": "The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.\n\nSee [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229e2eb8a8dacf366dc3243) 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",
+          "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",
           "doc-url": "",
           "attributes": [
             {
               "name": "animated",
               "description": "If true, will animate the expand/collapse state",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "expanded",
               "description": "If true, will set the collapse to be expanded by default",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "heading",
@@ -488,21 +497,21 @@
             },
             {
               "name": "heading-as",
-              "description": "Controls which heading element will be rendered",
+              "description": "Defines which heading element will be rendered",
               "value": {
-                "type": "Exclude<HeadingType, 'h1'>",
+                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"",
                 "default": "'h2'"
               }
             },
             {
               "name": "small",
               "description": "If true, renders the small version",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "truncate",
               "description": "If true, will truncate the heading in collapsed state",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean | undefined" }
             }
           ],
           "slots": [{ "name": "", "description": "Main content" }],
@@ -518,12 +527,12 @@
               {
                 "name": "animated",
                 "description": "If true, will animate the expand/collapse state",
-                "type": "boolean"
+                "type": "boolean | undefined"
               },
               {
                 "name": "expanded",
                 "description": "If true, will set the collapse to be expanded by default",
-                "type": "boolean"
+                "type": "boolean | undefined"
               },
               {
                 "name": "heading",
@@ -532,18 +541,18 @@
               },
               {
                 "name": "headingAs",
-                "description": "Controls which heading element will be rendered",
-                "type": "Exclude<HeadingType, 'h1'>"
+                "description": "Defines which heading element will be rendered",
+                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               {
                 "name": "small",
                 "description": "If true, renders the small version",
-                "type": "boolean"
+                "type": "boolean | undefined"
               },
               {
                 "name": "truncate",
                 "description": "If true, will truncate the heading in collapsed state",
-                "type": "boolean"
+                "type": "boolean | undefined"
               }
             ],
             "events": [
@@ -557,12 +566,12 @@
         },
         {
           "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)_",
+          "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": "If provided, alters the Divider color",
+              "description": "Defines the Divider color",
               "value": {
                 "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"",
                 "default": "'primary'"
@@ -571,12 +580,12 @@
             {
               "name": "decorative",
               "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "vertical",
               "description": "If true, renders the divider vertically",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean | undefined" }
             }
           ],
           "events": [],
@@ -584,18 +593,18 @@
             "properties": [
               {
                 "name": "color",
-                "description": "If provided, alters the Divider 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"
+                "type": "boolean | undefined"
               },
               {
                 "name": "vertical",
                 "description": "If true, renders the divider vertically",
-                "type": "boolean"
+                "type": "boolean | undefined"
               }
             ],
             "events": []
@@ -603,32 +612,36 @@
         },
         {
           "name": "skf-heading",
-          "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n",
+          "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n\n\n### **Slots:**\n - _default_ - The headings content",
           "doc-url": "",
           "attributes": [
             {
               "name": "as",
-              "description": "Controls which heading element will be rendered. Should not be used to affect appearance.",
-              "value": { "type": "HeadingType", "default": "'h1'" }
+              "description": "Controls which heading element will be rendered. Should not be used to affect appearance",
+              "value": {
+                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"",
+                "default": "'h1'"
+              }
             },
             {
               "name": "styled-as",
               "description": "If provided, changes the appearance of the heading",
-              "value": { "type": "HeadingType | undefined" }
+              "value": { "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\"" }
             }
           ],
+          "slots": [{ "name": "", "description": "The headings content" }],
           "events": [],
           "js": {
             "properties": [
               {
                 "name": "as",
-                "description": "Controls which heading element will be rendered. Should not be used to affect appearance.",
-                "type": "HeadingType"
+                "description": "Controls which heading element will be rendered. Should not be used to affect appearance",
+                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               {
                 "name": "styledAs",
                 "description": "If provided, changes the appearance of the heading",
-                "type": "HeadingType | undefined"
+                "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               }
             ],
             "events": []
@@ -641,6 +654,7 @@
           "attributes": [
             {
               "name": "color",
+              "description": "Sets the color of the icon",
               "value": {
                 "type": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\"",
                 "default": "'primary'"
@@ -648,17 +662,19 @@
             },
             {
               "name": "label",
-              "description": "If provided, adds an alternate description to use for assistive devices",
+              "description": "If defined, adds an alternate description to use for assistive devices",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "name",
+              "description": "Name of the icon to display",
               "value": {
                 "type": "\"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": "size",
+              "description": "Size of the icon",
               "value": {
                 "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
                 "default": "'md'"
@@ -670,25 +686,31 @@
             "properties": [
               {
                 "name": "color",
+                "description": "Sets the color of the icon",
                 "type": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\""
               },
               {
                 "name": "label",
-                "description": "If provided, adds an alternate description to use for assistive devices",
+                "description": "If defined, adds an alternate description to use for assistive devices",
                 "type": "string | undefined"
               },
               {
                 "name": "name",
+                "description": "Name of the icon to display",
                 "type": "\"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": "size", "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"" }
+              {
+                "name": "size",
+                "description": "Size of the icon",
+                "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+              }
             ],
             "events": []
           }
         },
         {
           "name": "skf-input",
-          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - **Default** -  Alternatively, you can use the `label` attribute",
+          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
           "doc-url": "",
           "attributes": [
             {
@@ -701,44 +723,49 @@
               "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": "If provided, renders a custom aria-label for the clear button **Notice!** Only applicable to type=search.",
+              "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
               "value": { "type": "string", "default": "'Clear input'" }
             },
             {
               "name": "button-aria-label-hide",
-              "description": "If provided, renders a custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
+              "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
               "value": { "type": "string", "default": "'Hide password'" }
             },
             {
               "name": "button-aria-label-show",
-              "description": "If provided, renders a custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
+              "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
               "value": { "type": "string", "default": "'Show password'" }
             },
             {
               "name": "custom-invalid",
-              "description": "If provided, forces component to invalid state until removed. Its value is used as hint text.",
+              "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
               "value": { "type": "string" }
             },
             {
               "name": "debug",
-              "description": "If provided, outputs helping hints in console",
-              "value": { "type": "boolean", "default": "false" }
+              "description": "If true, outputs helping hints in console",
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "hide-label",
               "description": "If true, hides the label visually",
-              "value": { "type": "boolean", "default": "false" }
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "hint",
-              "description": "If provided, displays informational text below the field",
+              "description": "If defined, displays informational text below the field",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "inputmode",
-              "description": "If provided, tells what keyboard to use if applicable",
+              "description": "Tells what keyboard to use if applicable",
               "value": {
                 "type": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
                 "default": "'text'"
@@ -746,47 +773,47 @@
             },
             {
               "name": "label",
-              "description": "The input's label. Alternatively, you can use the `label` attribute.",
+              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "leading",
-              "description": "If provided, displays a prefix/adornment before the input-element",
+              "description": "If defined, displays a prefix/adornment before the input-element",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "max",
-              "description": "If provided, sets the maximum value to accept for this input",
+              "description": "If defined, sets the maximum value to accept for this input",
               "value": { "type": "number | string | undefined" }
             },
             {
               "name": "maxlength",
-              "description": "If provided, sets the maximum character length to accept for this input",
+              "description": "If defined, sets the maximum character length to accept for this input",
               "value": { "type": "number | undefined" }
             },
             {
               "name": "min",
-              "description": "If provided, sets the minimum value to accept for this input",
+              "description": "If defined, sets the minimum value to accept for this input",
               "value": { "type": "number | string | undefined" }
             },
             {
               "name": "minlength",
-              "description": "If provided, sets the minimum character length to accept for this input",
+              "description": "If defined, sets the minimum character length to accept for this input",
               "value": { "type": "number | undefined" }
             },
             {
               "name": "name",
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "pattern",
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "placeholder",
-              "description": "If provided, displays placeholder text",
+              "description": "If defined, displays placeholder text",
               "value": { "type": "string | undefined" }
             },
             {
@@ -796,42 +823,44 @@
             },
             {
               "name": "required-label",
-              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "severity",
-              "description": "If provided, displays provided severity state",
-              "value": { "type": "FormFieldBaseProps['severity'] | undefined" }
+              "description": "If defined, displays provided severity state",
+              "value": {
+                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
+              }
             },
             {
               "name": "show-valid",
-              "description": "If provided, displays provided severity state",
+              "description": "If true, displays valid state after interaction",
               "value": { "type": "boolean | undefined" }
             },
             {
               "name": "size",
-              "description": "If provided, displays an alternative size",
-              "value": { "type": "'sm' | 'md' | undefined", "default": "'md'" }
+              "description": "Size of the input",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
             },
             {
               "name": "trailing",
-              "description": "If provided, displays a suffix/adornment after the input-element",
+              "description": "If defined, displays a suffix/adornment after the input-element",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "type",
-              "description": "If provided, changes the type of form control",
+              "description": "Type of input control",
               "value": {
-                "type": "Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'> | undefined",
+                "type": "'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'",
                 "default": "'text'"
               }
             },
             {
               "name": "validate-on",
-              "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
+              "description": "Sets validation start",
               "value": {
-                "type": "'input' | 'change' | 'submit' | undefined",
+                "type": "'input' | 'change' | 'submit'",
                 "default": "'change'"
               }
             },
@@ -843,8 +872,8 @@
           ],
           "slots": [
             {
-              "name": "Default",
-              "description": " Alternatively, you can use the `label` attribute"
+              "name": "",
+              "description": "The Inputs label. Alternatively, you can use the `label` attribute."
             }
           ],
           "events": [
@@ -859,88 +888,89 @@
           ],
           "js": {
             "properties": [
+              { "name": "autocomplete", "description": "-m  }", "type": "" },
               {
                 "name": "buttonAriaLabelClear",
-                "description": "If provided, renders a custom aria-label for the clear button **Notice!** Only applicable to type=search.",
+                "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
                 "type": "string"
               },
               {
                 "name": "buttonAriaLabelHide",
-                "description": "If provided, renders a custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
+                "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
                 "type": "string"
               },
               {
                 "name": "buttonAriaLabelShow",
-                "description": "If provided, renders a custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
+                "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
                 "type": "string"
               },
               {
                 "name": "customInvalid",
-                "description": "If provided, forces component to invalid state until removed. Its value is used as hint text."
+                "description": "If defined, forces component to invalid state until removed. Its value is used as hint text."
               },
               {
                 "name": "debug",
-                "description": "If provided, outputs helping hints in console",
-                "type": "boolean"
+                "description": "If true, outputs helping hints in console",
+                "type": "boolean | undefined"
               },
               {
                 "name": "hideLabel",
                 "description": "If true, hides the label visually",
-                "type": "boolean"
+                "type": "boolean | undefined"
               },
               {
                 "name": "hint",
-                "description": "If provided, displays informational text below the field",
+                "description": "If defined, displays informational text below the field",
                 "type": "string | undefined"
               },
               {
                 "name": "inputmode",
-                "description": "If provided, tells what keyboard to use if applicable",
+                "description": "Tells what keyboard to use if applicable",
                 "type": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'"
               },
               {
                 "name": "label",
-                "description": "The input's label. Alternatively, you can use the `label` attribute.",
+                "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
                 "type": "string | undefined"
               },
               {
                 "name": "leading",
-                "description": "If provided, displays a prefix/adornment before the input-element",
+                "description": "If defined, displays a prefix/adornment before the input-element",
                 "type": "string | undefined"
               },
               {
                 "name": "max",
-                "description": "If provided, sets the maximum value to accept for this input",
+                "description": "If defined, sets the maximum value to accept for this input",
                 "type": "number | string | undefined"
               },
               {
                 "name": "maxLength",
-                "description": "If provided, sets the maximum character length to accept for this input",
+                "description": "If defined, sets the maximum character length to accept for this input",
                 "type": "number | undefined"
               },
               {
                 "name": "min",
-                "description": "If provided, sets the minimum value to accept for this input",
+                "description": "If defined, sets the minimum value to accept for this input",
                 "type": "number | string | undefined"
               },
               {
                 "name": "minLength",
-                "description": "If provided, sets the minimum character length to accept for this input",
+                "description": "If defined, sets the minimum character length to accept for this input",
                 "type": "number | undefined"
               },
               {
                 "name": "name",
-                "description": "If provided, adds name to the input-element",
+                "description": "If defined, adds name to the input-element",
                 "type": "string | undefined"
               },
               {
                 "name": "pattern",
-                "description": "If provided, adds name to the input-element",
+                "description": "If defined, adds name to the input-element",
                 "type": "string | undefined"
               },
               {
                 "name": "placeholder",
-                "description": "If provided, displays placeholder text",
+                "description": "If defined, displays placeholder text",
                 "type": "string | undefined"
               },
               {
@@ -950,46 +980,44 @@
               },
               {
                 "name": "requiredLabel",
-                "description": "If provided, renders an alternative A11y text for the asterisk",
+                "description": "If defined, renders an alternative A11y text for the asterisk",
                 "type": "string | undefined"
               },
               {
                 "name": "severity",
-                "description": "If provided, displays provided severity state",
-                "type": "FormFieldBaseProps['severity'] | undefined"
+                "description": "If defined, displays provided severity state",
+                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
               },
               {
                 "name": "showValid",
-                "description": "If provided, displays provided severity state",
+                "description": "If true, displays valid state after interaction",
                 "type": "boolean | undefined"
               },
               {
                 "name": "size",
-                "description": "If provided, displays an alternative size",
-                "type": "'sm' | 'md' | undefined"
+                "description": "Size of the input",
+                "type": "'sm' | 'md'"
               },
               {
                 "name": "trailing",
-                "description": "If provided, displays a suffix/adornment after the input-element",
+                "description": "If defined, displays a suffix/adornment after the input-element",
                 "type": "string | undefined"
               },
               {
                 "name": "type",
-                "description": "If provided, changes the type of form control",
-                "type": "Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'> | undefined"
+                "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": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
-                "type": "'input' | 'change' | 'submit' | undefined"
+                "description": "Sets validation start",
+                "type": "'input' | 'change' | 'submit'"
               },
               {
                 "name": "value",
                 "description": "The current value of the input field",
                 "type": "string"
-              },
-              { "name": "_numberController" },
-              { "name": "_passwordController" }
+              }
             ],
             "events": [
               {
@@ -1010,11 +1038,12 @@
           "attributes": [
             {
               "name": "as",
-              "description": "Specifies semantic element to render -",
+              "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'"
@@ -1027,34 +1056,34 @@
             },
             {
               "name": "download",
-              "description": "If provided, downloads the url",
+              "description": "If defined, downloads the url",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "href",
-              "description": "If provided, loads url on click",
+              "description": "If defined, loads url on click",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "icon",
-              "description": "If provided, renders an icon before or after the text",
+              "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": "Position of the icon in relation to the text -",
+              "description": "Defines the position of the icon in relation to the text",
               "value": { "type": "'left' | 'right'", "default": "'left'" }
             },
             {
               "name": "rel",
-              "description": "Specifies the relationship of the target object to the link object -",
+              "description": "Defines the relationship of the target object to the link object",
               "value": { "type": "string", "default": "'noreferrer noopener'" }
             },
             {
               "name": "route",
-              "description": "If provided, used on conjunction with onClick property, second argument",
+              "description": "If defined, used on conjunction with onClick property, second argument",
               "value": { "type": "string | undefined" }
             },
             {
@@ -1064,14 +1093,14 @@
             },
             {
               "name": "target",
-              "description": "If provided, specifies where to open the linked document",
+              "description": "If defined, specifies where to open the linked document",
               "value": {
                 "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
               }
             },
             {
               "name": "type",
-              "description": "Type of button -",
+              "description": "Defines the type of button",
               "value": {
                 "type": "'button' | 'submit' | 'reset'",
                 "default": "'button'"
@@ -1084,10 +1113,14 @@
             "properties": [
               {
                 "name": "as",
-                "description": "Specifies semantic element to render -",
+                "description": "Defines the semantic element to render",
                 "type": "'button' | 'a'"
               },
-              { "name": "color", "type": "'primary' | 'inverse'" },
+              {
+                "name": "color",
+                "description": "Defines the text-color",
+                "type": "'primary' | 'inverse'"
+              },
               {
                 "name": "disabled",
                 "description": "If true, disables the link",
@@ -1095,32 +1128,32 @@
               },
               {
                 "name": "download",
-                "description": "If provided, downloads the url",
+                "description": "If defined, downloads the url",
                 "type": "string | undefined"
               },
               {
                 "name": "href",
-                "description": "If provided, loads url on click",
+                "description": "If defined, loads url on click",
                 "type": "string | undefined"
               },
               {
                 "name": "icon",
-                "description": "If provided, renders an icon before or after the text",
+                "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": "Position of the icon in relation to the text -",
+                "description": "Defines the position of the icon in relation to the text",
                 "type": "'left' | 'right'"
               },
               {
                 "name": "rel",
-                "description": "Specifies the relationship of the target object to the link object -",
+                "description": "Defines the relationship of the target object to the link object",
                 "type": "string"
               },
               {
                 "name": "route",
-                "description": "If provided, used on conjunction with onClick property, second argument",
+                "description": "If defined, used on conjunction with onClick property, second argument",
                 "type": "string | undefined"
               },
               {
@@ -1130,12 +1163,12 @@
               },
               {
                 "name": "target",
-                "description": "If provided, specifies where to open the linked document",
+                "description": "If defined, specifies where to open the linked document",
                 "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
               },
               {
                 "name": "type",
-                "description": "Type of button -",
+                "description": "Defines the type of button",
                 "type": "'button' | 'submit' | 'reset'"
               },
               {
@@ -1149,38 +1182,45 @@
         },
         {
           "name": "skf-loader",
-          "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities.\n---\n",
+          "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" }
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "size",
-              "description": "If provided, displays an alternative size",
+              "description": "Defines the size of the loader",
               "value": { "type": "'md' | 'sm' | undefined", "default": "'md'" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              { "name": "ariaLabel", "type": "string" },
+              {
+                "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"
+                "type": "boolean | undefined"
               },
               {
                 "name": "size",
-                "description": "If provided, displays an alternative size",
+                "description": "Defines the size of the loader",
                 "type": "'md' | 'sm' | undefined"
-              }
+              },
+              { "name": "role", "type": "string" },
+              { "name": "ariaLive", "type": "string" }
             ],
             "events": []
           }
@@ -1192,12 +1232,12 @@
           "attributes": [
             {
               "name": "title",
-              "description": "The title of the logo",
+              "description": "Defines the title of the logo",
               "value": { "type": "string", "default": "'SKF logotype'" }
             },
             {
               "name": "color",
-              "description": "If provided, sets color of the logo",
+              "description": "If defined, sets color of the logo",
               "value": {
                 "type": "\"primary\" | \"secondary\" | \"inverse\"",
                 "default": "'primary'"
@@ -1209,21 +1249,64 @@
             "properties": [
               {
                 "name": "title",
-                "description": "The title of the logo",
+                "description": "Defines the title of the logo",
                 "type": "string"
               },
               {
                 "name": "color",
-                "description": "If provided, sets color of the logo",
+                "description": "If defined, sets 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 | undefined" }
+            },
+            {
+              "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 | undefined"
+              },
+              {
+                "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** -  Alternatively, you can use the `label` attribute",
+          "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.",
           "doc-url": "",
           "attributes": [
             {
@@ -1238,8 +1321,8 @@
             },
             {
               "name": "debug",
-              "description": "If provided, outputs helping hints in console",
-              "value": { "type": "boolean", "default": "false" }
+              "description": "If true, outputs helping hints in console",
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "checked",
@@ -1251,39 +1334,36 @@
               "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", "default": "false" }
-            },
             {
               "name": "label",
-              "description": "The input's label. Alternatively, you can use the `label` attribute.",
+              "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "name",
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "required-label",
-              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "size",
-              "description": "If provided, displays an alternative size",
-              "value": { "type": "'sm' | 'md' | undefined", "default": "'md'" }
+              "description": "Size of the Radio",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
             },
             {
               "name": "severity",
-              "description": "If provided, displays provided severity state",
-              "value": { "type": "FormFieldBaseProps['severity'] | undefined" }
+              "description": "If defined, displays provided severity state",
+              "value": {
+                "type": "\"success\" | \"info\" | \"warning\" | \"alert\""
+              }
             },
             {
               "name": "show-valid",
-              "description": "If provided, displays valid state after interaction",
+              "description": "If true, displays valid state after interaction",
               "value": { "type": "boolean | undefined" }
             },
             {
@@ -1294,8 +1374,8 @@
           ],
           "slots": [
             {
-              "name": "Default",
-              "description": " Alternatively, you can use the `label` attribute"
+              "name": "",
+              "description": "The radios label. Alternatively, you can use the `label` attribute."
             }
           ],
           "events": [
@@ -1308,8 +1388,8 @@
             "properties": [
               {
                 "name": "debug",
-                "description": "If provided, outputs helping hints in console",
-                "type": "boolean"
+                "description": "If true, outputs helping hints in console",
+                "type": "boolean | undefined"
               },
               {
                 "name": "checked",
@@ -1321,39 +1401,34 @@
                 "description": "If true, forces component to invalid state until removed",
                 "type": "boolean | undefined"
               },
-              {
-                "name": "hideLabel",
-                "description": "If true, hides the label visually",
-                "type": "boolean"
-              },
               {
                 "name": "label",
-                "description": "The input's label. Alternatively, you can use the `label` attribute.",
+                "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
                 "type": "string | undefined"
               },
               {
                 "name": "name",
-                "description": "If provided, adds name to the input-element",
+                "description": "If defined, adds name to the input-element",
                 "type": "string | undefined"
               },
               {
                 "name": "requiredLabel",
-                "description": "If provided, renders an alternative A11y text for the asterisk",
+                "description": "If defined, renders an alternative A11y text for the asterisk",
                 "type": "string | undefined"
               },
               {
                 "name": "size",
-                "description": "If provided, displays an alternative size",
-                "type": "'sm' | 'md' | undefined"
+                "description": "Size of the Radio",
+                "type": "'sm' | 'md'"
               },
               {
                 "name": "severity",
-                "description": "If provided, displays provided severity state",
-                "type": "FormFieldBaseProps['severity'] | undefined"
+                "description": "If defined, displays provided severity state",
+                "type": "\"success\" | \"info\" | \"warning\" | \"alert\""
               },
               {
                 "name": "showValid",
-                "description": "If provided, displays valid state after interaction",
+                "description": "If true, displays valid state after interaction",
                 "type": "boolean | undefined"
               },
               {
@@ -1371,43 +1446,63 @@
           }
         },
         {
-          "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 component's placeholder content",
+          "name": "skf-select",
+          "description": "The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option(s) changes\n- **invalid** - Fired when the select is invalid\n- **reset** - Fired when the form is reset\n- **skf-select:dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled\n- **skf-select-option:select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled\n\n### **Slots:**\n - _default_ - The select's placeholder content",
           "doc-url": "",
           "attributes": [
             {
               "name": "disabled",
-              "description": "If true, sets disabled state",
+              "description": "If true, the select is disabled\t`default: false`",
               "value": { "type": "boolean" }
             },
             {
-              "name": "required",
-              "description": "If true, value is required or must be checked for the form to be submittable",
-              "value": { "type": "boolean" }
+              "name": "button-label",
+              "description": "Sets the first visible text on the component",
+              "value": { "type": "string", "default": "'Select an option'" }
             },
             {
-              "name": "debug",
-              "description": "If true, outputs helping hints in console",
-              "value": { "type": "boolean | undefined" }
+              "name": "custom-invalid",
+              "description": "If defined, forces component to invalid state until removed",
+              "value": { "type": "string | undefined" }
             },
             {
-              "name": "checked",
-              "description": "If true, outputs helping hints in console",
+              "name": "hide-label",
+              "description": "If true, hides the label visually",
               "value": { "type": "boolean | undefined" }
             },
             {
-              "name": "hide-label",
-              "description": "If true, hides the label visually",
+              "name": "hide-tags",
+              "description": "If true and mulltiple is true, no tags are displayed under the select",
               "value": { "type": "boolean | undefined" }
             },
+            {
+              "name": "hint",
+              "description": "If defined, sets the hint text under the select component in the form",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "label",
-              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+              "description": "If defined, displays provided label",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "max",
+              "description": "If defined, limits the number of selectable options",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "min",
+              "description": "If defined, sets the minimum number of required options",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "multiple",
+              "description": "If true, allows for multiple options to be selected",
+              "value": { "type": "boolean | undefined" }
+            },
             {
               "name": "name",
-              "description": "If defined, adds name to the input-element",
+              "description": "If defined, set name of the component",
               "value": { "type": "string | undefined" }
             },
             {
@@ -1416,20 +1511,331 @@
               "value": { "type": "string | undefined" }
             },
             {
-              "name": "size",
-              "description": "Size of the Switch",
-              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+              "name": "severity",
+              "description": "If defined, displays provided severity state",
+              "value": { "type": "FormFieldBaseProps['severity'] | undefined" }
             },
             {
-              "name": "value",
-              "description": "The current value of the input field",
-              "value": { "type": "string", "default": "''" }
+              "name": "show-valid",
+              "description": "If true, displays valid state after interaction",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "size",
+              "description": "Size of the Select",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The select's placeholder content" }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "Fired when the selected option(s) changes"
+            },
+            {
+              "name": "invalid",
+              "description": "Fired when the select is invalid"
+            },
+            { "name": "reset", "description": "Fired when the form is reset" },
+            {
+              "name": "skf-select:dropdown",
+              "description": "{detail: {expanded: boolean}} Fired when the select dropdown is toggled"
+            },
+            {
+              "name": "skf-select-option:select",
+              "description": "{detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "buttonLabel",
+                "description": "Sets the first visible text on the component",
+                "type": "string"
+              },
+              {
+                "name": "customInvalid",
+                "description": "If defined, forces component to invalid state until removed",
+                "type": "string | undefined"
+              },
+              {
+                "name": "hideLabel",
+                "description": "If true, hides the label visually",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "hideTags",
+                "description": "If true and mulltiple is true, no tags are displayed under the select",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "hint",
+                "description": "If defined, sets the hint text under the select component in the form",
+                "type": "string | undefined"
+              },
+              {
+                "name": "selectedValues",
+                "description": "A readonly property that returns the selected value(s) in a array"
+              },
+              {
+                "name": "selectedOptionsText",
+                "description": "A readonly property that returns the selected slot(s) text content in a array"
+              },
+              {
+                "name": "label",
+                "description": "If defined, displays provided label",
+                "type": "string | undefined"
+              },
+              {
+                "name": "max",
+                "description": "If defined, limits the number of selectable options",
+                "type": "number | undefined"
+              },
+              {
+                "name": "min",
+                "description": "If defined, sets the minimum number of required options",
+                "type": "number | undefined"
+              },
+              {
+                "name": "multiple",
+                "description": "If true, allows for multiple options to be selected",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "name",
+                "description": "If defined, set name of the component",
+                "type": "string | undefined"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "If defined, renders an alternative A11y text for the asterisk",
+                "type": "string | undefined"
+              },
+              {
+                "name": "severity",
+                "description": "If defined, displays provided severity state",
+                "type": "FormFieldBaseProps['severity'] | undefined"
+              },
+              {
+                "name": "showValid",
+                "description": "If true, displays valid state after interaction",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "size",
+                "description": "Size of the Select",
+                "type": "'sm' | 'md'"
+              },
+              {
+                "name": "value",
+                "description": "Read only, returns the selected value. (if multiple: in a comma separated string)"
+              },
+              { "name": "_selectedOptions", "type": "array" }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "description": "Fired when the selected option(s) changes"
+              },
+              {
+                "name": "invalid",
+                "description": "Fired when the select is invalid"
+              },
+              {
+                "name": "reset",
+                "description": "Fired when the form is reset"
+              },
+              {
+                "name": "skf-select:dropdown",
+                "description": "{detail: {expanded: boolean}} Fired when the select dropdown is toggled"
+              },
+              {
+                "name": "skf-select-option:select",
+                "description": "{detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled"
+              }
+            ]
+          }
+        },
+        {
+          "name": "skf-select-option",
+          "description": "The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.\n---\n\n\n### **Events:**\n - **skf-select-option:select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.\n\n### **Slots:**\n - _default_ - The option's text content\n- **icon** - The option's slot for icon or custom meta information (svg).",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, prevents interaction with the option",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "icon",
+              "description": "If defined, set an icon",
+              "value": { "type": "SkfIcon['name'] | undefined" }
+            },
+            {
+              "name": "icon-color",
+              "description": "If defined, sets provided color on the icon",
+              "value": { "type": "SeverityFgColor | undefined" }
+            },
+            {
+              "name": "selected",
+              "description": "If true, sets the option as selected",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "short-label",
+              "description": "If defined, sets a short label",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The option's text content" },
+            {
+              "name": "icon",
+              "description": "The option's slot for icon or custom meta information (svg)."
+            }
+          ],
+          "events": [
+            {
+              "name": "skf-select-option:select",
+              "description": "{detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, prevents interaction with the option",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "icon",
+                "description": "If defined, set an icon",
+                "type": "SkfIcon['name'] | undefined"
+              },
+              {
+                "name": "iconColor",
+                "description": "If defined, sets provided color on the icon",
+                "type": "SeverityFgColor | undefined"
+              },
+              {
+                "name": "selected",
+                "description": "If true, sets the option as selected",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "shortLabel",
+                "description": "If defined, sets a short label",
+                "type": "string | undefined"
+              },
+              {
+                "name": "text",
+                "description": "The option's label text (equivalent to the tags textContent)"
+              },
+              {
+                "name": "value",
+                "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text."
+              },
+              { "name": "role", "type": "string" },
+              { "name": "_parent" },
+              { "name": "_shortcutUpdate", "type": "boolean" }
+            ],
+            "events": [
+              {
+                "name": "skf-select-option:select",
+                "description": "{detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected."
+              }
+            ]
+          }
+        },
+        {
+          "name": "skf-select-option-group",
+          "description": "The `<skf-select-option-group>` is a component that groups select-options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "'Default label'" }
             }
           ],
           "slots": [
             { "name": "", "description": "The component's placeholder content" }
           ],
           "events": [],
+          "js": {
+            "properties": [{ "name": "label", "type": "string" }],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, sets disabled state",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "required",
+              "description": "If true, value is required or must be checked for the form to be submittable",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "debug",
+              "description": "If true, outputs helping hints in console",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "checked",
+              "description": "If true, outputs helping hints in console",
+              "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.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "name",
+              "description": "If defined, adds name to the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "required-label",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "size",
+              "description": "Size of the Switch",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the input field",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The Switchs label. Alternatively, you can use the `label` attribute."
+            }
+          ],
+          "events": [],
           "js": {
             "properties": [
               {
@@ -1449,7 +1855,7 @@
               },
               {
                 "name": "label",
-                "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+                "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
                 "type": "string | undefined"
               },
               {
@@ -1476,6 +1882,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",
@@ -1483,19 +2038,19 @@
           "attributes": [
             {
               "name": "size",
-              "description": "Specifies Tag size -",
+              "description": "Specifies Tag size",
               "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }
             },
             {
               "name": "icon",
-              "description": "If defined, displays leading/provided icon -",
+              "description": "If defined, displays leading/provided icon",
               "value": {
                 "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
               }
             },
             {
               "name": "color",
-              "description": "If defined, gives the supplied appearance -",
+              "description": "If defined, gives the supplied appearance",
               "value": {
                 "type": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
               }
@@ -1514,19 +2069,27 @@
             "properties": [
               {
                 "name": "size",
-                "description": "Specifies Tag size -",
+                "description": "Specifies Tag size",
                 "type": "'sm' | 'md' | 'lg'"
               },
               {
                 "name": "icon",
-                "description": "If defined, displays leading/provided icon -",
+                "description": "If defined, displays leading/provided icon",
                 "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
               },
               {
                 "name": "color",
-                "description": "If defined, gives the supplied appearance -",
+                "description": "If defined, gives the supplied appearance",
                 "type": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
               },
+              {
+                "name": "onClick",
+                "description": "If defined, accepts a function that runs on click"
+              },
+              {
+                "name": "onRemove",
+                "description": "If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`."
+              },
               {
                 "name": "removable",
                 "description": "If true, adds trailing button to remove tag",
@@ -1538,7 +2101,7 @@
         },
         {
           "name": "skf-textarea",
-          "description": "The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - **The** - textareas label. Alternatively, you can use the `label` attribute.",
+          "description": "The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - _default_ - The textareas label. Alternatively, you can use the `label` attribute.",
           "doc-url": "",
           "attributes": [
             {
@@ -1553,52 +2116,52 @@
             },
             {
               "name": "cols",
-              "description": "If provided, sets the cols of the textarea",
-              "value": { "type": "number", "default": "20" }
+              "description": "If defined, sets the cols of the textarea",
+              "value": { "type": "number | undefined" }
             },
             {
               "name": "custom-invalid",
-              "description": "If provided, forces component to invalid state until removed. Its value is used as hint text.",
+              "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
               "value": { "type": "string" }
             },
             {
               "name": "debug",
-              "description": "If provided, outputs helping hints in console",
-              "value": { "type": "boolean", "default": "false" }
+              "description": "If true, outputs helping hints in console",
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "hide-label",
-              "description": "hide-label - If true, hides the label visually",
-              "value": { "type": "boolean", "default": "false" }
+              "description": "If true, hides the label visually",
+              "value": { "type": "boolean | undefined" }
             },
             {
               "name": "hint",
-              "description": "If provided, displays informational text below the field",
+              "description": "If defined, displays informational text below the field",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "label",
-              "description": "The input's label. Alternatively, you can use the component slot.",
-              "value": { "type": "string", "default": "'Default label'" }
+              "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
+              "value": { "type": "string | undefined" }
             },
             {
               "name": "name",
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "maxlength",
-              "description": "If provided, sets the maximum character length to accept for this input",
+              "description": "If defined, sets the maximum character length to accept for this input",
               "value": { "type": "number | undefined" }
             },
             {
               "name": "minlength",
-              "description": "If provided, sets the minimum character length to accept for this input",
+              "description": "If defined, sets the minimum character length to accept for this input",
               "value": { "type": "number | undefined" }
             },
             {
               "name": "placeholder",
-              "description": "If provided, displays placeholder text",
+              "description": "If defined, displays placeholder text",
               "value": { "type": "string | undefined" }
             },
             {
@@ -1608,18 +2171,20 @@
             },
             {
               "name": "required-label",
-              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
               "value": { "type": "string | undefined" }
             },
             {
               "name": "rows",
-              "description": "If provided, sets the rows of the textarea",
-              "value": { "type": "number", "default": "2" }
+              "description": "If defined, sets the rows of the textarea",
+              "value": { "type": "number | undefined" }
             },
             {
               "name": "severity",
-              "description": "If provided, displays provided severity state",
-              "value": { "type": "\"success\" | \"error\"" }
+              "description": "If defined, displays provided severity state",
+              "value": {
+                "type": "\"success\" | \"info\" | \"warning\" | \"alert\""
+              }
             },
             {
               "name": "show-valid",
@@ -1628,14 +2193,14 @@
             },
             {
               "name": "size",
-              "description": "If provided, displays an alternative size",
+              "description": "Size of the Textarea",
               "value": { "type": "'sm' | 'md' | undefined", "default": "'md'" }
             },
             {
               "name": "validate-on",
-              "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
+              "description": "Sets validation start",
               "value": {
-                "type": "'input' | 'change' | 'submit' | undefined",
+                "type": "'input' | 'change' | 'submit'",
                 "default": "'change'"
               }
             },
@@ -1647,8 +2212,8 @@
           ],
           "slots": [
             {
-              "name": "The",
-              "description": "textareas label. Alternatively, you can use the `label` attribute."
+              "name": "",
+              "description": "The textareas label. Alternatively, you can use the `label` attribute."
             }
           ],
           "events": [
@@ -1665,51 +2230,51 @@
             "properties": [
               {
                 "name": "cols",
-                "description": "If provided, sets the cols of the textarea",
-                "type": "number"
+                "description": "If defined, sets the cols of the textarea",
+                "type": "number | undefined"
               },
               {
                 "name": "customInvalid",
-                "description": "If provided, forces component to invalid state until removed. Its value is used as hint text."
+                "description": "If defined, forces component to invalid state until removed. Its value is used as hint text."
               },
               {
                 "name": "debug",
-                "description": "If provided, outputs helping hints in console",
-                "type": "boolean"
+                "description": "If true, outputs helping hints in console",
+                "type": "boolean | undefined"
               },
               {
                 "name": "hideLabel",
-                "description": "hide-label - If true, hides the label visually",
-                "type": "boolean"
+                "description": "If true, hides the label visually",
+                "type": "boolean | undefined"
               },
               {
                 "name": "hint",
-                "description": "If provided, displays informational text below the field",
+                "description": "If defined, displays informational text below the field",
                 "type": "string | undefined"
               },
               {
                 "name": "label",
-                "description": "The input's label. Alternatively, you can use the component slot.",
-                "type": "string"
+                "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
+                "type": "string | undefined"
               },
               {
                 "name": "name",
-                "description": "If provided, adds name to the input-element",
+                "description": "If defined, adds name to the input-element",
                 "type": "string | undefined"
               },
               {
                 "name": "maxLength",
-                "description": "If provided, sets the maximum character length to accept for this input",
+                "description": "If defined, sets the maximum character length to accept for this input",
                 "type": "number | undefined"
               },
               {
                 "name": "minLength",
-                "description": "If provided, sets the minimum character length to accept for this input",
+                "description": "If defined, sets the minimum character length to accept for this input",
                 "type": "number | undefined"
               },
               {
                 "name": "placeholder",
-                "description": "If provided, displays placeholder text",
+                "description": "If defined, displays placeholder text",
                 "type": "string | undefined"
               },
               {
@@ -1719,18 +2284,18 @@
               },
               {
                 "name": "requiredLabel",
-                "description": "If provided, renders an alternative A11y text for the asterisk",
+                "description": "If defined, renders an alternative A11y text for the asterisk",
                 "type": "string | undefined"
               },
               {
                 "name": "rows",
-                "description": "If provided, sets the rows of the textarea",
-                "type": "number"
+                "description": "If defined, sets the rows of the textarea",
+                "type": "number | undefined"
               },
               {
                 "name": "severity",
-                "description": "If provided, displays provided severity state",
-                "type": "\"success\" | \"error\""
+                "description": "If defined, displays provided severity state",
+                "type": "\"success\" | \"info\" | \"warning\" | \"alert\""
               },
               {
                 "name": "showValid",
@@ -1739,13 +2304,13 @@
               },
               {
                 "name": "size",
-                "description": "If provided, displays an alternative size",
+                "description": "Size of the Textarea",
                 "type": "'sm' | 'md' | undefined"
               },
               {
                 "name": "validateOn",
-                "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
-                "type": "'input' | 'change' | 'submit' | undefined"
+                "description": "Sets validation start",
+                "type": "'input' | 'change' | 'submit'"
               },
               {
                 "name": "value",
@@ -1764,6 +2329,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": []
+          }
         }
       ]
     }