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

package/dist/custom-elements.json

@@ -8,7 +8,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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.",
+          "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.",
           "name": "SkfAccordion",
           "slots": [
             {
@@ -31,10 +31,10 @@
               "kind": "field",
               "name": "headingAs",
               "type": {
-                "text": "Exclude<HeadingType, 'h1'>"
+                "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               "default": "'h2'",
-              "description": "Controls which heading element will be rendered",
+              "description": "Defines which heading element will be rendered",
               "attribute": "heading-as"
             },
             {
@@ -43,7 +43,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If provided, adds a gap between each item",
+              "description": "If true, adds a gap between each item",
               "attribute": "gap",
               "reflects": true
             },
@@ -102,10 +102,10 @@
             {
               "name": "heading-as",
               "type": {
-                "text": "Exclude<HeadingType, 'h1'>"
+                "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               "default": "'h2'",
-              "description": "Controls which heading element will be rendered",
+              "description": "Defines which heading element will be rendered",
               "fieldName": "headingAs"
             },
             {
@@ -113,7 +113,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If provided, adds a gap between each item",
+              "description": "If true, adds a gap between each item",
               "fieldName": "gap"
             },
             {
@@ -174,7 +174,7 @@
               "name": ""
             },
             {
-              "description": "lodjvodjvodjo",
+              "description": "Slot for the link",
               "name": "link"
             }
           ],
@@ -185,8 +185,9 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If true, alert is being used as a toast with an close button",
-              "attribute": "closeable"
+              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+              "attribute": "closeable",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -211,10 +212,11 @@
               "kind": "field",
               "name": "severity",
               "type": {
-                "text": "SeverityFgColor | undefined"
+                "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
               },
               "description": "If defined, gives the supplied appearance",
-              "attribute": "severity"
+              "attribute": "severity",
+              "reflects": true
             }
           ],
           "events": [
@@ -229,7 +231,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "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",
               "fieldName": "closeable"
             },
             {
@@ -252,7 +254,7 @@
             {
               "name": "severity",
               "type": {
-                "text": "SeverityFgColor | undefined"
+                "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
               },
               "description": "If defined, gives the supplied appearance",
               "fieldName": "severity"
@@ -292,6 +294,24 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
+            },
             {
               "kind": "field",
               "name": "destructive",
@@ -341,6 +361,15 @@
               "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
               "attribute": "loading"
             },
+            {
+              "kind": "field",
+              "name": "noValidate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "no-validate"
+            },
             {
               "kind": "field",
               "name": "size",
@@ -375,13 +404,14 @@
             },
             {
               "kind": "method",
-              "name": "_showLoader",
-              "privacy": "private"
-            },
+              "name": "click",
+              "description": "Simulates a click on the button."
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "_hideLoader",
-              "privacy": "private"
+              "description": "Fires when the button is clicked",
+              "name": "click"
             }
           ],
           "attributes": [
@@ -429,6 +459,14 @@
               "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
               "fieldName": "loading"
             },
+            {
+              "name": "no-validate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "noValidate"
+            },
             {
               "name": "size",
               "type": {
@@ -495,9 +533,8 @@
               "kind": "field",
               "name": "noBorder",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, removes border",
               "attribute": "no-border"
             },
@@ -505,9 +542,8 @@
               "kind": "field",
               "name": "noPadding",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, removes padding",
               "attribute": "no-padding"
             },
@@ -515,38 +551,35 @@
               "kind": "field",
               "name": "stretch",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, the Card fills the parent element height",
-              "attribute": "stretch"
+              "attribute": "stretch",
+              "reflects": true
             }
           ],
           "attributes": [
             {
               "name": "no-border",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, removes border",
               "fieldName": "noBorder"
             },
             {
               "name": "no-padding",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, removes padding",
               "fieldName": "noPadding"
             },
             {
               "name": "stretch",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, the Card fills the parent element height",
               "fieldName": "stretch"
             }
@@ -580,8 +613,8 @@
           "name": "SkfCheckbox",
           "slots": [
             {
-              "description": "Alternatively, you can use the `label` attribute",
-              "name": "Default"
+              "description": "The Radios label. Alternatively, you can use the `label` attribute.",
+              "name": ""
             }
           ],
           "members": [
@@ -611,16 +644,7 @@
                 "text": "boolean | undefined"
               },
               "description": "If true, forces component to invalid state until removed",
-              "attribute": "custom-invalid"
-            },
-            {
-              "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, hides the label visually",
-              "attribute": "hide-label",
+              "attribute": "custom-invalid",
               "reflects": true
             },
             {
@@ -660,22 +684,11 @@
               "description": "If defined, renders an alternative A11y text for the asterisk",
               "attribute": "required-label"
             },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md'"
-              },
-              "default": "'md'",
-              "description": "Size of the checkbox",
-              "attribute": "size",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "severity",
               "type": {
-                "text": "FormFieldBaseProps['severity'] | undefined"
+                "text": "\"alert\" | \"success\" | \"info\" | \"warning\""
               },
               "description": "If defined, styles checkbox using provided severity",
               "attribute": "severity",
@@ -687,9 +700,20 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If defined, displays valid state after interaction",
+              "description": "If true, displays valid state after interaction",
               "attribute": "show-valid"
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md'"
+              },
+              "default": "'md'",
+              "description": "Size of the checkbox",
+              "attribute": "size",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "value",
@@ -702,7 +726,15 @@
             },
             {
               "kind": "method",
-              "name": "debugOutput"
+              "name": "handleInvalidChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDebugInvalid"
+            },
+            {
+              "kind": "method",
+              "name": "handleCustomInvalidChange"
             }
           ],
           "events": [
@@ -750,14 +782,6 @@
               "description": "If true, forces component to invalid state until removed",
               "fieldName": "customInvalid"
             },
