@skf-design-system/ui-components 1.0.2-beta.0 → 1.0.2-beta.10

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

@@ -4,22 +4,12 @@
   "tags": [
     {
       "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",
+      "description": "The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text.\n---\n",
       "attributes": [
         {
           "name": "color",
           "description": "Sets the color of the icon",
-          "values": [
-            { "name": "primary" },
-            { "name": "inverse" },
-            { "name": "emphasised" },
-            { "name": "secondary" },
-            { "name": "success" },
-            { "name": "info" },
-            { "name": "warning" },
-            { "name": "error" },
-            { "name": "alert" }
-          ]
+          "values": [{ "name": "IconColor" }]
         },
         {
           "name": "label",
@@ -29,257 +19,39 @@
         {
           "name": "name",
           "description": "Name of the icon to display",
-          "values": [
-            { "name": "addCircleOutline" },
-            { "name": "addCircle" },
-            { "name": "addPlus" },
-            { "name": "arrowBackIos" },
-            { "name": "arrowBack" },
-            { "name": "arrowDown" },
-            { "name": "arrowForwardIos" },
-            { "name": "arrowForward" },
-            { "name": "arrowLeft" },
-            { "name": "arrowRight" },
-            { "name": "arrowUpDown" },
-            { "name": "arrowUp" },
-            { "name": "article" },
-            { "name": "asset" },
-            { "name": "attachment" },
-            { "name": "bandCursor" },
-            { "name": "bands" },
-            { "name": "batteryEmpty" },
-            { "name": "batteryFull" },
-            { "name": "batteryLow" },
-            { "name": "bearingFault" },
-            { "name": "bluetoothDisabled" },
-            { "name": "bluetooth" },
-            { "name": "book" },
-            { "name": "bookmarkOutline" },
-            { "name": "bookmark" },
-            { "name": "calculator" },
-            { "name": "calendarBusy" },
-            { "name": "calendarCheck" },
-            { "name": "calendarEmpty" },
-            { "name": "calendarMonth" },
-            { "name": "calendarReccuring" },
-            { "name": "call" },
-            { "name": "caretDown" },
-            { "name": "caretUpDown" },
-            { "name": "caretUp" },
-            { "name": "chat" },
-            { "name": "checkCircleOutline" },
-            { "name": "checkCircle" },
-            { "name": "checkSmall" },
-            { "name": "check" },
-            { "name": "chevronDownUp" },
-            { "name": "chevronDown" },
-            { "name": "chevronLeft" },
-            { "name": "chevronRight" },
-            { "name": "chevronUpDown" },
-            { "name": "chevronUp" },
-            { "name": "chip" },
-            { "name": "circleStatus" },
-            { "name": "closeAll" },
-            { "name": "closeAlt" },
-            { "name": "close" },
-            { "name": "columnGraph" },
-            { "name": "comment" },
-            { "name": "connection0" },
-            { "name": "connection1" },
-            { "name": "connection2" },
-            { "name": "connection3" },
-            { "name": "connection4" },
-            { "name": "contentPaste" },
-            { "name": "copy" },
-            { "name": "cpmCyclesPerMinute" },
-            { "name": "dangerOutline" },
-            { "name": "danger" },
-            { "name": "defectFrequenciesAlt" },
-            { "name": "defectFrequencies" },
-            { "name": "deleteOutline" },
-            { "name": "delete" },
-            { "name": "devices" },
-            { "name": "directions" },
-            { "name": "doubleChevronLeft" },
-            { "name": "doubleChevronRight" },
-            { "name": "downloadDone" },
-            { "name": "download" },
-            { "name": "draftOutline" },
-            { "name": "draft" },
-            { "name": "dragDrop" },
-            { "name": "drop" },
-            { "name": "duplicate" },
-            { "name": "editOutline" },
-            { "name": "edit" },
-            { "name": "emailOutline" },
-            { "name": "emailPdf" },
-            { "name": "email" },
-            { "name": "errorOutline" },
-            { "name": "error" },
-            { "name": "exclamation" },
-            { "name": "facebook" },
-            { "name": "filterOutline" },
-            { "name": "filter" },
-            { "name": "findReplace" },
-            { "name": "forbidden" },
-            { "name": "frequencyHz" },
-            { "name": "fullScreen" },
-            { "name": "fullscreenExit" },
-            { "name": "functionalGroup" },
-            { "name": "hamburgerMenu" },
-            { "name": "harmonicCursor" },
-            { "name": "heatmap" },
-            { "name": "hierarchy" },
-            { "name": "history" },
-            { "name": "homeOutline" },
-            { "name": "home" },
-            { "name": "hourglassOutline" },
-            { "name": "hourglass" },
-            { "name": "image" },
-            { "name": "imx" },
-            { "name": "infoOutline" },
-            { "name": "info" },
-            { "name": "instagram" },
-            { "name": "integration" },
-            { "name": "iosShare" },
-            { "name": "kebabMore" },
-            { "name": "language" },
-            { "name": "lightbulbOutline" },
-            { "name": "lightbulb" },
-            { "name": "link" },
-            { "name": "linkedin" },
-            { "name": "listGroup" },
-            { "name": "list" },
-            { "name": "locationPin" },
-            { "name": "lockOutline" },
-            { "name": "lock" },
-            { "name": "logOut" },
-            { "name": "login" },
-            { "name": "meatballsMoreCircle" },
-            { "name": "meatballsMore" },
-            { "name": "microphone" },
-            { "name": "nearMe" },
-            { "name": "noData" },
-            { "name": "notificationsBellOutline" },
-            { "name": "notificationsBell" },
-            { "name": "o" },
-            { "name": "offer" },
-            { "name": "openInNew" },
-            { "name": "overlaysBaseline" },
-            { "name": "pan360" },
-            { "name": "paper" },
-            { "name": "pause" },
-            { "name": "pdfOutline" },
-            { "name": "pdf" },
-            { "name": "person" },
-            { "name": "photoCameraOutline" },
-            { "name": "photoCamera" },
-            { "name": "pieChart" },
-            { "name": "pinOutline" },
-            { "name": "pin" },
-            { "name": "play" },
-            { "name": "powerOff" },
-            { "name": "printOutline" },
-            { "name": "print" },
-            { "name": "privacyPolicyOutline" },
-            { "name": "privacyPolicy" },
-            { "name": "proCollect" },
-            { "name": "recAction" },
-            { "name": "refresh" },
-            { "name": "removeMinus" },
-            { "name": "reorder" },
-            { "name": "reply" },
-            { "name": "report" },
-            { "name": "rewakableRoute" },
-            { "name": "route" },
-            { "name": "search" },
-            { "name": "sendOutline" },
-            { "name": "send" },
-            { "name": "sensorAlt" },
-            { "name": "sensor" },
-            { "name": "settingsOutline" },
-            { "name": "settings" },
-            { "name": "share" },
-            { "name": "shoppingCart" },
-            { "name": "sidebandCursor" },
-            { "name": "singleCursor" },
-            { "name": "skfBearing" },
-            { "name": "spectrum" },
-            { "name": "starOutline" },
-            { "name": "star" },
-            { "name": "stop" },
-            { "name": "sync" },
-            { "name": "time" },
-            { "name": "timewave" },
-            { "name": "translate" },
-            { "name": "trend" },
-            { "name": "trendingUp" },
-            { "name": "twitter" },
-            { "name": "undo" },
-            { "name": "unknownDiamondOutline" },
-            { "name": "unknownDiamond" },
-            { "name": "unknownOutline" },
-            { "name": "unknown" },
-            { "name": "unlink" },
-            { "name": "unlockOutline" },
-            { "name": "unlock" },
-            { "name": "unscheduledAction" },
-            { "name": "upload" },
-            { "name": "vibrationAlt" },
-            { "name": "vibration" },
-            { "name": "view3D" },
-            { "name": "viewFull" },
-            { "name": "viewHorizontal" },
-            { "name": "viewVertical" },
-            { "name": "visibilityOffOutline" },
-            { "name": "visibilityOff" },
-            { "name": "visibilityOutline" },
-            { "name": "visibility" },
-            { "name": "warningDiamondOutline" },
-            { "name": "warningDiamond" },
-            { "name": "warningOutline" },
-            { "name": "warning" },
-            { "name": "youtube" },
-            { "name": "zoomIn" },
-            { "name": "zoomOut" }
-          ]
+          "values": [{ "name": "Icon" }]
         },
         {
           "name": "size",
           "description": "Size of the icon",
-          "values": [
-            { "name": "xs" },
-            { "name": "sm" },
-            { "name": "md" },
-            { "name": "lg" }
-          ]
+          "values": [{ "name": "SkfIconSize" }]
         }
       ],
       "references": []
     },
     {
-      "name": "skf-collapse",
-      "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",
+      "name": "skf-accordion-item",
+      "description": "The `<skf-accordion-item>` is used in conjunction with the `<skf-accordion>` component\n---\n\n\n### **Events:**\n - **skf-accordion-item-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",
-          "description": "If true, will animate the expand/collapse state",
+          "description": "If true, will animate the expand/accordion-item state",
           "values": []
         },
         {
           "name": "expanded",
-          "description": "If true, will set the collapse to be expanded by default",
+          "description": "If true, will set the accordion-item to be expanded by default",
           "values": []
         },
         {
           "name": "heading",
-          "description": "Heading for the collapse",
+          "description": "Heading for the accordion-item",
           "values": []
         },
         {
           "name": "heading-as",
           "description": "Defines which heading element will be rendered",
-          "values": [{ "name": "h2" }, { "name": "h3" }, { "name": "h4" }]
+          "values": [{ "name": "SkfAccordionItemHeadingType" }]
         },
         {
           "name": "small",
@@ -288,7 +60,7 @@
         },
         {
           "name": "truncate",
-          "description": "If true, will truncate the heading in collapsed state",
+          "description": "If true, will truncate the heading in accordion-item state",
           "values": []
         }
       ],
@@ -296,7 +68,7 @@
     },
     {
       "name": "skf-accordion",
-      "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)",
+      "description": "The `<skf-accordion>` component consists of one or more `<skf-accordion-item>` item(s) 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",
@@ -306,12 +78,7 @@
         {
           "name": "heading-as",
           "description": "Defines which heading element will be rendered",
-          "values": [
-            { "name": "h1" },
-            { "name": "h2" },
-            { "name": "h3" },
-            { "name": "h4" }
-          ]
+          "values": [{ "name": "SkfAccordionItemHeadingType" }]
         },
         {
           "name": "gap",
@@ -338,17 +105,17 @@
     },
     {
       "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** - Slot for the link",
+      "description": "The `<skf-alert>` is a type of notification that appears in-line\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/990ec5-alert) for design principles\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": "button-label",
-          "description": "Close button aria-label",
-          "values": []
-        },
         {
           "name": "icon",
           "description": "If defined, displays leading icon",
-          "values": [{ "name": "SkfAlertIcon" }]
+          "values": [{ "name": "Icon" }]
+        },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
         },
         {
           "name": "persistent",
@@ -358,7 +125,7 @@
         {
           "name": "severity",
           "description": "If defined, gives the supplied appearance",
-          "values": [{ "name": "SkfAlertSeverity" }]
+          "values": [{ "name": "Severity" }]
         }
       ],
       "references": []
