@skf-design-system/ui-components 1.0.0-alpha.27 → 1.0.0-alpha.29

package/dist/custom-elements.json

@@ -186,7 +186,8 @@
                 "text": "boolean | undefined"
               },
               "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-              "attribute": "closeable"
+              "attribute": "closeable",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -214,7 +215,8 @@
                 "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
               },
               "description": "If defined, gives the supplied appearance",
-              "attribute": "severity"
+              "attribute": "severity",
+              "reflects": true
             }
           ],
           "events": [
@@ -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": {
@@ -609,16 +647,6 @@
               "attribute": "custom-invalid",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "hideLabel",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, hides the label visually",
-              "attribute": "hide-label",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "indeterminate",
@@ -629,16 +657,6 @@
               "attribute": "indeterminate",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "invalid",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Read only indicator of the local state. Use custom-invalid to set it to invalid state.",
-              "attribute": "invalid",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "label",
@@ -708,7 +726,15 @@
             },
             {
               "kind": "method",
-              "name": "debugOutput"
+              "name": "handleInvalidChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDebugInvalid"
+            },
+            {
+              "kind": "method",
+              "name": "handleCustomInvalidChange"
             }
           ],
           "events": [
@@ -756,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": {
@@ -772,14 +790,6 @@
               "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
               "fieldName": "indeterminate"
             },