-            {
-              "name": "hide-label",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, hides the label visually",
-              "fieldName": "hideLabel"
-            },
             {
               "name": "indeterminate",
               "type": {
@@ -790,19 +814,10 @@
               "description": "If defined, renders an alternative A11y text for the asterisk",
               "fieldName": "requiredLabel"
             },
-            {
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md'"
-              },
-              "default": "'md'",
-              "description": "Size of the checkbox",
-              "fieldName": "size"
-            },
             {
               "name": "severity",
               "type": {
-                "text": "FormFieldBaseProps['severity'] | undefined"
+                "text": "\"alert\" | \"success\" | \"info\" | \"warning\""
               },
               "description": "If defined, styles checkbox using provided severity",
               "fieldName": "severity"
@@ -812,9 +827,18 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If defined, displays valid state after interaction",
+              "description": "If true, displays valid state after interaction",
               "fieldName": "showValid"
             },
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md'"
+              },
+              "default": "'md'",
+              "description": "Size of the checkbox",
+              "fieldName": "size"
+            },
             {
               "name": "value",
               "type": {
@@ -850,7 +874,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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.",
+          "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.",
           "name": "SkfCollapse",
           "slots": [
             {
@@ -863,9 +887,8 @@
               "kind": "field",
               "name": "animated",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, will animate the expand/collapse state",
               "attribute": "animated",
               "reflects": true
@@ -874,9 +897,8 @@
               "kind": "field",
               "name": "expanded",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, will set the collapse to be expanded by default",
               "attribute": "expanded",
               "reflects": true
@@ -894,19 +916,18 @@
               "kind": "field",
               "name": "headingAs",
               "type": {
-                "text": "Exclude<HeadingType, 'h1'>"
+                "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               "default": "'h2'",
-              "description": "Controls which heading element will be rendered",
+              "description": "Defines which heading element will be rendered",
               "attribute": "heading-as"
             },
             {
               "kind": "field",
               "name": "small",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, renders the small version",
               "attribute": "small",
               "reflects": true
@@ -915,9 +936,8 @@
               "kind": "field",
               "name": "truncate",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, will truncate the heading in collapsed state",
               "attribute": "truncate",
               "reflects": true
@@ -946,18 +966,16 @@
             {
               "name": "animated",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, will animate the expand/collapse state",
               "fieldName": "animated"
             },
             {
               "name": "expanded",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, will set the collapse to be expanded by default",
               "fieldName": "expanded"
             },
@@ -972,27 +990,25 @@
             {
               "name": "heading-as",
               "type": {
-                "text": "Exclude<HeadingType, 'h1'>"
+                "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               "default": "'h2'",
-              "description": "Controls which heading element will be rendered",
+              "description": "Defines which heading element will be rendered",
               "fieldName": "headingAs"
             },
             {
               "name": "small",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, renders the small version",
               "fieldName": "small"
             },
             {
               "name": "truncate",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, will truncate the heading in collapsed state",
               "fieldName": "truncate"
             }
@@ -1022,7 +1038,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information.",
+          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information",
           "name": "SkfDivider",
           "cssProperties": [
             {
@@ -1035,6 +1051,14 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
             {
               "kind": "field",
               "name": "color",
@@ -1042,7 +1066,7 @@
                 "text": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
               },
               "default": "'primary'",
-              "description": "If provided, alters the Divider color",
+              "description": "Defines the Divider color",
               "attribute": "color",
               "reflects": true
             },
@@ -1050,9 +1074,8 @@
               "kind": "field",
               "name": "decorative",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
               "attribute": "decorative"
             },
@@ -1060,9 +1083,8 @@
               "kind": "field",
               "name": "vertical",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, renders the divider vertically",
               "attribute": "vertical",
               "reflects": true
@@ -1075,24 +1097,22 @@
                 "text": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
               },
               "default": "'primary'",
-              "description": "If provided, alters the Divider color",
+              "description": "Defines the Divider color",
               "fieldName": "color"
             },
             {
               "name": "decorative",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
               "fieldName": "decorative"
             },
             {
               "name": "vertical",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, renders the divider vertically",
               "fieldName": "vertical"
             }
@@ -1124,15 +1144,21 @@
           "kind": "class",
           "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.",
           "name": "SkfHeading",
+          "slots": [
+            {
+              "description": "The headings content",
+              "name": ""
+            }
+          ],
           "members": [
             {
               "kind": "field",
               "name": "as",
               "type": {
-                "text": "HeadingType"
+                "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               "default": "'h1'",
-              "description": "Controls which heading element will be rendered. Should not be used to affect appearance.",
+              "description": "Controls which heading element will be rendered. Should not be used to affect appearance",
               "attribute": "as",
               "reflects": true
             },
@@ -1140,7 +1166,7 @@
               "kind": "field",
               "name": "styledAs",
               "type": {
-                "text": "HeadingType | undefined"
+                "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               "description": "If provided, changes the appearance of the heading",
               "attribute": "styled-as"
@@ -1150,16 +1176,16 @@
             {
               "name": "as",
               "type": {
-                "text": "HeadingType"
+                "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               "default": "'h1'",
-              "description": "Controls which heading element will be rendered. Should not be used to affect appearance.",
+              "description": "Controls which heading element will be rendered. Should not be used to affect appearance",
               "fieldName": "as"
             },
             {
               "name": "styled-as",
               "type": {
-                "text": "HeadingType | undefined"
+                "text": "\"h1\" | \"h2\" | \"h3\" | \"h4\""
               },
               "description": "If provided, changes the appearance of the heading",
               "fieldName": "styledAs"
@@ -1193,6 +1219,15 @@
           "description": "The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text",
           "name": "SkfIcon",
           "members": [
+            {
+              "kind": "field",
+              "name": "_rootId",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "'root'"
+            },
             {
               "kind": "field",
               "name": "color",
@@ -1200,6 +1235,7 @@
                 "text": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\""
               },
               "default": "'primary'",
+              "description": "Sets the color of the icon",
               "attribute": "color",
               "reflects": true
             },
@@ -1209,7 +1245,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, adds an alternate description to use for assistive devices",
+              "description": "If defined, adds an alternate description to use for assistive devices",
               "attribute": "label"
             },
             {
@@ -1218,6 +1254,7 @@
               "type": {
                 "text": "\"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\""
               },
+              "description": "Name of the icon to display",
               "attribute": "name"
             },
             {
@@ -1227,8 +1264,19 @@
                 "text": "\"xs\" | \"sm\" | \"md\" | \"lg\""
               },
               "default": "'md'",
+              "description": "Size of the icon",
               "attribute": "size",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "renderDecorativeIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "renderInformativeIcon",
+              "privacy": "private"
             }
           ],
           "attributes": [
@@ -1238,6 +1286,7 @@
                 "text": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\""
               },
               "default": "'primary'",
+              "description": "Sets the color of the icon",
               "fieldName": "color"
             },
             {
@@ -1245,7 +1294,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, adds an alternate description to use for assistive devices",
+              "description": "If defined, adds an alternate description to use for assistive devices",
               "fieldName": "label"
             },
             {
@@ -1253,6 +1302,7 @@
               "type": {
                 "text": "\"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\""
               },
+              "description": "Name of the icon to display",
               "fieldName": "name"
             },
             {
@@ -1261,6 +1311,7 @@
                 "text": "\"xs\" | \"sm\" | \"md\" | \"lg\""
               },
               "default": "'md'",
+              "description": "Size of the icon",
               "fieldName": "size"
             }
           ],
@@ -1293,8 +1344,8 @@
           "name": "SkfInput",
           "slots": [
             {
-              "description": " Alternatively, you can use the `label` attribute",
-              "name": "Default"
+              "description": "The Inputs label. Alternatively, you can use the `label` attribute.",
+              "name": ""
             }
           ],
           "members": [
@@ -1306,6 +1357,15 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": ""
+              },
+              "description": "-m  }",
+              "attribute": "autocomplete"
+            },
             {
               "kind": "field",
               "name": "buttonAriaLabelClear",
@@ -1313,7 +1373,7 @@
                 "text": "string"
               },
               "default": "'Clear input'",
-              "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.",
               "attribute": "button-aria-label-clear"
             },
             {
@@ -1323,7 +1383,7 @@
                 "text": "string"
               },
               "default": "'Hide password'",
-              "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.",
               "attribute": "button-aria-label-hide"
             },
             {
@@ -1333,13 +1393,13 @@
                 "text": "string"
               },
               "default": "'Show password'",
-              "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.",
               "attribute": "button-aria-label-show"
             },
             {
               "kind": "field",
               "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.",
               "attribute": "custom-invalid",
               "reflects": true
             },
@@ -1347,19 +1407,17 @@
               "kind": "field",
               "name": "debug",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "If provided, outputs helping hints in console",
+              "description": "If true, outputs helping hints in console",
               "attribute": "debug"
             },
             {
               "kind": "field",
               "name": "hideLabel",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, hides the label visually",
               "attribute": "hide-label"
             },
@@ -1369,7 +1427,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, displays informational text below the field",
+              "description": "If defined, displays informational text below the field",
               "attribute": "hint"
             },
             {
@@ -1379,7 +1437,7 @@
                 "text": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'"
               },
               "default": "'text'",
-              "description": "If provided, tells what keyboard to use if applicable",
+              "description": "Tells what keyboard to use if applicable",
               "attribute": "inputmode"
             },
             {
@@ -1388,7 +1446,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "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.",
               "attribute": "label"
             },
             {
@@ -1397,7 +1455,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, displays a prefix/adornment before the input-element",
+              "description": "If defined, displays a prefix/adornment before the input-element",
               "attribute": "leading"
             },
             {
@@ -1406,7 +1464,7 @@
               "type": {
                 "text": "number | string | undefined"
               },
-              "description": "If provided, sets the maximum value to accept for this input",
+              "description": "If defined, sets the maximum value to accept for this input",
               "attribute": "max"
             },
             {
@@ -1415,7 +1473,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "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",
               "attribute": "maxlength"
             },
             {
@@ -1424,7 +1482,7 @@
               "type": {
                 "text": "number | string | undefined"
               },
-              "description": "If provided, sets the minimum value to accept for this input",
+              "description": "If defined, sets the minimum value to accept for this input",
               "attribute": "min"
             },
             {
@@ -1433,7 +1491,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "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",
               "attribute": "minlength"
             },
             {
@@ -1442,7 +1500,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "attribute": "name"
             },
             {
@@ -1451,7 +1509,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "attribute": "pattern"
             },
             {
@@ -1460,7 +1518,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, displays placeholder text",
+              "description": "If defined, displays placeholder text",
               "attribute": "placeholder"
             },
             {
@@ -1478,17 +1536,18 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
               "attribute": "required-label"
             },
             {
               "kind": "field",
               "name": "severity",
               "type": {
-                "text": "FormFieldBaseProps['severity'] | undefined"
+                "text": "\"alert\" | \"success\" | \"info\" | \"warning\""
               },
-              "description": "If provided, displays provided severity state",
-              "attribute": "severity"
+              "description": "If defined, displays provided severity state",
+              "attribute": "severity",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -1496,17 +1555,17 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If provided, displays provided severity state",
+              "description": "If true, displays valid state after interaction",
               "attribute": "show-valid"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md'"
               },
               "default": "'md'",
