@skf-design-system/ui-components 0.0.1-beta.1

package/dist/web-types.json

@@ -0,0 +1,1771 @@
+{
+  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
+  "name": "@skf-design-system/ui-components",
+  "version": "0.0.0",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "skf-accordion",
+          "description": "The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.\n\nSee [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6256cb1b44eba592d319d92e) for design principles.\n---\n\n\n### **Slots:**\n - _default_ - Expects one or more <skf-accordion-item> element(s)",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "animated",
+              "description": "If true, will animate the expand/collapse state",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "heading-as",
+              "description": "Controls which heading element will be rendered",
+              "value": {
+                "type": "Exclude<HeadingType, 'h1'>",
+                "default": "'h2'"
+              }
+            },
+            {
+              "name": "gap",
+              "description": "If provided, adds a gap between each item",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "multiple",
+              "description": "If true, allowes multiple accordion items to open",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "small",
+              "description": "If true, renders the small version",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "truncate",
+              "description": "If true, will truncate all headings in collapsed state",
+              "value": { "type": "boolean | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Expects one or more <skf-accordion-item> element(s)"
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "animated",
+                "description": "If true, will animate the expand/collapse state",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "headingAs",
+                "description": "Controls which heading element will be rendered",
+                "type": "Exclude<HeadingType, 'h1'>"
+              },
+              {
+                "name": "gap",
+                "description": "If provided, adds a gap between each item",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "multiple",
+                "description": "If true, allowes multiple accordion items to open",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "small",
+                "description": "If true, renders the small version",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "truncate",
+                "description": "If true, will truncate all headings in collapsed state",
+                "type": "boolean | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-alert",
+          "description": "The `<skf-alert>` is a type of notification that appears in-line\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - lodjvodjvodjo",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "closeable",
+              "description": "If true, alert is being used as a toast with an close button",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "button-label",
+              "description": "Close button aria-label",
+              "value": { "type": "string", "default": "'Close'" }
+            },
+            {
+              "name": "icon",
+              "description": "If defined, displays leading icon",
+              "value": { "type": "SkfIcon['name'] | undefined" }
+            },
+            {
+              "name": "severity",
+              "description": "If defined, gives the supplied appearance",
+              "value": { "type": "SeverityFgColor | undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Alert message. **Notice!** See design principles for approved content"
+            },
+            { "name": "link", "description": "lodjvodjvodjo" }
+          ],
+          "events": [
+            {
+              "name": "skf-alert-close",
+              "description": "Fires when the close button is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "closeable",
+                "description": "If true, alert is being used as a toast with an close button",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "buttonLabel",
+                "description": "Close button aria-label",
+                "type": "string"
+              },
+              {
+                "name": "icon",
+                "description": "If defined, displays leading icon",
+                "type": "SkfIcon['name'] | undefined"
+              },
+              {
+                "name": "severity",
+                "description": "If defined, gives the supplied appearance",
+                "type": "SeverityFgColor | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-alert-close",
+                "description": "Fires when the close button is clicked"
+              }
+            ]
+          }
+        },
+        {
+          "name": "skf-button",
+          "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Slots:**\n - _default_ - The Primary content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "destructive",
+              "description": "If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "disabled",
+              "description": "If true, removes border",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "icon",
+              "description": "If provided, renders an icon before or after the text",
+              "value": {
+                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+              }
+            },
+            {
+              "name": "icon-position",
+              "description": "If provided, determines the positioning of the icon in relation to the text",
+              "value": {
+                "type": "'left' | 'right' | undefined",
+                "default": "'left'"
+              }
+            },
+            {
+              "name": "loading",
+              "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "If provided, displays an alternative size",
+              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }
+            },
+            {
+              "name": "type",
+              "description": "If provided, changes the button type",
+              "value": {
+                "type": "'button' | 'submit' | 'reset'",
+                "default": "'button'"
+              }
+            },
+            {
+              "name": "variant",
+              "description": "If provided, alters the appearance",
+              "value": {
+                "type": "'primary' | 'secondary'",
+                "default": "'primary'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The Primary content" }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "destructive",
+                "description": "If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`.",
+                "type": "boolean"
+              },
+              {
+                "name": "disabled",
+                "description": "If true, removes border",
+                "type": "boolean"
+              },
+              {
+                "name": "icon",
+                "description": "If provided, renders an icon before or after the text",
+                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+              },
+              {
+                "name": "iconPosition",
+                "description": "If provided, determines the positioning of the icon in relation to the text",
+                "type": "'left' | 'right' | undefined"
+              },
+              {
+                "name": "loading",
+                "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "If provided, displays an alternative size",
+                "type": "'sm' | 'md' | 'lg'"
+              },
+              {
+                "name": "type",
+                "description": "If provided, changes the button type",
+                "type": "'button' | 'submit' | 'reset'"
+              },
+              {
+                "name": "variant",
+                "description": "If provided, alters the appearance",
+                "type": "'primary' | 'secondary'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-card",
+          "description": "The `<skf-card>` can be used to group related subjects in a container\n---\n\n\n### **Slots:**\n - _default_ - The card's main content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "no-border",
+              "description": "If true, removes border",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-padding",
+              "description": "If true, removes padding",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "stretch",
+              "description": "If true, the Card fills the parent element height",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The card's main content" }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "noBorder",
+                "description": "If true, removes border",
+                "type": "boolean"
+              },
+              {
+                "name": "noPadding",
+                "description": "If true, removes padding",
+                "type": "boolean"
+              },
+              {
+                "name": "stretch",
+                "description": "If true, the Card fills the parent element height",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, sets disabled state",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "required",
+              "description": "If true, value is required or must be checked for the form to be submittable",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "debug",
+              "description": "If defined, outputs helping hints in console",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "checked",
+              "description": "If true, outputs helping hints in console",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "custom-invalid",
+              "description": "If true, forces component to invalid state until removed",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "hide-label",
+              "description": "If true, hides the label visually",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "label",
+              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "name",
+              "description": "If defined, adds name to the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "required-label",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "size",
+              "description": "Size of the checkbox",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+            },
+            {
+              "name": "severity",
+              "description": "If defined, styles checkbox using provided severity",
+              "value": { "type": "FormFieldBaseProps['severity'] | undefined" }
+            },
+            {
+              "name": "show-valid",
+              "description": "If defined, displays valid state after interaction",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the input field",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "Default",
+              "description": "Alternatively, you can use the `label` attribute"
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "{object} - When the value of the input changes"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "debug",
+                "description": "If defined, outputs helping hints in console",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "checked",
+                "description": "If true, outputs helping hints in console",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "customInvalid",
+                "description": "If true, forces component to invalid state until removed",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "hideLabel",
+                "description": "If true, hides the label visually",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "indeterminate",
+                "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "label",
+                "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "name",
+                "description": "If defined, adds name to the input-element",
+                "type": "string | undefined"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "If defined, renders an alternative A11y text for the asterisk",
+                "type": "string | undefined"
+              },
+              {
+                "name": "size",
+                "description": "Size of the checkbox",
+                "type": "'sm' | 'md'"
+              },
+              {
+                "name": "severity",
+                "description": "If defined, styles checkbox using provided severity",
+                "type": "FormFieldBaseProps['severity'] | undefined"
+              },
+              {
+                "name": "showValid",
+                "description": "If defined, displays valid state after interaction",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the input field",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "description": "{object} - When the value of the input changes"
+              }
+            ]
+          }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "animated",
+              "description": "If true, will animate the expand/collapse state",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "expanded",
+              "description": "If true, will set the collapse to be expanded by default",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "heading",
+              "description": "Heading for the collapse",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "heading-as",
+              "description": "Controls which heading element will be rendered",
+              "value": {
+                "type": "Exclude<HeadingType, 'h1'>",
+                "default": "'h2'"
+              }
+            },
+            {
+              "name": "small",
+              "description": "If true, renders the small version",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "truncate",
+              "description": "If true, will truncate the heading in collapsed state",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "Main content" }],
+          "events": [
+            {
+              "name": "skf-collapse-toggle",
+              "type": "CustomEvent",
+              "description": "Event emitted when toggled"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "animated",
+                "description": "If true, will animate the expand/collapse state",
+                "type": "boolean"
+              },
+              {
+                "name": "expanded",
+                "description": "If true, will set the collapse to be expanded by default",
+                "type": "boolean"
+              },
+              {
+                "name": "heading",
+                "description": "Heading for the collapse",
+                "type": "string | undefined"
+              },
+              {
+                "name": "headingAs",
+                "description": "Controls which heading element will be rendered",
+                "type": "Exclude<HeadingType, 'h1'>"
+              },
+              {
+                "name": "small",
+                "description": "If true, renders the small version",
+                "type": "boolean"
+              },
+              {
+                "name": "truncate",
+                "description": "If true, will truncate the heading in collapsed state",
+                "type": "boolean"
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-collapse-toggle",
+                "type": "CustomEvent",
+                "description": "Event emitted when toggled"
+              }
+            ]
+          }
+        },
+        {
+          "name": "skf-divider",
+          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information.\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "If provided, alters the Divider color",
+              "value": {
+                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "decorative",
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "vertical",
+              "description": "If true, renders the divider vertically",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "If provided, alters the Divider color",
+                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
+              },
+              {
+                "name": "decorative",
+                "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+                "type": "boolean"
+              },
+              {
+                "name": "vertical",
+                "description": "If true, renders the divider vertically",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "as",
+              "description": "Controls which heading element will be rendered. Should not be used to affect appearance.",
+              "value": { "type": "HeadingType", "default": "'h1'" }
+            },
+            {
+              "name": "styled-as",
+              "description": "If provided, changes the appearance of the heading",
+              "value": { "type": "HeadingType | undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "as",
+                "description": "Controls which heading element will be rendered. Should not be used to affect appearance.",
+                "type": "HeadingType"
+              },
+              {
+                "name": "styledAs",
+                "description": "If provided, changes the appearance of the heading",
+                "type": "HeadingType | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-icon",
+          "description": "The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "value": {
+                "type": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\"",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "label",
+              "description": "If provided, adds an alternate description to use for assistive devices",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "name",
+              "value": {
+                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+              }
+            },
+            {
+              "name": "size",
+              "value": {
+                "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"",
+                "default": "'md'"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "type": "\"primary\" | \"inverse\" | \"emphasised\" | \"secondary\" | \"success\" | \"info\" | \"warning\" | \"error\" | \"alert\""
+              },
+              {
+                "name": "label",
+                "description": "If provided, adds an alternate description to use for assistive devices",
+                "type": "string | undefined"
+              },
+              {
+                "name": "name",
+                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+              },
+              { "name": "size", "type": "\"xs\" | \"sm\" | \"md\" | \"lg\"" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-input",
+          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the input changes\n- **invalid** - Fires when the input is invalid\n\n### **Slots:**\n - **Default** -  Alternatively, you can use the `label` attribute",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, sets disabled state",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "required",
+              "description": "If true, value is required or must be checked for the form to be submittable",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "button-aria-label-clear",
+              "description": "If provided, renders a custom aria-label for the clear button **Notice!** Only applicable to type=search.",
+              "value": { "type": "string", "default": "'Clear input'" }
+            },
+            {
+              "name": "button-aria-label-hide",
+              "description": "If provided, renders a custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
+              "value": { "type": "string", "default": "'Hide password'" }
+            },
+            {
+              "name": "button-aria-label-show",
+              "description": "If provided, renders a custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
+              "value": { "type": "string", "default": "'Show password'" }
+            },
+            {
+              "name": "custom-invalid",
+              "description": "If provided, forces component to invalid state until removed. Its value is used as hint text.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "debug",
+              "description": "If provided, outputs helping hints in console",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hide-label",
+              "description": "If true, hides the label visually",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hint",
+              "description": "If provided, displays informational text below the field",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "inputmode",
+              "description": "If provided, tells what keyboard to use if applicable",
+              "value": {
+                "type": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'",
+                "default": "'text'"
+              }
+            },
+            {
+              "name": "label",
+              "description": "The input's label. Alternatively, you can use the `label` attribute.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "leading",
+              "description": "If provided, displays a prefix/adornment before the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "max",
+              "description": "If provided, sets the maximum value to accept for this input",
+              "value": { "type": "number | string | undefined" }
+            },
+            {
+              "name": "maxlength",
+              "description": "If provided, sets the maximum character length to accept for this input",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "min",
+              "description": "If provided, sets the minimum value to accept for this input",
+              "value": { "type": "number | string | undefined" }
+            },
+            {
+              "name": "minlength",
+              "description": "If provided, sets the minimum character length to accept for this input",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "name",
+              "description": "If provided, adds name to the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "pattern",
+              "description": "If provided, adds name to the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "placeholder",
+              "description": "If provided, displays placeholder text",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "readonly",
+              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "required-label",
+              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "severity",
+              "description": "If provided, displays provided severity state",
+              "value": { "type": "FormFieldBaseProps['severity'] | undefined" }
+            },
+            {
+              "name": "show-valid",
+              "description": "If provided, displays provided severity state",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "size",
+              "description": "If provided, displays an alternative size",
+              "value": { "type": "'sm' | 'md' | undefined", "default": "'md'" }
+            },
+            {
+              "name": "trailing",
+              "description": "If provided, displays a suffix/adornment after the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "type",
+              "description": "If provided, changes the type of form control",
+              "value": {
+                "type": "Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'> | undefined",
+                "default": "'text'"
+              }
+            },
+            {
+              "name": "validate-on",
+              "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
+              "value": {
+                "type": "'input' | 'change' | 'submit' | undefined",
+                "default": "'change'"
+              }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the input field",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "Default",
+              "description": " Alternatively, you can use the `label` attribute"
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "Fires when the value of the input changes"
+            },
+            {
+              "name": "invalid",
+              "description": "Fires when the input is invalid"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "buttonAriaLabelClear",
+                "description": "If provided, renders a custom aria-label for the clear button **Notice!** Only applicable to type=search.",
+                "type": "string"
+              },
+              {
+                "name": "buttonAriaLabelHide",
+                "description": "If provided, renders a custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
+                "type": "string"
+              },
+              {
+                "name": "buttonAriaLabelShow",
+                "description": "If provided, renders a custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
+                "type": "string"
+              },
+              {
+                "name": "customInvalid",
+                "description": "If provided, forces component to invalid state until removed. Its value is used as hint text."
+              },
+              {
+                "name": "debug",
+                "description": "If provided, outputs helping hints in console",
+                "type": "boolean"
+              },
+              {
+                "name": "hideLabel",
+                "description": "If true, hides the label visually",
+                "type": "boolean"
+              },
+              {
+                "name": "hint",
+                "description": "If provided, displays informational text below the field",
+                "type": "string | undefined"
+              },
+              {
+                "name": "inputmode",
+                "description": "If provided, tells what keyboard to use if applicable",
+                "type": "'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'"
+              },
+              {
+                "name": "label",
+                "description": "The input's label. Alternatively, you can use the `label` attribute.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "leading",
+                "description": "If provided, displays a prefix/adornment before the input-element",
+                "type": "string | undefined"
+              },
+              {
+                "name": "max",
+                "description": "If provided, sets the maximum value to accept for this input",
+                "type": "number | string | undefined"
+              },
+              {
+                "name": "maxLength",
+                "description": "If provided, sets the maximum character length to accept for this input",
+                "type": "number | undefined"
+              },
+              {
+                "name": "min",
+                "description": "If provided, sets the minimum value to accept for this input",
+                "type": "number | string | undefined"
+              },
+              {
+                "name": "minLength",
+                "description": "If provided, sets the minimum character length to accept for this input",
+                "type": "number | undefined"
+              },
+              {
+                "name": "name",
+                "description": "If provided, adds name to the input-element",
+                "type": "string | undefined"
+              },
+              {
+                "name": "pattern",
+                "description": "If provided, adds name to the input-element",
+                "type": "string | undefined"
+              },
+              {
+                "name": "placeholder",
+                "description": "If provided, displays placeholder text",
+                "type": "string | undefined"
+              },
+              {
+                "name": "readonly",
+                "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "If provided, renders an alternative A11y text for the asterisk",
+                "type": "string | undefined"
+              },
+              {
+                "name": "severity",
+                "description": "If provided, displays provided severity state",
+                "type": "FormFieldBaseProps['severity'] | undefined"
+              },
+              {
+                "name": "showValid",
+                "description": "If provided, displays provided severity state",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "size",
+                "description": "If provided, displays an alternative size",
+                "type": "'sm' | 'md' | undefined"
+              },
+              {
+                "name": "trailing",
+                "description": "If provided, displays a suffix/adornment after the input-element",
+                "type": "string | undefined"
+              },
+              {
+                "name": "type",
+                "description": "If provided, changes the type of form control",
+                "type": "Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'> | undefined"
+              },
+              {
+                "name": "validateOn",
+                "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
+                "type": "'input' | 'change' | 'submit' | undefined"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the input field",
+                "type": "string"
+              },
+              { "name": "_numberController" },
+              { "name": "_passwordController" }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "description": "Fires when the value of the input changes"
+              },
+              {
+                "name": "invalid",
+                "description": "Fires when the input is invalid"
+              }
+            ]
+          }
+        },
+        {
+          "name": "skf-link",
+          "description": "The `<skf-link>` can be used as either a regular link or a link styled semantic button\n---\n\n\n### **Slots:**\n - _default_ - The links' main content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "as",
+              "description": "Specifies semantic element to render -",
+              "value": { "type": "'button' | 'a'", "default": "'a'" }
+            },
+            {
+              "name": "color",
+              "value": {
+                "type": "'primary' | 'inverse'",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "If true, disables the link",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "download",
+              "description": "If provided, downloads the url",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "href",
+              "description": "If provided, loads url on click",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "icon",
+              "description": "If provided, renders an icon before or after the text",
+              "value": {
+                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+              }
+            },
+            {
+              "name": "icon-placement",
+              "description": "Position of the icon in relation to the text -",
+              "value": { "type": "'left' | 'right'", "default": "'left'" }
+            },
+            {
+              "name": "rel",
+              "description": "Specifies the relationship of the target object to the link object -",
+              "value": { "type": "string", "default": "'noreferrer noopener'" }
+            },
+            {
+              "name": "route",
+              "description": "If provided, used on conjunction with onClick property, second argument",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "stretch",
+              "description": "If true, fills the parents horizontal axis",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "target",
+              "description": "If provided, specifies where to open the linked document",
+              "value": {
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              }
+            },
+            {
+              "name": "type",
+              "description": "Type of button -",
+              "value": {
+                "type": "'button' | 'submit' | 'reset'",
+                "default": "'button'"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The links' main content" }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "as",
+                "description": "Specifies semantic element to render -",
+                "type": "'button' | 'a'"
+              },
+              { "name": "color", "type": "'primary' | 'inverse'" },
+              {
+                "name": "disabled",
+                "description": "If true, disables the link",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "download",
+                "description": "If provided, downloads the url",
+                "type": "string | undefined"
+              },
+              {
+                "name": "href",
+                "description": "If provided, loads url on click",
+                "type": "string | undefined"
+              },
+              {
+                "name": "icon",
+                "description": "If provided, renders an icon before or after the text",
+                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+              },
+              {
+                "name": "iconPlacement",
+                "description": "Position of the icon in relation to the text -",
+                "type": "'left' | 'right'"
+              },
+              {
+                "name": "rel",
+                "description": "Specifies the relationship of the target object to the link object -",
+                "type": "string"
+              },
+              {
+                "name": "route",
+                "description": "If provided, used on conjunction with onClick property, second argument",
+                "type": "string | undefined"
+              },
+              {
+                "name": "stretch",
+                "description": "If true, fills the parents horizontal axis",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "target",
+                "description": "If provided, specifies where to open the linked document",
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              {
+                "name": "type",
+                "description": "Type of button -",
+                "type": "'button' | 'submit' | 'reset'"
+              },
+              {
+                "name": "onClick",
+                "description": "If provided, custom function triggered by click where the second return parameter enables custom routing.",
+                "type": "function"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-loader",
+          "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities.\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "aria-label",
+              "value": { "type": "string", "default": "'Loading...'" }
+            },
+            {
+              "name": "invert",
+              "description": "If true, inverts the color (to be used on colored backgrounds)",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "size",
+              "description": "If provided, displays an alternative size",
+              "value": { "type": "'md' | 'sm' | undefined", "default": "'md'" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "ariaLabel", "type": "string" },
+              {
+                "name": "invert",
+                "description": "If true, inverts the color (to be used on colored backgrounds)",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "If provided, displays an alternative size",
+                "type": "'md' | 'sm' | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-logo",
+          "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--skf-logo-height** - The height of the logo _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "title",
+              "description": "The title of the logo",
+              "value": { "type": "string", "default": "'SKF logotype'" }
+            },
+            {
+              "name": "color",
+              "description": "If provided, sets color of the logo",
+              "value": {
+                "type": "\"primary\" | \"secondary\" | \"inverse\"",
+                "default": "'primary'"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "title",
+                "description": "The title of the logo",
+                "type": "string"
+              },
+              {
+                "name": "color",
+                "description": "If provided, sets color of the logo",
+                "type": "\"primary\" | \"secondary\" | \"inverse\""
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-radio",
+          "description": "The `<skf-radio>` component is used to create a radio input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - **Default** -  Alternatively, you can use the `label` attribute",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, sets disabled state",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "required",
+              "description": "If true, value is required or must be checked for the form to be submittable",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "debug",
+              "description": "If provided, outputs helping hints in console",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "checked",
+              "description": "If true, outputs helping hints in console",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "custom-invalid",
+              "description": "If true, forces component to invalid state until removed",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "hide-label",
+              "description": "If true, hides the label visually",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "label",
+              "description": "The input's label. Alternatively, you can use the `label` attribute.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "name",
+              "description": "If provided, adds name to the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "required-label",
+              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "size",
+              "description": "If provided, displays an alternative size",
+              "value": { "type": "'sm' | 'md' | undefined", "default": "'md'" }
+            },
+            {
+              "name": "severity",
+              "description": "If provided, displays provided severity state",
+              "value": { "type": "FormFieldBaseProps['severity'] | undefined" }
+            },
+            {
+              "name": "show-valid",
+              "description": "If provided, displays valid state after interaction",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the input field",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "Default",
+              "description": " Alternatively, you can use the `label` attribute"
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "{object} - When the value of the input changes"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "debug",
+                "description": "If provided, outputs helping hints in console",
+                "type": "boolean"
+              },
+              {
+                "name": "checked",
+                "description": "If true, outputs helping hints in console",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "customInvalid",
+                "description": "If true, forces component to invalid state until removed",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "hideLabel",
+                "description": "If true, hides the label visually",
+                "type": "boolean"
+              },
+              {
+                "name": "label",
+                "description": "The input's label. Alternatively, you can use the `label` attribute.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "name",
+                "description": "If provided, adds name to the input-element",
+                "type": "string | undefined"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "If provided, renders an alternative A11y text for the asterisk",
+                "type": "string | undefined"
+              },
+              {
+                "name": "size",
+                "description": "If provided, displays an alternative size",
+                "type": "'sm' | 'md' | undefined"
+              },
+              {
+                "name": "severity",
+                "description": "If provided, displays provided severity state",
+                "type": "FormFieldBaseProps['severity'] | undefined"
+              },
+              {
+                "name": "showValid",
+                "description": "If provided, displays valid state after interaction",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the input field",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "description": "{object} - When the value of the input changes"
+              }
+            ]
+          }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, sets disabled state",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "required",
+              "description": "If true, value is required or must be checked for the form to be submittable",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "debug",
+              "description": "If true, outputs helping hints in console",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "checked",
+              "description": "If true, outputs helping hints in console",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "hide-label",
+              "description": "If true, hides the label visually",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "label",
+              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "name",
+              "description": "If defined, adds name to the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "required-label",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "size",
+              "description": "Size of the Switch",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the input field",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's placeholder content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "debug",
+                "description": "If true, outputs helping hints in console",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "checked",
+                "description": "If true, outputs helping hints in console",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "hideLabel",
+                "description": "If true, hides the label visually",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "label",
+                "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "name",
+                "description": "If defined, adds name to the input-element",
+                "type": "string | undefined"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "If defined, renders an alternative A11y text for the asterisk",
+                "type": "string | undefined"
+              },
+              {
+                "name": "size",
+                "description": "Size of the Switch",
+                "type": "'sm' | 'md'"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the input field",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-tag",
+          "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "size",
+              "description": "Specifies Tag size -",
+              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }
+            },
+            {
+              "name": "icon",
+              "description": "If defined, displays leading/provided icon -",
+              "value": {
+                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+              }
+            },
+            {
+              "name": "color",
+              "description": "If defined, gives the supplied appearance -",
+              "value": {
+                "type": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
+              }
+            },
+            {
+              "name": "removable",
+              "description": "If true, adds trailing button to remove tag",
+              "value": { "type": "boolean | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's placeholder content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "size",
+                "description": "Specifies Tag size -",
+                "type": "'sm' | 'md' | 'lg'"
+              },
+              {
+                "name": "icon",
+                "description": "If defined, displays leading/provided icon -",
+                "type": "\"arrowDown\" | \"arrowDownUp\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"article\" | \"artificialIntelligence\" | \"asset\" | \"attachment\" | \"bandCursor\" | \"bands\" | \"batteryEmpty\" | \"batteryFull\" | \"batteryLow\" | \"bearingFault\" | \"book\" | \"bulb\" | \"burger\" | \"cPM\" | \"calendar\" | \"calendarBooked\" | \"calendarEmpty\" | \"calendarNotBooked\" | \"calendarRecurring\" | \"caretDown\" | \"caretUp\" | \"caretUpDown\" | \"chat\" | \"check\" | \"checkCircle\" | \"checkSmall\" | \"chevronDown\" | \"chevronLeft\" | \"chevronRight\" | \"chevronUp\" | \"chevronUpDown\" | \"close\" | \"closeAllFaults\" | \"closeFault\" | \"closeSmall\" | \"columnGraph\" | \"comment\" | \"connection1\" | \"connection2\" | \"connection3\" | \"connection4\" | \"danger\" | \"defectFrequencies\" | \"defectFrequenciesAlternative\" | \"doubleChevronLeft\" | \"doubleChevronRight\" | \"download\" | \"draft\" | \"draftFilled\" | \"draftOutlined\" | \"dragNDrop\" | \"drop\" | \"duplicate\" | \"edit\" | \"emailFilled\" | \"emailOutlined\" | \"exclamation\" | \"eye\" | \"eyeHidden\" | \"eyeVisible\" | \"filter\" | \"forbidden\" | \"fullScreen\" | \"fullScreenExit\" | \"functionalLocation\" | \"harmonicCursor\" | \"heatmap\" | \"hierarchy\" | \"history\" | \"historyAlt\" | \"hourglassFramedFilled\" | \"hourglassFramedOutlined\" | \"hourglassOutlined\" | \"hz\" | \"iMX\" | \"image\" | \"infoCircleFilled\" | \"infoCircleOutlined\" | \"integration\" | \"kebab\" | \"link\" | \"listGroup\" | \"listItem\" | \"locationPin\" | \"lock\" | \"logOut\" | \"meatballs\" | \"microphone\" | \"minus\" | \"minusSmall\" | \"noData\" | \"o\" | \"openInNew\" | \"overlayBaseline\" | \"pDF\" | \"paper\" | \"pause\" | \"pieChart\" | \"pin\" | \"play\" | \"plus\" | \"powerOff\" | \"printer\" | \"proCollect\" | \"recAction\" | \"received\" | \"refresh\" | \"reorder\" | \"replace\" | \"reply\" | \"rewalkableRoute\" | \"routes\" | \"search\" | \"send\" | \"sensorA\" | \"sensorB\" | \"settings\" | \"sidebandCursor\" | \"singleCursor\" | \"spectrum\" | \"starFilled\" | \"starOutlined\" | \"statusCircle\" | \"stop\" | \"structuralVibration\" | \"sync\" | \"timewave\" | \"trash\" | \"trend\" | \"trendingUp\" | \"undo\" | \"unknownCircle\" | \"unknownDiamond\" | \"unlink\" | \"unlock\" | \"unscheduledAction\" | \"upload\" | \"user\" | \"viewFull\" | \"viewHorizontal\" | \"viewVertical\" | \"warning\" | \"warningCircle\" | \"warningDiamond\" | \"zoomIn\" | \"zoomOut\""
+              },
+              {
+                "name": "color",
+                "description": "If defined, gives the supplied appearance -",
+                "type": "\"warning\" | \"success\" | \"info\" | \"error\" | \"alert\""
+              },
+              {
+                "name": "removable",
+                "description": "If true, adds trailing button to remove tag",
+                "type": "boolean | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, sets disabled state",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "required",
+              "description": "If true, value is required or must be checked for the form to be submittable",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "cols",
+              "description": "If provided, sets the cols of the textarea",
+              "value": { "type": "number", "default": "20" }
+            },
+            {
+              "name": "custom-invalid",
+              "description": "If provided, forces component to invalid state until removed. Its value is used as hint text.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "debug",
+              "description": "If provided, outputs helping hints in console",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hide-label",
+              "description": "hide-label - If true, hides the label visually",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hint",
+              "description": "If provided, displays informational text below the field",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "label",
+              "description": "The input's label. Alternatively, you can use the component slot.",
+              "value": { "type": "string", "default": "'Default label'" }
+            },
+            {
+              "name": "name",
+              "description": "If provided, adds name to the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "maxlength",
+              "description": "If provided, sets the maximum character length to accept for this input",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "minlength",
+              "description": "If provided, sets the minimum character length to accept for this input",
+              "value": { "type": "number | undefined" }
+            },
+            {
+              "name": "placeholder",
+              "description": "If provided, displays placeholder text",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "readonly",
+              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "required-label",
+              "description": "If provided, renders an alternative A11y text for the asterisk",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "rows",
+              "description": "If provided, sets the rows of the textarea",
+              "value": { "type": "number", "default": "2" }
+            },
+            {
+              "name": "severity",
+              "description": "If provided, displays provided severity state",
+              "value": { "type": "\"success\" | \"error\"" }
+            },
+            {
+              "name": "show-valid",
+              "description": "If true, displays valid state after interaction",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "size",
+              "description": "If provided, displays an alternative size",
+              "value": { "type": "'sm' | 'md' | undefined", "default": "'md'" }
+            },
+            {
+              "name": "validate-on",
+              "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
+              "value": {
+                "type": "'input' | 'change' | 'submit' | undefined",
+                "default": "'change'"
+              }
+            },
+            {
+              "name": "value",
+              "description": "The current value of the text area",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "The",
+              "description": "textareas label. Alternatively, you can use the `label` attribute."
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "Fires when the value of the input changes"
+            },
+            {
+              "name": "invalid",
+              "description": "Fires when the input is invalid"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "cols",
+                "description": "If provided, sets the cols of the textarea",
+                "type": "number"
+              },
+              {
+                "name": "customInvalid",
+                "description": "If provided, forces component to invalid state until removed. Its value is used as hint text."
+              },
+              {
+                "name": "debug",
+                "description": "If provided, outputs helping hints in console",
+                "type": "boolean"
+              },
+              {
+                "name": "hideLabel",
+                "description": "hide-label - If true, hides the label visually",
+                "type": "boolean"
+              },
+              {
+                "name": "hint",
+                "description": "If provided, displays informational text below the field",
+                "type": "string | undefined"
+              },
+              {
+                "name": "label",
+                "description": "The input's label. Alternatively, you can use the component slot.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "If provided, adds name to the input-element",
+                "type": "string | undefined"
+              },
+              {
+                "name": "maxLength",
+                "description": "If provided, sets the maximum character length to accept for this input",
+                "type": "number | undefined"
+              },
+              {
+                "name": "minLength",
+                "description": "If provided, sets the minimum character length to accept for this input",
+                "type": "number | undefined"
+              },
+              {
+                "name": "placeholder",
+                "description": "If provided, displays placeholder text",
+                "type": "string | undefined"
+              },
+              {
+                "name": "readonly",
+                "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "If provided, renders an alternative A11y text for the asterisk",
+                "type": "string | undefined"
+              },
+              {
+                "name": "rows",
+                "description": "If provided, sets the rows of the textarea",
+                "type": "number"
+              },
+              {
+                "name": "severity",
+                "description": "If provided, displays provided severity state",
+                "type": "\"success\" | \"error\""
+              },
+              {
+                "name": "showValid",
+                "description": "If true, displays valid state after interaction",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "size",
+                "description": "If provided, displays an alternative size",
+                "type": "'sm' | 'md' | undefined"
+              },
+              {
+                "name": "validateOn",
+                "description": "If provided, sets validation start, \"input\", \"change\" or \"submit\"",
+                "type": "'input' | 'change' | 'submit' | undefined"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the text area",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "change",
+                "description": "Fires when the value of the input changes"
+              },
+              {
+                "name": "invalid",
+                "description": "Fires when the input is invalid"
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}