-            {
-              "name": "invalid",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Read only indicator of the local state. Use custom-invalid to set it to invalid state.",
-              "fieldName": "invalid"
-            },
             {
               "name": "label",
               "type": {
@@ -1347,6 +1357,15 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": ""
+              },
+              "description": "-m  }",
+              "attribute": "autocomplete"
+            },
             {
               "kind": "field",
               "name": "buttonAriaLabelClear",
@@ -1615,6 +1634,14 @@
               "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": {
@@ -2309,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",
@@ -2361,16 +2484,6 @@
               "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",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "label",
@@ -2439,7 +2552,19 @@
             },
             {
               "kind": "method",
-              "name": "debugOutput"
+              "name": "handleInvalidChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleDebugInvalid"
+            },
+            {
+              "kind": "method",
+              "name": "handleCheckedChanged"
+            },
+            {
+              "kind": "method",
+              "name": "handleCustomInvalidChange"
             }
           ],
           "events": [
@@ -2487,14 +2612,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": "label",
               "type": {
@@ -2638,15 +2755,13 @@
             },
             {
               "kind": "field",
-              "name": "getSelectedValues",
-              "description": "A readonly property that returns the selected value(s) in a array",
-              "readonly": true
+              "name": "selectedValues",
+              "description": "A readonly property that returns the selected value(s) in a array"
             },
             {
               "kind": "field",
-              "name": "getSelectedOptionsText",
-              "description": "A readonly property that returns the selected slot(s) text content in a array",
-              "readonly": true
+              "name": "selectedOptionsText",
+              "description": "A readonly property that returns the selected slot(s) text content in a array"
             },
             {
               "kind": "field",
@@ -2736,8 +2851,7 @@
             {
               "kind": "field",
               "name": "value",
-              "description": "Read only, returns the selected value. (if multiple: in a comma separated string)",
-              "readonly": true
+              "description": "Read only, returns the selected value. (if multiple: in a comma separated string)"
             },
             {
               "kind": "field",
@@ -3359,529 +3473,1271 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/tag/tag.component.ts",
+      "path": "src/components/tab/tab.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-tab>` is a component that displays a list of actions or options",
+          "name": "SkfTab",
           "slots": [
             {
-              "description": "The component's placeholder content",
+              "description": "The tab's label",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "_onClick",
+              "name": "panel",
               "type": {
-                "text": "(event: Event) => void | undefined"
+                "text": "string"
               },
-              "privacy": "private"
+              "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": "_onRemove",
+              "name": "selected",
               "type": {
-                "text": "(event: Event) => void | undefined"
+                "text": "boolean"
               },
-              "privacy": "protected"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "variant",
               "type": {
-                "text": "'sm' | 'md' | 'lg'"
+                "text": "SkfTabGroup['variant']"
               },
-              "default": "'md'",
-              "description": "Specifies Tag size",
-              "attribute": "size",
-              "reflects": true
+              "default": "'expanded'"
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "role",
               "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": "string"
               },
-              "description": "If defined, displays leading/provided icon",
-              "attribute": "icon"
-            },
+              "default": "'tab'"
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "color",
               "type": {
-                "text": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
+                "text": "CustomEvent"
               },
-              "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"
+              "description": "{detail: { selected: true, tab: SkfTab }} Fires when the tab is selected",
+              "name": "skf-tab-select"
             },
             {
-              "kind": "field",
-              "name": "onRemove",
-              "description": "If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`."
-            },
+              "description": "Fired when the component is clicked",
+              "name": "click"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "removable",
+              "name": "panel",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "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"
+              "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-tag",
+          "tagName": "skf-tab",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SkfTag",
+          "name": "SkfTab",
           "declaration": {
-            "name": "SkfTag",
-            "module": "src/components/tag/tag.component.ts"
+            "name": "SkfTab",
+            "module": "src/components/tab/tab.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/textarea/textarea.component.ts",
+      "path": "src/components/tab-group/tab-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-tab-group>` is a component that displays a list of actions or options.",
+          "name": "SkfTabGroup",
           "slots": [
             {
-              "description": "The textareas label. Alternatively, you can use the `label` attribute.",
+              "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": "customError",
+              "name": "defaultSelected",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "privacy": "private"
+              "default": "0",
+              "description": "Sets the default selected tab",
+              "attribute": "default-selected"
             },
             {
               "kind": "field",
-              "name": "cols",
+              "name": "noBorder",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "description": "If defined, sets the cols of the textarea",
-              "attribute": "cols"
+              "default": "false",
+              "description": "If true, removes border",
+              "attribute": "no-border"
             },
             {
               "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
+              "name": "noPadding",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, removes padding",
+              "attribute": "no-padding"
             },
             {
               "kind": "field",
-              "name": "debug",
+              "name": "stretch",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "If true, outputs helping hints in console",
-              "attribute": "debug"
+              "default": "false",
+              "description": "If true, component fills the parent element height",
+              "attribute": "stretch"
             },
             {
               "kind": "field",
-              "name": "hideLabel",
+              "name": "variant",
               "type": {
-                "text": "boolean | undefined"
+                "text": "'compressed' | 'expanded'"
               },
-              "description": "If true, hides the label visually",
-              "attribute": "hide-label"
-            },
+              "default": "'expanded'",
+              "description": "Sets the appearance of the tabs",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "hint",
+              "name": "default-selected",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "If defined, displays informational text below the field",
-              "attribute": "hint"
+              "default": "0",
+              "description": "Sets the default selected tab",
+              "fieldName": "defaultSelected"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "no-border",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
-              "attribute": "label"
+              "default": "false",
+              "description": "If true, removes border",
+              "fieldName": "noBorder"
             },
             {
-              "kind": "field",
-              "name": "name",
+              "name": "no-padding",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "If defined, adds name to the input-element",
-              "attribute": "name"
+              "default": "false",
+              "description": "If true, removes padding",
+              "fieldName": "noPadding"
             },
             {
-              "kind": "field",
-              "name": "maxLength",
+              "name": "stretch",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "description": "If defined, sets the maximum character length to accept for this input",
-              "attribute": "maxlength"
+              "default": "false",
+              "description": "If true, component fills the parent element height",
+              "fieldName": "stretch"
             },
             {
-              "kind": "field",
-              "name": "minLength",
+              "name": "variant",
               "type": {
-                "text": "number | undefined"
+                "text": "'compressed' | 'expanded'"
               },
-              "description": "If defined, sets the minimum character length to accept for this input",
-              "attribute": "minlength"
-            },
+              "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": "placeholder",
+              "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "If defined, displays placeholder text",
-              "attribute": "placeholder"
+              "default": "''",
+              "description": "The tab panel's name.",
+              "attribute": "name"
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "active",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
-              "attribute": "readonly"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "requiredLabel",
+              "name": "role",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "If defined, renders an alternative A11y text for the asterisk",
-              "attribute": "required-label"
-            },
+              "default": "'tabpanel'"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "rows",
+              "name": "name",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "If defined, sets the rows of the textarea",
-              "attribute": "rows"
-            },
+              "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": "severity",
+              "name": "_onClick",
               "type": {
-                "text": "\"success\" | \"info\" | \"warning\" | \"alert\""
+                "text": "(event: Event) => void | undefined"
               },
-              "description": "If defined, displays provided severity state",
-              "attribute": "severity"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "showValid",
+              "name": "_onRemove",
               "type": {
-                "text": "boolean | undefined"
+                "text": "(event: Event) => void | undefined"
               },
-              "description": "If true, displays valid state after interaction",
-              "attribute": "show-valid"
+              "privacy": "protected"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'sm' | 'md' | undefined"
+                "text": "'sm' | 'md' | 'lg'"
               },
               "default": "'md'",