-              "description": "If provided, displays an alternative size",
+              "description": "Size of the input",
               "attribute": "size",
               "reflects": true
             },
@@ -1516,27 +1575,27 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, displays a suffix/adornment after the input-element",
+              "description": "If defined, displays a suffix/adornment after the input-element",
               "attribute": "trailing"
             },
             {
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'> | undefined"
+                "text": "'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'"
               },
               "default": "'text'",
-              "description": "If provided, changes the type of form control",
+              "description": "Type of input control",
               "attribute": "type"
             },
             {
               "kind": "field",
               "name": "validateOn",
               "type": {
-                "text": "'input' | 'change' | 'submit' | undefined"
+                "text": "'input' | 'change' | 'submit'"
               },
               "default": "'change'",
-              "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
+              "description": "Sets validation start",
               "attribute": "validate-on"
             },
             {
@@ -1548,16 +1607,6 @@
               "default": "''",
               "description": "The current value of the input field",
               "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "_numberController",
-              "default": "new InputNumberController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "_passwordController",
-              "default": "new InputPasswordController(this)"
             }
           ],
           "events": [
@@ -1585,13 +1634,21 @@
               "description": "If true, value is required or must be checked for the form to be submittable",
               "name": "required"
             },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": ""
+              },
+              "description": "-m  }",
+              "fieldName": "autocomplete"
+            },
             {
               "name": "button-aria-label-clear",
               "type": {
                 "text": "string"
               },
               "default": "'Clear input'",
-              "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.",
               "fieldName": "buttonAriaLabelClear"
             },
             {
@@ -1600,7 +1657,7 @@
                 "text": "string"
               },
               "default": "'Hide password'",
-              "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.",
               "fieldName": "buttonAriaLabelHide"
             },
             {
@@ -1609,29 +1666,27 @@
                 "text": "string"
               },
               "default": "'Show password'",
-              "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.",
               "fieldName": "buttonAriaLabelShow"
             },
             {
               "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.",
               "fieldName": "customInvalid"
             },
             {
               "name": "debug",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "If provided, outputs helping hints in console",
+              "description": "If true, outputs helping hints in console",
               "fieldName": "debug"
             },
             {
               "name": "hide-label",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, hides the label visually",
               "fieldName": "hideLabel"
             },
@@ -1640,7 +1695,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, displays informational text below the field",
+              "description": "If defined, displays informational text below the field",
               "fieldName": "hint"
             },
             {
@@ -1649,7 +1704,7 @@
                 "text": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'"
               },
               "default": "'text'",
-              "description": "If provided, tells what keyboard to use if applicable",
+              "description": "Tells what keyboard to use if applicable",
               "fieldName": "inputmode"
             },
             {
@@ -1657,7 +1712,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "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.",
               "fieldName": "label"
             },
             {
@@ -1665,7 +1720,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, displays a prefix/adornment before the input-element",
+              "description": "If defined, displays a prefix/adornment before the input-element",
               "fieldName": "leading"
             },
             {
@@ -1673,7 +1728,7 @@
               "type": {
                 "text": "number | string | undefined"
               },
-              "description": "If provided, sets the maximum value to accept for this input",
+              "description": "If defined, sets the maximum value to accept for this input",
               "fieldName": "max"
             },
             {
@@ -1681,7 +1736,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "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",
               "fieldName": "maxLength"
             },
             {
@@ -1689,7 +1744,7 @@
               "type": {
                 "text": "number | string | undefined"
               },
-              "description": "If provided, sets the minimum value to accept for this input",
+              "description": "If defined, sets the minimum value to accept for this input",
               "fieldName": "min"
             },
             {
@@ -1697,7 +1752,7 @@
               "type": {
                 "text": "number | undefined"
               },
-              "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",
               "fieldName": "minLength"
             },
             {
@@ -1705,7 +1760,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "fieldName": "name"
             },
             {
@@ -1713,7 +1768,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "fieldName": "pattern"
             },
             {
@@ -1721,7 +1776,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, displays placeholder text",
+              "description": "If defined, displays placeholder text",
               "fieldName": "placeholder"
             },
             {
@@ -1737,15 +1792,15 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
               "fieldName": "requiredLabel"
             },
             {
               "name": "severity",
               "type": {
-                "text": "FormFieldBaseProps['severity'] | undefined"
+                "text": "\"alert\" | \"success\" | \"info\" | \"warning\""
               },
-              "description": "If provided, displays provided severity state",
+              "description": "If defined, displays provided severity state",
               "fieldName": "severity"
             },
             {
@@ -1753,16 +1808,16 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If provided, displays provided severity state",
+              "description": "If true, displays valid state after interaction",
               "fieldName": "showValid"
             },
             {
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md'"
               },
               "default": "'md'",
-              "description": "If provided, displays an alternative size",
+              "description": "Size of the input",
               "fieldName": "size"
             },
             {
@@ -1770,25 +1825,25 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, displays a suffix/adornment after the input-element",
+              "description": "If defined, displays a suffix/adornment after the input-element",
               "fieldName": "trailing"
             },
             {
               "name": "type",
               "type": {
-                "text": "Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'> | undefined"
+                "text": "'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week'"
               },
               "default": "'text'",
-              "description": "If provided, changes the type of form control",
+              "description": "Type of input control",
               "fieldName": "type"
             },
             {
               "name": "validate-on",
               "type": {
-                "text": "'input' | 'change' | 'submit' | undefined"
+                "text": "'input' | 'change' | 'submit'"
               },
               "default": "'change'",
-              "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
+              "description": "Sets validation start",
               "fieldName": "validateOn"
             },
             {
@@ -1830,9 +1885,6 @@
           "name": "SkfLink",
           "slots": [
             {
-              "type": {
-                "text": "string"
-              },
               "description": "The links' main content",
               "name": ""
             }
@@ -1853,7 +1905,7 @@
                 "text": "'button' | 'a'"
               },
               "default": "'a'",
-              "description": "Specifies semantic element to render -",
+              "description": "Defines the semantic element to render",
               "attribute": "as",
               "reflects": true
             },
@@ -1864,6 +1916,7 @@
                 "text": "'primary' | 'inverse'"
               },
               "default": "'primary'",
+              "description": "Defines the text-color",
               "attribute": "color",
               "reflects": true
             },
@@ -1883,7 +1936,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, downloads the url",
+              "description": "If defined, downloads the url",
               "attribute": "download"
             },
             {
@@ -1892,7 +1945,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, loads url on click",
+              "description": "If defined, loads url on click",
               "attribute": "href",
               "reflects": true
             },
@@ -1902,7 +1955,7 @@
               "type": {
                 "text": "\"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\""
               },
-              "description": "If provided, renders an icon before or after the text",
+              "description": "If defined, renders an icon before or after the text",
               "attribute": "icon"
             },
             {
@@ -1912,7 +1965,7 @@
                 "text": "'left' | 'right'"
               },
               "default": "'left'",
-              "description": "Position of the icon in relation to the text -",
+              "description": "Defines the position of the icon in relation to the text",
               "attribute": "icon-placement",
               "reflects": true
             },
@@ -1923,7 +1976,7 @@
                 "text": "string"
               },
               "default": "'noreferrer noopener'",
