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

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@skf-design-system/ui-components",
-  "version": "1.0.1",
+  "version": "1.0.2-beta.8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -235,16 +235,16 @@
           "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",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "button-label",
-              "description": "Close button aria-label",
-              "value": { "type": "string", "default": "'Close'" }
-            },
             {
               "name": "icon",
               "description": "If defined, displays leading icon",
               "value": { "type": "Icon | undefined" }
             },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
             {
               "name": "persistent",
               "description": "If true, renders with an close button and sets aria-role to `status`",
@@ -266,21 +266,22 @@
           "events": [
             {
               "name": "skf-alert-close",
+              "type": "CustomEvent",
               "description": "Fires when the close button is clicked"
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "buttonLabel",
-                "description": "Close button aria-label",
-                "type": "string"
-              },
               {
                 "name": "icon",
                 "description": "If defined, displays leading icon",
                 "type": "Icon | undefined"
               },
+              {
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
+              },
               {
                 "name": "persistent",
                 "description": "If true, renders with an close button and sets aria-role to `status`",
@@ -295,6 +296,7 @@
             "events": [
               {
                 "name": "skf-alert-close",
+                "type": "CustomEvent",
                 "description": "Fires when the close button is clicked"
               }
             ]
@@ -341,9 +343,9 @@
               "value": { "type": "string", "default": "'Breadcrumb'" }
             },
             {
-              "name": "size",
-              "description": "Displays an alternative size",
-              "value": { "type": "'md' | 'sm'", "default": "'md'" }
+              "name": "small",
+              "description": "If true, renders a smaller version",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -360,9 +362,9 @@
                 "type": "string"
               },
               {
-                "name": "size",
-                "description": "Displays an alternative size",
-                "type": "'md' | 'sm'"
+                "name": "small",
+                "description": "If true, renders a smaller version",
+                "type": "boolean"
               }
             ],
             "events": [
@@ -378,11 +380,6 @@
           "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",
-              "description": "Defines the aria-label",
-              "value": { "type": "string", "default": "'Loading...'" }
-            },
             {
               "name": "invert",
               "description": "If true, inverts the color (to be used on colored backgrounds)",
@@ -391,17 +388,12 @@
             {
               "name": "size",
               "description": "Defines the size of the loader",
-              "value": { "type": "'md' | 'sm' | undefined", "default": "'md'" }
+              "value": { "type": "Size", "default": "'md'" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
-              {
-                "name": "ariaLabel",
-                "description": "Defines the aria-label",
-                "type": "string"
-              },
               {
                 "name": "invert",
                 "description": "If true, inverts the color (to be used on colored backgrounds)",
@@ -410,7 +402,7 @@
               {
                 "name": "size",
                 "description": "Defines the size of the loader",
-                "type": "'md' | 'sm' | undefined"
+                "type": "Size"
               }
             ],
             "events": []
@@ -545,7 +537,7 @@
         },
         {
           "name": "skf-card",
-          "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",
+          "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)_",
           "doc-url": "",
           "attributes": [
             {
@@ -610,7 +602,7 @@
             {
               "name": "checked",
               "description": "If true, outputs helping hints in console",
-              "value": { "type": "string" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "custom-invalid",
@@ -628,13 +620,13 @@
               "value": { "type": "string | undefined" }
             },
             {
-              "name": "name",
-              "description": "If defined, adds name to the input-element",
-              "value": { "type": "string | undefined" }
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
             },
             {
-              "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",
               "value": { "type": "string | undefined" }
             },
             {
@@ -680,7 +672,8 @@
               },
               {
                 "name": "checked",
-                "description": "If true, outputs helping hints in console"
+                "description": "If true, outputs helping hints in console",
+                "type": "boolean"
               },
               {
                 "name": "customInvalid",
@@ -698,13 +691,13 @@
                 "type": "string | undefined"
               },
               {
-                "name": "name",
-                "description": "If defined, adds name to the input-element",
-                "type": "string | undefined"
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
               },
               {
-                "name": "requiredLabel",
-                "description": "If defined, renders an alternative A11y text for the asterisk",
+                "name": "name",
+                "description": "If defined, adds name to the input-element",
                 "type": "string | undefined"
               },
               {
@@ -738,31 +731,151 @@
           }
         },
         {
-          "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",
           "doc-url": "",
           "attributes": [
+            { "name": "eventid", "value": { "type": "string" } },
+            {
+              "name": "firstDayOfWeek",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "invalid-dates",
+              "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
             {
               "name": "locale",
-              "description": "The locale to use for formatting the date",
               "value": { "type": "string", "default": "'en-CA'" }
             },
             {
-              "name": "date",
-              "description": "The date to display in the date picker",
+              "name": "range",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selectable-from",
+              "description": "Earliest selectable date. (yyyy-mm-dd format)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "selectable-to",
+              "description": "Latest selectable date. (yyyy-mm-dd format)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "selected-date",
+              "value": { "type": "Date | undefined", "default": "undefined" }
+            },
+            {
+              "name": "selectedDateRange",
+              "value": {
+                "type": "{ start: Date | null; end: Date | null }",
+                "default": "{ start: null, end: null, }"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "eventid", "type": "string" },
+              { "name": "firstDayOfWeek", "type": "number" },
+              {
+                "name": "invalidDates",
+                "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
+              },
+              { "name": "locale", "type": "string" },
+              { "name": "range", "type": "boolean" },
+              {
+                "name": "selectableFrom",
+                "description": "Earliest selectable date. (yyyy-mm-dd format)",
+                "type": "string | undefined"
+              },
+              {
+                "name": "selectableTo",
+                "description": "Latest selectable date. (yyyy-mm-dd format)",
+                "type": "string | undefined"
+              },
+              { "name": "selectedDate", "type": "Date | undefined" },
+              {
+                "name": "selectedDateRange",
+                "type": "{ start: Date | null; end: Date | null }"
+              },
+              { "name": "_listenToKeyboard" },
+              { "name": "_handleKeyDown" },
+              { "name": "dateSelectable" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-datepicker",
+          "description": "\n---\n\n\n### **Methods:**\n - **clear()** - Clears the input field",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "custom-invalid",
+              "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
               "value": { "type": "string" }
             },
-            { "name": "id", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "id",
+              "value": { "type": "string", "default": "'skf-datepicker-input'" }
+            },
+            {
+              "name": "label",
+              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
+            {
+              "name": "hide-label",
+              "description": "If true, hides the label visually",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "hint",
+              "description": "If defined, displays informational text below the field",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "invalid-dates",
               "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "name",
+              "description": "If defined, adds name to the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "'YYYY-MM-DD'" }
+            },
             {
               "name": "range",
-              "description": "If true, the date picker will allow the selection of a range of dates",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "readonly",
+              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+              "value": { "type": "boolean | undefined" }
+            },
             {
               "name": "selectable-from",
               "description": "Earliest selectable date. (yyyy-mm-dd format)",
@@ -772,48 +885,82 @@
               "name": "selectable-to",
               "description": "Latest selectable date. (yyyy-mm-dd format)",
               "value": { "type": "string | undefined" }
-            }
-          ],
-          "slots": [
+            },
             {
-              "name": "",
-              "description": "Default hint content placed inside the date picker"
-            }
-          ],
-          "events": [
+              "name": "severity",
+              "description": "If defined, displays provided severity state",
+              "value": {
+                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
+              }
+            },
+            {
+              "name": "size",
+              "description": "Size of the input",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+            },
             {
-              "name": "selected-date-changed",
-              "description": "When a date is selected"
+              "name": "validate-on",
+              "description": "Sets validation start",
+              "value": {
+                "type": "'input' | 'change' | 'submit'",
+                "default": "'change'"
+              }
             },
             {
-              "name": "selected-date-range-changed",
-              "description": "When a range of dates is selected"
+              "name": "value",
+              "description": "The current value of the input field",
+              "value": { "type": "string | undefined" }
             }
           ],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "locale",
-                "description": "The locale to use for formatting the date",
-                "type": "string"
+                "name": "focusTimeoutId",
+                "type": "ReturnType<typeof setTimeout> | undefined"
               },
               {
-                "name": "date",
-                "description": "The date to display in the date picker",
-                "type": "string"
+                "name": "customInvalid",
+                "description": "If defined, forces component to invalid state until removed. Its value is used as hint text."
               },
               { "name": "id", "type": "string" },
+              {
+                "name": "label",
+                "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
+              },
+              {
+                "name": "hideLabel",
+                "description": "If true, hides the label visually",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "hint",
+                "description": "If defined, displays informational text below the field",
+                "type": "string | undefined"
+              },
               {
                 "name": "invalidDates",
                 "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
                 "type": "string | undefined"
               },
               {
-                "name": "range",
-                "description": "If true, the date picker will allow the selection of a range of dates",
-                "type": "boolean"
+                "name": "name",
+                "description": "If defined, adds name to the input-element",
+                "type": "string | undefined"
+              },
+              { "name": "placeholder", "type": "string" },
+              { "name": "range", "type": "boolean" },
+              {
+                "name": "readonly",
+                "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+                "type": "boolean | undefined"
               },
-              { "name": "selectedDate", "type": "Date | undefined" },
               {
                 "name": "selectableFrom",
                 "description": "Earliest selectable date. (yyyy-mm-dd format)",
@@ -824,18 +971,28 @@
                 "description": "Latest selectable date. (yyyy-mm-dd format)",
                 "type": "string | undefined"
               },
-              { "name": "selectedDateRange", "type": "SkfDatePickerDateRange" }
-            ],
-            "events": [
               {
-                "name": "selected-date-changed",
-                "description": "When a date is selected"
+                "name": "severity",
+                "description": "If defined, displays provided severity state",
+                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
+              },
+              {
+                "name": "size",
+                "description": "Size of the input",
+                "type": "'sm' | 'md'"
+              },
+              {
+                "name": "validateOn",
+                "description": "Sets validation start",
+                "type": "'input' | 'change' | 'submit'"
               },
               {
-                "name": "selected-date-range-changed",
-                "description": "When a range of dates is selected"
+                "name": "value",
+                "description": "The current value of the input field",
+                "type": "string | undefined"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -877,11 +1034,6 @@
           "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)_",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "close-button-aria-label",
-              "description": "If defined, sets the aria-label for the close button",
-              "value": { "type": "string | undefined" }
-            },
             {
               "name": "heading",
               "description": "Title for the modal/dialog",
@@ -892,6 +1044,11 @@
               "description": "If true, makes the dialog stretch edge to edge on screen",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
             {
               "name": "no-close-button",
               "description": "If true, removes the close button",
@@ -934,11 +1091,6 @@
           ],
           "js": {
             "properties": [
-              {
-                "name": "closeButtonAriaLabel",
-                "description": "If defined, sets the aria-label for the close button",
-                "type": "string | undefined"
-              },
               {
                 "name": "heading",
                 "description": "Title for the modal/dialog",
@@ -949,6 +1101,11 @@
                 "description": "If true, makes the dialog stretch edge to edge on screen",
                 "type": "boolean"
               },
+              {
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
+              },
               {
                 "name": "noCloseButton",
                 "description": "If true, removes the close button",
@@ -1032,20 +1189,20 @@
           "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",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "close-button-aria-label",
-              "description": "If defined, sets the aria-label for the close button",
-              "value": { "type": "string", "default": "'Close dialog'" }
-            },
             {
               "name": "heading",
               "description": "Heading for the Drawer",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
             {
               "name": "size",
               "description": "Sets the max-width",
-              "value": { "type": "'sm' | 'md' | 'lg'", "default": "'md'" }
+              "value": { "type": "Size", "default": "'md'" }
             },
             {
               "name": "open",
@@ -1055,7 +1212,7 @@
             {
               "name": "placement",
               "description": "Placement of the Drawer",
-              "value": { "type": "'left' | 'right'", "default": "'right'" }
+              "value": { "type": "Placement", "default": "'right'" }
             }
           ],
           "slots": [{ "name": "", "description": "The Drawer's main content" }],
@@ -1078,20 +1235,20 @@
           ],
           "js": {
             "properties": [
-              {
-                "name": "closeButtonAriaLabel",
-                "description": "If defined, sets the aria-label for the close button",
-                "type": "string"
-              },
               {
                 "name": "heading",
                 "description": "Heading for the Drawer",
                 "type": "string | undefined"
               },
+              {
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
+              },
               {
                 "name": "size",
                 "description": "Sets the max-width",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "Size"
               },
               {
                 "name": "open",
@@ -1101,7 +1258,7 @@
               {
                 "name": "placement",
                 "description": "Placement of the Drawer",
-                "type": "'left' | 'right'"
+                "type": "Placement"
               }
             ],
             "events": [
@@ -1125,7 +1282,7 @@
         },
         {
           "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)_",
           "doc-url": "",
           "attributes": [
             {
@@ -1157,38 +1314,214 @@
           }
         },
         {
-          "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",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "vertical",
-              "value": { "type": "boolean", "default": "false" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The component's main content" }
-          ],
-          "events": [],
-          "js": {
-            "properties": [{ "name": "vertical", "type": "boolean" }],
-            "events": []
-          }
-        },
-        {
-          "name": "skf-header",
-          "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",
+          "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",
           "doc-url": "",
           "attributes": [
             {
-              "name": "compact",
-              "description": "If true, sets header to display in compact mode only (hanburger menu and drawer)",
-              "value": { "type": "string" }
+              "name": "as",
+              "description": "Defines the semantic element to render",
+              "value": { "type": "'button' | 'link'", "default": "'link'" }
             },
             {
-              "name": "hamburger-aria-label",
-              "description": "If defined, sets the aria-label for the hamburger button",
-              "value": { "type": "string", "default": "'Show navigation'" }
+              "name": "color",
+              "description": "Defines the text-color",
+              "value": { "type": "Color", "default": "'primary'" }
+            },
+            {
+              "name": "disabled",
+              "description": "If true, disables the link",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "download",
+              "description": "If defined, downloads the url",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "href",
+              "description": "If defined, loads url on click",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "icon",
+              "description": "If defined, renders an icon before or after the text",
+              "value": { "type": "Icon | undefined" }
+            },
+            {
+              "name": "icon-right",
+              "description": "If true, the icon is placed to the right in relation to the text",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "rel",
+              "description": "If defined, describes the relationship between a linked resource and the current document",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "route",
+              "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "stretch",
+              "description": "If true, fills the parents horizontal axis",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "target",
+              "description": "If defined, specifies where to open the linked document",
+              "value": {
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The links' main content" }],
+          "events": [
+            {
+              "name": "skf-link-click",
+              "type": "CustomEvent",
+              "description": "Fired when the link is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "as",
+                "description": "Defines the semantic element to render",
+                "type": "'button' | 'link'"
+              },
+              {
+                "name": "color",
+                "description": "Defines the text-color",
+                "type": "Color"
+              },
+              {
+                "name": "disabled",
+                "description": "If true, disables the link",
+                "type": "boolean"
+              },
+              {
+                "name": "download",
+                "description": "If defined, downloads the url",
+                "type": "boolean"
+              },
+              {
+                "name": "href",
+                "description": "If defined, loads url on click",
+                "type": "string | undefined"
+              },
+              {
+                "name": "icon",
+                "description": "If defined, renders an icon before or after the text",
+                "type": "Icon | undefined"
+              },
+              {
+                "name": "iconRight",
+                "description": "If true, the icon is placed to the right in relation to the text",
+                "type": "boolean"
+              },
+              {
+                "name": "rel",
+                "description": "If defined, describes the relationship between a linked resource and the current document",
+                "type": "string | undefined"
+              },
+              {
+                "name": "route",
+                "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "stretch",
+                "description": "If true, fills the parents horizontal axis",
+                "type": "boolean"
+              },
+              {
+                "name": "target",
+                "description": "If defined, specifies where to open the linked document",
+                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-link-click",
+                "type": "CustomEvent",
+                "description": "Fired when the link is clicked"
+              }
+            ]
+          }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            { "name": "href", "value": { "type": "string", "default": "''" } },
+            { "name": "icon", "value": { "type": "Icon | undefined" } }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's main content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "href", "type": "string" },
+              { "name": "icon", "type": "Icon | undefined" },
+              { "name": "vertical", "type": "boolean" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
+            {
+              "name": "vertical",
+              "description": "If true, the navigation will be displayed vertically",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's main content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
+              },
+              {
+                "name": "vertical",
+                "description": "If true, the navigation will be displayed vertically",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-header",
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "compact",
+              "description": "If true, sets header to display in compact mode only (hanburger menu and drawer)",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
             },
             {
               "name": "site-name",
@@ -1210,9 +1543,9 @@
                 "description": "If true, sets header to display in compact mode only (hanburger menu and drawer)"
               },
               {
-                "name": "hamburgerAriaLabel",
-                "description": "If defined, sets the aria-label for the hamburger button",
-                "type": "string"
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
               },
               {
                 "name": "siteName",
@@ -1250,21 +1583,6 @@
                 "type": "HTMLInputElement['autocomplete'] | undefined"
               }
             },
-            {
-              "name": "button-aria-label-clear",
-              "description": "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": "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": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
-              "value": { "type": "string", "default": "'Show password'" }
-            },
             {
               "name": "custom-invalid",
               "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
@@ -1298,6 +1616,11 @@
               "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
             {
               "name": "leading",
               "description": "If defined, displays a prefix/adornment before the input-element",
@@ -1343,11 +1666,6 @@
               "description": "If true, makes the element not mutable, meaning the user can not edit the control",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "required-label",
-              "description": "If defined, renders an alternative A11y text for the asterisk",
-              "value": { "type": "string | undefined" }
-            },
             {
               "name": "severity",
               "description": "If defined, displays provided severity state",
@@ -1400,324 +1718,163 @@
             {
               "name": "change",
               "type": "CustomEvent",
-              "description": "Fires when the value of the input changes"
-            },
-            {
-              "name": "invalid",
-              "type": "CustomEvent",
-              "description": "Fires when the input is invalid"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "autocomplete",
-                "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.",
-                "type": "HTMLInputElement['autocomplete'] | undefined"
-              },
-              {
-                "name": "buttonAriaLabelClear",
-                "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
-                "type": "string"
-              },
-              {
-                "name": "buttonAriaLabelHide",
-                "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
-                "type": "string"
-              },
-              {
-                "name": "buttonAriaLabelShow",
-                "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
-                "type": "string"
-              },
-              {
-                "name": "customInvalid",
-                "description": "If defined, forces component to invalid state until removed. Its value is used as hint text."
-              },
-              {
-                "name": "debug",
-                "description": "If true, outputs helping hints in console",
-                "type": "boolean"
-              },
-              {
-                "name": "hideLabel",
-                "description": "If true, hides the label visually",
-                "type": "boolean"
-              },
-              {
-                "name": "hint",
-                "description": "If defined, displays informational text below the field",
-                "type": "string | undefined"
-              },
-              {
-                "name": "inputmode",
-                "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.",
-                "type": "HTMLInputElement['inputMode']"
-              },
-              {
-                "name": "label",
-                "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
-                "type": "string | undefined"
-              },
-              {
-                "name": "leading",
-                "description": "If defined, displays a prefix/adornment before the input-element",
-                "type": "string | undefined"
-              },
-              {
-                "name": "max",
-                "description": "If defined, sets the maximum value to accept for this input",
-                "type": "number | string | undefined"
-              },
-              {
-                "name": "maxLength",
-                "description": "If defined, sets the maximum character length to accept for this input",
-                "type": "number | undefined"
-              },
-              {
-                "name": "min",
-                "description": "If defined, sets the minimum value to accept for this input",
-                "type": "number | string | undefined"
-              },
-              {
-                "name": "minLength",
-                "description": "If defined, sets the minimum character length to accept for this input",
-                "type": "number | undefined"
-              },
-              {
-                "name": "name",
-                "description": "If defined, adds name to the input-element",
-                "type": "string | undefined"
-              },
-              {
-                "name": "pattern",
-                "description": "If defined, adds name to the input-element",
-                "type": "string | undefined"
-              },
-              {
-                "name": "placeholder",
-                "description": "If defined, 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"
-              },
-              {
-                "name": "requiredLabel",
-                "description": "If defined, renders an alternative A11y text for the asterisk",
-                "type": "string | undefined"
-              },
-              {
-                "name": "severity",
-                "description": "If defined, displays provided severity state",
-                "type": "FormFieldSeverity | undefined"
-              },
-              {
-                "name": "showValid",
-                "description": "If true, displays valid state after interaction",
-                "type": "boolean"
-              },
-              {
-                "name": "size",
-                "description": "Size of the input",
-                "type": "'sm' | 'md'"
-              },
-              {
-                "name": "trailing",
-                "description": "If defined, displays a suffix/adornment after the input-element",
-                "type": "string | undefined"
-              },
-              {
-                "name": "type",
-                "description": "Type of input",
-                "type": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'"
-              },
-              {
-                "name": "validateOn",
-                "description": "Sets validation start",
-                "type": "'input' | 'change' | 'submit'"
-              },
-              {
-                "name": "value",
-                "description": "The current value of the input field"
-              }
-            ],
-            "events": [
-              {
-                "name": "change",
-                "type": "CustomEvent",
-                "description": "Fires when the value of the input changes"
-              },
-              {
-                "name": "invalid",
-                "type": "CustomEvent",
-                "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": "Defines the semantic element to render",
-              "value": { "type": "'button' | 'a'", "default": "'a'" }
-            },
-            {
-              "name": "color",
-              "description": "Defines the text-color",
-              "value": {
-                "type": "'primary' | 'inverse'",
-                "default": "'primary'"
-              }
-            },
-            {
-              "name": "disabled",
-              "description": "If true, disables the link",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "download",
-              "description": "If defined, downloads the url",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "href",
-              "description": "If defined, loads url on click",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "icon",
-              "description": "If defined, renders an icon before or after the text",
-              "value": { "type": "Icon | undefined" }
-            },
-            {
-              "name": "icon-placement",
-              "description": "Defines the position of the icon in relation to the text",
-              "value": { "type": "'left' | 'right'", "default": "'left'" }
-            },
-            {
-              "name": "rel",
-              "description": "If defined, describes the relationship between a linked resource and the current document",
-              "value": { "type": "string | undefined" }
-            },
-            {
-              "name": "route",
-              "description": "If defined, 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", "default": "false" }
-            },
-            {
-              "name": "target",
-              "description": "If defined, specifies where to open the linked document",
-              "value": {
-                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              }
+              "description": "Fires when the value of the input changes"
             },
             {
-              "name": "type",
-              "description": "Defines the type of button",
-              "value": { "type": "SkfLinkType", "default": "'button'" }
+              "name": "invalid",
+              "type": "CustomEvent",
+              "description": "Fires when the input is invalid"
             }
           ],
-          "slots": [{ "name": "", "description": "The links' main content" }],
-          "events": [],
           "js": {
             "properties": [
               {
-                "name": "as",
-                "description": "Defines the semantic element to render",
-                "type": "'button' | 'a'"
+                "name": "autocomplete",
+                "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.",
+                "type": "HTMLInputElement['autocomplete'] | undefined"
               },
               {
-                "name": "color",
-                "description": "Defines the text-color",
-                "type": "'primary' | 'inverse'"
+                "name": "customInvalid",
+                "description": "If defined, forces component to invalid state until removed. Its value is used as hint text."
               },
               {
-                "name": "disabled",
-                "description": "If true, disables the link",
+                "name": "debug",
+                "description": "If true, outputs helping hints in console",
                 "type": "boolean"
               },
               {
-                "name": "download",
-                "description": "If defined, downloads the url",
+                "name": "hideLabel",
+                "description": "If true, hides the label visually",
+                "type": "boolean"
+              },
+              {
+                "name": "hint",
+                "description": "If defined, displays informational text below the field",
                 "type": "string | undefined"
               },
               {
-                "name": "href",
-                "description": "If defined, loads url on click",
+                "name": "inputmode",
+                "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.",
+                "type": "HTMLInputElement['inputMode']"
+              },
+              {
+                "name": "label",
+                "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
                 "type": "string | undefined"
               },
               {
-                "name": "icon",
-                "description": "If defined, renders an icon before or after the text",
-                "type": "Icon | undefined"
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
               },
               {
-                "name": "iconPlacement",
-                "description": "Defines the position of the icon in relation to the text",
-                "type": "'left' | 'right'"
+                "name": "leading",
+                "description": "If defined, displays a prefix/adornment before the input-element",
+                "type": "string | undefined"
               },
               {
-                "name": "onClick",
-                "description": "If defined, accepts a function that runs on click. Forwards optional route as second argument."
+                "name": "max",
+                "description": "If defined, sets the maximum value to accept for this input",
+                "type": "number | string | undefined"
               },
               {
-                "name": "rel",
-                "description": "If defined, describes the relationship between a linked resource and the current document",
+                "name": "maxLength",
+                "description": "If defined, sets the maximum character length to accept for this input",
+                "type": "number | undefined"
+              },
+              {
+                "name": "min",
+                "description": "If defined, sets the minimum value to accept for this input",
+                "type": "number | string | undefined"
+              },
+              {
+                "name": "minLength",
+                "description": "If defined, sets the minimum character length to accept for this input",
+                "type": "number | undefined"
+              },
+              {
+                "name": "name",
+                "description": "If defined, adds name to the input-element",
                 "type": "string | undefined"
               },
               {
-                "name": "route",
-                "description": "If defined, used on conjunction with onClick property, second argument",
+                "name": "pattern",
+                "description": "If defined, adds name to the input-element",
                 "type": "string | undefined"
               },
               {
-                "name": "stretch",
-                "description": "If true, fills the parents horizontal axis",
+                "name": "placeholder",
+                "description": "If defined, 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"
               },
               {
-                "name": "target",
-                "description": "If defined, specifies where to open the linked document",
-                "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+                "name": "severity",
+                "description": "If defined, displays provided severity state",
+                "type": "FormFieldSeverity | undefined"
+              },
+              {
+                "name": "showValid",
+                "description": "If true, displays valid state after interaction",
+                "type": "boolean"
+              },
+              {
+                "name": "size",
+                "description": "Size of the input",
+                "type": "'sm' | 'md'"
+              },
+              {
+                "name": "trailing",
+                "description": "If defined, displays a suffix/adornment after the input-element",
+                "type": "string | undefined"
               },
               {
                 "name": "type",
-                "description": "Defines the type of button",
-                "type": "SkfLinkType"
+                "description": "Type of input",
+                "type": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'"
+              },
+              {
+                "name": "validateOn",
+                "description": "Sets validation start",
+                "type": "'input' | 'change' | 'submit'"
+              },
+              {
+                "name": "value",
+                "description": "The current value of the input field"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "change",
+                "type": "CustomEvent",
+                "description": "Fires when the value of the input changes"
+              },
+              {
+                "name": "invalid",
+                "type": "CustomEvent",
+                "description": "Fires when the input is invalid"
+              }
+            ]
           }
         },
         {
           "name": "skf-menu-item",
-          "description": "The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
+          "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",
           "doc-url": "",
           "attributes": [
             {
               "name": "as",
               "description": "Defines the semantic element to render",
-              "value": { "type": "'button' | 'a'", "default": "'a'" }
+              "value": { "type": "'button' | 'link'", "default": "'link'" }
             },
             {
               "name": "color",
               "description": "Defines the text-color",
-              "value": {
-                "type": "'primary' | 'inverse'",
-                "default": "'primary'"
-              }
+              "value": { "type": "Color", "default": "'primary'" }
             },
             {
               "name": "disabled",
@@ -1727,7 +1884,7 @@
             {
               "name": "download",
               "description": "If defined, downloads the url",
-              "value": { "type": "string | undefined" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "href",
@@ -1740,9 +1897,9 @@
               "value": { "type": "Icon | undefined" }
             },
             {
-              "name": "icon-placement",
-              "description": "Defines the position of the icon in relation to the text",
-              "value": { "type": "'left' | 'right'", "default": "'left'" }
+              "name": "icon-right",
+              "description": "If true, the icon is placed to the right in relation to the text",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "rel",
@@ -1751,7 +1908,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.",
               "value": { "type": "string | undefined" }
             },
             {
@@ -1765,29 +1922,29 @@
               "value": {
                 "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
               }
-            },
-            {
-              "name": "type",
-              "description": "Defines the type of button",
-              "value": { "type": "SkfLinkType", "default": "'button'" }
             }
           ],
           "slots": [
             { "name": "", "description": "The component's main content" }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "skf-link-click",
+              "type": "CustomEvent",
+              "description": "Fired when the link is clicked"
+            }
+          ],
           "js": {
             "properties": [
-              { "name": "role", "type": "string" },
               {
                 "name": "as",
                 "description": "Defines the semantic element to render",
-                "type": "'button' | 'a'"
+                "type": "'button' | 'link'"
               },
               {
                 "name": "color",
                 "description": "Defines the text-color",
-                "type": "'primary' | 'inverse'"
+                "type": "Color"
               },
               {
                 "name": "disabled",
@@ -1797,7 +1954,7 @@
               {
                 "name": "download",
                 "description": "If defined, downloads the url",
-                "type": "string | undefined"
+                "type": "boolean"
               },
               {
                 "name": "href",
@@ -1810,13 +1967,9 @@
                 "type": "Icon | undefined"
               },
               {
-                "name": "iconPlacement",
-                "description": "Defines the position of the icon in relation to the text",
-                "type": "'left' | 'right'"
-              },
-              {
-                "name": "onClick",
-                "description": "If defined, accepts a function that runs on click. Forwards optional route as second argument."
+                "name": "iconRight",
+                "description": "If true, the icon is placed to the right in relation to the text",
+                "type": "boolean"
               },
               {
                 "name": "rel",
@@ -1825,7 +1978,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.",
                 "type": "string | undefined"
               },
               {
@@ -1837,19 +1990,20 @@
                 "name": "target",
                 "description": "If defined, specifies where to open the linked document",
                 "type": "'_blank' | '_parent' | '_self' | '_top' | undefined"
-              },
-              {
-                "name": "type",
-                "description": "Defines the type of button",
-                "type": "SkfLinkType"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "skf-link-click",
+                "type": "CustomEvent",
+                "description": "Fired when the link is clicked"
+              }
+            ]
           }
         },
         {
           "name": "skf-menu",
-          "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 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",
           "doc-url": "",
           "attributes": [
             {
@@ -1866,7 +2020,7 @@
               "value": { "type": "string" }
             }
           ],
-          "slots": [{ "name": "", "description": "The menu popover content" }],
+          "slots": [{ "name": "", "description": "The menu content" }],
           "events": [
             {
               "name": "skf-opened",
@@ -1880,7 +2034,18 @@
             }
           ],
           "js": {
-            "properties": [],
+            "properties": [
+              {
+                "name": "open()",
+                "description": "Method that opens the menu",
+                "type": "(void) => void"
+              },
+              {
+                "name": "close()",
+                "description": "Method that closes the menu",
+                "type": "(void) => void"
+              }
+            ],
             "events": [
               {
                 "name": "skf-opened",
@@ -1895,32 +2060,9 @@
             ]
           }
         },
-        {
-          "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",
-          "doc-url": "",
-          "attributes": [
-            { "name": "href", "value": { "type": "string", "default": "'#'" } },
-            {
-              "name": "icon",
-              "value": { "type": "SkfLink['icon'] | undefined" }
-            }
-          ],
-          "slots": [
-            { "name": "", "description": "The component's main content" }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              { "name": "href", "type": "string" },
-              { "name": "icon", "type": "SkfLink['icon'] | undefined" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "skf-popover",
-          "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 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",
           "doc-url": "",
           "attributes": [
             {
@@ -1933,7 +2075,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",
               "value": { "type": "string" }
             },
             {
@@ -1952,12 +2094,12 @@
             {
               "name": "skf-opened",
               "type": "CustomEvent",
-              "description": "Fired when the menu is opened"
+              "description": "Fired when the popover is opened"
             },
             {
               "name": "skf-closed",
               "type": "CustomEvent",
-              "description": "Fired when the menu is closed"
+              "description": "Fired when the popover is closed"
             }
           ],
           "js": {
@@ -1971,18 +2113,28 @@
                 "name": "hideArrow",
                 "description": "If true, hides the arrow",
                 "type": "boolean"
+              },
+              {
+                "name": "open()",
+                "description": "Method that opens the popover",
+                "type": "(void) => void"
+              },
+              {
+                "name": "close()",
+                "description": "Method that closes the popover",
+                "type": "(void) => void"
               }
             ],
             "events": [
               {
                 "name": "skf-opened",
                 "type": "CustomEvent",
-                "description": "Fired when the menu is opened"
+                "description": "Fired when the popover is opened"
               },
               {
                 "name": "skf-closed",
                 "type": "CustomEvent",
-                "description": "Fired when the menu is closed"
+                "description": "Fired when the popover is closed"
               }
             ]
           }
@@ -2066,13 +2218,13 @@
               "value": { "type": "string | undefined" }
             },
             {
-              "name": "name",
-              "description": "If defined, adds name to the input-element",
-              "value": { "type": "string | undefined" }
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
             },
             {
-              "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",
               "value": { "type": "string | undefined" }
             },
             {
@@ -2132,13 +2284,13 @@
                 "type": "string | undefined"
               },
               {
-                "name": "name",
-                "description": "If defined, adds name to the input-element",
-                "type": "string | undefined"
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
               },
               {
-                "name": "requiredLabel",
-                "description": "If defined, renders an alternative A11y text for the asterisk",
+                "name": "name",
+                "description": "If defined, adds name to the input-element",
                 "type": "string | undefined"
               },
               {
@@ -2271,7 +2423,10 @@
           ],
           "events": [],
           "js": {
-            "properties": [{ "name": "label", "type": "string" }],
+            "properties": [
+              { "name": "label", "type": "string" },
+              { "name": "small", "type": "boolean" }
+            ],
             "events": []
           }
         },
@@ -2283,7 +2438,7 @@
             {
               "name": "size",
               "description": "Specifies Tag size",
-              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+              "value": { "type": "Size", "default": "'md'" }
             },
             {
               "name": "icon",
@@ -2295,6 +2450,11 @@
               "description": "If defined, gives the supplied appearance",
               "value": { "type": "Severity | undefined" }
             },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
             {
               "name": "removable",
               "description": "If true, adds trailing button to remove tag",
@@ -2310,7 +2470,7 @@
               {
                 "name": "size",
                 "description": "Specifies Tag size",
-                "type": "'sm' | 'md'"
+                "type": "Size"
               },
               {
                 "name": "icon",
@@ -2322,6 +2482,11 @@
                 "description": "If defined, gives the supplied appearance",
                 "type": "Severity | undefined"
               },
+              {
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
+              },
               {
                 "name": "onClick",
                 "description": "If defined, accepts a function that runs on click"
@@ -2341,7 +2506,7 @@
         },
         {
           "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\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\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",
           "doc-url": "",
           "attributes": [
             {
@@ -2357,7 +2522,7 @@
             {
               "name": "button-label",
               "description": "Sets the first visible text on the component",
-              "value": { "type": "string", "default": "'Select an option'" }
+              "value": { "type": "string" }
             },
             {
               "name": "custom-invalid",
@@ -2384,6 +2549,11 @@
               "description": "If defined, displays provided label",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
             {
               "name": "max",
               "description": "If defined, limits the number of selectable options",
@@ -2404,11 +2574,6 @@
               "description": "If defined, set name of the component",
               "value": { "type": "string | undefined" }
             },
-            {
-              "name": "required-label",
-              "description": "If defined, renders an alternative A11y text for the asterisk",
-              "value": { "type": "string | undefined" }
-            },
             {
               "name": "severity",
               "description": "If defined, displays provided severity state",
@@ -2453,14 +2618,18 @@
               "name": "skf-select-option-select",
               "type": "CustomEvent",
               "description": "{detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled"
+            },
+            {
+              "name": "skf-select-connected",
+              "type": "CustomEvent",
+              "description": "Fires when the select options are connected, useful for setting selected option(s) via value property. E.g mySkfSelect.value = 'option1,option2';"
             }
           ],
           "js": {
             "properties": [
               {
                 "name": "buttonLabel",
-                "description": "Sets the first visible text on the component",
-                "type": "string"
+                "description": "Sets the first visible text on the component"
               },
               {
                 "name": "customInvalid",
@@ -2495,6 +2664,11 @@
                 "description": "If defined, displays provided label",
                 "type": "string | undefined"
               },
+              {
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
+              },
               {
                 "name": "max",
                 "description": "If defined, limits the number of selectable options",
@@ -2515,11 +2689,6 @@
                 "description": "If defined, set name of the component",
                 "type": "string | undefined"
               },
-              {
-                "name": "requiredLabel",
-                "description": "If defined, renders an alternative A11y text for the asterisk",
-                "type": "string | undefined"
-              },
               {
                 "name": "severity",
                 "description": "If defined, displays provided severity state",
@@ -2537,7 +2706,7 @@
               },
               {
                 "name": "value",
-                "description": "Read only, returns the selected value. (if multiple: in a comma separated string)"
+                "description": "Returns the selected value. (if multiple: in a comma separated string). If set will default set corresponding option."
               },
               { "name": "_selectedOptions", "type": "array" }
             ],
@@ -2566,13 +2735,18 @@
                 "name": "skf-select-option-select",
                 "type": "CustomEvent",
                 "description": "{detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled"
+              },
+              {
+                "name": "skf-select-connected",
+                "type": "CustomEvent",
+                "description": "Fires when the select options are connected, useful for setting selected option(s) via value property. E.g mySkfSelect.value = 'option1,option2';"
               }
             ]
           }
         },
         {
           "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).",
+          "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).",
           "doc-url": "",
           "attributes": [
             {
@@ -2602,7 +2776,7 @@
             },
             {
               "name": "value",
-              "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text.",
+              "description": "Returns or sets the option value. If value is omitted, defaults to the tags slotted text.",
               "value": { "type": "string" }
             }
           ],
@@ -2652,10 +2826,9 @@
               },
               {
                 "name": "value",
-                "description": "Returns or sets the tags value. If value is omitted, defaults to the tags text."
+                "description": "Returns or sets the option value. If value is omitted, defaults to the tags slotted text."
               },
-              { "name": "role", "type": "string" },
-              { "name": "_parent" },
+              { "name": "small", "type": "boolean" },
               { "name": "_shortcutUpdate", "type": "boolean" }
             ],
             "events": [
@@ -2703,8 +2876,7 @@
                 "description": "If true, item marked as completed",
                 "type": "boolean"
               },
-              { "name": "_setInternalState" },
-              { "name": "role", "type": "string" }
+              { "name": "_setInternalState" }
             ],
             "events": [
               {
@@ -2798,13 +2970,13 @@
               "value": { "type": "string | undefined" }
             },
             {
-              "name": "name",
-              "description": "If defined, adds name to the input-element",
-              "value": { "type": "string | undefined" }
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
             },
             {
-              "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",
               "value": { "type": "string | undefined" }
             },
             {
@@ -2848,13 +3020,13 @@
                 "type": "string | undefined"
               },
               {
-                "name": "name",
-                "description": "If defined, adds name to the input-element",
-                "type": "string | undefined"
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
               },
               {
-                "name": "requiredLabel",
-                "description": "If defined, renders an alternative A11y text for the asterisk",
+                "name": "name",
+                "description": "If defined, adds name to the input-element",
                 "type": "string | undefined"
               },
               {
@@ -2891,15 +3063,14 @@
                 "description": "The tab panel's name.",
                 "type": "string"
               },
-              { "name": "active", "type": "boolean" },
-              { "name": "role", "type": "string" }
+              { "name": "active", "type": "boolean" }
             ],
             "events": []
           }
         },
         {
-          "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",
           "doc-url": "",
           "attributes": [
             {
@@ -3004,8 +3175,7 @@
                 "type": "string"
               },
               { "name": "selected", "type": "boolean" },
-              { "name": "variant", "type": "SkfTabGroup['variant']" },
-              { "name": "role", "type": "string" }
+              { "name": "variant", "type": "SkfTabs['variant']" }
             ],
             "events": [
               {
@@ -3065,6 +3235,11 @@
               "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "lang",
+              "description": "Sets the internal language of the component",
+              "value": { "type": "Language", "default": "'en'" }
+            },
             {
               "name": "name",
               "description": "If defined, adds name to the input-element",
@@ -3090,11 +3265,6 @@
               "description": "If true, makes the element not mutable, meaning the user can not edit the control",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "required-label",
-              "description": "If defined, renders an alternative A11y text for the asterisk",
-              "value": { "type": "string | undefined" }
-            },
             {
               "name": "rows",
               "description": "If defined, sets the rows of the textarea",
@@ -3176,6 +3346,11 @@
                 "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
                 "type": "string | undefined"
               },
+              {
+                "name": "lang",
+                "description": "Sets the internal language of the component",
+                "type": "Language"
+              },
               {
                 "name": "name",
                 "description": "If defined, adds name to the input-element",
@@ -3201,11 +3376,6 @@
                 "description": "If true, makes the element not mutable, meaning the user can not edit the control",
                 "type": "boolean"
               },
-              {
-                "name": "requiredLabel",
-                "description": "If defined, renders an alternative A11y text for the asterisk",
-                "type": "string | undefined"
-              },
               {
                 "name": "rows",
                 "description": "If defined, sets the rows of the textarea",
@@ -3344,7 +3514,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",
           "doc-url": "",
           "attributes": [
             {
@@ -3367,28 +3537,41 @@
           "events": [
             {
               "name": "skf-opened",
-              "description": "Fired when the dropdown is opened"
+              "type": "CustomEvent",
+              "description": "Fired when the tooltip is opened"
             },
             {
               "name": "skf-closed",
-              "description": "Fired when the dropdown is closed"
+              "type": "CustomEvent",
+              "description": "Fired when the tooltip is closed"
             }
           ],
           "js": {
             "properties": [
-              { "name": "role", "type": "string" },
               { "name": "offset", "type": "number" },
               { "name": "placement", "type": "string" },
-              { "name": "variant", "type": "string" }
+              { "name": "variant", "type": "string" },
+              {
+                "name": "open()",
+                "description": "Method that opens the tooltip",
+                "type": "(void) => void"
+              },
+              {
+                "name": "close()",
+                "description": "Method that closes the tooltip",
+                "type": "(void) => void"
+              }
             ],
             "events": [
               {
                 "name": "skf-opened",
-                "description": "Fired when the dropdown is opened"
+                "type": "CustomEvent",
+                "description": "Fired when the tooltip is opened"
               },
               {
                 "name": "skf-closed",
-                "description": "Fired when the dropdown is closed"
+                "type": "CustomEvent",
+                "description": "Fired when the tooltip is closed"
               }
             ]
           }