-              "description": "Size of the Textarea",
+              "description": "Specifies Tag size",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "validateOn",
+              "name": "icon",
               "type": {
-                "text": "'input' | 'change' | 'submit'"
+                "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\""
               },
-              "default": "'change'",
-              "description": "Sets validation start",
-              "attribute": "validate-on"
+              "description": "If defined, displays leading/provided icon",
+              "attribute": "icon"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "color",
               "type": {
-                "text": "string"
+                "text": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
               },
-              "default": "''",
-              "description": "The current value of the text area",
-              "attribute": "value"
-            }
-          ],
-          "events": [
+              "description": "If defined, gives the supplied appearance",
+              "attribute": "color",
+              "reflects": true
+            },
             {
-              "description": "Fires when the value of the input changes",
-              "name": "change"
+              "kind": "field",
+              "name": "onClick",
+              "description": "If defined, accepts a function that runs on click"
             },
             {
-              "description": "Fires when the input is invalid",
-              "name": "invalid"
+              "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": "boolean"
+                "text": "'sm' | 'md' | 'lg'"
               },
-              "description": "If true, sets disabled state",
-              "name": "disabled"
+              "default": "'md'",
+              "description": "Specifies Tag size",
+              "fieldName": "size"
             },
             {
+              "name": "icon",
               "type": {
-                "text": "boolean"
+                "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 true, value is required or must be checked for the form to be submittable",
-              "name": "required"
+              "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",
-              "fieldName": "cols"
+              "attribute": "cols"
             },
             {
-              "name": "custom-invalid",
+              "kind": "field",
+              "name": "customInvalid",
               "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
-              "fieldName": "customInvalid"
+              "attribute": "custom-invalid",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "debug",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "If true, outputs helping hints in console",
-              "fieldName": "debug"
+              "attribute": "debug"
             },
             {
-              "name": "hide-label",
+              "kind": "field",
+              "name": "hideLabel",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "If true, hides the label visually",
-              "fieldName": "hideLabel"
+              "attribute": "hide-label"
             },
             {
+              "kind": "field",
               "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, displays informational text below the field",
-              "fieldName": "hint"
+              "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.",
-              "fieldName": "label"
+              "attribute": "label"
             },
             {
+              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, adds name to the input-element",
-              "fieldName": "name"
+              "attribute": "name"
             },
             {
-              "name": "maxlength",
+              "kind": "field",
+              "name": "maxLength",
               "type": {
                 "text": "number | undefined"
               },
               "description": "If defined, sets the maximum character length to accept for this input",
-              "fieldName": "maxLength"
+              "attribute": "maxlength"
             },
             {
-              "name": "minlength",
+              "kind": "field",
+              "name": "minLength",
               "type": {
                 "text": "number | undefined"
               },
               "description": "If defined, sets the minimum character length to accept for this input",
-              "fieldName": "minLength"
+              "attribute": "minlength"
             },
             {
+              "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, displays placeholder text",
-              "fieldName": "placeholder"
+              "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",
-              "fieldName": "readonly"
+              "attribute": "readonly"
             },
             {
-              "name": "required-label",
+              "kind": "field",
+              "name": "requiredLabel",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, renders an alternative A11y text for the asterisk",
-              "fieldName": "requiredLabel"
+              "attribute": "required-label"
             },
             {
+              "kind": "field",
               "name": "rows",
               "type": {
                 "text": "number | undefined"
               },
               "description": "If defined, sets the rows of the textarea",
-              "fieldName": "rows"
+              "attribute": "rows"
             },
             {
+              "kind": "field",
               "name": "severity",
               "type": {
                 "text": "\"success\" | \"info\" | \"warning\" | \"alert\""
               },
               "description": "If defined, displays provided severity state",
-              "fieldName": "severity"
+              "attribute": "severity"
             },
             {
-              "name": "show-valid",
+              "kind": "field",
+              "name": "showValid",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "If true, displays valid state after interaction",
-              "fieldName": "showValid"
+              "attribute": "show-valid"
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "'sm' | 'md' | undefined"
               },
               "default": "'md'",
               "description": "Size of the Textarea",
-              "fieldName": "size"
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "validate-on",
+              "kind": "field",
+              "name": "validateOn",
               "type": {
                 "text": "'input' | 'change' | 'submit'"
               },
               "default": "'change'",
               "description": "Sets validation start",
-              "fieldName": "validateOn"
+              "attribute": "validate-on"
             },
             {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The current value of the text area",
-              "fieldName": "value"
+              "attribute": "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"
+          "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"
           }
         }
       ]