-              "description": "Specifies the relationship of the target object to the link object -",
+              "description": "Defines the relationship of the target object to the link object",
               "attribute": "rel"
             },
             {
@@ -1932,7 +1985,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, used on conjunction with onClick property, second argument",
+              "description": "If defined, used on conjunction with onClick property, second argument",
               "attribute": "route",
               "reflects": true
             },
@@ -1952,7 +2005,7 @@
               "type": {
                 "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
               },
-              "description": "If provided, specifies where to open the linked document",
+              "description": "If defined, specifies where to open the linked document",
               "attribute": "target"
             },
             {
@@ -1962,7 +2015,7 @@
                 "text": "'button' | 'submit' | 'reset'"
               },
               "default": "'button'",
-              "description": "Type of button -",
+              "description": "Defines the type of button",
               "attribute": "type"
             },
             {
@@ -1981,7 +2034,7 @@
                 "text": "'button' | 'a'"
               },
               "default": "'a'",
-              "description": "Specifies semantic element to render -",
+              "description": "Defines the semantic element to render",
               "fieldName": "as"
             },
             {
@@ -1990,6 +2043,7 @@
                 "text": "'primary' | 'inverse'"
               },
               "default": "'primary'",
+              "description": "Defines the text-color",
               "fieldName": "color"
             },
             {
@@ -2005,7 +2059,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, downloads the url",
+              "description": "If defined, downloads the url",
               "fieldName": "download"
             },
             {
@@ -2013,7 +2067,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, loads url on click",
+              "description": "If defined, loads url on click",
               "fieldName": "href"
             },
             {
@@ -2021,7 +2075,7 @@
               "type": {
                 "text": "\"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\""
               },
-              "description": "If provided, renders an icon before or after the text",
+              "description": "If defined, renders an icon before or after the text",
               "fieldName": "icon"
             },
             {
@@ -2030,7 +2084,7 @@
                 "text": "'left' | 'right'"
               },
               "default": "'left'",
-              "description": "Position of the icon in relation to the text -",
+              "description": "Defines the position of the icon in relation to the text",
               "fieldName": "iconPlacement"
             },
             {
@@ -2039,7 +2093,7 @@
                 "text": "string"
               },
               "default": "'noreferrer noopener'",
-              "description": "Specifies the relationship of the target object to the link object -",
+              "description": "Defines the relationship of the target object to the link object",
               "fieldName": "rel"
             },
             {
@@ -2047,7 +2101,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, used on conjunction with onClick property, second argument",
+              "description": "If defined, used on conjunction with onClick property, second argument",
               "fieldName": "route"
             },
             {
@@ -2063,7 +2117,7 @@
               "type": {
                 "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
               },
-              "description": "If provided, specifies where to open the linked document",
+              "description": "If defined, specifies where to open the linked document",
               "fieldName": "target"
             },
             {
@@ -2072,7 +2126,7 @@
                 "text": "'button' | 'submit' | 'reset'"
               },
               "default": "'button'",
-              "description": "Type of button -",
+              "description": "Defines the type of button",
               "fieldName": "type"
             }
           ],
@@ -2101,9 +2155,17 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities.",
+          "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities",
           "name": "SkfLoader",
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
             {
               "kind": "field",
               "name": "ariaLabel",
@@ -2111,6 +2173,7 @@
                 "text": "string"
               },
               "default": "'Loading...'",
+              "description": "Defines the aria-label",
               "attribute": "aria-label",
               "reflects": true
             },
@@ -2118,9 +2181,8 @@
               "kind": "field",
               "name": "invert",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, inverts the color (to be used on colored backgrounds)",
               "attribute": "invert"
             },
@@ -2131,9 +2193,25 @@
                 "text": "'md' | 'sm' | undefined"
               },
               "default": "'md'",
-              "description": "If provided, displays an alternative size",
+              "description": "Defines the size of the loader",
               "attribute": "size",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'progressbar'"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLive",
+              "type": {
+                "text": "string"
+              },
+              "default": "'polite'"
             }
           ],
           "attributes": [
@@ -2143,14 +2221,14 @@
                 "text": "string"
               },
               "default": "'Loading...'",
+              "description": "Defines the aria-label",
               "fieldName": "ariaLabel"
             },
             {
               "name": "invert",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
               "description": "If true, inverts the color (to be used on colored backgrounds)",
               "fieldName": "invert"
             },
@@ -2160,7 +2238,7 @@
                 "text": "'md' | 'sm' | undefined"
               },
               "default": "'md'",
-              "description": "If provided, displays an alternative size",
+              "description": "Defines the size of the loader",
               "fieldName": "size"
             }
           ],
@@ -2205,7 +2283,7 @@
                 "text": "string"
               },
               "default": "'SKF logotype'",
-              "description": "The title of the logo",
+              "description": "Defines the title of the logo",
               "attribute": "title"
             },
             {
@@ -2215,7 +2293,7 @@
                 "text": "\"primary\" | \"secondary\" | \"inverse\""
               },
               "default": "'primary'",
-              "description": "If provided, sets color of the logo",
+              "description": "If defined, sets color of the logo",
               "attribute": "color"
             }
           ],
@@ -2226,7 +2304,7 @@
                 "text": "string"
               },
               "default": "'SKF logotype'",
-              "description": "The title of the logo",
+              "description": "Defines the title of the logo",
               "fieldName": "title"
             },
             {
@@ -2235,7 +2313,7 @@
                 "text": "\"primary\" | \"secondary\" | \"inverse\""
               },
               "default": "'primary'",
-              "description": "If provided, sets color of the logo",
+              "description": "If defined, sets color of the logo",
               "fieldName": "color"
             }
           ],
