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

package/dist/types/vue/index.d.ts

@@ -3,26 +3,27 @@ import type { DefineComponent } from "vue";
 import type { SkfIcon } from "../../components/icon/icon.component.js";
 import type { SkfAccordionItem, CustomEvent } from "../../components/accordion-item/accordion-item.component.js";
 import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
-import type { SkfAlert } from "../../components/alert/alert.component.js";
+import type { SkfAlert, CustomEvent } from "../../components/alert/alert.component.js";
 import type { SkfBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { SkfBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SkfLoader } from "../../components/loader/loader.component.js";
 import type { SkfButton, CustomEvent } from "../../components/button/button.component.js";
 import type { SkfCard } from "../../components/card/card.component.js";
 import type { SkfCheckbox, Event } from "../../components/checkbox/checkbox.component.js";
-import type { SkfDatePicker } from "../../components/datepicker/datepicker.component.js";
+import type { SkfDatepickerCalendar } from "../../components/datepicker-calendar/datepicker-calendar.component.js";
+import type { SkfDatepicker } from "../../components/datepicker/datepicker.component.js";
 import type { SkfHeading } from "../../components/heading/heading.component.js";
 import type { SkfDialog, CustomEvent } from "../../components/dialog/dialog.component.js";
 import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfDrawer, CustomEvent } from "../../components/drawer/drawer.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
+import type { SkfLink, CustomEvent } from "../../components/link/link.component.js";
+import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SkfNav } from "../../components/nav/nav.component.js";
 import type { SkfHeader } from "../../components/header/header.component.js";
 import type { SkfInput, CustomEvent } from "../../components/input/input.component.js";
-import type { SkfLink } from "../../components/link/link.component.js";
-import type { SkfMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
 import type { SkfMenu, CustomEvent } from "../../components/menu/menu.component.js";
-import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SkfPopover, CustomEvent } from "../../components/popover/popover.component.js";
 import type { SkfProgress } from "../../components/progress/progress.component.js";
 import type { SkfRadio, Event } from "../../components/radio/radio.component.js";
@@ -39,12 +40,12 @@ import type { SkfStepperItem } from "../../components/stepper-item/stepper-item.
 import type { SkfStepper, CustomEvent } from "../../components/stepper/stepper.component.js";
 import type { SkfSwitch } from "../../components/switch/switch.component.js";
 import type { SkfTabPanel } from "../../components/tab-panel/tab-panel.component.js";
-import type { SkfTabGroup } from "../../components/tab-group/tab-group.component.js";
+import type { SkfTabs } from "../../components/tabs/tabs.component.js";
 import type { SkfTab, CustomEvent } from "../../components/tab/tab.component.js";
 import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
 import type { SkfToastWrapper } from "../../components/toast-wrapper/toast-wrapper.component.js";
 import type { SkfToast } from "../../components/toast/toast.component.js";