@@ -385,9 +152,9 @@
           "values": []
         },
         {
-          "name": "size",
-          "description": "Displays an alternative size",
-          "values": [{ "name": "md" }, { "name": "sm" }]
+          "name": "small",
+          "description": "If true, renders a smaller version",
+          "values": []
         }
       ],
       "references": []
@@ -396,11 +163,6 @@
       "name": "skf-loader",
       "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities\n---\n",
       "attributes": [
-        {
-          "name": "aria-label",
-          "description": "Defines the aria-label",
-          "values": []
-        },
         {
           "name": "invert",
           "description": "If true, inverts the color (to be used on colored backgrounds)",
@@ -409,14 +171,14 @@
         {
           "name": "size",
           "description": "Defines the size of the loader",
-          "values": [{ "name": "md" }, { "name": "sm" }]
+          "values": [{ "name": "Size" }]
         }
       ],
       "references": []
     },
     {
       "name": "skf-button",
-      "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",
+      "description": "Component to be used in forms or for interactivity\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/02493d-buttons) for design principles\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",
@@ -431,163 +193,11 @@
         {
           "name": "icon",
           "description": "If provided, renders an icon before or after the text",
-          "values": [
-            { "name": "arrowDown" },
-            { "name": "arrowDownUp" },
-            { "name": "arrowLeft" },
-            { "name": "arrowRight" },
-            { "name": "arrowUp" },
-            { "name": "article" },
-            { "name": "artificialIntelligence" },
-            { "name": "asset" },
-            { "name": "attachment" },
-            { "name": "bandCursor" },
-            { "name": "bands" },
-            { "name": "batteryEmpty" },
-            { "name": "batteryFull" },
-            { "name": "batteryLow" },
-            { "name": "bearingFault" },
-            { "name": "book" },
-            { "name": "bulb" },
-            { "name": "burger" },
-            { "name": "cPM" },
-            { "name": "calendar" },
-            { "name": "calendarBooked" },
-            { "name": "calendarEmpty" },
-            { "name": "calendarNotBooked" },
-            { "name": "calendarRecurring" },
-            { "name": "caretDown" },
-            { "name": "caretUp" },
-            { "name": "caretUpDown" },
-            { "name": "chat" },
-            { "name": "check" },
-            { "name": "checkCircle" },
-            { "name": "checkSmall" },
-            { "name": "chevronDown" },
-            { "name": "chevronLeft" },
-            { "name": "chevronRight" },
-            { "name": "chevronUp" },
-            { "name": "chevronUpDown" },
-            { "name": "close" },
-            { "name": "closeAllFaults" },
-            { "name": "closeFault" },
-            { "name": "closeSmall" },
-            { "name": "columnGraph" },
-            { "name": "comment" },
-            { "name": "connection1" },
-            { "name": "connection2" },
-            { "name": "connection3" },
-            { "name": "connection4" },
-            { "name": "danger" },
-            { "name": "defectFrequencies" },
-            { "name": "defectFrequenciesAlternative" },
-            { "name": "doubleChevronLeft" },
-            { "name": "doubleChevronRight" },
-            { "name": "download" },
-            { "name": "draft" },
-            { "name": "draftFilled" },
-            { "name": "draftOutlined" },
-            { "name": "dragNDrop" },
-            { "name": "drop" },
-            { "name": "duplicate" },
-            { "name": "edit" },
-            { "name": "emailFilled" },
-            { "name": "emailOutlined" },
-            { "name": "exclamation" },
-            { "name": "eye" },
-            { "name": "eyeHidden" },
-            { "name": "eyeVisible" },
-            { "name": "filter" },
-            { "name": "forbidden" },
-            { "name": "fullScreen" },
-            { "name": "fullScreenExit" },
-            { "name": "functionalLocation" },
-            { "name": "harmonicCursor" },
-            { "name": "heatmap" },
-            { "name": "hierarchy" },
-            { "name": "history" },
-            { "name": "historyAlt" },
-            { "name": "hourglassFramedFilled" },
-            { "name": "hourglassFramedOutlined" },
-            { "name": "hourglassOutlined" },
-            { "name": "hz" },
-            { "name": "iMX" },
-            { "name": "image" },
-            { "name": "infoCircleFilled" },
-            { "name": "infoCircleOutlined" },
-            { "name": "integration" },
-            { "name": "kebab" },
-            { "name": "link" },
-            { "name": "listGroup" },
-            { "name": "listItem" },
-            { "name": "locationPin" },
-            { "name": "lock" },
-            { "name": "logOut" },
-            { "name": "meatballs" },
-            { "name": "microphone" },
-            { "name": "minus" },
-            { "name": "minusSmall" },
-            { "name": "noData" },
-            { "name": "o" },
-            { "name": "openInNew" },
-            { "name": "overlayBaseline" },
-            { "name": "pDF" },
-            { "name": "paper" },
-            { "name": "pause" },
-            { "name": "pieChart" },
-            { "name": "pin" },
-            { "name": "play" },
-            { "name": "plus" },
-            { "name": "powerOff" },
-            { "name": "printer" },
-            { "name": "proCollect" },
-            { "name": "recAction" },
-            { "name": "received" },
-            { "name": "refresh" },
-            { "name": "reorder" },
-            { "name": "replace" },
-            { "name": "reply" },
-            { "name": "rewalkableRoute" },
-            { "name": "routes" },
-            { "name": "search" },
-            { "name": "send" },
-            { "name": "sensorA" },
-            { "name": "sensorB" },
-            { "name": "settings" },
-            { "name": "sidebandCursor" },
-            { "name": "singleCursor" },
-            { "name": "spectrum" },
-            { "name": "starFilled" },
-            { "name": "starOutlined" },
-            { "name": "statusCircle" },
-            { "name": "stop" },
-            { "name": "structuralVibration" },
-            { "name": "sync" },
-            { "name": "timewave" },
-            { "name": "trash" },
-            { "name": "trend" },
-            { "name": "trendingUp" },
-            { "name": "undo" },
-            { "name": "unknownCircle" },
-            { "name": "unknownDiamond" },
-            { "name": "unlink" },
-            { "name": "unlock" },
-            { "name": "unscheduledAction" },
-            { "name": "upload" },
-            { "name": "user" },
-            { "name": "viewFull" },
-            { "name": "viewHorizontal" },
-            { "name": "viewVertical" },
-            { "name": "warning" },
-            { "name": "warningCircle" },
-            { "name": "warningDiamond" },
-            { "name": "zoomIn" },
-            { "name": "zoomOut" }
-          ]
+          "values": [{ "name": "Icon" }]
         },
         {
-          "name": "iconOnly",
-          "description": "If true, removes border",
+          "name": "icon-only",
+          "description": "If true, button will take a square shape",
           "values": []
         },
         {
@@ -609,11 +219,7 @@
         {
           "name": "type",
           "description": "If provided, changes the button type",
-          "values": [
-            { "name": "button" },
-            { "name": "submit" },
-            { "name": "reset" }
-          ]
+          "values": [{ "name": "SkfButtonType" }]
         },
         {
           "name": "variant",
@@ -629,7 +235,7 @@
     },
     {
       "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",
+      "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles\n---\n\n\n### **Slots:**\n - _default_ - The card's main content\n\n### **CSS Properties:**\n - **--mod-card-bg-color** - Ability to set a custom background color _(default: undefined)_",
       "attributes": [
         {
           "name": "no-border",
@@ -651,7 +257,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_ - The Radios label. 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** - 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",
@@ -689,24 +295,19 @@
           "values": []
         },
         {
-          "name": "name",
-          "description": "If defined, adds name to the input-element",
-          "values": []
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
         },
         {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
+          "name": "name",
+          "description": "If defined, adds name to the input-element",
           "values": []
         },
         {
           "name": "severity",
           "description": "If defined, styles checkbox using provided severity",
-          "values": [
-            { "name": "alert" },
-            { "name": "success" },
-            { "name": "info" },
-            { "name": "warning" }
-          ]
+          "values": [{ "name": "FormFieldSeverity" }]
         },
         {
           "name": "show-valid",
@@ -727,28 +328,90 @@
       "references": []
     },
     {
-      "name": "skf-datepicker",
-      "description": "A date picker component that allows users to select a date or a range of dates.\n---\n\n\n### **Events:**\n - **selected-date-changed** - When a date is selected\n- **selected-date-range-changed** - When a range of dates is selected\n\n### **Methods:**\n - **gotoDate(date: _Date | string_)** - Navigates to the given date.\n\n### **Slots:**\n - _default_ - Default hint content placed inside the date picker\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the date picker _(default: undefined)_",
+      "name": "skf-datepicker-calendar",
+      "description": "\n---\n",
       "attributes": [
+        { "name": "eventid", "values": [] },
+        { "name": "firstDayOfWeek", "values": [] },
+        {
+          "name": "invalid-dates",
+          "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+          "values": []
+        },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
+        { "name": "locale", "values": [] },
+        { "name": "range", "values": [] },
         {
-          "name": "locale",
-          "description": "The locale to use for formatting the date",
+          "name": "selectable-from",
+          "description": "Earliest selectable date. (yyyy-mm-dd format)",
           "values": []
         },
         {
-          "name": "date",
-          "description": "The date to display in the date picker",
+          "name": "selectable-to",
+          "description": "Latest selectable date. (yyyy-mm-dd format)",
+          "values": []
+        },
+        { "name": "selected-date", "values": [{ "name": "Date" }] },
+        {
+          "name": "selectedDateRange",
+          "values": [
+            { "name": "{ start: Date" },
+            { "name": "null; end: Date" },
+            { "name": "null }" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-datepicker",
+      "description": "\n---\n\n\n### **Methods:**\n - **clear()** - Clears the input field",
+      "attributes": [
+        {
+          "name": "custom-invalid",
+          "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
           "values": []
         },
         { "name": "id", "values": [] },
+        {
+          "name": "label",
+          "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+          "values": []
+        },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
+        {
+          "name": "hide-label",
+          "description": "If true, hides the label visually",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "If defined, displays informational text below the field",
+          "values": []
+        },
         {
           "name": "invalid-dates",
           "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
           "values": []
         },
         {
-          "name": "range",
-          "description": "If true, the date picker will allow the selection of a range of dates",
+          "name": "name",
+          "description": "If defined, adds name to the input-element",
+          "values": []
+        },
+        { "name": "placeholder", "values": [] },
+        { "name": "range", "values": [] },
+        {
+          "name": "readonly",
+          "description": "If true, makes the element not mutable, meaning the user can not edit the control",
           "values": []
         },
         {
@@ -760,6 +423,35 @@
           "name": "selectable-to",
           "description": "Latest selectable date. (yyyy-mm-dd format)",
           "values": []
+        },
+        {
+          "name": "severity",
+          "description": "If defined, displays provided severity state",
+          "values": [
+            { "name": "alert" },
+            { "name": "success" },
+            { "name": "info" },
+            { "name": "warning" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Size of the input",
+          "values": [{ "name": "sm" }, { "name": "md" }]
+        },
+        {
+          "name": "validate-on",
+          "description": "Sets validation start",
+          "values": [
+            { "name": "input" },
+            { "name": "change" },
+            { "name": "submit" }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The current value of the input field",
+          "values": []
         }
       ],
       "references": []
@@ -771,25 +463,20 @@
         {
           "name": "as",
           "description": "Controls which heading element will be rendered. Should not be used to affect appearance",
-          "values": [{ "name": "SkfHeadingType" }]
+          "values": [{ "name": "HeadingType" }]
         },
         {
           "name": "styled-as",
           "description": "If defined, changes the appearance of the heading",
-          "values": [{ "name": "SkfHeadingType" }]
+          "values": [{ "name": "HeadingType" }]
         }
       ],
       "references": []
     },
     {
       "name": "skf-dialog",
-      "description": "The `<skf-dialog>` is a component that open up a dialog of type modal with the content provided. (MDN refrains from opening the dialog using the `open` attribute, however skf-dialog does not have that limitation)\n---\n\n\n### **Events:**\n - **skf-dialog-opened** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-closing** - Fires when the dialog is closed (before transitioned out)\n- **skf-dialog-closed** - Fires when the dialog is closed (after transitioned out)\n\n### **Methods:**\n - **showModal()** - Method that opens the dialog in modal state\n- **close()** - Method that closes the dialog\n\n### **Slots:**\n - _default_ - The dialog component's content\n- **footer** - The dialog component's buttons goes here\n\n### **CSS Properties:**\n - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_\n- **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_",
+      "description": "The `<skf-dialog>` is a component that open up a dialog of type modal with the content provided. (MDN refrains from opening the dialog using the `open` attribute, however skf-dialog does not have that limitation)\n---\n\n\n### **Events:**\n - **skf-dialog-opened** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-closing** - Fires when the dialog is closing (before transitioned out)\n- **skf-dialog-closed** - Fires when the dialog is closed (after transitioned out)\n\n### **Methods:**\n - **showModal()** - Method that opens the dialog in modal state\n- **close()** - Method that closes the dialog\n\n### **Slots:**\n - _default_ - The dialog component's content\n- **footer** - The dialog component's buttons goes here\n\n### **CSS Properties:**\n - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_\n- **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_",
       "attributes": [
-        {
-          "name": "close-button-aria-label",
-          "description": "If defined, sets the aria-label for the close button",
-          "values": []
-        },
         {
           "name": "heading",
           "description": "Title for the modal/dialog",
@@ -800,6 +487,11 @@
           "description": "If true, makes the dialog stretch edge to edge on screen",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "no-close-button",
           "description": "If true, removes the close button",
@@ -842,22 +534,22 @@
     },
     {
       "name": "skf-drawer",
-      "description": "The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge.\n---\n\n\n### **Events:**\n - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)\n- **skf-drawer-closing** - Fires when the drawer is closed (before transitioned out)\n- **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The Drawer's main content",
+      "description": "The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge\n---\n\n\n### **Events:**\n - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)\n- **skf-drawer-closing** - Fires when the drawer is closing (before transitioned out)\n- **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The Drawer's main content",
       "attributes": [
-        {
-          "name": "close-button-aria-label",
-          "description": "If defined, sets the aria-label for the close button",
-          "values": []
-        },
         {
           "name": "heading",
           "description": "Heading for the Drawer",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "size",
           "description": "Sets the max-width",
-          "values": [{ "name": "sm" }, { "name": "md" }, { "name": "lg" }]
+          "values": [{ "name": "Size" }]
         },
         {
           "name": "open",
@@ -867,14 +559,14 @@
         {
           "name": "placement",
           "description": "Placement of the Drawer",
-          "values": [{ "name": "left" }, { "name": "right" }]
+          "values": [{ "name": "Placement" }]
         }
       ],
       "references": []
     },
     {
       "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)_",
+      "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--mod-logo-height** - The height of the logo _(default: undefined)_",
       "attributes": [
         {
           "name": "title",
@@ -884,24 +576,107 @@
         {
           "name": "color",
           "description": "Defines the color of the logo",
+          "values": [{ "name": "SkfLogoColor" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-link",
+      "description": "The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is\nintended to be used for triggering javascript functions, not handling forms.\n---\n\n\n### **Events:**\n - **skf-link-click** - Fired when the link is clicked\n\n### **Slots:**\n - _default_ - The links' main content",
+      "attributes": [
+        {
+          "name": "as",
+          "description": "Defines the semantic element to render",
+          "values": [{ "name": "button" }, { "name": "link" }]
+        },
+        {
+          "name": "color",
+          "description": "Defines the text-color",
+          "values": [{ "name": "Color" }]
+        },
+        {
+          "name": "disabled",
+          "description": "If true, disables the link",
+          "values": []
+        },
+        {
+          "name": "download",
+          "description": "If defined, downloads the url",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "If defined, loads url on click",
+          "values": []
+        },
+        {
+          "name": "icon",
+          "description": "If defined, renders an icon before or after the text",
+          "values": [{ "name": "Icon" }]
+        },
+        {
+          "name": "icon-right",
+          "description": "If true, the icon is placed to the right in relation to the text",
+          "values": []
+        },
+        {
+          "name": "rel",
+          "description": "If defined, describes the relationship between a linked resource and the current document",
+          "values": []
+        },
+        {
+          "name": "route",
+          "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
+          "values": []
+        },
+        {
+          "name": "stretch",
+          "description": "If true, fills the parents horizontal axis",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "If defined, specifies where to open the linked document",
           "values": [
-            { "name": "primary" },
-            { "name": "secondary" },
-            { "name": "inverse" }
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
           ]
         }
       ],
       "references": []
     },
+    {
+      "name": "skf-nav-item",
+      "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
+      "attributes": [
+        { "name": "href", "values": [] },
+        { "name": "icon", "values": [{ "name": "Icon" }] }
+      ],
+      "references": []
+    },
     {
       "name": "skf-nav",
       "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
-      "attributes": [{ "name": "vertical", "values": [] }],
+      "attributes": [
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
+        {
+          "name": "vertical",
+          "description": "If true, the navigation will be displayed vertically",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
       "name": "skf-header",
-      "description": "The `<skf-header>` component is to be used as the site-header in the app\n---\n\n\n### **Slots:**\n - _default_ - Navigation items",
+      "description": "The `<skf-header>` component is to be used as the site-header in the app. The navigation will be collapsed to mobile-view if the menu items exceed the available width.\n---\n\n\n### **Slots:**\n - _default_ - Navigation items",
       "attributes": [
         {
           "name": "compact",
@@ -909,9 +684,9 @@
           "values": []
         },
         {
-          "name": "hamburger-aria-label",
-          "description": "If defined, sets the aria-label for the hamburger button",
-          "values": []
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
         },
         {
           "name": "site-name",
@@ -928,7 +703,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_ - The Inputs label. 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\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles\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",
@@ -942,82 +717,8 @@
         },
         {
           "name": "autocomplete",
-          "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
-          "values": [
-            { "name": "on" },
-            { "name": "off" },
-            { "name": "name" },
-            { "name": "honorific-prefix" },
-            { "name": "given-name" },
-            { "name": "additional-name" },
-            { "name": "family-name" },
-            { "name": "honorific-suffix" },
-            { "name": "nickname" },
-            { "name": "username" },
-            { "name": "new-password" },
-            { "name": "current-password" },
-            { "name": "one-time-code" },
-            { "name": "organization-title" },
-            { "name": "organization" },
-            { "name": "street-address" },
-            { "name": "address-line1" },
-            { "name": "address-line2" },
-            { "name": "address-line3" },
-            { "name": "address-level4" },
-            { "name": "address-level3" },
-            { "name": "address-level2" },
-            { "name": "address-level1" },
-            { "name": "country" },
-            { "name": "country-name" },
-            { "name": "postal-code" },
-            { "name": "cc-name" },
-            { "name": "cc-given-name" },
-            { "name": "cc-additional-name" },
-            { "name": "cc-family-name" },
-            { "name": "cc-number" },
-            { "name": "cc-exp" },
-            { "name": "cc-exp-month" },
-            { "name": "cc-exp-year" },
-            { "name": "cc-csc" },
-            { "name": "cc-type" },
-            { "name": "transaction-amount" },
-            { "name": "transaction-currency" },
-            { "name": "language" },
-            { "name": "bday" },
-            { "name": "bday-day" },
-            { "name": "bday-month" },
-            { "name": "bday-year" },
-            { "name": "sex" },
-            { "name": "url" },
-            { "name": "photo" },
-            { "name": "tel" },
-            { "name": "tel-country-code" },
-            { "name": "tel-national" },
-            { "name": "tel-area-code" },
-            { "name": "tel-local" },
-            { "name": "tel-extension" },
-            { "name": "email" },
-            { "name": "impp" },
-            { "name": "password" },
-            { "name": "webauthn" },
-            { "name": "work" },
-            { "name": "(string & {})" }
-          ]
-        },
-        {
-          "name": "button-aria-label-clear",
-          "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
-          "values": []
-        },
-        {
-          "name": "button-aria-label-hide",
-          "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
-          "values": []
-        },
-        {
-          "name": "button-aria-label-show",
-          "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
-          "values": []
+          "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
+          "values": [{ "name": "HTMLInputElement['autocomplete']" }]
         },
         {
           "name": "custom-invalid",
@@ -1041,23 +742,19 @@
         },
         {
           "name": "inputmode",
-          "description": "Tells what keyboard to use if applicable",
-          "values": [
-            { "name": "none" },
-            { "name": "text" },
-            { "name": "tel" },
-            { "name": "url" },
-            { "name": "email" },
-            { "name": "numeric" },
-            { "name": "decimal" },
-            { "name": "search" }
-          ]
+          "description": "Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details.",
+          "values": [{ "name": "HTMLInputElement['inputMode']" }]
         },
         {
           "name": "label",
           "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "leading",
           "description": "If defined, displays a prefix/adornment before the input-element",
@@ -1103,19 +800,10 @@
           "description": "If true, makes the element not mutable, meaning the user can not edit the control",
           "values": []
         },
-        {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
-          "values": []
-        },
         {
           "name": "severity",
           "description": "If defined, displays provided severity state",
-          "values": [
-            { "name": "success" },
-            { "name": "info" },
-            { "name": "warning" }
-          ]
+          "values": [{ "name": "FormFieldSeverity" }]
         },
         {
           "name": "show-valid",
@@ -1134,28 +822,15 @@
         },
         {
           "name": "type",
-          "description": "Type of input control",
+          "description": "Type of input",
           "values": [
-            { "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": "url" }
           ]
         },
         {
@@ -1176,18 +851,18 @@
       "references": []
     },
     {
-      "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",
+      "name": "skf-menu-item",
+      "description": "The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component\n---\n\n\n### **Events:**\n - **skf-link-click** - Fired when the link is clicked\n\n### **Slots:**\n - _default_ - The component's main content",
       "attributes": [
         {
           "name": "as",
           "description": "Defines the semantic element to render",
-          "values": [{ "name": "button" }, { "name": "a" }]
+          "values": [{ "name": "button" }, { "name": "link" }]
         },
         {
           "name": "color",
           "description": "Defines the text-color",
-          "values": [{ "name": "primary" }, { "name": "inverse" }]
+          "values": [{ "name": "Color" }]
         },
         {
           "name": "disabled",
@@ -1207,164 +882,12 @@
         {
           "name": "icon",
           "description": "If defined, renders an icon before or after the text",
-          "values": [
-            { "name": "arrowDown" },
-            { "name": "arrowDownUp" },
-            { "name": "arrowLeft" },
-            { "name": "arrowRight" },
-            { "name": "arrowUp" },
-            { "name": "article" },
-            { "name": "artificialIntelligence" },
-            { "name": "asset" },
-            { "name": "attachment" },
-            { "name": "bandCursor" },
-            { "name": "bands" },
-            { "name": "batteryEmpty" },
-            { "name": "batteryFull" },
-            { "name": "batteryLow" },
-            { "name": "bearingFault" },
-            { "name": "book" },
-            { "name": "bulb" },
-            { "name": "burger" },
-            { "name": "cPM" },
-            { "name": "calendar" },
-            { "name": "calendarBooked" },
-            { "name": "calendarEmpty" },
-            { "name": "calendarNotBooked" },
-            { "name": "calendarRecurring" },
-            { "name": "caretDown" },
-            { "name": "caretUp" },
-            { "name": "caretUpDown" },
-            { "name": "chat" },
-            { "name": "check" },
-            { "name": "checkCircle" },
-            { "name": "checkSmall" },
-            { "name": "chevronDown" },
-            { "name": "chevronLeft" },
-            { "name": "chevronRight" },
-            { "name": "chevronUp" },
-            { "name": "chevronUpDown" },
-            { "name": "close" },
-            { "name": "closeAllFaults" },
-            { "name": "closeFault" },
-            { "name": "closeSmall" },
-            { "name": "columnGraph" },
-            { "name": "comment" },
-            { "name": "connection1" },
-            { "name": "connection2" },
-            { "name": "connection3" },
-            { "name": "connection4" },
-            { "name": "danger" },
-            { "name": "defectFrequencies" },
-            { "name": "defectFrequenciesAlternative" },
-            { "name": "doubleChevronLeft" },
-            { "name": "doubleChevronRight" },
-            { "name": "download" },
-            { "name": "draft" },
-            { "name": "draftFilled" },
-            { "name": "draftOutlined" },
-            { "name": "dragNDrop" },
-            { "name": "drop" },
-            { "name": "duplicate" },
-            { "name": "edit" },
-            { "name": "emailFilled" },
-            { "name": "emailOutlined" },
-            { "name": "exclamation" },
-            { "name": "eye" },
-            { "name": "eyeHidden" },
-            { "name": "eyeVisible" },
-            { "name": "filter" },
-            { "name": "forbidden" },
-            { "name": "fullScreen" },
-            { "name": "fullScreenExit" },
-            { "name": "functionalLocation" },
-            { "name": "harmonicCursor" },
-            { "name": "heatmap" },
-            { "name": "hierarchy" },
-            { "name": "history" },
-            { "name": "historyAlt" },
-            { "name": "hourglassFramedFilled" },
-            { "name": "hourglassFramedOutlined" },
-            { "name": "hourglassOutlined" },
-            { "name": "hz" },
-            { "name": "iMX" },
-            { "name": "image" },
-            { "name": "infoCircleFilled" },
-            { "name": "infoCircleOutlined" },
-            { "name": "integration" },
-            { "name": "kebab" },
-            { "name": "link" },
-            { "name": "listGroup" },
-            { "name": "listItem" },
-            { "name": "locationPin" },
-            { "name": "lock" },
-            { "name": "logOut" },
-            { "name": "meatballs" },
-            { "name": "microphone" },
-            { "name": "minus" },
-            { "name": "minusSmall" },
-            { "name": "noData" },
-            { "name": "o" },
-            { "name": "openInNew" },
-            { "name": "overlayBaseline" },
-            { "name": "pDF" },
-            { "name": "paper" },
-            { "name": "pause" },
-            { "name": "pieChart" },
-            { "name": "pin" },
-            { "name": "play" },
-            { "name": "plus" },
-            { "name": "powerOff" },
-            { "name": "printer" },
-            { "name": "proCollect" },
-            { "name": "recAction" },
-            { "name": "received" },
-            { "name": "refresh" },
-            { "name": "reorder" },
-            { "name": "replace" },
-            { "name": "reply" },
-            { "name": "rewalkableRoute" },
-            { "name": "routes" },
-            { "name": "search" },
-            { "name": "send" },
-            { "name": "sensorA" },
-            { "name": "sensorB" },
-            { "name": "settings" },
-            { "name": "sidebandCursor" },
-            { "name": "singleCursor" },
-            { "name": "spectrum" },
-            { "name": "starFilled" },
-            { "name": "starOutlined" },
-            { "name": "statusCircle" },
-            { "name": "stop" },
-            { "name": "structuralVibration" },
-            { "name": "sync" },
-            { "name": "timewave" },
-            { "name": "trash" },
-            { "name": "trend" },
-            { "name": "trendingUp" },
-            { "name": "undo" },
-            { "name": "unknownCircle" },
-            { "name": "unknownDiamond" },
-            { "name": "unlink" },
-            { "name": "unlock" },
-            { "name": "unscheduledAction" },
-            { "name": "upload" },
-            { "name": "user" },
-            { "name": "viewFull" },
-            { "name": "viewHorizontal" },
-            { "name": "viewVertical" },
-            { "name": "warning" },
-            { "name": "warningCircle" },
-            { "name": "warningDiamond" },
-            { "name": "zoomIn" },
-            { "name": "zoomOut" }
-          ]
+          "values": [{ "name": "Icon" }]
         },
         {
-          "name": "icon-placement",
-          "description": "Defines the position of the icon in relation to the text",
-          "values": [{ "name": "left" }, { "name": "right" }]
+          "name": "icon-right",
+          "description": "If true, the icon is placed to the right in relation to the text",
+          "values": []
         },
         {
           "name": "rel",
@@ -1373,7 +896,7 @@
         },
         {
           "name": "route",
-          "description": "If defined, used on conjunction with onClick property, second argument",
+          "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
           "values": []
         },
         {
@@ -1390,22 +913,13 @@
             { "name": "_self" },
             { "name": "_top" }
           ]
-        },
-        {
-          "name": "type",
-          "description": "Defines the type of button",
-          "values": [
-            { "name": "button" },
-            { "name": "submit" },
-            { "name": "reset" }
-          ]
         }
       ],
       "references": []
     },
     {
       "name": "skf-menu",
-      "description": "The `<skf-menu>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the menu is opened\n- **skf-closed** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The menu popover content",
+      "description": "The `<skf-menu>` is a component that displays a list of actions or options\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the menu is opened\n- **skf-closed** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The menu content",
       "attributes": [
         {
           "name": "placement",
@@ -1433,250 +947,13 @@
       ],
       "references": []
     },
-    {
-      "name": "skf-menu-item",
-      "description": "The `<skf-menu-item>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **my-tag-my-event** - Fired when something happens\n- **click** - Fired when the component is clicked\n- **mouseover** - Fired when the mouse is over the component\n- **mouseout** - Fired when the mouse is out of the component\n- **focus** - Fired when the component is focused\n- **blur** - Fired when the component is blurred\n- **change** - Fired when the component's value changes\n\n### **Slots:**\n - _default_ - The component's main content\n- **my-named-slot** - A named slot of the component",
-      "attributes": [
-        {
-          "name": "as",
-          "description": "Defines the semantic element to render",
-          "values": [{ "name": "button" }, { "name": "a" }]
-        },
-        {
-          "name": "color",
-          "description": "Defines the text-color",
-          "values": [{ "name": "primary" }, { "name": "inverse" }]
-        },
-        {
-          "name": "disabled",
-          "description": "If true, disables the link",
-          "values": []
-        },
-        {
-          "name": "download",
-          "description": "If defined, downloads the url",
-          "values": []
-        },
-        {
-          "name": "href",
-          "description": "If defined, loads url on click",
-          "values": []
-        },
-        {
-          "name": "icon",
-          "description": "If defined, renders an icon before or after the text",
-          "values": [
-            { "name": "arrowDown" },
-            { "name": "arrowDownUp" },
-            { "name": "arrowLeft" },
-            { "name": "arrowRight" },
-            { "name": "arrowUp" },
-            { "name": "article" },
-            { "name": "artificialIntelligence" },
-            { "name": "asset" },
-            { "name": "attachment" },
-            { "name": "bandCursor" },
-            { "name": "bands" },
-            { "name": "batteryEmpty" },
-            { "name": "batteryFull" },
-            { "name": "batteryLow" },
-            { "name": "bearingFault" },
-            { "name": "book" },
-            { "name": "bulb" },
-            { "name": "burger" },
-            { "name": "cPM" },
-            { "name": "calendar" },
-            { "name": "calendarBooked" },
-            { "name": "calendarEmpty" },
-            { "name": "calendarNotBooked" },
-            { "name": "calendarRecurring" },
-            { "name": "caretDown" },
-            { "name": "caretUp" },
-            { "name": "caretUpDown" },
-            { "name": "chat" },
-            { "name": "check" },
-            { "name": "checkCircle" },
-            { "name": "checkSmall" },
-            { "name": "chevronDown" },
-            { "name": "chevronLeft" },
-            { "name": "chevronRight" },
-            { "name": "chevronUp" },
-            { "name": "chevronUpDown" },
-            { "name": "close" },
-            { "name": "closeAllFaults" },
-            { "name": "closeFault" },
-            { "name": "closeSmall" },
-            { "name": "columnGraph" },
-            { "name": "comment" },
-            { "name": "connection1" },
-            { "name": "connection2" },
-            { "name": "connection3" },
-            { "name": "connection4" },
-            { "name": "danger" },
-            { "name": "defectFrequencies" },
-            { "name": "defectFrequenciesAlternative" },
-            { "name": "doubleChevronLeft" },
-            { "name": "doubleChevronRight" },
-            { "name": "download" },
-            { "name": "draft" },
-            { "name": "draftFilled" },
-            { "name": "draftOutlined" },
-            { "name": "dragNDrop" },
-            { "name": "drop" },
-            { "name": "duplicate" },
-            { "name": "edit" },
-            { "name": "emailFilled" },
-            { "name": "emailOutlined" },
-            { "name": "exclamation" },
-            { "name": "eye" },
-            { "name": "eyeHidden" },
-            { "name": "eyeVisible" },
-            { "name": "filter" },
-            { "name": "forbidden" },
-            { "name": "fullScreen" },
-            { "name": "fullScreenExit" },
-            { "name": "functionalLocation" },
-            { "name": "harmonicCursor" },
-            { "name": "heatmap" },
-            { "name": "hierarchy" },
-            { "name": "history" },
-            { "name": "historyAlt" },
-            { "name": "hourglassFramedFilled" },
-            { "name": "hourglassFramedOutlined" },
-            { "name": "hourglassOutlined" },
-            { "name": "hz" },
-            { "name": "iMX" },
-            { "name": "image" },
-            { "name": "infoCircleFilled" },
-            { "name": "infoCircleOutlined" },
-            { "name": "integration" },
-            { "name": "kebab" },
-            { "name": "link" },
-            { "name": "listGroup" },
-            { "name": "listItem" },
-            { "name": "locationPin" },
-            { "name": "lock" },
-            { "name": "logOut" },
-            { "name": "meatballs" },
-            { "name": "microphone" },
-            { "name": "minus" },
-            { "name": "minusSmall" },
-            { "name": "noData" },
-            { "name": "o" },
-            { "name": "openInNew" },
-            { "name": "overlayBaseline" },
-            { "name": "pDF" },
-            { "name": "paper" },
-            { "name": "pause" },
-            { "name": "pieChart" },
-            { "name": "pin" },
-            { "name": "play" },
-            { "name": "plus" },
-            { "name": "powerOff" },
-            { "name": "printer" },
-            { "name": "proCollect" },
-            { "name": "recAction" },
-            { "name": "received" },
-            { "name": "refresh" },
-            { "name": "reorder" },
-            { "name": "replace" },
-            { "name": "reply" },
-            { "name": "rewalkableRoute" },
-            { "name": "routes" },
-            { "name": "search" },
-            { "name": "send" },
-            { "name": "sensorA" },
-            { "name": "sensorB" },
-            { "name": "settings" },
-            { "name": "sidebandCursor" },
-            { "name": "singleCursor" },
-            { "name": "spectrum" },
-            { "name": "starFilled" },
-            { "name": "starOutlined" },
-            { "name": "statusCircle" },
-            { "name": "stop" },
-            { "name": "structuralVibration" },
-            { "name": "sync" },
-            { "name": "timewave" },
-            { "name": "trash" },
-            { "name": "trend" },
-            { "name": "trendingUp" },
-            { "name": "undo" },
-            { "name": "unknownCircle" },
-            { "name": "unknownDiamond" },
-            { "name": "unlink" },
-            { "name": "unlock" },
-            { "name": "unscheduledAction" },
-            { "name": "upload" },
-            { "name": "user" },
-            { "name": "viewFull" },
-            { "name": "viewHorizontal" },
-            { "name": "viewVertical" },
-            { "name": "warning" },
-            { "name": "warningCircle" },
-            { "name": "warningDiamond" },
-            { "name": "zoomIn" },
-            { "name": "zoomOut" }
-          ]
-        },
-        {
-          "name": "icon-placement",
-          "description": "Defines the position of the icon in relation to the text",
-          "values": [{ "name": "left" }, { "name": "right" }]
-        },
-        {
-          "name": "rel",
-          "description": "If defined, describes the relationship between a linked resource and the current document",
-          "values": []
-        },
-        {
-          "name": "route",
-          "description": "If defined, used on conjunction with onClick property, second argument",
-          "values": []
-        },
-        {
-          "name": "stretch",
-          "description": "If true, fills the parents horizontal axis",
-          "values": []
-        },
-        {
-          "name": "target",
-          "description": "If defined, specifies where to open the linked document",
-          "values": [
-            { "name": "_blank" },
-            { "name": "_parent" },
-            { "name": "_self" },
-            { "name": "_top" }
-          ]
-        },
-        {
-          "name": "type",
-          "description": "Defines the type of button",
-          "values": [
-            { "name": "button" },
-            { "name": "submit" },
-            { "name": "reset" }
-          ]
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "skf-nav-item",
-      "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
-      "attributes": [
-        { "name": "href", "values": [] },
-        { "name": "icon", "values": [{ "name": "SkfLink['icon']" }] }
-      ],
-      "references": []
-    },
     {
       "name": "skf-popover",
-      "description": "The `<skf-popover>` is a general purpose component that displays the slot content in a popover.\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the menu is opened\n- **skf-closed** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The popover content",
+      "description": "The `<skf-popover>` is a general purpose component that displays the slot content in a popover.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the popover is opened\n- **skf-closed** - Fired when the popover is closed\n\n### **Slots:**\n - _default_ - The popover content",
       "attributes": [
         {
           "name": "placement",
-          "description": "The placement of the menu",
+          "description": "The placement of the popover",
           "values": [
             { "name": "top" },
             { "name": "right" },
@@ -1694,7 +971,7 @@
         },
         {
           "name": "anchor",
-          "description": "The id of the element the menu will be anchored to",
+          "description": "The id of the element the popover will be anchored to",
           "values": []
         },
         {
@@ -1734,7 +1011,7 @@
     },
     {
       "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_ - The radios label. Alternatively, you can use the `label` attribute.",
+      "description": "The `<skf-radio>` component is used to create a radio input\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles\n---\n\n\n### **Events:**\n - **change** - 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",
@@ -1767,13 +1044,13 @@
           "values": []
         },
         {
-          "name": "name",
-          "description": "If defined, adds name to the input-element",
-          "values": []
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
         },
         {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
+          "name": "name",
+          "description": "If defined, adds name to the input-element",
           "values": []
         },
         {
@@ -1784,12 +1061,7 @@
         {
           "name": "severity",
           "description": "If defined, displays provided severity state",
-          "values": [
-            { "name": "success" },
-            { "name": "info" },
-            { "name": "warning" },
-            { "name": "alert" }
-          ]
+          "values": [{ "name": "FormFieldSeverity" }]
         },
         {
           "name": "show-valid",
@@ -1806,13 +1078,18 @@
     },
     {
       "name": "skf-segmented-button-item",
-      "description": "The `<skf-segmented-button-item>` is used in conjunction with the `<skf-segmented-button>` component\n---\n\n\n### **Events:**\n - **my-tag-my-event** - Fired when something happens\n\n### **Slots:**\n - _default_ - The items label",
+      "description": "The `<skf-segmented-button-item>` is used in conjunction with the `<skf-segmented-button>` component\n---\n\n\n### **Events:**\n - **skf-segmented-button-item-select** - Fired when selected\n\n### **Slots:**\n - _default_ - Label for the button",
       "attributes": [
         {
           "name": "disabled",
           "description": "If true, items is marked as disabled",
           "values": []
         },
+        {
+          "name": "selected",
+          "description": "If true, items is marked as selected",
+          "values": []
+        },
         { "name": "value", "description": "Sets the item value", "values": [] }
       ],
       "references": []
@@ -1821,11 +1098,6 @@
       "name": "skf-segmented-button",
       "description": "The `<skf-segmented-button>` component consists of multiple `<skf-segmented-button-item>`, working together.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/68ff54-segmented-buttons) for design principles\n---\n\n\n### **Slots:**\n - _default_ - One or more `<skf-segmented-button-item>`",
       "attributes": [
-        {
-          "name": "default-selected",
-          "description": "Sets the default selected control",
-          "values": []
-        },
         {
           "name": "multiple",
           "description": "If true, allowes multiple items to be selected",
@@ -1835,40 +1107,9 @@
       "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": "icon",
-          "description": "If defined, set an icon",
-          "values": [{ "name": "SkfIcon['name']" }]
-        },
-        {
-          "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": "Returns or sets the tags value. If value is omitted, defaults to the tags text.",
-          "values": []
-        }
-      ],
+      "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": []
     },
     {
@@ -1878,175 +1119,22 @@
         {
           "name": "size",
           "description": "Specifies Tag size",
-          "values": [{ "name": "sm" }, { "name": "md" }]
+          "values": [{ "name": "Size" }]
         },
         {
           "name": "icon",
           "description": "If defined, displays leading/provided icon",
-          "values": [
-            { "name": "arrowDown" },
-            { "name": "arrowDownUp" },
-            { "name": "arrowLeft" },
-            { "name": "arrowRight" },
-            { "name": "arrowUp" },
-            { "name": "article" },
-            { "name": "artificialIntelligence" },
-            { "name": "asset" },
-            { "name": "attachment" },
-            { "name": "bandCursor" },
-            { "name": "bands" },
-            { "name": "batteryEmpty" },
-            { "name": "batteryFull" },
-            { "name": "batteryLow" },
-            { "name": "bearingFault" },
-            { "name": "book" },
-            { "name": "bulb" },
-            { "name": "burger" },
-            { "name": "cPM" },
-            { "name": "calendar" },
-            { "name": "calendarBooked" },
-            { "name": "calendarEmpty" },
-            { "name": "calendarNotBooked" },
-            { "name": "calendarRecurring" },
-            { "name": "caretDown" },
-            { "name": "caretUp" },
-            { "name": "caretUpDown" },
-            { "name": "chat" },
-            { "name": "check" },
-            { "name": "checkCircle" },
-            { "name": "checkSmall" },
-            { "name": "chevronDown" },
-            { "name": "chevronLeft" },
-            { "name": "chevronRight" },
-            { "name": "chevronUp" },
-            { "name": "chevronUpDown" },
-            { "name": "close" },
-            { "name": "closeAllFaults" },
-            { "name": "closeFault" },
-            { "name": "closeSmall" },
-            { "name": "columnGraph" },
-            { "name": "comment" },
-            { "name": "connection1" },
-            { "name": "connection2" },
-            { "name": "connection3" },
-            { "name": "connection4" },
-            { "name": "danger" },
-            { "name": "defectFrequencies" },
-            { "name": "defectFrequenciesAlternative" },
-            { "name": "doubleChevronLeft" },
-            { "name": "doubleChevronRight" },
-            { "name": "download" },
-            { "name": "draft" },
-            { "name": "draftFilled" },
-            { "name": "draftOutlined" },
-            { "name": "dragNDrop" },
-            { "name": "drop" },
-            { "name": "duplicate" },
-            { "name": "edit" },
-            { "name": "emailFilled" },
-            { "name": "emailOutlined" },
-            { "name": "exclamation" },
-            { "name": "eye" },
-            { "name": "eyeHidden" },
-            { "name": "eyeVisible" },
-            { "name": "filter" },
-            { "name": "forbidden" },
-            { "name": "fullScreen" },
-            { "name": "fullScreenExit" },
-            { "name": "functionalLocation" },
-            { "name": "harmonicCursor" },
-            { "name": "heatmap" },
-            { "name": "hierarchy" },
-            { "name": "history" },
-            { "name": "historyAlt" },
-            { "name": "hourglassFramedFilled" },
-            { "name": "hourglassFramedOutlined" },
-            { "name": "hourglassOutlined" },
-            { "name": "hz" },
-            { "name": "iMX" },
-            { "name": "image" },
-            { "name": "infoCircleFilled" },
-            { "name": "infoCircleOutlined" },
-            { "name": "integration" },
-            { "name": "kebab" },
-            { "name": "link" },
-            { "name": "listGroup" },
-            { "name": "listItem" },
-            { "name": "locationPin" },
-            { "name": "lock" },
-            { "name": "logOut" },
-            { "name": "meatballs" },
-            { "name": "microphone" },
-            { "name": "minus" },
-            { "name": "minusSmall" },
-            { "name": "noData" },
-            { "name": "o" },
-            { "name": "openInNew" },
-            { "name": "overlayBaseline" },
-            { "name": "pDF" },
-            { "name": "paper" },
-            { "name": "pause" },
-            { "name": "pieChart" },
-            { "name": "pin" },
-            { "name": "play" },
-            { "name": "plus" },
-            { "name": "powerOff" },
-            { "name": "printer" },
-            { "name": "proCollect" },
-            { "name": "recAction" },
-            { "name": "received" },
-            { "name": "refresh" },
-            { "name": "reorder" },
-            { "name": "replace" },
-            { "name": "reply" },
-            { "name": "rewalkableRoute" },
-            { "name": "routes" },
-            { "name": "search" },
-            { "name": "send" },
-            { "name": "sensorA" },
-            { "name": "sensorB" },
-            { "name": "settings" },
-            { "name": "sidebandCursor" },
-            { "name": "singleCursor" },
-            { "name": "spectrum" },
-            { "name": "starFilled" },
-            { "name": "starOutlined" },
-            { "name": "statusCircle" },
-            { "name": "stop" },
-            { "name": "structuralVibration" },
-            { "name": "sync" },
-            { "name": "timewave" },
-            { "name": "trash" },
-            { "name": "trend" },
-            { "name": "trendingUp" },
-            { "name": "undo" },
-            { "name": "unknownCircle" },
-            { "name": "unknownDiamond" },
-            { "name": "unlink" },
-            { "name": "unlock" },
-            { "name": "unscheduledAction" },
-            { "name": "upload" },
-            { "name": "user" },
-            { "name": "viewFull" },
-            { "name": "viewHorizontal" },
-            { "name": "viewVertical" },
-            { "name": "warning" },
-            { "name": "warningCircle" },
-            { "name": "warningDiamond" },
-            { "name": "zoomIn" },
-            { "name": "zoomOut" }
-          ]
+          "values": [{ "name": "Icon" }]
         },
         {
           "name": "color",
           "description": "If defined, gives the supplied appearance",
-          "values": [
-            { "name": "warning" },
-            { "name": "success" },
-            { "name": "info" },
-            { "name": "error" },
-            { "name": "alert" }
-          ]
+          "values": [{ "name": "Severity" }]
+        },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
         },
         {
           "name": "removable",
@@ -2058,11 +1146,16 @@
     },
     {
       "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",
+      "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\nSee [zeroheight](https://zeroheight.com/853e936c9/p/91c9f0-select-and-combobox) for design principles\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- **skf-select-connected** - Fires when the select options are connected, useful for setting selected option(s) via value property. E.g mySkfSelect.value = 'option1,option2';\n\n### **Slots:**\n - _default_ - The select's placeholder content",
       "attributes": [
         {
           "name": "disabled",
-          "description": "If true, the select is disabled\t`default: false`",
+          "description": "If true, the select is disabled",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "If true, the select is required",
           "values": []
         },
         {
@@ -2095,6 +1188,11 @@
           "description": "If defined, displays provided label",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "max",
           "description": "If defined, limits the number of selectable options",
@@ -2115,15 +1213,10 @@
           "description": "If defined, set name of the component",
           "values": []
         },
-        {
-          "name": "required-label",
-          "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']" }]
+          "values": [{ "name": "FormFieldSeverity" }]
         },
         {
           "name": "show-valid",
@@ -2139,9 +1232,40 @@
       "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": [] }],
+      "name": "skf-select-option",
+      "description": "The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.\nIt represents an individual option in a select dropdown.\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": "icon",
+          "description": "If defined, set an icon",
+          "values": [{ "name": "Icon" }]
+        },
+        {
+          "name": "icon-color",
+          "description": "If defined, sets provided color on the icon",
+          "values": [{ "name": "IconColor" }]
+        },
+        {
+          "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": "Returns or sets the option value. If value is omitted, defaults to the tags slotted text.",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
@@ -2169,7 +1293,7 @@
       "description": "The `<skf-stepper>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **skf-stepper-item-select** - Dispatched when the stepper item is selected\n\n### **Slots:**\n - _default_ - One or more `<skf-stepper-item>`",
       "attributes": [
         {
-          "name": "activeIndex",
+          "name": "active-index",
           "description": "Sets the active item",
           "values": []
         },
@@ -2216,13 +1340,13 @@
           "values": []
         },
         {
-          "name": "name",
-          "description": "If defined, adds name to the input-element",
-          "values": []
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
         },
         {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
+          "name": "name",
+          "description": "If defined, adds name to the input-element",
           "values": []
         },
         {
@@ -2247,8 +1371,8 @@
       "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",
+      "name": "skf-tabs",
+      "description": "The `<skf-tabs>` 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",
@@ -2334,6 +1458,11 @@
           "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
           "values": []
         },
+        {
+          "name": "lang",
+          "description": "Sets the internal language of the component",
+          "values": [{ "name": "Language" }]
+        },
         {
           "name": "name",
           "description": "If defined, adds name to the input-element",
@@ -2359,11 +1488,6 @@
           "description": "If true, makes the element not mutable, meaning the user can not edit the control",
           "values": []
         },
-        {
-          "name": "required-label",
-          "description": "If defined, renders an alternative A11y text for the asterisk",
-          "values": []
-        },
         {
           "name": "rows",
           "description": "If defined, sets the rows of the textarea",
@@ -2372,12 +1496,7 @@
         {
           "name": "severity",
           "description": "If defined, displays provided severity state",
-          "values": [
-            { "name": "success" },
-            { "name": "info" },
-            { "name": "warning" },
-            { "name": "alert" }
-          ]
+          "values": [{ "name": "FormFieldSeverity" }]
         },
         {
           "name": "show-valid",
@@ -2420,17 +1539,17 @@
         {
           "name": "icon",
           "description": "If defined, displays leading icon",
-          "values": [{ "name": "SkfAlert['icon']" }]
+          "values": [{ "name": "Icon" }]
         },
         {
           "name": "persistent",
           "description": "If true, renders with an close button and sets aria-role to `status`",
-          "values": [{ "name": "SkfAlert['persistent']" }]
+          "values": []
         },
         {
           "name": "severity",
           "description": "If defined, gives the supplied appearance",
-          "values": [{ "name": "SkfAlert['severity']" }]
+          "values": [{ "name": "Severity" }]
         },
         {
           "name": "timer",
@@ -2447,7 +1566,7 @@
     },
     {
       "name": "skf-tooltip",
-      "description": "The `<skf-tooltip>` is a component that displays a tooltip.\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the dropdown is opened\n- **skf-closed** - Fired when the dropdown is closed\n\n### **Slots:**\n - _default_ - The tooltip popover content",
+      "description": "The `<skf-tooltip>` is a component that displays a tooltip.\n---\n\n\n### **Events:**\n - **skf-opened** - Fired when the tooltip is opened\n- **skf-closed** - Fired when the tooltip is closed\n\n### **Slots:**\n - _default_ - The tooltip popover content",
       "attributes": [
         {
           "name": "placement",