@@ -2258,6 +2336,102 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/progress/progress.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar",
+          "name": "SkfProgress",
+          "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "animated",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, the progress-bar's fill value is animated",
+              "attribute": "animated",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Describes how much work the task indicated by the progress element requires",
+              "attribute": "max"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Specifies how much of the task that has been completed",
+              "attribute": "value"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "animated",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, the progress-bar's fill value is animated",
+              "fieldName": "animated"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Describes how much work the task indicated by the progress element requires",
+              "fieldName": "max"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Specifies how much of the task that has been completed",
+              "fieldName": "value"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-progress",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfProgress",
+          "declaration": {
+            "name": "SkfProgress",
+            "module": "src/components/progress/progress.component.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/radio/radio.component.ts",
@@ -2268,19 +2442,27 @@
           "name": "SkfRadio",
           "slots": [
             {
-              "description": " Alternatively, you can use the `label` attribute",
-              "name": "Default"
+              "description": "The radios label. Alternatively, you can use the `label` attribute.",
+              "name": ""
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "_initialChecked",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "debug",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "If provided, outputs helping hints in console",
+              "description": "If true, outputs helping hints in console",
               "attribute": "debug"
             },
             {
@@ -2302,24 +2484,13 @@
               "description": "If true, forces component to invalid state until removed",
               "attribute": "custom-invalid"
             },
-            {
-              "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, hides the label visually",
-              "attribute": "hide-label",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "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.",
               "attribute": "label"
             },
             {
@@ -2328,7 +2499,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "attribute": "name"
             },
             {
@@ -2337,17 +2508,17 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
               "attribute": "required-label"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md'"
               },
               "default": "'md'",
-              "description": "If provided, displays an alternative size",
+              "description": "Size of the Radio",
               "attribute": "size",
               "reflects": true
             },
@@ -2355,11 +2526,10 @@
               "kind": "field",
               "name": "severity",
               "type": {
-                "text": "FormFieldBaseProps['severity'] | undefined"
+                "text": "\"success\" | \"info\" | \"warning\" | \"alert\""
               },
-              "description": "If provided, displays provided severity state",
-              "attribute": "severity",
-              "reflects": true
+              "description": "If defined, displays provided severity state",
+              "attribute": "severity"
             },
             {
               "kind": "field",
@@ -2367,7 +2537,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If provided, displays valid state after interaction",
+              "description": "If true, displays valid state after interaction",
               "attribute": "show-valid"
             },
             {
@@ -2382,7 +2552,19 @@
             },
             {
               "kind": "method",
-              "name": "debugOutput"
+              "name": "handleInvalidChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDebugInvalid"
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChanged"
+            },
+            {
+              "kind": "method",
+              "name": "handleCustomInvalidChange"
             }
           ],
           "events": [
@@ -2409,10 +2591,9 @@
             {
               "name": "debug",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "If provided, outputs helping hints in console",
+              "description": "If true, outputs helping hints in console",
               "fieldName": "debug"
             },
             {
@@ -2431,21 +2612,12 @@
               "description": "If true, forces component to invalid state until removed",
               "fieldName": "customInvalid"
             },
-            {
-              "name": "hide-label",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, hides the label visually",
-              "fieldName": "hideLabel"
-            },
             {
               "name": "label",
               "type": {
                 "text": "string | undefined"
               },
-              "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.",
               "fieldName": "label"
             },
             {
@@ -2453,7 +2625,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "fieldName": "name"
             },
             {
@@ -2461,24 +2633,24 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
               "fieldName": "requiredLabel"
             },
             {
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md'"
               },
               "default": "'md'",
-              "description": "If provided, displays an alternative size",
+              "description": "Size of the Radio",
               "fieldName": "size"
             },
             {
               "name": "severity",
               "type": {
-                "text": "FormFieldBaseProps['severity'] | undefined"
+                "text": "\"success\" | \"info\" | \"warning\" | \"alert\""
               },
-              "description": "If provided, displays provided severity state",
+              "description": "If defined, displays provided severity state",
               "fieldName": "severity"
             },
             {
@@ -2486,7 +2658,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If provided, displays valid state after interaction",
+              "description": "If true, displays valid state after interaction",
               "fieldName": "showValid"
             },
             {
@@ -2520,37 +2692,38 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/switch/switch.component.ts",
+      "path": "src/components/select/select.component.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `<skf-switch>` is a component that displays a list of actions or options",
-          "name": "SkfSwitch",
+          "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.",
+          "name": "SkfSelect",
           "slots": [
             {
-              "description": "The component's placeholder content",
+              "description": "The select's placeholder content",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "debug",
+              "name": "buttonLabel",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "If true, outputs helping hints in console",
-              "attribute": "debug"
+              "default": "'Select an option'",
+              "description": "Sets the first visible text on the component",
+              "attribute": "button-label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "customInvalid",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "If true, outputs helping hints in console",
-              "attribute": "checked",
-              "reflects": true
+              "description": "If defined, forces component to invalid state until removed",
+              "attribute": "custom-invalid"
             },
             {
               "kind": "field",
@@ -2559,115 +2732,245 @@
                 "text": "boolean | undefined"
               },
               "description": "If true, hides the label visually",
-              "attribute": "hide-label",
-              "reflects": true
+              "attribute": "hide-label"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "hideTags",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
-              "attribute": "label"
+              "description": "If true and mulltiple is true, no tags are displayed under the select",
+              "attribute": "hide-tags",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, adds name to the input-element",
-              "attribute": "name"
+              "description": "If defined, sets the hint text under the select component in the form",
+              "attribute": "hint"
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "If defined, renders an alternative A11y text for the asterisk",
-              "attribute": "required-label"
+              "name": "selectedValues",
+              "description": "A readonly property that returns the selected value(s) in a array"
             },
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'sm' | 'md'"
-              },
-              "default": "'md'",
-              "description": "Size of the Switch",
-              "attribute": "size",
-              "reflects": true
+              "name": "selectedOptionsText",
+              "description": "A readonly property that returns the selected slot(s) text content in a array"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The current value of the input field",
-              "attribute": "value"
+              "description": "If defined, displays provided label",
+              "attribute": "label",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "debugOutput"
-            }
-          ],
-          "attributes": [
-            {
+              "kind": "field",
+              "name": "max",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "description": "If true, sets disabled state",
-              "name": "disabled"
+              "description": "If defined, limits the number of selectable options",
+              "attribute": "max"
             },
             {
+              "kind": "field",
+              "name": "min",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "description": "If true, value is required or must be checked for the form to be submittable",
-              "name": "required"
+              "description": "If defined, sets the minimum number of required options",
+              "attribute": "min"
             },
             {
-              "name": "debug",
+              "kind": "field",
+              "name": "multiple",
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If true, outputs helping hints in console",
-              "fieldName": "debug"
+              "description": "If true, allows for multiple options to be selected",
+              "attribute": "multiple",
+              "reflects": true
             },
             {
-              "name": "checked",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "If true, outputs helping hints in console",
-              "fieldName": "checked"
+              "description": "If defined, set name of the component",
+              "attribute": "name"
             },
             {
-              "name": "hide-label",
+              "kind": "field",
+              "name": "requiredLabel",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "If true, hides the label visually",
-              "fieldName": "hideLabel"
+              "description": "If defined, renders an alternative A11y text for the asterisk",
+              "attribute": "required-label"
             },
             {
-              "name": "label",
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "FormFieldBaseProps['severity'] | undefined"
+              },
+              "description": "If defined, displays provided severity state",
+              "attribute": "severity"
+            },
+            {
+              "kind": "field",
+              "name": "showValid",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, displays valid state after interaction",
+              "attribute": "show-valid"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md'"
+              },
+              "default": "'md'",
+              "description": "Size of the Select",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "Read only, returns the selected value. (if multiple: in a comma separated string)"
+            },
+            {
+              "kind": "field",
+              "name": "_selectedOptions",
+              "type": {
+                "text": "array"
+              },
+              "default": "[]"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired when the selected option(s) changes",
+              "name": "change"
+            },
+            {
+              "description": "Fired when the select is invalid",
+              "name": "invalid"
+            },
+            {
+              "description": "Fired when the form is reset",
+              "name": "reset"
+            },
+            {
+              "description": "{detail: {expanded: boolean}} Fired when the select dropdown is toggled",
+              "name": "skf-select:dropdown"
+            },
+            {
+              "description": "{detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled",
+              "name": "skf-select-option:select"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the select is disabled\t`default: false`",
+              "name": "disabled"
+            },
+            {
+              "name": "button-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Select an option'",
+              "description": "Sets the first visible text on the component",
+              "fieldName": "buttonLabel"
+            },
+            {
+              "name": "custom-invalid",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+              "description": "If defined, forces component to invalid state until removed",
+              "fieldName": "customInvalid"
+            },
+            {
+              "name": "hide-label",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, hides the label visually",
+              "fieldName": "hideLabel"
+            },
+            {
+              "name": "hide-tags",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true and mulltiple is true, no tags are displayed under the select",
+              "fieldName": "hideTags"
+            },
+            {
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, sets the hint text under the select component in the form",
+              "fieldName": "hint"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, displays provided label",
               "fieldName": "label"
             },
+            {
+              "name": "max",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, limits the number of selectable options",
+              "fieldName": "max"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, sets the minimum number of required options",
+              "fieldName": "min"
+            },
+            {
+              "name": "multiple",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, allows for multiple options to be selected",
+              "fieldName": "multiple"
+            },
             {
               "name": "name",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, adds name to the input-element",
+              "description": "If defined, set name of the component",
               "fieldName": "name"
             },
             {
@@ -2679,229 +2982,348 @@
               "fieldName": "requiredLabel"
             },
             {
-              "name": "size",
+              "name": "severity",
               "type": {
-                "text": "'sm' | 'md'"
+                "text": "FormFieldBaseProps['severity'] | undefined"
               },
-              "default": "'md'",
-              "description": "Size of the Switch",
-              "fieldName": "size"
+              "description": "If defined, displays provided severity state",
+              "fieldName": "severity"
             },
             {
-              "name": "value",
+              "name": "show-valid",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The current value of the input field",
-              "fieldName": "value"
+              "description": "If true, displays valid state after interaction",
+              "fieldName": "showValid"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md'"
+              },
+              "default": "'md'",
+              "description": "Size of the Select",
+              "fieldName": "size"
             }
           ],
           "superclass": {
             "name": "FormBase",
             "package": "@internal/components/formBase.js"
           },