-import type { SkfTooltip } from "../../components/tooltip/tooltip.component.js";
+import type { SkfTooltip, CustomEvent } from "../../components/tooltip/tooltip.component.js";
 
 type SkfIconProps = {
   /** Sets the color of the icon */
@@ -91,17 +92,17 @@ type SkfAccordionProps = {
 };
 
 type SkfAlertProps = {
-  /** Close button aria-label */
-  "button-label"?: SkfAlert["buttonLabel"];
   /** If defined, displays leading icon */
   icon?: SkfAlert["icon"];
+  /** Sets the internal language of the component */
+  lang?: SkfAlert["lang"];
   /** If true, renders with an close button and sets aria-role to `status` */
   persistent?: SkfAlert["persistent"];
   /** If defined, gives the supplied appearance */
   severity?: SkfAlert["severity"];
 
   /** Fires when the close button is clicked */
-  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
+  "onskf-alert-close"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfBreadcrumbItemProps = {
@@ -114,16 +115,14 @@ type SkfBreadcrumbItemProps = {
 type SkfBreadcrumbProps = {
   /** aria-label for the breadcrumb control */
   label?: SkfBreadcrumb["label"];
-  /** Displays an alternative size */
-  size?: SkfBreadcrumb["size"];
+  /** If true, renders a smaller version */
+  small?: SkfBreadcrumb["small"];
 
   /** Fired when the item is clicked */
   onclick?: (e: CustomEvent<never>) => void;
 };
 
 type SkfLoaderProps = {
-  /** Defines the aria-label */
-  "aria-label"?: SkfLoader["ariaLabel"];
   /** If true, inverts the color (to be used on colored backgrounds) */
   invert?: SkfLoader["invert"];
   /** Defines the size of the loader */
@@ -180,10 +179,10 @@ type SkfCheckboxProps = {
   indeterminate?: SkfCheckbox["indeterminate"];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
   label?: SkfCheckbox["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfCheckbox["lang"];
   /** If defined, adds name to the input-element */
   name?: SkfCheckbox["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfCheckbox["requiredLabel"];
   /** If defined, styles checkbox using provided severity */
   severity?: SkfCheckbox["severity"];
   /** If true, displays valid state after interaction */
@@ -197,29 +196,72 @@ type SkfCheckboxProps = {
   onchange?: (e: CustomEvent<Event>) => void;
 };
 
-type SkfDatePickerProps = {
-  /** The locale to use for formatting the date */
-  locale?: SkfDatePicker["locale"];
-  /** The date to display in the date picker */
-  date?: SkfDatePicker["date"];
+type SkfDatepickerCalendarProps = {
+  /**  */
+  eventid?: SkfDatepickerCalendar["eventid"];
   /**  */
-  id?: SkfDatePicker["id"];
+  firstDayOfWeek?: SkfDatepickerCalendar["firstDayOfWeek"];
   /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
-  "invalid-dates"?: SkfDatePicker["invalidDates"];
-  /** If true, the date picker will allow the selection of a range of dates */
-  range?: SkfDatePicker["range"];
+  "invalid-dates"?: SkfDatepickerCalendar["invalidDates"];
+  /** Sets the internal language of the component */
+  lang?: SkfDatepickerCalendar["lang"];
+  /**  */
+  locale?: SkfDatepickerCalendar["locale"];
+  /**  */
+  range?: SkfDatepickerCalendar["range"];
   /** Earliest selectable date. (yyyy-mm-dd format) */
-  "selectable-from"?: SkfDatePicker["selectableFrom"];
+  "selectable-from"?: SkfDatepickerCalendar["selectableFrom"];
   /** Latest selectable date. (yyyy-mm-dd format) */
-  "selectable-to"?: SkfDatePicker["selectableTo"];
+  "selectable-to"?: SkfDatepickerCalendar["selectableTo"];
+  /**  */
+  "selected-date"?: SkfDatepickerCalendar["selectedDate"];
+  /**  */
+  selectedDateRange?: SkfDatepickerCalendar["selectedDateRange"];
+  /**  */
+  _listenToKeyboard?: SkfDatepickerCalendar["_listenToKeyboard"];
+  /**  */
+  _handleKeyDown?: SkfDatepickerCalendar["_handleKeyDown"];
+  /**  */
+  dateSelectable?: SkfDatepickerCalendar["dateSelectable"];
+};
+
+type SkfDatepickerProps = {
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+  "custom-invalid"?: SkfDatepicker["customInvalid"];
+  /**  */
+  id?: SkfDatepicker["id"];
+  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+  label?: SkfDatepicker["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfDatepicker["lang"];
+  /** If true, hides the label visually */
+  "hide-label"?: SkfDatepicker["hideLabel"];
+  /** If defined, displays informational text below the field */
+  hint?: SkfDatepicker["hint"];
+  /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
+  "invalid-dates"?: SkfDatepicker["invalidDates"];
+  /** If defined, adds name to the input-element */
+  name?: SkfDatepicker["name"];
+  /**  */
+  placeholder?: SkfDatepicker["placeholder"];
   /**  */
-  selectedDate?: SkfDatePicker["selectedDate"];
+  range?: SkfDatepicker["range"];
+  /** If true, makes the element not mutable, meaning the user can not edit the control */
+  readonly?: SkfDatepicker["readonly"];
+  /** Earliest selectable date. (yyyy-mm-dd format) */
+  "selectable-from"?: SkfDatepicker["selectableFrom"];
+  /** Latest selectable date. (yyyy-mm-dd format) */
+  "selectable-to"?: SkfDatepicker["selectableTo"];
+  /** If defined, displays provided severity state */
+  severity?: SkfDatepicker["severity"];
+  /** Size of the input */
+  size?: SkfDatepicker["size"];
+  /** Sets validation start */
+  "validate-on"?: SkfDatepicker["validateOn"];
+  /** The current value of the input field */
+  value?: SkfDatepicker["value"];
   /**  */
-  selectedDateRange?: SkfDatePicker["selectedDateRange"];
-  /** When a date is selected */
-  "onselected-date-changed"?: (e: CustomEvent<never>) => void;
-  /** When a range of dates is selected */
-  "onselected-date-range-changed"?: (e: CustomEvent<never>) => void;
+  focusTimeoutId?: SkfDatepicker["focusTimeoutId"];
 };
 
 type SkfHeadingProps = {
@@ -230,12 +272,12 @@ type SkfHeadingProps = {
 };
 
 type SkfDialogProps = {
-  /** If defined, sets the aria-label for the close button */
-  "close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
   /** Title for the modal/dialog */
   heading?: SkfDialog["heading"];
   /** If true, makes the dialog stretch edge to edge on screen */
   fullscreen?: SkfDialog["fullscreen"];
+  /** Sets the internal language of the component */
+  lang?: SkfDialog["lang"];
   /** If true, removes the close button */
   "no-close-button"?: SkfDialog["noCloseButton"];
   /** If defined, removes the inner padding */
@@ -261,10 +303,10 @@ type SkfDividerProps = {
 };
 
 type SkfDrawerProps = {
-  /** If defined, sets the aria-label for the close button */
-  "close-button-aria-label"?: SkfDrawer["closeButtonAriaLabel"];
   /** Heading for the Drawer */
   heading?: SkfDrawer["heading"];
+  /** Sets the internal language of the component */
+  lang?: SkfDrawer["lang"];
   /** Sets the max-width */
   size?: SkfDrawer["size"];
   /** If true, Drawer is open */
@@ -287,16 +329,55 @@ type SkfLogoProps = {
   color?: SkfLogo["color"];
 };
 
-type SkfNavProps = {
+type SkfLinkProps = {
+  /** Defines the semantic element to render */
+  as?: SkfLink["as"];
+  /** Defines the text-color */
+  color?: SkfLink["color"];
+  /** If true, disables the link */
+  disabled?: SkfLink["disabled"];
+  /** If defined, downloads the url */
+  download?: SkfLink["download"];
+  /** If defined, loads url on click */
+  href?: SkfLink["href"];
+  /** If defined, renders an icon before or after the text */
+  icon?: SkfLink["icon"];
+  /** If true, the icon is placed to the right in relation to the text */
+  "icon-right"?: SkfLink["iconRight"];
+  /** If defined, describes the relationship between a linked resource and the current document */
+  rel?: SkfLink["rel"];
+  /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
+  route?: SkfLink["route"];
+  /** If true, fills the parents horizontal axis */
+  stretch?: SkfLink["stretch"];
+  /** If defined, specifies where to open the linked document */
+  target?: SkfLink["target"];
+
+  /** Fired when the link is clicked */
+  "onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+type SkfNavItemProps = {
+  /**  */
+  href?: SkfNavItem["href"];
+  /**  */
+  icon?: SkfNavItem["icon"];
   /**  */
+  vertical?: SkfNavItem["vertical"];
+};
+
+type SkfNavProps = {
+  /** Sets the internal language of the component */
+  lang?: SkfNav["lang"];
+  /** If true, the navigation will be displayed vertically */
   vertical?: SkfNav["vertical"];
 };
 
 type SkfHeaderProps = {
   /** If true, sets header to display in compact mode only (hanburger menu and drawer) */
   compact?: SkfHeader["compact"];
-  /** If defined, sets the aria-label for the hamburger button */
-  "hamburger-aria-label"?: SkfHeader["hamburgerAriaLabel"];
+  /** Sets the internal language of the component */
+  lang?: SkfHeader["lang"];
   /** If defined, sets the app or site's name */
   "site-name"?: SkfHeader["siteName"];
   /** If defined, sets the site's base-url for the "logo-link" */
@@ -311,12 +392,6 @@ type SkfInputProps = {
   /** Indicates whether the value of the control can be automatically completed by the browser. See
 [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. */
   autocomplete?: SkfInput["autocomplete"];
-  /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
-  "button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
-  /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
-  "button-aria-label-hide"?: SkfInput["buttonAriaLabelHide"];
-  /** Custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
-  "button-aria-label-show"?: SkfInput["buttonAriaLabelShow"];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
   "custom-invalid"?: SkfInput["customInvalid"];
   /** If true, outputs helping hints in console */
@@ -330,6 +405,8 @@ type SkfInputProps = {
   inputmode?: SkfInput["inputmode"];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
   label?: SkfInput["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfInput["lang"];
   /** If defined, displays a prefix/adornment before the input-element */
   leading?: SkfInput["leading"];
   /** If defined, sets the maximum value to accept for this input */
@@ -348,8 +425,6 @@ type SkfInputProps = {
   placeholder?: SkfInput["placeholder"];
   /** If true, makes the element not mutable, meaning the user can not edit the control */
   readonly?: SkfInput["readonly"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfInput["requiredLabel"];
   /** If defined, displays provided severity state */
   severity?: SkfInput["severity"];
   /** If true, displays valid state after interaction */
@@ -371,35 +446,6 @@ type SkfInputProps = {
   oninvalid?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SkfLinkProps = {
-  /** Defines the semantic element to render */
-  as?: SkfLink["as"];
-  /** Defines the text-color */
-  color?: SkfLink["color"];
-  /** If true, disables the link */
-  disabled?: SkfLink["disabled"];
-  /** If defined, downloads the url */
-  download?: SkfLink["download"];
-  /** If defined, loads url on click */
-  href?: SkfLink["href"];
-  /** If defined, renders an icon before or after the text */
-  icon?: SkfLink["icon"];
-  /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: SkfLink["iconPlacement"];
-  /** If defined, describes the relationship between a linked resource and the current document */
-  rel?: SkfLink["rel"];
-  /** If defined, used on conjunction with onClick property, second argument */
-  route?: SkfLink["route"];
-  /** If true, fills the parents horizontal axis */
-  stretch?: SkfLink["stretch"];
-  /** If defined, specifies where to open the linked document */
-  target?: SkfLink["target"];
-  /** Defines the type of button */
-  type?: SkfLink["type"];
-  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-  onClick?: SkfLink["onClick"];
-};
-
 type SkfMenuItemProps = {
   /** Defines the semantic element to render */
   as?: SkfMenuItem["as"];
@@ -413,22 +459,19 @@ type SkfMenuItemProps = {
   href?: SkfMenuItem["href"];
   /** If defined, renders an icon before or after the text */
   icon?: SkfMenuItem["icon"];
-  /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: SkfMenuItem["iconPlacement"];
+  /** If true, the icon is placed to the right in relation to the text */
+  "icon-right"?: SkfMenuItem["iconRight"];
   /** If defined, describes the relationship between a linked resource and the current document */
   rel?: SkfMenuItem["rel"];
-  /** If defined, used on conjunction with onClick property, second argument */
+  /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
   route?: SkfMenuItem["route"];
   /** If true, fills the parents horizontal axis */
   stretch?: SkfMenuItem["stretch"];
   /** If defined, specifies where to open the linked document */
   target?: SkfMenuItem["target"];
-  /** Defines the type of button */
-  type?: SkfMenuItem["type"];
-  /**  */
-  role?: SkfMenuItem["role"];
-  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-  onClick?: SkfMenuItem["onClick"];
+
+  /** Fired when the link is clicked */
+  "onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfMenuProps = {
@@ -436,33 +479,32 @@ type SkfMenuProps = {
   placement?: SkfMenu["undefined"];
   /** The id of the element the menu will be anchored to */
   anchor?: SkfMenu["undefined"];
-
+  /** Method that opens the menu */
+  "open()"?: SkfMenu["open()"];
+  /** Method that closes the menu */
+  "close()"?: SkfMenu["close()"];
   /** Fired when the menu is opened */
   "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fired when the menu is closed */
   "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SkfNavItemProps = {
-  /**  */
-  href?: SkfNavItem["href"];
-  /**  */
-  icon?: SkfNavItem["icon"];
-};
-
 type SkfPopoverProps = {
   /** The placement of the popover */
   placement?: SkfPopover["undefined"];
-  /** The id of the element the menu will be anchored to */
+  /** The id of the element the popover will be anchored to */
   anchor?: SkfPopover["undefined"];
   /** If defined, sets a custom offset for the popover */
   offset?: SkfPopover["offset"];
   /** If true, hides the arrow */
   hideArrow?: SkfPopover["hideArrow"];
-
-  /** Fired when the menu is opened */
+  /** Method that opens the popover */
+  "open()"?: SkfPopover["open()"];
+  /** Method that closes the popover */
+  "close()"?: SkfPopover["close()"];
+  /** Fired when the popover is opened */
   "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
-  /** Fired when the menu is closed */
+  /** Fired when the popover is closed */
   "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
@@ -488,10 +530,10 @@ type SkfRadioProps = {
   "custom-invalid"?: SkfRadio["customInvalid"];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: SkfRadio["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfRadio["lang"];
   /** If defined, adds name to the input-element */
   name?: SkfRadio["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfRadio["requiredLabel"];
   /** Size of the Radio */
   size?: SkfRadio["size"];
   /** If defined, displays provided severity state */
@@ -525,6 +567,8 @@ type SkfSegmentedButtonProps = {
 type SkfSelectOptionGroupProps = {
   /**  */
   label?: SkfSelectOptionGroup["label"];
+  /**  */
+  small?: SkfSelectOptionGroup["small"];
 };
 
 type SkfTagProps = {
@@ -534,6 +578,8 @@ type SkfTagProps = {
   icon?: SkfTag["icon"];
   /** If defined, gives the supplied appearance */
   color?: SkfTag["color"];
+  /** Sets the internal language of the component */
+  lang?: SkfTag["lang"];
   /** If true, adds trailing button to remove tag */
   removable?: SkfTag["removable"];
   /** If defined, accepts a function that runs on click */
@@ -559,6 +605,8 @@ type SkfSelectProps = {
   hint?: SkfSelect["hint"];
   /** If defined, displays provided label */
   label?: SkfSelect["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfSelect["lang"];
   /** If defined, limits the number of selectable options */
   max?: SkfSelect["max"];
   /** If defined, sets the minimum number of required options */
@@ -567,8 +615,6 @@ type SkfSelectProps = {
   multiple?: SkfSelect["multiple"];
   /** If defined, set name of the component */
   name?: SkfSelect["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfSelect["requiredLabel"];
   /** If defined, displays provided severity state */
   severity?: SkfSelect["severity"];
   /** If true, displays valid state after interaction */
@@ -579,7 +625,7 @@ type SkfSelectProps = {
   selectedValues?: SkfSelect["selectedValues"];
   /** A readonly property that returns the selected slot(s) text content in a array */
   selectedOptionsText?: SkfSelect["selectedOptionsText"];
-  /** Read only, returns the selected value. (if multiple: in a comma separated string) */
+  /** Returns the selected value. (if multiple: in a comma separated string). If set will default set corresponding option. */
   value?: SkfSelect["value"];
   /**  */
   _selectedOptions?: SkfSelect["_selectedOptions"];
@@ -593,6 +639,8 @@ type SkfSelectProps = {
   "onskf-select-dropdown"?: (e: CustomEvent<CustomEvent>) => void;
   /** {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled */
   "onskf-select-option-select"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the select options are connected, useful for setting selected option(s) via value property. E.g mySkfSelect.value = 'option1,option2'; */
+  "onskf-select-connected"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfSelectOptionProps = {
@@ -606,14 +654,12 @@ type SkfSelectOptionProps = {
   selected?: SkfSelectOption["selected"];
   /** If defined, sets a short label */
   "short-label"?: SkfSelectOption["shortLabel"];
-  /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
+  /** Returns or sets the option value. If value is omitted, defaults to the tags slotted text. */
   value?: SkfSelectOption["value"];
   /** The option's label text (equivalent to the tags textContent) */
   text?: SkfSelectOption["text"];
   /**  */
-  role?: SkfSelectOption["role"];
-  /**  */
-  _parent?: SkfSelectOption["_parent"];
+  small?: SkfSelectOption["small"];
   /**  */
   _shortcutUpdate?: SkfSelectOption["_shortcutUpdate"];
   /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
@@ -627,8 +673,6 @@ type SkfStepperItemProps = {
   completed?: SkfStepperItem["completed"];
   /**  */
   _setInternalState?: SkfStepperItem["_setInternalState"];
-  /**  */
-  role?: SkfStepperItem["role"];
   /** Dispatched when the stepper item is selected */
   "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
 };
@@ -656,10 +700,10 @@ type SkfSwitchProps = {
   "hide-label"?: SkfSwitch["hideLabel"];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: SkfSwitch["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfSwitch["lang"];
   /** If defined, adds name to the input-element */
   name?: SkfSwitch["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfSwitch["requiredLabel"];
   /** Size of the Switch */
   size?: SkfSwitch["size"];
   /** The current value of the input field */
@@ -671,21 +715,19 @@ type SkfTabPanelProps = {
   name?: SkfTabPanel["name"];
   /**  */
   active?: SkfTabPanel["active"];
-  /**  */
-  role?: SkfTabPanel["role"];
 };
 
-type SkfTabGroupProps = {
+type SkfTabsProps = {
   /** Sets the default selected tab */
-  "default-selected"?: SkfTabGroup["defaultSelected"];
+  "default-selected"?: SkfTabs["defaultSelected"];
   /** If true, removes border */
-  "no-border"?: SkfTabGroup["noBorder"];
+  "no-border"?: SkfTabs["noBorder"];
   /** If true, removes padding */
-  "no-padding"?: SkfTabGroup["noPadding"];
+  "no-padding"?: SkfTabs["noPadding"];
   /** If true, component fills the parent element height */
-  stretch?: SkfTabGroup["stretch"];
+  stretch?: SkfTabs["stretch"];
   /** Sets the appearance of the tabs */
-  variant?: SkfTabGroup["variant"];
+  variant?: SkfTabs["variant"];
 };
 
 type SkfTabProps = {
@@ -695,8 +737,6 @@ type SkfTabProps = {
   selected?: SkfTab["selected"];
   /**  */
   variant?: SkfTab["variant"];
-  /**  */
-  role?: SkfTab["role"];
   /** {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected */
   "onskf-tab-select"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fired when the component is clicked */
@@ -720,6 +760,8 @@ type SkfTextAreaProps = {
   hint?: SkfTextArea["hint"];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: SkfTextArea["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfTextArea["lang"];
   /** If defined, adds name to the input-element */
   name?: SkfTextArea["name"];
   /** If defined, sets the maximum character length to accept for this input */
@@ -730,8 +772,6 @@ type SkfTextAreaProps = {
   placeholder?: SkfTextArea["placeholder"];
   /** If true, makes the element not mutable, meaning the user can not edit the control */
   readonly?: SkfTextArea["readonly"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfTextArea["requiredLabel"];
   /** If defined, sets the rows of the textarea */
   rows?: SkfTextArea["rows"];
   /** If defined, displays provided severity state */
@@ -777,17 +817,19 @@ type SkfTooltipProps = {
   /** The id of the element the dropdown will be anchored to */
   anchor?: SkfTooltip["undefined"];
   /**  */
-  role?: SkfTooltip["role"];
-  /**  */
   offset?: SkfTooltip["offset"];
   /**  */
   placement?: SkfTooltip["placement"];
   /**  */
   variant?: SkfTooltip["variant"];
-  /** Fired when the dropdown is opened */
-  "onskf-opened"?: (e: CustomEvent<never>) => void;
-  /** Fired when the dropdown is closed */
-  "onskf-closed"?: (e: CustomEvent<never>) => void;
+  /** Method that opens the tooltip */
+  "open()"?: SkfTooltip["open()"];
+  /** Method that closes the tooltip */
+  "close()"?: SkfTooltip["close()"];
+  /** Fired when the tooltip is opened */
+  "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when the tooltip is closed */
+  "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type CustomElements = {
@@ -902,6 +944,9 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - _default_ - The card's main content
+   *
+   * ### **CSS Properties:**
+   *  - **--mod-card-bg-color** - Ability to set a custom background color _(default: undefined)_
    */
   "skf-card": DefineComponent<SkfCardProps>;
 
@@ -919,24 +964,21 @@ export type CustomElements = {
   "skf-checkbox": DefineComponent<SkfCheckboxProps>;
 
   /**
-   * A date picker component that allows users to select a date or a range of dates.
-   * ---
    *
+   * ---
    *
-   * ### **Events:**
-   *  - **selected-date-changed** - When a date is selected
-   * - **selected-date-range-changed** - When a range of dates is selected
+   */
+  "skf-datepicker-calendar": DefineComponent<SkfDatepickerCalendarProps>;
+
+  /**
    *
-   * ### **Methods:**
-   *  - **gotoDate(date: _Date | string_)** - Navigates to the given date.
+   * ---
    *
-   * ### **Slots:**
-   *  - _default_ - Default hint content placed inside the date picker
    *
-   * ### **CSS Properties:**
-   *  - **--max-width** - The maximum width of the date picker _(default: undefined)_
+   * ### **Methods:**
+   *  - **clear()** - Clears the input field
    */
-  "skf-datepicker": DefineComponent<SkfDatePickerProps>;
+  "skf-datepicker": DefineComponent<SkfDatepickerProps>;
 
   /**
    * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
@@ -1005,10 +1047,34 @@ export type CustomElements = {
    *
    *
    * ### **CSS Properties:**
-   *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
+   *  - **--mod-logo-height** - The height of the logo _(default: undefined)_
    */
   "skf-logo": DefineComponent<SkfLogoProps>;
 
+  /**
+   * The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is
+   * intended to be used for triggering javascript functions, not handling forms.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-link-click** - Fired when the link is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - The links' main content
+   */
+  "skf-link": DefineComponent<SkfLinkProps>;
+
+  /**
+   * The `<skf-nav>` is a component that displays a list of <nav-items>.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's main content
+   */
+  "skf-nav-item": DefineComponent<SkfNavItemProps>;
+
   /**
    * The `<skf-nav>` is a component that displays a list of <nav-items>.
    * ---
@@ -1045,21 +1111,14 @@ export type CustomElements = {
    */
   "skf-input": DefineComponent<SkfInputProps>;
 
-  /**
-   * The `<skf-link>` can be used as either a regular link or a link styled semantic button
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The links' main content
-   */
-  "skf-link": DefineComponent<SkfLinkProps>;
-
   /**
    * The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component
    * ---
    *
    *
+   * ### **Events:**
+   *  - **skf-link-click** - Fired when the link is clicked
+   *
    * ### **Slots:**
    *  - _default_ - The component's main content
    */
@@ -1077,20 +1136,10 @@ export type CustomElements = {
    * - **skf-closed** - Fired when the menu is closed
    *
    * ### **Slots:**
-   *  - _default_ - The menu popover content
+   *  - _default_ - The menu content
    */
   "skf-menu": DefineComponent<SkfMenuProps>;
 
-  /**
-   * The `<skf-nav>` is a component that displays a list of <nav-items>.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The component's main content
-   */
-  "skf-nav-item": DefineComponent<SkfNavItemProps>;
-
   /**
    * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
    *
@@ -1099,8 +1148,8 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **skf-opened** - Fired when the menu is opened
-   * - **skf-closed** - Fired when the menu is closed
+   *  - **skf-opened** - Fired when the popover is opened
+   * - **skf-closed** - Fired when the popover is closed
    *
    * ### **Slots:**
    *  - _default_ - The popover content
@@ -1187,6 +1236,7 @@ export type CustomElements = {
    * - **reset** - Fired when the form is reset
    * - **skf-select-dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled
    * - **skf-select-option-select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
+   * - **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';
    *
    * ### **Slots:**
    *  - _default_ - The select's placeholder content
@@ -1195,6 +1245,7 @@ export type CustomElements = {
 
   /**
    * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
+   * It represents an individual option in a select dropdown.
    * ---
    *
    *
@@ -1256,7 +1307,7 @@ export type CustomElements = {
   "skf-tab-panel": DefineComponent<SkfTabPanelProps>;
 
   /**
-   * The `<skf-tab-group>` is a component that displays a list of actions or options.
+   * The `<skf-tabs>` is a component that displays a list of actions or options
    * ---
    *
    *
@@ -1264,7 +1315,7 @@ export type CustomElements = {
    *  - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements
    * - **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements
    */
-  "skf-tab-group": DefineComponent<SkfTabGroupProps>;
+  "skf-tabs": DefineComponent<SkfTabsProps>;
 
   /**
    * The `<skf-tab>` is a component that displays a list of actions or options
@@ -1320,8 +1371,8 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **skf-opened** - Fired when the dropdown is opened
-   * - **skf-closed** - Fired when the dropdown is closed
+   *  - **skf-opened** - Fired when the tooltip is opened
+   * - **skf-closed** - Fired when the tooltip is closed
    *
    * ### **Slots:**
    *  - _default_ - The tooltip popover content