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

package/dist/vscode.html-custom-data.json

@@ -4,7 +4,7 @@
   "tags": [
     {
       "name": "skf-accordion",
-      "description": "The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.\n\nSee [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6256cb1b44eba592d319d92e) for design principles.\n---\n\n\n### **Slots:**\n - _default_ - Expects one or more <skf-accordion-item> element(s)",
+      "description": "The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Slots:**\n - _default_ - Expects one or more <skf-accordion-item> element(s)",
       "attributes": [
         {
           "name": "animated",
@@ -13,12 +13,17 @@
         },
         {
           "name": "heading-as",
-          "description": "Controls which heading element will be rendered",
-          "values": [{ "name": "Exclude<HeadingType" }, { "name": "'h1'>" }]
+          "description": "Defines which heading element will be rendered",
+          "values": [
+            { "name": "h1" },
+            { "name": "h2" },
+            { "name": "h3" },
+            { "name": "h4" }
+          ]
         },
         {
           "name": "gap",
-          "description": "If provided, adds a gap between each item",
+          "description": "If true, adds a gap between each item",
           "values": []
         },
         {
@@ -41,11 +46,11 @@
     },
     {
       "name": "skf-alert",
-      "description": "The `<skf-alert>` is a type of notification that appears in-line\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - lodjvodjvodjo",
+      "description": "The `<skf-alert>` is a type of notification that appears in-line\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - Slot for the link",
       "attributes": [
         {
           "name": "closeable",
-          "description": "If true, alert is being used as a toast with an close button",
+          "description": "If true, alert is being used as a toast (alertdialog) with an close button",
           "values": []
         },
         {
@@ -61,14 +66,20 @@
         {
           "name": "severity",
           "description": "If defined, gives the supplied appearance",
-          "values": [{ "name": "SeverityFgColor" }]
+          "values": [
+            { "name": "error" },
+            { "name": "info" },
+            { "name": "warning" },
+            { "name": "success" },
+            { "name": "alert" }
+          ]
         }
       ],
       "references": []
     },
     {
       "name": "skf-button",
-      "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Slots:**\n - _default_ - The Primary content",
+      "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n\n### **Slots:**\n - _default_ - The Primary content",
       "attributes": [
         {
           "name": "destructive",
@@ -247,6 +258,7 @@
           "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
           "values": []
         },
+        { "name": "no-validate", "values": [] },
         {
           "name": "size",
           "description": "If provided, displays an alternative size",
@@ -293,7 +305,7 @@
     },
     {
       "name": "skf-checkbox",
-      "description": "The `<skf-checkbox>` component is used to create a checkbox input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - **Default** - Alternatively, you can use the `label` attribute",
+      "description": "The `<skf-checkbox>` component is used to create a checkbox input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The Radios label. Alternatively, you can use the `label` attribute.",
       "attributes": [
         {
           "name": "disabled",
@@ -320,11 +332,6 @@
           "description": "If true, forces component to invalid state until removed",
           "values": []
         },
-        {
-          "name": "hide-label",
-          "description": "If true, hides the label visually",
-          "values": []
-        },
         {
           "name": "indeterminate",
           "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
@@ -345,21 +352,26 @@
           "description": "If defined, renders an alternative A11y text for the asterisk",
           "values": []
         },
-        {
-          "name": "size",
-          "description": "Size of the checkbox",
-          "values": [{ "name": "sm" }, { "name": "md" }]
-        },
         {
           "name": "severity",
           "description": "If defined, styles checkbox using provided severity",
-          "values": [{ "name": "FormFieldBaseProps['severity']" }]
+          "values": [
+            { "name": "alert" },
+            { "name": "success" },
+            { "name": "info" },
+            { "name": "warning" }
+          ]
         },
         {
           "name": "show-valid",
-          "description": "If defined, displays valid state after interaction",
+          "description": "If true, displays valid state after interaction",
           "values": []
         },
+        {
+          "name": "size",
+          "description": "Size of the checkbox",
+          "values": [{ "name": "sm" }, { "name": "md" }]
+        },
         {
           "name": "value",
           "description": "The current value of the input field",
@@ -370,7 +382,7 @@
     },
     {
       "name": "skf-collapse",
-      "description": "The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.\n\nSee [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229e2eb8a8dacf366dc3243) for design principles.\n---\n\n\n### **Events:**\n - **skf-collapse-toggle** - Event emitted when toggled\n\n### **Methods:**\n - **setClose()** - Class method as alternative to manipulate attribute\n- **setOpen()** - Class method as alternative to manipulate attribute\n\n### **Slots:**\n - _default_ - Main content",
+      "description": "The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Events:**\n - **skf-collapse-toggle** - Event emitted when toggled\n\n### **Methods:**\n - **setClose()** - Class method as alternative to manipulate attribute\n- **setOpen()** - Class method as alternative to manipulate attribute\n\n### **Slots:**\n - _default_ - Main content",
       "attributes": [
         {
           "name": "animated",
@@ -389,8 +401,13 @@
         },
         {
           "name": "heading-as",
-          "description": "Controls which heading element will be rendered",
-          "values": [{ "name": "Exclude<HeadingType" }, { "name": "'h1'>" }]
+          "description": "Defines which heading element will be rendered",
+          "values": [
+            { "name": "h1" },
+            { "name": "h2" },
+            { "name": "h3" },
+            { "name": "h4" }
+          ]
         },
         {
           "name": "small",
@@ -407,11 +424,11 @@
     },
     {
       "name": "skf-divider",
-      "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information.\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
+      "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
       "attributes": [
         {
           "name": "color",
-          "description": "If provided, alters the Divider color",
+          "description": "Defines the Divider color",
           "values": [
             { "name": "emphasised" },
             { "name": "primary" },
@@ -435,17 +452,27 @@
     },
     {
       "name": "skf-heading",
-      "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n",
+      "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n\n\n### **Slots:**\n - _default_ - The headings content",
       "attributes": [
         {
           "name": "as",
-          "description": "Controls which heading element will be rendered. Should not be used to affect appearance.",
-          "values": [{ "name": "HeadingType" }]
+          "description": "Controls which heading element will be rendered. Should not be used to affect appearance",
+          "values": [
+            { "name": "h1" },
+            { "name": "h2" },
+            { "name": "h3" },
+            { "name": "h4" }
+          ]
         },
         {
           "name": "styled-as",
           "description": "If provided, changes the appearance of the heading",
-          "values": [{ "name": "HeadingType" }]
+          "values": [
+            { "name": "h1" },
+            { "name": "h2" },
+            { "name": "h3" },
+            { "name": "h4" }
+          ]
         }
       ],
       "references": []
@@ -456,6 +483,7 @@
       "attributes": [
         {
           "name": "color",
+          "description": "Sets the color of the icon",
           "values": [
             { "name": "primary" },
             { "name": "inverse" },
@@ -470,11 +498,12 @@
         },
         {
           "name": "label",
-          "description": "If provided, adds an alternate description to use for assistive devices",
+          "description": "If defined, adds an alternate description to use for assistive devices",
           "values": []
         },
         {
           "name": "name",
+          "description": "Name of the icon to display",
           "values": [
             { "name": "arrowDown" },
             { "name": "arrowDownUp" },
@@ -631,6 +660,7 @@
         },
         {
           "name": "size",
+          "description": "Size of the icon",
           "values": [
             { "name": "xs" },
             { "name": "sm" },
@@ -643,7 +673,7 @@
     },
     {
       "name": "skf-input",
-      "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - **Default** -  Alternatively, you can use the `label` attribute",
+      "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.",
       "attributes": [
         {
           "name": "disabled",
@@ -655,29 +685,30 @@
           "description": "If true, value is required or must be checked for the form to be submittable",
           "values": []
         },
+        { "name": "autocomplete", "description": "-m  }", "values": [] },
         {
           "name": "button-aria-label-clear",
-          "description": "If provided, renders a custom aria-label for the clear button **Notice!** Only applicable to type=search.",
+          "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
           "values": []
         },
         {
           "name": "button-aria-label-hide",
-          "description": "If provided, renders a custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
+          "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
           "values": []
         },
         {
           "name": "button-aria-label-show",
-          "description": "If provided, renders a custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
+          "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
           "values": []
         },
         {
           "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.",
           "values": []
         },
         {
           "name": "debug",
-          "description": "If provided, outputs helping hints in console",
+          "description": "If true, outputs helping hints in console",
           "values": []
         },
         {
@@ -687,12 +718,12 @@
         },
         {
           "name": "hint",
-          "description": "If provided, displays informational text below the field",
+          "description": "If defined, displays informational text below the field",
           "values": []
         },
         {
           "name": "inputmode",
-          "description": "If provided, tells what keyboard to use if applicable",
+          "description": "Tells what keyboard to use if applicable",
           "values": [
             { "name": "none" },
             { "name": "text" },
@@ -706,47 +737,47 @@
         },
         {
           "name": "label",
-          "description": "The input's label. Alternatively, you can use the `label` attribute.",
+          "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
           "values": []
         },
         {
           "name": "leading",
-          "description": "If provided, displays a prefix/adornment before the input-element",
+          "description": "If defined, displays a prefix/adornment before the input-element",
           "values": []
         },
         {
           "name": "max",
-          "description": "If provided, sets the maximum value to accept for this input",
+          "description": "If defined, sets the maximum value to accept for this input",
           "values": []
         },
         {
           "name": "maxlength",
-          "description": "If provided, sets the maximum character length to accept for this input",
+          "description": "If defined, sets the maximum character length to accept for this input",
           "values": []
         },
         {
           "name": "min",
-          "description": "If provided, sets the minimum value to accept for this input",
+          "description": "If defined, sets the minimum value to accept for this input",
           "values": []
         },
         {
           "name": "minlength",
-          "description": "If provided, sets the minimum character length to accept for this input",
+          "description": "If defined, sets the minimum character length to accept for this input",
           "values": []
         },
         {
           "name": "name",
-          "description": "If provided, adds name to the input-element",
+          "description": "If defined, adds name to the input-element",
           "values": []
         },
         {
           "name": "pattern",
-          "description": "If provided, adds name to the input-element",
+          "description": "If defined, adds name to the input-element",
           "values": []
         },
         {
           "name": "placeholder",
-          "description": "If provided, displays placeholder text",
+          "description": "If defined, displays placeholder text",
           "values": []
         },
         {
@@ -756,40 +787,63 @@
         },
         {
           "name": "required-label",
-          "description": "If provided, renders an alternative A11y text for the asterisk",
+          "description": "If defined, renders an alternative A11y text for the asterisk",
           "values": []
         },
         {
           "name": "severity",
-          "description": "If provided, displays provided severity state",
-          "values": [{ "name": "FormFieldBaseProps['severity']" }]
+          "description": "If defined, displays provided severity state",
+          "values": [
+            { "name": "alert" },
+            { "name": "success" },
+            { "name": "info" },
+            { "name": "warning" }
+          ]
         },
         {
           "name": "show-valid",
-          "description": "If provided, displays provided severity state",
+          "description": "If true, displays valid state after interaction",
           "values": []
         },
         {
           "name": "size",
-          "description": "If provided, displays an alternative size",
+          "description": "Size of the input",
           "values": [{ "name": "sm" }, { "name": "md" }]
         },
         {
           "name": "trailing",
-          "description": "If provided, displays a suffix/adornment after the input-element",
+          "description": "If defined, displays a suffix/adornment after the input-element",
           "values": []
         },
         {
           "name": "type",
-          "description": "If provided, changes the type of form control",
+          "description": "Type of input control",
           "values": [
-            { "name": "Exclude<FormFieldBaseProps['type'], 'checkbox'" },
-            { "name": "'radio'>" }
+            { "name": "button" },
+            { "name": "color" },
+            { "name": "date" },
+            { "name": "datetime-local" },
+            { "name": "email" },
+            { "name": "file" },
+            { "name": "hidden" },
+            { "name": "image" },
+            { "name": "month" },
+            { "name": "number" },
+            { "name": "password" },
+            { "name": "range" },
+            { "name": "reset" },
+            { "name": "search" },
+            { "name": "submit" },
+            { "name": "tel" },
+            { "name": "text" },
+            { "name": "time" },
+            { "name": "url" },
+            { "name": "week" }
           ]
         },
         {
           "name": "validate-on",
-          "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
+          "description": "Sets validation start",
           "values": [
             { "name": "input" },
             { "name": "change" },
@@ -810,11 +864,12 @@
       "attributes": [
         {
           "name": "as",
-          "description": "Specifies semantic element to render -",
+          "description": "Defines the semantic element to render",
           "values": [{ "name": "button" }, { "name": "a" }]
         },
         {
           "name": "color",
+          "description": "Defines the text-color",
           "values": [{ "name": "primary" }, { "name": "inverse" }]
         },
         {
@@ -824,17 +879,17 @@
         },
         {
           "name": "download",
-          "description": "If provided, downloads the url",
+          "description": "If defined, downloads the url",
           "values": []
         },
         {
           "name": "href",
-          "description": "If provided, loads url on click",
+          "description": "If defined, loads url on click",
           "values": []
         },
         {
           "name": "icon",
-          "description": "If provided, renders an icon before or after the text",
+          "description": "If defined, renders an icon before or after the text",
           "values": [
             { "name": "arrowDown" },
             { "name": "arrowDownUp" },
@@ -991,17 +1046,17 @@
         },
         {
           "name": "icon-placement",
-          "description": "Position of the icon in relation to the text -",
+          "description": "Defines the position of the icon in relation to the text",
           "values": [{ "name": "left" }, { "name": "right" }]
         },
         {
           "name": "rel",
-          "description": "Specifies the relationship of the target object to the link object -",
+          "description": "Defines the relationship of the target object to the link object",
           "values": []
         },
         {
           "name": "route",
-          "description": "If provided, used on conjunction with onClick property, second argument",
+          "description": "If defined, used on conjunction with onClick property, second argument",
           "values": []
         },
         {
@@ -1011,7 +1066,7 @@
         },
         {
           "name": "target",
-          "description": "If provided, specifies where to open the linked document",
+          "description": "If defined, specifies where to open the linked document",
           "values": [
             { "name": "_blank" },
             { "name": "_parent" },
@@ -1021,7 +1076,7 @@
         },
         {
           "name": "type",
-          "description": "Type of button -",
+          "description": "Defines the type of button",
           "values": [
             { "name": "button" },
             { "name": "submit" },
@@ -1033,9 +1088,13 @@
     },
     {
       "name": "skf-loader",
-      "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities.\n---\n",
+      "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities\n---\n",
       "attributes": [
-        { "name": "aria-label", "values": [] },
+        {
+          "name": "aria-label",
+          "description": "Defines the aria-label",
+          "values": []
+        },
         {
           "name": "invert",
           "description": "If true, inverts the color (to be used on colored backgrounds)",
@@ -1043,7 +1102,7 @@
         },
         {
           "name": "size",
-          "description": "If provided, displays an alternative size",
+          "description": "Defines the size of the loader",
           "values": [{ "name": "md" }, { "name": "sm" }]
         }
       ],
@@ -1055,12 +1114,12 @@
       "attributes": [
         {
           "name": "title",
-          "description": "The title of the logo",
+          "description": "Defines the title of the logo",
           "values": []
         },
         {
           "name": "color",
-          "description": "If provided, sets color of the logo",
+          "description": "If defined, sets color of the logo",
           "values": [
             { "name": "primary" },
             { "name": "secondary" },
@@ -1070,9 +1129,31 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-progress",
+      "description": "The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar\n---\n",
+      "attributes": [
+        {
+          "name": "animated",
+          "description": "If true, the progress-bar's fill value is animated",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "Describes how much work the task indicated by the progress element requires",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "Specifies how much of the task that has been completed",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-radio",
-      "description": "The `<skf-radio>` component is used to create a radio input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - **Default** -  Alternatively, you can use the `label` attribute",
+      "description": "The `<skf-radio>` component is used to create a radio input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The radios label. Alternatively, you can use the `label` attribute.",
       "attributes": [
         {
           "name": "disabled",
@@ -1086,7 +1167,7 @@
         },
         {
           "name": "debug",
-          "description": "If provided, outputs helping hints in console",
+          "description": "If true, outputs helping hints in console",
           "values": []
         },
         {
@@ -1099,52 +1180,177 @@
           "description": "If true, forces component to invalid state until removed",
           "values": []
         },
+        {
+          "name": "label",
+          "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "If defined, adds name to the input-element",
+          "values": []
+        },
+        {
+          "name": "required-label",
+          "description": "If defined, renders an alternative A11y text for the asterisk",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "Size of the Radio",
+          "values": [{ "name": "sm" }, { "name": "md" }]
+        },
+        {
+          "name": "severity",
+          "description": "If defined, displays provided severity state",
+          "values": [
+            { "name": "success" },
+            { "name": "info" },
+            { "name": "warning" },
+            { "name": "alert" }
+          ]
+        },
+        {
+          "name": "show-valid",
+          "description": "If true, displays valid state after interaction",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current value of the input field",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-select",
+      "description": "The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.\n---\n\n\n### **Events:**\n - **change** - Fired when the selected option(s) changes\n- **invalid** - Fired when the select is invalid\n- **reset** - Fired when the form is reset\n- **skf-select:dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled\n- **skf-select-option:select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled\n\n### **Slots:**\n - _default_ - The select's placeholder content",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "If true, the select is disabled\t`default: false`",
+          "values": []
+        },
+        {
+          "name": "button-label",
+          "description": "Sets the first visible text on the component",
+          "values": []
+        },
+        {
+          "name": "custom-invalid",
+          "description": "If defined, forces component to invalid state until removed",
+          "values": []
+        },
         {
           "name": "hide-label",
           "description": "If true, hides the label visually",
           "values": []
         },
+        {
+          "name": "hide-tags",
+          "description": "If true and mulltiple is true, no tags are displayed under the select",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "If defined, sets the hint text under the select component in the form",
+          "values": []
+        },
         {
           "name": "label",
-          "description": "The input's label. Alternatively, you can use the `label` attribute.",
+          "description": "If defined, displays provided label",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "If defined, limits the number of selectable options",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "If defined, sets the minimum number of required options",
+          "values": []
+        },
+        {
+          "name": "multiple",
+          "description": "If true, allows for multiple options to be selected",
           "values": []
         },
         {
           "name": "name",
-          "description": "If provided, adds name to the input-element",
+          "description": "If defined, set name of the component",
           "values": []
         },
         {
           "name": "required-label",
-          "description": "If provided, renders an alternative A11y text for the asterisk",
+          "description": "If defined, renders an alternative A11y text for the asterisk",
+          "values": []
+        },
+        {
+          "name": "severity",
+          "description": "If defined, displays provided severity state",
+          "values": [{ "name": "FormFieldBaseProps['severity']" }]
+        },
+        {
+          "name": "show-valid",
+          "description": "If true, displays valid state after interaction",
           "values": []
         },
         {
           "name": "size",
-          "description": "If provided, displays an alternative size",
+          "description": "Size of the Select",
           "values": [{ "name": "sm" }, { "name": "md" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-select-option",
+      "description": "The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.\n---\n\n\n### **Events:**\n - **skf-select-option:select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.\n\n### **Slots:**\n - _default_ - The option's text content\n- **icon** - The option's slot for icon or custom meta information (svg).",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "If true, prevents interaction with the option",
+          "values": []
         },
         {
-          "name": "severity",
-          "description": "If provided, displays provided severity state",
-          "values": [{ "name": "FormFieldBaseProps['severity']" }]
+          "name": "icon",
+          "description": "If defined, set an icon",
+          "values": [{ "name": "SkfIcon['name']" }]
         },
         {
-          "name": "show-valid",
-          "description": "If provided, displays valid state after interaction",
+          "name": "icon-color",
+          "description": "If defined, sets provided color on the icon",
+          "values": [{ "name": "SeverityFgColor" }]
+        },
+        {
+          "name": "selected",
+          "description": "If true, sets the option as selected",
+          "values": []
+        },
+        {
+          "name": "short-label",
+          "description": "If defined, sets a short label",
           "values": []
         },
         {
           "name": "value",
-          "description": "The current value of the input field",
+          "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text.",
           "values": []
         }
       ],
       "references": []
     },
+    {
+      "name": "skf-select-option-group",
+      "description": "The `<skf-select-option-group>` is a component that groups select-options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+      "attributes": [{ "name": "label", "values": [] }],
+      "references": []
+    },
     {
       "name": "skf-switch",
-      "description": "The `<skf-switch>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+      "description": "The `<skf-switch>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.",
       "attributes": [
         {
           "name": "disabled",
@@ -1173,7 +1379,7 @@
         },
         {
           "name": "label",
-          "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+          "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
           "values": []
         },
         {
@@ -1199,18 +1405,70 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-tab",
+      "description": "The `<skf-tab>` is a component that displays a list of actions or options\n---\n\n\n### **Events:**\n - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected\n- **click** - Fired when the component is clicked\n\n### **Slots:**\n - _default_ - The tab's label",
+      "attributes": [
+        {
+          "name": "panel",
+          "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-tab-group",
+      "description": "The `<skf-tab-group>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements\n- **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements",
+      "attributes": [
+        {
+          "name": "default-selected",
+          "description": "Sets the default selected tab",
+          "values": []
+        },
+        {
+          "name": "no-border",
+          "description": "If true, removes border",
+          "values": []
+        },
+        {
+          "name": "no-padding",
+          "description": "If true, removes padding",
+          "values": []
+        },
+        {
+          "name": "stretch",
+          "description": "If true, component fills the parent element height",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "Sets the appearance of the tabs",
+          "values": [{ "name": "compressed" }, { "name": "expanded" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-tab-panel",
+      "description": "The `<skf-tab-panel>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content",
+      "attributes": [
+        { "name": "name", "description": "The tab panel's name.", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "skf-tag",
       "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
       "attributes": [
         {
           "name": "size",
-          "description": "Specifies Tag size -",
+          "description": "Specifies Tag size",
           "values": [{ "name": "sm" }, { "name": "md" }, { "name": "lg" }]
         },
         {
           "name": "icon",
-          "description": "If defined, displays leading/provided icon -",
+          "description": "If defined, displays leading/provided icon",
           "values": [
             { "name": "arrowDown" },
             { "name": "arrowDownUp" },
@@ -1367,7 +1625,7 @@
         },
         {
           "name": "color",
-          "description": "If defined, gives the supplied appearance -",
+          "description": "If defined, gives the supplied appearance",
           "values": [
             { "name": "warning" },
             { "name": "success" },
@@ -1386,7 +1644,7 @@
     },
     {
       "name": "skf-textarea",
-      "description": "The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - **The** - textareas label. Alternatively, you can use the `label` attribute.",
+      "description": "The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - _default_ - The textareas label. Alternatively, you can use the `label` attribute.",
       "attributes": [
         {
           "name": "disabled",
@@ -1400,52 +1658,52 @@
         },
         {
           "name": "cols",
-          "description": "If provided, sets the cols of the textarea",
+          "description": "If defined, sets the cols of the textarea",
           "values": []
         },
         {
           "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.",
           "values": []
         },
         {
           "name": "debug",
-          "description": "If provided, outputs helping hints in console",
+          "description": "If true, outputs helping hints in console",
           "values": []
         },
         {
           "name": "hide-label",
-          "description": "hide-label - If true, hides the label visually",
+          "description": "If true, hides the label visually",
           "values": []
         },
         {
           "name": "hint",
-          "description": "If provided, displays informational text below the field",
+          "description": "If defined, displays informational text below the field",
           "values": []
         },
         {
           "name": "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.",
           "values": []
         },
         {
           "name": "name",
-          "description": "If provided, adds name to the input-element",
+          "description": "If defined, adds name to the input-element",
           "values": []
         },
         {
           "name": "maxlength",
-          "description": "If provided, sets the maximum character length to accept for this input",
+          "description": "If defined, sets the maximum character length to accept for this input",
           "values": []
         },
         {
           "name": "minlength",
-          "description": "If provided, sets the minimum character length to accept for this input",
+          "description": "If defined, sets the minimum character length to accept for this input",
           "values": []
         },
         {
           "name": "placeholder",
-          "description": "If provided, displays placeholder text",
+          "description": "If defined, displays placeholder text",
           "values": []
         },
         {
@@ -1455,18 +1713,23 @@
         },
         {
           "name": "required-label",
-          "description": "If provided, renders an alternative A11y text for the asterisk",
+          "description": "If defined, renders an alternative A11y text for the asterisk",
           "values": []
         },
         {
           "name": "rows",
-          "description": "If provided, sets the rows of the textarea",
+          "description": "If defined, sets the rows of the textarea",
           "values": []
         },
         {
           "name": "severity",
-          "description": "If provided, displays provided severity state",
-          "values": [{ "name": "success" }, { "name": "error" }]
+          "description": "If defined, displays provided severity state",
+          "values": [
+            { "name": "success" },
+            { "name": "info" },
+            { "name": "warning" },
+            { "name": "alert" }
+          ]
         },
         {
           "name": "show-valid",
@@ -1475,12 +1738,12 @@
         },
         {
           "name": "size",
-          "description": "If provided, displays an alternative size",
+          "description": "Size of the Textarea",
           "values": [{ "name": "sm" }, { "name": "md" }]
         },
         {
           "name": "validate-on",
-          "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
+          "description": "Sets validation start",
           "values": [
             { "name": "input" },
             { "name": "change" },
@@ -1494,6 +1757,45 @@
         }
       ],
       "references": []
+    },
+    {
+      "name": "skf-toast",
+      "description": "A simple toast component that displays a message to the user. Use by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant.\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+      "attributes": [
+        {
+          "name": "closeable",
+          "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+          "values": []
+        },
+        { "name": "debug", "values": [] },
+        {
+          "name": "severity",
+          "description": "Severity of the toast.",
+          "values": [
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "warning" },
+            { "name": "error" }
+          ]
+        },
+        {
+          "name": "timer",
+          "description": "Time in seconds before the toast disappears.",
+          "values": []
+        },
+        {
+          "name": "topOffset",
+          "description": "offsets where toasts emerge vertically",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-toast-wrapper",
+      "description": "The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.\n---\n\n\n### **Slots:**\n - _default_ - The alert components that the toast creates will render here.",
+      "attributes": [{ "name": "debug", "values": [] }],
+      "references": []
     }
   ]
 }