-          "tagName": "skf-switch",
+          "tagName": "skf-select",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SkfSwitch",
+          "name": "SkfSelect",
           "declaration": {
-            "name": "SkfSwitch",
-            "module": "src/components/switch/switch.component.ts"
+            "name": "SkfSelect",
+            "module": "src/components/select/select.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/tag/tag.component.ts",
+      "path": "src/components/select-option/select-option.component.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `<skf-tag>` is a component that displays a list of actions or options",
-          "name": "SkfTag",
+          "description": "The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.",
+          "name": "SkfSelectOption",
           "slots": [
             {
-              "description": "The component's placeholder content",
+              "description": "The option's text content",
               "name": ""
+            },
+            {
+              "description": "The option's slot for icon or custom meta information (svg).",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "size",
+              "name": "shadowRootOptions",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "object"
               },
-              "default": "'md'",
-              "description": "Specifies Tag size -",
-              "attribute": "size",
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, prevents interaction with the option",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
               "name": "icon",
               "type": {
-                "text": "\"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\""
+                "text": "SkfIcon['name'] | undefined"
               },
-              "description": "If defined, displays leading/provided icon -",
-              "attribute": "icon"
+              "description": "If defined, set an icon",
+              "attribute": "icon",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "iconColor",
               "type": {
-                "text": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
+                "text": "SeverityFgColor | undefined"
               },
-              "description": "If defined, gives the supplied appearance -",
-              "attribute": "color",
+              "description": "If defined, sets provided color on the icon",
+              "attribute": "icon-color",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "removable",
+              "name": "selected",
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If true, adds trailing button to remove tag",
-              "attribute": "removable"
+              "description": "If true, sets the option as selected",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "shortLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, sets a short label",
+              "attribute": "short-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "text",
+              "description": "The option's label text (equivalent to the tags textContent)"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'option'"
+            },
+            {
+              "kind": "field",
+              "name": "_parent"
+            },
+            {
+              "kind": "field",
+              "name": "_shortcutUpdate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            }
+          ],
+          "events": [
+            {
+              "description": "{detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.",
+              "name": "skf-select-option:select"
             }
           ],
           "attributes": [
             {
-              "name": "size",
+              "name": "disabled",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "boolean | undefined"
               },
-              "default": "'md'",
-              "description": "Specifies Tag size -",
-              "fieldName": "size"
+              "description": "If true, prevents interaction with the option",
+              "fieldName": "disabled"
             },
             {
               "name": "icon",
               "type": {
-                "text": "\"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\""
+                "text": "SkfIcon['name'] | undefined"
               },
-              "description": "If defined, displays leading/provided icon -",
+              "description": "If defined, set an icon",
               "fieldName": "icon"
             },
             {
-              "name": "color",
+              "name": "icon-color",
               "type": {
-                "text": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
+                "text": "SeverityFgColor | undefined"
               },
-              "description": "If defined, gives the supplied appearance -",
-              "fieldName": "color"
+              "description": "If defined, sets provided color on the icon",
+              "fieldName": "iconColor"
             },
             {
-              "name": "removable",
+              "name": "selected",
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "If true, adds trailing button to remove tag",
-              "fieldName": "removable"
+              "description": "If true, sets the option as selected",
+              "fieldName": "selected"
+            },
+            {
+              "name": "short-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, sets a short label",
+              "fieldName": "shortLabel"
+            },
+            {
+              "name": "value",
+              "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text.",
+              "fieldName": "value"
             }
           ],
           "superclass": {
             "name": "SkfElement",
-            "package": "@internal/components/skf-element"
+            "package": "@internal/components/skf-element.js"
           },
-          "tagName": "skf-tag",
+          "tagName": "skf-select-option",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SkfTag",
+          "name": "SkfSelectOption",
           "declaration": {
-            "name": "SkfTag",
-            "module": "src/components/tag/tag.component.ts"
+            "name": "SkfSelectOption",
+            "module": "src/components/select-option/select-option.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/textarea/textarea.component.ts",
+      "path": "src/components/select-option-group/select-option-group.component.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.",
-          "name": "SkfTextArea",
+          "description": "The `<skf-select-option-group>` is a component that groups select-options",
+          "name": "SkfSelectOptionGroup",
           "slots": [
             {
-              "description": "textareas label. Alternatively, you can use the `label` attribute.",
-              "name": "The"
+              "description": "The component's placeholder content",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "customError",
+              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "privacy": "private"
-            },
+              "default": "'Default label'",
+              "attribute": "label",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "cols",
+              "name": "label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "20",
-              "description": "If provided, sets the cols of the textarea",
-              "attribute": "cols"
-            },
+              "default": "'Default label'",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-select-option-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfSelectOptionGroup",
+          "declaration": {
+            "name": "SkfSelectOptionGroup",
+            "module": "src/components/select-option-group/select-option-group.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/switch/switch.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-switch>` is a component that displays a list of actions or options",
+          "name": "SkfSwitch",
+          "slots": [
+            {
+              "description": "The Switchs label. Alternatively, you can use the `label` attribute.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "customInvalid",
-              "description": "If provided, forces component to invalid state until removed. Its value is used as hint text.",
-              "attribute": "custom-invalid",
-              "reflects": true
+              "name": "_initialChecked",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
               "name": "debug",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "If provided, outputs helping hints in console",
+              "description": "If true, outputs helping hints in console",
               "attribute": "debug"
             },
             {
               "kind": "field",
-              "name": "hideLabel",
+              "name": "checked",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "hide-label - If true, hides the label visually",
-              "attribute": "hide-label"
+              "description": "If true, outputs helping hints in console",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hint",
+              "name": "hideLabel",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "If provided, displays informational text below the field",
-              "attribute": "hint"
+              "description": "If true, hides the label visually",
+              "attribute": "hide-label",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Default label'",
-              "description": "The input's label. Alternatively, you can use the component slot.",
+              "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
               "attribute": "label"
             },
             {
@@ -2910,103 +3332,29 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "attribute": "name"
             },
-            {
-              "kind": "field",
-              "name": "maxLength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "If provided, sets the maximum character length to accept for this input",
-              "attribute": "maxlength"
-            },
-            {
-              "kind": "field",
-              "name": "minLength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "If provided, sets the minimum character length to accept for this input",
-              "attribute": "minlength"
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "If provided, displays placeholder text",
-              "attribute": "placeholder"
-            },
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
-              "attribute": "readonly"
-            },
             {
               "kind": "field",
               "name": "requiredLabel",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
               "attribute": "required-label"
             },
-            {
-              "kind": "field",
-              "name": "rows",
-              "type": {
-                "text": "number"
-              },
-              "default": "2",
-              "description": "If provided, sets the rows of the textarea",
-              "attribute": "rows"
-            },
-            {
-              "kind": "field",
-              "name": "severity",
-              "type": {
-                "text": "\"success\" | \"error\""
-              },
-              "description": "If provided, displays provided severity state",
-              "attribute": "severity"
-            },
-            {
-              "kind": "field",
-              "name": "showValid",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, displays valid state after interaction",
-              "attribute": "show-valid"
-            },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md'"
               },
               "default": "'md'",
-              "description": "If provided, displays an alternative size",
+              "description": "Size of the Switch",
               "attribute": "size",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "validateOn",
-              "type": {
-                "text": "'input' | 'change' | 'submit' | undefined"
-              },
-              "default": "'change'",
-              "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
-              "attribute": "validate-on"
-            },
             {
               "kind": "field",
               "name": "value",
@@ -3014,18 +3362,12 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The current value of the text area",
+              "description": "The current value of the input field",
               "attribute": "value"
-            }
-          ],
-          "events": [
-            {
-              "description": "Fires when the value of the input changes",
-              "name": "change"
             },
             {
-              "description": "Fires when the input is invalid",
-              "name": "invalid"
+              "kind": "method",
+              "name": "debugOutput"
             }
           ],
           "attributes": [
@@ -3043,53 +3385,36 @@
               "description": "If true, value is required or must be checked for the form to be submittable",
               "name": "required"
             },
