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

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

@@ -1,42 +1,80 @@
 import type { DefineComponent } from "vue";
 
+import type { SkfIcon } from "../../components/icon/icon.component.js";
+import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js";
 import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
 import type { SkfAlert } from "../../components/alert/alert.component.js";
-import type { SkfBreadcrumb } from "../../components/breadcrumb/breadcrumb.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 } from "../../components/button/button.component.js";
 import type { SkfCard } from "../../components/card/card.component.js";
 import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
-import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js";
 import type { SkfDatePicker } from "../../components/datepicker/datepicker.component.js";
+import type { SkfHeading } from "../../components/heading/heading.component.js";
 import type { SkfDialog } from "../../components/dialog/dialog.component.js";
 import type { SkfDivider } from "../../components/divider/divider.component.js";
-import type { SkfHeading } from "../../components/heading/heading.component.js";
-import type { SkfIcon } from "../../components/icon/icon.component.js";
+import type { SkfDrawer } from "../../components/drawer/drawer.component.js";
+import type { SkfLogo } from "../../components/logo/logo.component.js";
+import type { SkfNav } from "../../components/nav/nav.component.js";
+import type { SkfHeader } from "../../components/header/header.component.js";
 import type { SkfInput } from "../../components/input/input.component.js";
 import type { SkfLink } from "../../components/link/link.component.js";
-import type { SkfLoader } from "../../components/loader/loader.component.js";
-import type { SkfLogo } from "../../components/logo/logo.component.js";
 import type { SkfMenu } from "../../components/menu/menu.component.js";
 import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
+import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SkfPopover } from "../../components/popover/popover.component.js";
 import type { SkfProgress } from "../../components/progress/progress.component.js";
 import type { SkfRadio } from "../../components/radio/radio.component.js";
-import type { SkfSelect } from "../../components/select/select.component.js";
+import type {
+  SkfSegmentedButtonItem,
+  CustomEvent,
+} from "../../components/segmented-button-item/segmented-button-item.component.js";
+import type { SkfSegmentedButton } from "../../components/segmented-button/segmented-button.component.js";
 import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
+import type { SkfTag } from "../../components/tag/tag.component.js";
+import type { SkfSelect } from "../../components/select/select.component.js";
 import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js";
-import type { SkfStepper } from "../../components/stepper/stepper.component.js";
 import type { SkfStepperItem } from "../../components/stepper-item/stepper-item.component.js";
+import type { SkfStepper } from "../../components/stepper/stepper.component.js";
 import type { SkfSwitch } from "../../components/switch/switch.component.js";
-import type { SkfTab, CustomEvent } from "../../components/tab/tab.component.js";
-import type { SkfTabGroup } from "../../components/tab-group/tab-group.component.js";
 import type { SkfTabPanel } from "../../components/tab-panel/tab-panel.component.js";
-import type { SkfTag } from "../../components/tag/tag.component.js";
+import type { SkfTabGroup } from "../../components/tab-group/tab-group.component.js";
+import type { SkfTab, CustomEvent } from "../../components/tab/tab.component.js";
 import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
-import type { SkfToast } from "../../components/toast/toast.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";
 