-            {
-              "name": "cols",
-              "type": {
-                "text": "number"
-              },
-              "default": "20",
-              "description": "If provided, sets the cols of the textarea",
-              "fieldName": "cols"
-            },
-            {
-              "name": "custom-invalid",
-              "description": "If provided, forces component to invalid state until removed. Its value is used as hint text.",
-              "fieldName": "customInvalid"
-            },
             {
               "name": "debug",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "If provided, outputs helping hints in console",
+              "description": "If true, outputs helping hints in console",
               "fieldName": "debug"
             },
             {
-              "name": "hide-label",
+              "name": "checked",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "hide-label - If true, hides the label visually",
-              "fieldName": "hideLabel"
+              "description": "If true, outputs helping hints in console",
+              "fieldName": "checked"
             },
             {
-              "name": "hint",
+              "name": "hide-label",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "If provided, displays informational text below the field",
-              "fieldName": "hint"
+              "description": "If true, hides the label visually",
+              "fieldName": "hideLabel"
             },
             {
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Default label'",
-              "description": "The input's label. Alternatively, you can use the component slot.",
+              "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
               "fieldName": "label"
             },
             {
@@ -3097,99 +3422,33 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, adds name to the input-element",
+              "description": "If defined, adds name to the input-element",
               "fieldName": "name"
             },
-            {
-              "name": "maxlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "If provided, sets the maximum character length to accept for this input",
-              "fieldName": "maxLength"
-            },
-            {
-              "name": "minlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "If provided, sets the minimum character length to accept for this input",
-              "fieldName": "minLength"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "If provided, displays placeholder text",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
-              "fieldName": "readonly"
-            },
             {
               "name": "required-label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
               "fieldName": "requiredLabel"
             },
-            {
-              "name": "rows",
-              "type": {
-                "text": "number"
-              },
-              "default": "2",
-              "description": "If provided, sets the rows of the textarea",
-              "fieldName": "rows"
-            },
-            {
-              "name": "severity",
-              "type": {
-                "text": "\"success\" | \"error\""
-              },
-              "description": "If provided, displays provided severity state",
-              "fieldName": "severity"
-            },
-            {
-              "name": "show-valid",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, displays valid state after interaction",
-              "fieldName": "showValid"
-            },
             {
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md'"
               },
               "default": "'md'",
-              "description": "If provided, displays an alternative size",
+              "description": "Size of the Switch",
               "fieldName": "size"
             },
-            {
-              "name": "validate-on",
-              "type": {
-                "text": "'input' | 'change' | 'submit' | undefined"
-              },
-              "default": "'change'",
-              "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
-              "fieldName": "validateOn"
-            },
             {
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The current value of the text area",
+              "description": "The current value of the input field",
               "fieldName": "value"
             }
           ],
@@ -3197,20 +3456,1291 @@
             "name": "FormBase",
             "package": "@internal/components/formBase.js"
           },
-          "tagName": "skf-textarea",
+          "tagName": "skf-switch",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SkfTextArea",
+          "name": "SkfSwitch",
           "declaration": {
-            "name": "SkfTextArea",
+            "name": "SkfSwitch",
+            "module": "src/components/switch/switch.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/tab/tab.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-tab>` is a component that displays a list of actions or options",
+          "name": "SkfTab",
+          "slots": [
+            {
+              "description": "The tab's label",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "panel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
+              "attribute": "panel",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SkfTabGroup['variant']"
+              },
+              "default": "'expanded'"
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'tab'"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "{detail: { selected: true, tab: SkfTab }} Fires when the tab is selected",
+              "name": "skf-tab-select"
+            },
+            {
+              "description": "Fired when the component is clicked",
+              "name": "click"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "panel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
+              "fieldName": "panel"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-tab",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfTab",
+          "declaration": {
+            "name": "SkfTab",
+            "module": "src/components/tab/tab.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/tab-group/tab-group.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-tab-group>` is a component that displays a list of actions or options.",
+          "name": "SkfTabGroup",
+          "slots": [
+            {
+              "description": "Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements",
+              "name": ""
+            },
+            {
+              "description": "Used for grouping tabs in the tab group. Must be <skf-tab> elements",
+              "name": "tabs"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "defaultSelected",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Sets the default selected tab",
+              "attribute": "default-selected"
+            },
+            {
+              "kind": "field",
+              "name": "noBorder",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, removes border",
+              "attribute": "no-border"
+            },
+            {
+              "kind": "field",
+              "name": "noPadding",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, removes padding",
+              "attribute": "no-padding"
+            },
+            {
+              "kind": "field",
+              "name": "stretch",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, component fills the parent element height",
+              "attribute": "stretch"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'compressed' | 'expanded'"
+              },
+              "default": "'expanded'",
+              "description": "Sets the appearance of the tabs",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "default-selected",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Sets the default selected tab",
+              "fieldName": "defaultSelected"
+            },
+            {
+              "name": "no-border",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, removes border",
+              "fieldName": "noBorder"
+            },
+            {
+              "name": "no-padding",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, removes padding",
+              "fieldName": "noPadding"
+            },
+            {
+              "name": "stretch",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, component fills the parent element height",
+              "fieldName": "stretch"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'compressed' | 'expanded'"
+              },
+              "default": "'expanded'",
+              "description": "Sets the appearance of the tabs",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-tab-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfTabGroup",
+          "declaration": {
+            "name": "SkfTabGroup",
+            "module": "src/components/tab-group/tab-group.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/tab-panel/tab-panel.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-tab-panel>` is a component that displays a list of actions or options.",
+          "name": "SkfTabPanel",
+          "slots": [
+            {
+              "description": "The tab panel's content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tab panel's name.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'tabpanel'"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tab panel's name.",
+              "fieldName": "name"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-tab-panel",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfTabPanel",
+          "declaration": {
+            "name": "SkfTabPanel",
+            "module": "src/components/tab-panel/tab-panel.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/tag/tag.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-tag>` is a component that displays a list of actions or options",
+          "name": "SkfTag",
+          "slots": [
+            {
+              "description": "The component's placeholder content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_onClick",
+              "type": {
+                "text": "(event: Event) => void | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onRemove",
+              "type": {
+                "text": "(event: Event) => void | undefined"
+              },
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
+              "default": "'md'",
+              "description": "Specifies Tag size",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "\"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\""
+              },
+              "description": "If defined, displays leading/provided icon",
+              "attribute": "icon"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
+              },
+              "description": "If defined, gives the supplied appearance",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "onClick",
+              "description": "If defined, accepts a function that runs on click"
+            },
+            {
+              "kind": "field",
+              "name": "onRemove",
+              "description": "If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`."
+            },
+            {
+              "kind": "field",
+              "name": "removable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, adds trailing button to remove tag",
+              "attribute": "removable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_handleKeyDown",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "_handleRemove",
+              "privacy": "protected",
+              "description": "run externally provided callback (if any) first. Let click propagate to handleClick."
+            },
+            {
+              "kind": "field",
+              "name": "_handleClick",
+              "privacy": "protected"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | 'lg'"
+              },
+              "default": "'md'",
+              "description": "Specifies Tag size",
+              "fieldName": "size"
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "\"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\""
+              },
+              "description": "If defined, displays leading/provided icon",
+              "fieldName": "icon"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
+              },
+              "description": "If defined, gives the supplied appearance",
+              "fieldName": "color"
+            },
+            {
+              "name": "removable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, adds trailing button to remove tag",
+              "fieldName": "removable"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-tag",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfTag",
+          "declaration": {
+            "name": "SkfTag",
+            "module": "src/components/tag/tag.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/textarea/textarea.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.",
+          "name": "SkfTextArea",
+          "slots": [
+            {
+              "description": "The textareas label. Alternatively, you can use the `label` attribute.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "customError",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "cols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, sets the cols of the textarea",
+              "attribute": "cols"
+            },
+            {
+              "kind": "field",
+              "name": "customInvalid",
+              "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
+              "attribute": "custom-invalid",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "debug",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, outputs helping hints in console",
+              "attribute": "debug"
+            },
+            {
+              "kind": "field",
+              "name": "hideLabel",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, hides the label visually",
+              "attribute": "hide-label"
+            },
+            {
+              "kind": "field",
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, displays informational text below the field",
+              "attribute": "hint"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, adds name to the input-element",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "maxLength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, sets the maximum character length to accept for this input",
+              "attribute": "maxlength"
+            },
+            {
+              "kind": "field",
+              "name": "minLength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, sets the minimum character length to accept for this input",
+              "attribute": "minlength"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, displays placeholder text",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "requiredLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, renders an alternative A11y text for the asterisk",
+              "attribute": "required-label"
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, sets the rows of the textarea",
+              "attribute": "rows"
+            },
+            {
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "\"success\" | \"info\" | \"warning\" | \"alert\""
+              },
+              "description": "If defined, displays provided severity state",
+              "attribute": "severity"
+            },
+            {
+              "kind": "field",
+              "name": "showValid",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, displays valid state after interaction",
+              "attribute": "show-valid"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | undefined"
+              },
+              "default": "'md'",
+              "description": "Size of the Textarea",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "validateOn",
+              "type": {
+                "text": "'input' | 'change' | 'submit'"
+              },
+              "default": "'change'",
+              "description": "Sets validation start",
+              "attribute": "validate-on"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the text area",
+              "attribute": "value"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when the value of the input changes",
+              "name": "change"
+            },
+            {
+              "description": "Fires when the input is invalid",
+              "name": "invalid"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, sets disabled state",
+              "name": "disabled"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, value is required or must be checked for the form to be submittable",
+              "name": "required"
+            },
+            {
+              "name": "cols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, sets the cols of the textarea",
+              "fieldName": "cols"
+            },
+            {
+              "name": "custom-invalid",
+              "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
+              "fieldName": "customInvalid"
+            },
+            {
+              "name": "debug",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, outputs helping hints in console",
+              "fieldName": "debug"
+            },
+            {
+              "name": "hide-label",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, hides the label visually",
+              "fieldName": "hideLabel"
+            },
+            {
+              "name": "hint",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, displays informational text below the field",
+              "fieldName": "hint"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
+              "fieldName": "label"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, adds name to the input-element",
+              "fieldName": "name"
+            },
+            {
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, sets the maximum character length to accept for this input",
+              "fieldName": "maxLength"
+            },
+            {
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, sets the minimum character length to accept for this input",
+              "fieldName": "minLength"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, displays placeholder text",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "required-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, renders an alternative A11y text for the asterisk",
+              "fieldName": "requiredLabel"
+            },
+            {
+              "name": "rows",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, sets the rows of the textarea",
+              "fieldName": "rows"
+            },
+            {
+              "name": "severity",
+              "type": {
+                "text": "\"success\" | \"info\" | \"warning\" | \"alert\""
+              },
+              "description": "If defined, displays provided severity state",
+              "fieldName": "severity"
+            },
+            {
+              "name": "show-valid",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, displays valid state after interaction",
+              "fieldName": "showValid"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md' | undefined"
+              },
+              "default": "'md'",
+              "description": "Size of the Textarea",
+              "fieldName": "size"
+            },
+            {
+              "name": "validate-on",
+              "type": {
+                "text": "'input' | 'change' | 'submit'"
+              },
+              "default": "'change'",
+              "description": "Sets validation start",
+              "fieldName": "validateOn"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the text area",
+              "fieldName": "value"
+            }
+          ],
+          "superclass": {
+            "name": "FormBase",
+            "package": "@internal/components/formBase.js"
+          },
+          "tagName": "skf-textarea",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfTextArea",
+          "declaration": {
+            "name": "SkfTextArea",
             "module": "src/components/textarea/textarea.component.ts"
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/toast/toast.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "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.",
+          "name": "SkfToast",
+          "slots": [
+            {
+              "description": "The component's placeholder content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "closeable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+              "attribute": "closeable"
+            },
+            {
+              "kind": "field",
+              "name": "debug",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "debug"
+            },
+            {
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "'info' | 'success' | 'warning' | 'error'"
+              },
+              "default": "'info'",
+              "description": "Severity of the toast.",
+              "attribute": "severity"
+            },
+            {
+              "kind": "field",
+              "name": "timer",
+              "type": {
+                "text": "number"
+              },
+              "default": "5",
+              "description": "Time in seconds before the toast disappears.",
+              "attribute": "timer"
+            },
+            {
+              "kind": "field",
+              "name": "topOffset",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "offsets where toasts emerge vertically",
+              "attribute": "topOffset"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "closeable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+              "fieldName": "closeable"
+            },
+            {
+              "name": "debug",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "debug"
+            },
+            {
+              "name": "severity",
+              "type": {
+                "text": "'info' | 'success' | 'warning' | 'error'"
+              },
+              "default": "'info'",
+              "description": "Severity of the toast.",
+              "fieldName": "severity"
+            },
+            {
+              "name": "timer",
+              "type": {
+                "text": "number"
+              },
+              "default": "5",
+              "description": "Time in seconds before the toast disappears.",
+              "fieldName": "timer"
+            },
+            {
+              "name": "topOffset",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "offsets where toasts emerge vertically",
+              "fieldName": "topOffset"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-toast",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfToast",
+          "declaration": {
+            "name": "SkfToast",
+            "module": "src/components/toast/toast.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/toast-item/toast-item.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SkfToastItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_closeableInitialState",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "!!this.closeable"
+            },
+            {
+              "kind": "field",
+              "name": "_parentAnimationDiv",
+              "type": {
+                "text": "HTMLDivElement | null"
+              },
+              "privacy": "protected",
+              "default": "this.parentElement"
+            },
+            {
+              "kind": "field",
+              "name": "_currentTimeoutId",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | null"
+              },
+              "privacy": "private",
+              "description": "If not cloaseable, timeout id for the toast",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_timeleft",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "If not closseable, time left on the timer when the mouse enters the toast",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_timeoutStarted",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "If not closseable, time when the timeout started",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "originEl",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "timer",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "attribute": "timer",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "_animateIn"
+            },
+            {
+              "kind": "field",
+              "name": "_handleMouseEnter"
+            },
+            {
+              "kind": "field",
+              "name": "_handleMouseLeave"
+            },
+            {
+              "kind": "field",
+              "name": "_removeToast"
+            },
+            {
+              "kind": "field",
+              "name": "parentAnimationDiv",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "closeable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+              "attribute": "closeable",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "buttonLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Close'",
+              "description": "Close button aria-label",
+              "attribute": "button-label",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "SkfIcon['name'] | undefined"
+              },
+              "description": "If defined, displays leading icon",
+              "attribute": "icon",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              },
+              "description": "If defined, gives the supplied appearance",
+              "attribute": "severity",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "timer",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "fieldName": "timer"
+            },
+            {
+              "name": "closeable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+              "fieldName": "closeable",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "name": "button-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Close'",
+              "description": "Close button aria-label",
+              "fieldName": "buttonLabel",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "SkfIcon['name'] | undefined"
+              },
+              "description": "If defined, displays leading icon",
+              "fieldName": "icon",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "name": "severity",
+              "type": {
+                "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              },
+              "description": "If defined, gives the supplied appearance",
+              "fieldName": "severity",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SkfAlert",
+            "package": "@components/alert/alert.component.js"
+          },
+          "slots": [
+            {
+              "description": "Alert message. **Notice!** See design principles for approved content",
+              "name": "",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            },
+            {
+              "description": "Slot for the link",
+              "name": "link",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when the close button is clicked",
+              "name": "skf-alert-close",
+              "inheritedFrom": {
+                "name": "SkfAlert",
+                "module": "src/components/alert/alert.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfToastItem",
+          "declaration": {
+            "name": "SkfToastItem",
+            "module": "src/components/toast-item/toast-item.component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/toast-wrapper/toast-wrapper.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "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.",
+          "name": "SkfToastWrapper",
+          "slots": [
+            {
+              "description": "The alert components that the toast creates will render here.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "debug",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "debug",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "debug",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "debug"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-toast-wrapper",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfToastWrapper",
+          "declaration": {
+            "name": "SkfToastWrapper",
+            "module": "src/components/toast-wrapper/toast-wrapper.component.ts"
+          }
+        }
+      ]
     }
   ]
 }