+type SkfIconProps = {
+  /** Sets the color of the icon */
+  color?: SkfIcon["color"];
+  /** If defined, adds an alternate description to use for assistive devices */
+  label?: SkfIcon["label"];
+  /** Name of the icon to display */
+  name?: SkfIcon["name"];
+  /** Size of the icon */
+  size?: SkfIcon["size"];
+};
+
+type SkfCollapseProps = {
+  /** If true, will animate the expand/collapse state */
+  animated?: SkfCollapse["animated"];
+  /** If true, will set the collapse to be expanded by default */
+  expanded?: SkfCollapse["expanded"];
+  /** Heading for the collapse */
+  heading?: SkfCollapse["heading"];
+  /** Defines which heading element will be rendered */
+  "heading-as"?: SkfCollapse["headingAs"];
+  /** If true, renders the small version */
+  small?: SkfCollapse["small"];
+  /** If true, will truncate the heading in collapsed state */
+  truncate?: SkfCollapse["truncate"];
+
+  /** Event emitted when toggled */
+  "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 type SkfAccordionProps = {
   /** If true, will animate the expand/collapse state */
   animated?: SkfAccordion["animated"];
@@ -66,6 +104,13 @@ type SkfAlertProps = {
   "onskf-alert-close"?: (e: CustomEvent<never>) => void;
 };
 
+type SkfBreadcrumbItemProps = {
+  /** If defined, loads url on click */
+  href?: SkfBreadcrumbItem["href"];
+  /** If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. */
+  onClick?: SkfBreadcrumbItem["onClick"];
+};
+
 type SkfBreadcrumbProps = {
   /** aria-label for the breadcrumb control */
   label?: SkfBreadcrumb["label"];
@@ -76,11 +121,17 @@ type SkfBreadcrumbProps = {
   onclick?: (e: CustomEvent<never>) => void;
 };
 
-type SkfBreadcrumbItemProps = {
-  /** If defined, loads url on click */
-  href?: SkfBreadcrumbItem["href"];
-  /** If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. */
-  onClick?: SkfBreadcrumbItem["onClick"];
+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 */
+  size?: SkfLoader["size"];
+  /**  */
+  role?: SkfLoader["role"];
+  /**  */
+  ariaLive?: SkfLoader["ariaLive"];
 };
 
 type SkfButtonProps = {
@@ -150,24 +201,6 @@ type SkfCheckboxProps = {
   onchange?: (e: CustomEvent<never>) => void;
 };
 
-type SkfCollapseProps = {
-  /** If true, will animate the expand/collapse state */
-  animated?: SkfCollapse["animated"];
-  /** If true, will set the collapse to be expanded by default */
-  expanded?: SkfCollapse["expanded"];
-  /** Heading for the collapse */
-  heading?: SkfCollapse["heading"];
-  /** Defines which heading element will be rendered */
-  "heading-as"?: SkfCollapse["headingAs"];
-  /** If true, renders the small version */
-  small?: SkfCollapse["small"];
-  /** If true, will truncate the heading in collapsed state */
-  truncate?: SkfCollapse["truncate"];
-
-  /** Event emitted when toggled */
-  "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
-};
-
 type SkfDatePickerProps = {
   /** The locale to use for formatting the date */
   locale?: SkfDatePicker["locale"];
@@ -193,6 +226,13 @@ type SkfDatePickerProps = {
   "onselected-date-range-changed"?: (e: CustomEvent<never>) => void;
 };
 
+type SkfHeadingProps = {
+  /** Controls which heading element will be rendered. Should not be used to affect appearance */
+  as?: SkfHeading["as"];
+  /** If defined, changes the appearance of the heading */
+  "styled-as"?: SkfHeading["styledAs"];
+};
+
 type SkfDialogProps = {
   /** If defined, sets the aria-label for the close button */
   "close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
@@ -204,20 +244,15 @@ type SkfDialogProps = {
   "no-close-button"?: SkfDialog["noCloseButton"];
   /** If defined, removes the inner padding */
   "no-padding"?: SkfDialog["noPadding"];
-  /**  */
+  /** If true, indicates that the dialog is active and is available for interaction */
   open?: SkfDialog["open"];
-  /** If provided, will run function on dialog close */
-  onClose?: SkfDialog["onClose"];
-  /** Method that opens the dialog in modal state */
-  showModal?: SkfDialog["showModal"];
-  /** Method that closes the dialog */
-  close?: SkfDialog["close"];
+
   /** Fires when the dialog is opened (after transitioned in) */
-  "onskf-dialog-open"?: (e: CustomEvent<never>) => void;
+  "onskf-dialog-opened"?: (e: CustomEvent<never>) => void;
   /** Fires when the dialog is closed (before transitioned out) */
-  "onskf-dialog-close"?: (e: CustomEvent<never>) => void;
+  "onskf-dialog-closing"?: (e: CustomEvent<never>) => void;
   /** Fires when the dialog is closed (after transitioned out) */
-  onclose?: (e: CustomEvent<never>) => void;
+  "onskf-dialog-closed"?: (e: CustomEvent<never>) => void;
 };
 
 type SkfDividerProps = {
@@ -229,22 +264,52 @@ type SkfDividerProps = {
   vertical?: SkfDivider["vertical"];
 };
 
-type SkfHeadingProps = {
-  /** Controls which heading element will be rendered. Should not be used to affect appearance */
-  as?: SkfHeading["as"];
-  /** If provided, changes the appearance of the heading */
-  "styled-as"?: SkfHeading["styledAs"];
+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 max-width */
+  size?: SkfDrawer["size"];
+  /** If true, Drawer is open */
+  open?: SkfDrawer["open"];
+  /** Placement of the Drawer */
+  placement?: SkfDrawer["placement"];
+  /**  */
+  _clickstartInDialog?: SkfDrawer["_clickstartInDialog"];
+  /**  */
+  _handleMouseDown?: SkfDrawer["_handleMouseDown"];
+  /**  */
+  _handleMouseUp?: SkfDrawer["_handleMouseUp"];
+  /** Fires when the drawer is opened (after transitioned in) */
+  "onskf-drawer-opened"?: (e: CustomEvent<never>) => void;
+  /** Fires when the drawer is closed (before transitioned out) */
+  "onskf-drawer-closing"?: (e: CustomEvent<never>) => void;
+  /** Fires when the drawer is closed (after transitioned out) */
+  "onskf-drawer-closed"?: (e: CustomEvent<never>) => void;
 };
 
-type SkfIconProps = {
-  /** Sets the color of the icon */
-  color?: SkfIcon["color"];
-  /** If defined, adds an alternate description to use for assistive devices */
-  label?: SkfIcon["label"];
-  /** Name of the icon to display */
-  name?: SkfIcon["name"];
-  /** Size of the icon */
-  size?: SkfIcon["size"];
+type SkfLogoProps = {
+  /** Defines the title of the logo */
+  title?: SkfLogo["title"];
+  /** Defines the color of the logo */
+  color?: SkfLogo["color"];
+};
+
+type SkfNavProps = {
+  /**  */
+  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"];
+  /** 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" */
+  "site-url"?: SkfHeader["siteUrl"];
 };
 
 type SkfInputProps = {
@@ -252,7 +317,8 @@ type SkfInputProps = {
   disabled?: SkfInput["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
   required?: SkfInput["undefined"];
-  /** -m  } */
+  /** Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. */
   autocomplete?: SkfInput["autocomplete"];
   /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
   "button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
@@ -342,37 +408,19 @@ type SkfLinkProps = {
   onClick?: SkfLink["onClick"];
 };
 
-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 */
-  size?: SkfLoader["size"];
-  /**  */
-  role?: SkfLoader["role"];
-  /**  */
-  ariaLive?: SkfLoader["ariaLive"];
-};
-
-type SkfLogoProps = {
-  /** Defines the title of the logo */
-  title?: SkfLogo["title"];
-  /** Defines the color of the logo */
-  color?: SkfLogo["color"];
-};
-
 type SkfMenuProps = {
   /** The placement of the menu */
-  placement?: SkfMenu["placement"];
-  /** Whether the menu is open */
-  isOpen?: SkfMenu["isOpen"];
+  placement?: SkfMenu["undefined"];
   /** The id of the element the menu will be anchored to */
-  anchor?: SkfMenu["anchor"];
+  anchor?: SkfMenu["undefined"];
+  /**  */
+  placement?: SkfMenu["placement"];
+  /**  */
+  triggerEvent?: SkfMenu["triggerEvent"];
   /** Fired when the menu is opened */
-  onopen?: (e: CustomEvent<never>) => void;
+  "onskf-opened"?: (e: CustomEvent<never>) => void;
   /** Fired when the menu is closed */
-  onclose?: (e: CustomEvent<never>) => void;
+  "onskf-closed"?: (e: CustomEvent<never>) => void;
 };
 
 type SkfMenuItemProps = {
@@ -418,23 +466,32 @@ type SkfMenuItemProps = {
   onchange?: (e: CustomEvent<never>) => void;
 };
 
+type SkfNavItemProps = {
+  /**  */
+  href?: SkfNavItem["href"];
+  /**  */
+  icon?: SkfNavItem["icon"];
+};
+
 type SkfPopoverProps = {
+  /** The placement of the menu */
+  placement?: SkfPopover["undefined"];
+  /** The id of the element the menu 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"];
   /**  */
   arrow?: SkfPopover["arrow"];
-  /** The placement of the menu */
+  /**  */
   placement?: SkfPopover["placement"];
-  /** Whether the menu is open */
-  isOpen?: SkfPopover["isOpen"];
-  /** The id of the element the menu will be anchored to */
-  anchor?: SkfPopover["anchor"];
+  /**  */
+  triggerEvent?: SkfPopover["triggerEvent"];
   /** Fired when the menu is opened */
-  onopen?: (e: CustomEvent<never>) => void;
+  "onskf-opened"?: (e: CustomEvent<never>) => void;
   /** Fired when the menu is closed */
-  onclose?: (e: CustomEvent<never>) => void;
+  "onskf-closed"?: (e: CustomEvent<never>) => void;
 };
 
 type SkfProgressProps = {
@@ -476,6 +533,63 @@ type SkfRadioProps = {
   onchange?: (e: CustomEvent<never>) => void;
 };
 
+type SkfSegmentedButtonItemProps = {
+  /** If true, items is marked as disabled */
+  disabled?: SkfSegmentedButtonItem["disabled"];
+  /** Sets the item value */
+  value?: SkfSegmentedButtonItem["value"];
+
+  /** Fired when something happens */
+  "onmy-tag-my-event"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+type SkfSegmentedButtonProps = {
+  /** Sets the default selected control */
+  "default-selected"?: SkfSegmentedButton["defaultSelected"];
+  /** If true, allowes multiple items to be selected */
+  multiple?: SkfSegmentedButton["multiple"];
+};
+
+type SkfSelectOptionProps = {
+  /** If true, prevents interaction with the option */
+  disabled?: SkfSelectOption["disabled"];
+  /** If defined, set an icon */
+  icon?: SkfSelectOption["icon"];
+  /** If defined, sets provided color on the icon */
+  "icon-color"?: SkfSelectOption["iconColor"];
+  /** If true, sets the option as selected */
+  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. */
+  value?: SkfSelectOption["value"];
+  /** The option's label text (equivalent to the tags textContent) */
+  text?: SkfSelectOption["text"];
+  /**  */
+  role?: SkfSelectOption["role"];
+  /**  */
+  _parent?: SkfSelectOption["_parent"];
+  /**  */
+  _shortcutUpdate?: SkfSelectOption["_shortcutUpdate"];
+  /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
+  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
+};
+
+type SkfTagProps = {
+  /** Specifies Tag size */
+  size?: SkfTag["size"];
+  /** If defined, displays leading/provided icon */
+  icon?: SkfTag["icon"];
+  /** If defined, gives the supplied appearance */
+  color?: SkfTag["color"];
+  /** If true, adds trailing button to remove tag */
+  removable?: SkfTag["removable"];
+  /** If defined, accepts a function that runs on click */
+  onClick?: SkfTag["onClick"];
+  /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
+  onRemove?: SkfTag["onRemove"];
+};
+
 type SkfSelectProps = {
   /** If true, the select is disabled	`default: false` */
   disabled?: SkfSelect["undefined"];
@@ -527,46 +641,11 @@ type SkfSelectProps = {
   "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
 };
 
-type SkfSelectOptionProps = {
-  /** If true, prevents interaction with the option */
-  disabled?: SkfSelectOption["disabled"];
-  /** If defined, set an icon */
-  icon?: SkfSelectOption["icon"];
-  /** If defined, sets provided color on the icon */
-  "icon-color"?: SkfSelectOption["iconColor"];
-  /** If true, sets the option as selected */
-  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. */
-  value?: SkfSelectOption["value"];
-  /** The option's label text (equivalent to the tags textContent) */
-  text?: SkfSelectOption["text"];
-  /**  */
-  role?: SkfSelectOption["role"];
-  /**  */
-  _parent?: SkfSelectOption["_parent"];
-  /**  */
-  _shortcutUpdate?: SkfSelectOption["_shortcutUpdate"];
-  /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
-  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
-};
-
 type SkfSelectOptionGroupProps = {
   /**  */
   label?: SkfSelectOptionGroup["label"];
 };
 
-type SkfStepperProps = {
-  /** Sets the active item */
-  activeIndex?: SkfStepper["activeIndex"];
-  /** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
-  linear?: SkfStepper["linear"];
-
-  /** Dispatched when the stepper item is selected */
-  "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
-};
-
 type SkfStepperItemProps = {
   /** If defined, gives the supplied appearance */
   state?: SkfStepperItem["state"];
@@ -580,6 +659,16 @@ type SkfStepperItemProps = {
   "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
 };
 
+type SkfStepperProps = {
+  /** Sets the active item */
+  activeIndex?: SkfStepper["activeIndex"];
+  /** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
+  linear?: SkfStepper["linear"];
+
+  /** Dispatched when the stepper item is selected */
+  "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
+};
+
 type SkfSwitchProps = {
   /** If true, sets disabled state */
   disabled?: SkfSwitch["undefined"];
@@ -603,19 +692,13 @@ type SkfSwitchProps = {
   value?: SkfSwitch["value"];
 };
 
-type SkfTabProps = {
-  /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
-  panel?: SkfTab["panel"];
-  /**  */
-  selected?: SkfTab["selected"];
+type SkfTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SkfTabPanel["name"];
   /**  */
-  variant?: SkfTab["variant"];
+  active?: SkfTabPanel["active"];
   /**  */
-  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 */
-  onclick?: (e: CustomEvent<never>) => void;
+  role?: SkfTabPanel["role"];
 };
 
 type SkfTabGroupProps = {
@@ -631,28 +714,19 @@ type SkfTabGroupProps = {
   variant?: SkfTabGroup["variant"];
 };
 
-type SkfTabPanelProps = {
-  /** The tab panel's name. */
-  name?: SkfTabPanel["name"];
+type SkfTabProps = {
+  /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: SkfTab["panel"];
   /**  */
-  active?: SkfTabPanel["active"];
+  selected?: SkfTab["selected"];
   /**  */
-  role?: SkfTabPanel["role"];
-};
-
-type SkfTagProps = {
-  /** Specifies Tag size */
-  size?: SkfTag["size"];
-  /** If defined, displays leading/provided icon */
-  icon?: SkfTag["icon"];
-  /** If defined, gives the supplied appearance */
-  color?: SkfTag["color"];
-  /** If true, adds trailing button to remove tag */
-  removable?: SkfTag["removable"];
-  /** If defined, accepts a function that runs on click */
-  onClick?: SkfTag["onClick"];
-  /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
-  onRemove?: SkfTag["onRemove"];
+  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 */
+  onclick?: (e: CustomEvent<never>) => void;
 };
 
 type SkfTextAreaProps = {
@@ -703,6 +777,11 @@ type SkfTextAreaProps = {
   oninvalid?: (e: CustomEvent<never>) => void;
 };
 
+type SkfToastWrapperProps = {
+  /**  */
+  debug?: SkfToastWrapper["debug"];
+};
+
 type SkfToastProps = {
   /**  */
   debug?: SkfToast["debug"];
@@ -718,27 +797,48 @@ type SkfToastProps = {
   topOffset?: SkfToast["topOffset"];
 };
 
-type SkfToastWrapperProps = {
-  /**  */
-  debug?: SkfToastWrapper["debug"];
-};
-
 type SkfTooltipProps = {
+  /** The placement of the dropdown */
+  placement?: SkfTooltip["undefined"];
+  /** The id of the element the dropdown will be anchored to */
+  anchor?: SkfTooltip["undefined"];
   /**  */
   offset?: SkfTooltip["offset"];
-  /** The placement of the dropdown */
+  /**  */
   placement?: SkfTooltip["placement"];
-  /** Whether the dropdown is open */
-  isOpen?: SkfTooltip["isOpen"];
-  /** The id of the element the dropdown will be anchored to */
-  anchor?: SkfTooltip["anchor"];
   /** Fired when the dropdown is opened */
-  onopen?: (e: CustomEvent<never>) => void;
+  "onskf-opened"?: (e: CustomEvent<never>) => void;
   /** Fired when the dropdown is closed */
-  onclose?: (e: CustomEvent<never>) => void;
+  "onskf-closed"?: (e: CustomEvent<never>) => void;
 };
 
 export type CustomElements = {
+  /**
+   * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
+   * ---
+   *
+   */
+  "skf-icon": DefineComponent<SkfIconProps>;
+
+  /**
+   * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-collapse-toggle** - Event emitted when toggled
+   *
+   * ### **Methods:**
+   *  - **setClose()** - Class method as alternative to manipulate attribute
+   * - **setOpen()** - Class method as alternative to manipulate attribute
+   *
+   * ### **Slots:**
+   *  - _default_ - Main content
+   */
+  "skf-collapse": DefineComponent<SkfCollapseProps>;
+
   /**
    * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
    *
@@ -765,8 +865,20 @@ export type CustomElements = {
    */
   "skf-alert": DefineComponent<SkfAlertProps>;
 
+  /**
+   * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Label of the breadcrumb item
+   */
+  "skf-breadcrumb-item": DefineComponent<SkfBreadcrumbItemProps>;
+
   /**
    * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/3338ef-breadcrumbs) for design principles.
    * ---
    *
    *
@@ -779,14 +891,11 @@ export type CustomElements = {
   "skf-breadcrumb": DefineComponent<SkfBreadcrumbProps>;
 
   /**
-   * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
+   * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
    * ---
    *
-   *
-   * ### **Slots:**
-   *  - _default_ - Label of the breadcrumb item
    */
-  "skf-breadcrumb-item": DefineComponent<SkfBreadcrumbItemProps>;
+  "skf-loader": DefineComponent<SkfLoaderProps>;
 
   /**
    * Component to be used in forms or for interactivity
@@ -828,50 +937,49 @@ export type CustomElements = {
   "skf-checkbox": DefineComponent<SkfCheckboxProps>;
 
   /**
-   * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
-   *
-   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
+   * A date picker component that allows users to select a date or a range of dates.
    * ---
    *
    *
    * ### **Events:**
-   *  - **skf-collapse-toggle** - Event emitted when toggled
+   *  - **selected-date-changed** - When a date is selected
+   * - **selected-date-range-changed** - When a range of dates is selected
    *
    * ### **Methods:**
-   *  - **setClose()** - Class method as alternative to manipulate attribute
-   * - **setOpen()** - Class method as alternative to manipulate attribute
+   *  - **gotoDate(date: _Date | string_)** - Navigates to the given date.
    *
    * ### **Slots:**
-   *  - _default_ - Main content
+   *  - _default_ - Default hint content placed inside the date picker
+   *
+   * ### **CSS Properties:**
+   *  - **--max-width** - The maximum width of the date picker _(default: undefined)_
    */
-  "skf-collapse": DefineComponent<SkfCollapseProps>;
+  "skf-datepicker": DefineComponent<SkfDatePickerProps>;
 
   /**
-   * A date picker component that allows users to select a date or a range of dates.
+   * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
+   * It extends the interface of native html `<h1>` to `<h4>` elements.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **selected-date-changed** - When a date is selected
-   * - **selected-date-range-changed** - When a range of dates is selected
-   *
    * ### **Slots:**
-   *  - _default_ - Default hint content placed inside the date picker
-   *
-   * ### **CSS Properties:**
-   *  - **--max-width** - The maximum width of the date picker _(default: undefined)_
+   *  - _default_ - The headings content
    */
-  "skf-datepicker": DefineComponent<SkfDatePickerProps>;
+  "skf-heading": DefineComponent<SkfHeadingProps>;
 
   /**
-   * The `<skf-dialog>` is a component that open up a dialog with the content provided
+   * 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)
    * ---
    *
    *
    * ### **Events:**
-   *  - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)
-   * - **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)
-   * - **close** - Fires when the dialog is closed (after transitioned out)
+   *  - **skf-dialog-opened** - Fires when the dialog is opened (after transitioned in)
+   * - **skf-dialog-closing** - Fires when the dialog is closed (before transitioned out)
+   * - **skf-dialog-closed** - Fires when the dialog is closed (after transitioned out)
+   *
+   * ### **Methods:**
+   *  - **showModal()** - Method that opens the dialog in modal state
+   * - **close()** - Method that closes the dialog
    *
    * ### **Slots:**
    *  - _default_ - The dialog component's content
@@ -895,63 +1003,73 @@ export type CustomElements = {
   "skf-divider": DefineComponent<SkfDividerProps>;
 
   /**
-   * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
-   * It extends the interface of native html `<h1>` to `<h4>` elements.
+   * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge.
    * ---
    *
    *
+   * ### **Events:**
+   *  - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)
+   * - **skf-drawer-closing** - Fires when the drawer is closed (before transitioned out)
+   * - **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)
+   *
    * ### **Slots:**
-   *  - _default_ - The headings content
+   *  - _default_ - The Drawer's main content
    */
-  "skf-heading": DefineComponent<SkfHeadingProps>;
+  "skf-drawer": DefineComponent<SkfDrawerProps>;
 
   /**
-   * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
+   * The `<skf-logo>` component is used to display the SKF logo.
    * ---
    *
+   *
+   * ### **CSS Properties:**
+   *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
    */
-  "skf-icon": DefineComponent<SkfIconProps>;
+  "skf-logo": DefineComponent<SkfLogoProps>;
 
   /**
-   * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
+   * The `<skf-nav>` is a component that displays a list of <nav-items>.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **change** - Fires when the value of the input changes
-   * - **invalid** - Fires when the input is invalid
-   *
    * ### **Slots:**
-   *  - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.
+   *  - _default_ - The component's main content
    */
-  "skf-input": DefineComponent<SkfInputProps>;
+  "skf-nav": DefineComponent<SkfNavProps>;
 
   /**
-   * The `<skf-link>` can be used as either a regular link or a link styled semantic button
+   * The `<skf-header>` component is to be used as the site-header in the app
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The links' main content
+   *  - _default_ - Navigation items
    */
-  "skf-link": DefineComponent<SkfLinkProps>;
+  "skf-header": DefineComponent<SkfHeaderProps>;
 
   /**
-   * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
+   * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
    * ---
    *
+   *
+   * ### **Events:**
+   *  - **change** - Fires when the value of the input changes
+   * - **invalid** - Fires when the input is invalid
+   *
+   * ### **Slots:**
+   *  - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.
    */
-  "skf-loader": DefineComponent<SkfLoaderProps>;
+  "skf-input": DefineComponent<SkfInputProps>;
 
   /**
-   * The `<skf-logo>` component is used to display the SKF logo.
+   * The `<skf-link>` can be used as either a regular link or a link styled semantic button
    * ---
    *
    *
-   * ### **CSS Properties:**
-   *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
+   * ### **Slots:**
+   *  - _default_ - The links' main content
    */
-  "skf-logo": DefineComponent<SkfLogoProps>;
+  "skf-link": DefineComponent<SkfLinkProps>;
 
   /**
    * The `<skf-menu>` is a component that displays a list of actions or options.
@@ -959,8 +1077,8 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **open** - Fired when the menu is opened
-   * - **close** - Fired when the menu is closed
+   *  - **skf-opened** - Fired when the menu is opened
+   * - **skf-closed** - Fired when the menu is closed
    *
    * ### **Slots:**
    *  - _default_ - The menu popover content
@@ -988,13 +1106,23 @@ export type CustomElements = {
   "skf-menu-item": DefineComponent<SkfMenuItemProps>;
 
   /**
-   * The `<skf-popover>` is a general purpose component that displays the slot content.
+   * 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.
    * ---
    *
    *
    * ### **Events:**
-   *  - **open** - Fired when the menu is opened
-   * - **close** - Fired when the menu is closed
+   *  - **skf-opened** - Fired when the menu is opened
+   * - **skf-closed** - Fired when the menu is closed
    *
    * ### **Slots:**
    *  - _default_ - The popover content
@@ -1022,21 +1150,29 @@ export type CustomElements = {
   "skf-radio": DefineComponent<SkfRadioProps>;
 
   /**
-   * 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.
+   * The `<skf-segmented-button-item>` is used in conjunction with the `<skf-segmented-button>` component
    * ---
    *
    *
    * ### **Events:**
-   *  - **change** - Fired when the selected option(s) changes
-   * - **invalid** - Fired when the select is invalid
-   * - **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
+   *  - **my-tag-my-event** - Fired when something happens
    *
    * ### **Slots:**
-   *  - _default_ - The select's placeholder content
+   *  - _default_ - The items label
    */
-  "skf-select": DefineComponent<SkfSelectProps>;
+  "skf-segmented-button-item": DefineComponent<SkfSegmentedButtonItemProps>;
+
+  /**
+   * The `<skf-segmented-button>` component consists of multiple `<skf-segmented-button-item>`, working together.
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/68ff54-segmented-buttons) for design principles
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<skf-segmented-button-item>`
+   */
+  "skf-segmented-button": DefineComponent<SkfSegmentedButtonProps>;
 
   /**
    * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
@@ -1053,27 +1189,41 @@ export type CustomElements = {
   "skf-select-option": DefineComponent<SkfSelectOptionProps>;
 
   /**
-   * The `<skf-select-option-group>` is a component that groups select-options
+   * The `<skf-tag>` is a component that displays a list of actions or options
    * ---
    *
    *
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-select-option-group": DefineComponent<SkfSelectOptionGroupProps>;
+  "skf-tag": DefineComponent<SkfTagProps>;
 
   /**
-   * The `<skf-stepper>` is a component that displays a list of actions or options.
+   * 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.
    * ---
    *
    *
    * ### **Events:**
-   *  - **skf-stepper-item-select** - Dispatched when the stepper item is selected
+   *  - **change** - Fired when the selected option(s) changes
+   * - **invalid** - Fired when the select is invalid
+   * - **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
    *
    * ### **Slots:**
-   *  - _default_ - One or more `<skf-stepper-item>`
+   *  - _default_ - The select's placeholder content
    */
-  "skf-stepper": DefineComponent<SkfStepperProps>;
+  "skf-select": DefineComponent<SkfSelectProps>;
+
+  /**
+   * The `<skf-select-option-group>` is a component that groups select-options
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-select-option-group": DefineComponent<SkfSelectOptionGroupProps>;
 
   /**
    * The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component
@@ -1088,8 +1238,23 @@ export type CustomElements = {
    */
   "skf-stepper-item": DefineComponent<SkfStepperItemProps>;
 
+  /**
+   * The `<skf-stepper>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-stepper-item-select** - Dispatched when the stepper item is selected
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<skf-stepper-item>`
+   */
+  "skf-stepper": DefineComponent<SkfStepperProps>;
+
   /**
    * The `<skf-switch>` is a component that displays a list of actions or options
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/7282a2-switch) for design principle
    * ---
    *
    *
@@ -1099,18 +1264,14 @@ export type CustomElements = {
   "skf-switch": DefineComponent<SkfSwitchProps>;
 
   /**
-   * The `<skf-tab>` is a component that displays a list of actions or options
+   * The `<skf-tab-panel>` is a component that displays a list of actions or options.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected
-   * - **click** - Fired when the component is clicked
-   *
    * ### **Slots:**
-   *  - _default_ - The tab's label
+   *  - _default_ - The tab panel's content
    */
-  "skf-tab": DefineComponent<SkfTabProps>;
+  "skf-tab-panel": DefineComponent<SkfTabPanelProps>;
 
   /**
    * The `<skf-tab-group>` is a component that displays a list of actions or options.
@@ -1124,24 +1285,18 @@ export type CustomElements = {
   "skf-tab-group": DefineComponent<SkfTabGroupProps>;
 
   /**
-   * The `<skf-tab-panel>` is a component that displays a list of actions or options.
+   * The `<skf-tab>` is a component that displays a list of actions or options
    * ---
    *
    *
-   * ### **Slots:**
-   *  - _default_ - The tab panel's content
-   */
-  "skf-tab-panel": DefineComponent<SkfTabPanelProps>;
-
-  /**
-   * The `<skf-tag>` is a component that displays a list of actions or options
-   * ---
-   *
+   * ### **Events:**
+   *  - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected
+   * - **click** - Fired when the component is clicked
    *
    * ### **Slots:**
-   *  - _default_ - The component's placeholder content
+   *  - _default_ - The tab's label
    */
-  "skf-tag": DefineComponent<SkfTagProps>;
+  "skf-tab": DefineComponent<SkfTabProps>;
 
   /**
    * The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.
@@ -1158,33 +1313,33 @@ export type CustomElements = {
   "skf-textarea": DefineComponent<SkfTextAreaProps>;
 
   /**
-   * A simple toast component that displays a message to the user. Use by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant.
+   * The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The component's placeholder content
+   *  - _default_ - The alert components that the toast creates will render here.
    */
-  "skf-toast": DefineComponent<SkfToastProps>;
+  "skf-toast-wrapper": DefineComponent<SkfToastWrapperProps>;
 
   /**
-   * The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.
+   * A simple toast component that displays a message to the user. Invoke a toast message by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant. A transient toast will disappear after a set amount of time. Once toast is dismissed it will be removed from the DOM.
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The alert components that the toast creates will render here.
+   *  - _default_ - The component's placeholder content
    */
-  "skf-toast-wrapper": DefineComponent<SkfToastWrapperProps>;
+  "skf-toast": DefineComponent<SkfToastProps>;
 
   /**
-   * The `<skf-tooltip>` is a component that displays a list of actions or options.
+   * The `<skf-tooltip>` is a component that displays a tooltip.
    * ---
    *
    *
    * ### **Events:**
-   *  - **open** - Fired when the dropdown is opened
-   * - **close** - Fired when the dropdown is closed
+   *  - **skf-opened** - Fired when the dropdown is opened
+   * - **skf-closed** - Fired when the dropdown is closed
    *
    * ### **Slots:**
    *  - _default_ - The tooltip popover content