@skf-design-system/ui-components 1.0.0-alpha.33 → 1.0.0-alpha.35

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -1,3 +1,50 @@
+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, 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 { 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 { 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 { 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";
+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 { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js";
+import type { SkfTag } from "../../components/tag/tag.component.js";
+import type { SkfSelect, Event, CustomEvent } from "../../components/select/select.component.js";
+import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
+import type { SkfStepperItem } from "../../components/stepper-item/stepper-item.component.js";
+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 { 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";
+
 /**
  * This type can be used to create scoped tags for your components.
  *
@@ -60,1422 +107,745 @@ type BaseProps = {
 
 type BaseEvents = {};
 
+export 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"];
+};
+
+export type SkfAccordionItemProps = {
+  /** If true, will animate the expand/accordion-item state */
+  animated?: SkfAccordionItem["animated"];
+  /** If true, will set the accordion-item to be expanded by default */
+  expanded?: SkfAccordionItem["expanded"];
+  /** Heading for the accordion-item */
+  heading?: SkfAccordionItem["heading"];
+  /** Defines which heading element will be rendered */
+  "heading-as"?: SkfAccordionItem["headingAs"];
+  /** If true, renders the small version */
+  small?: SkfAccordionItem["small"];
+  /** If true, will truncate the heading in accordion-item state */
+  truncate?: SkfAccordionItem["truncate"];
+
+  /** Event emitted when toggled */
+  "onskf-accordion-item-toggle"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
 export type SkfAccordionProps = {
   /** If true, will animate the expand/collapse state */
-  animated?: boolean | undefined;
+  animated?: SkfAccordion["animated"];
   /** Defines which heading element will be rendered */
-  "heading-as"?: "h1" | "h2" | "h3" | "h4";
+  "heading-as"?: SkfAccordion["headingAs"];
   /** If true, adds a gap between each item */
-  gap?: boolean;
+  gap?: SkfAccordion["gap"];
   /** If true, allowes multiple accordion items to open */
-  multiple?: boolean | undefined;
+  multiple?: SkfAccordion["multiple"];
   /** If true, renders the small version */
-  small?: boolean | undefined;
+  small?: SkfAccordion["small"];
   /** If true, will truncate all headings in collapsed state */
-  truncate?: boolean | undefined;
+  truncate?: SkfAccordion["truncate"];
 };
 
 export type SkfAlertProps = {
-  /** If true, alert is being used as a toast (alertdialog) with an close button */
-  closeable?: boolean | undefined;
   /** Close button aria-label */
-  "button-label"?: string;
+  "button-label"?: SkfAlert["buttonLabel"];
   /** If defined, displays leading icon */
-  icon?: SkfIcon["name"] | undefined;
+  icon?: SkfAlert["icon"];
+  /** If true, renders with an close button and sets aria-role to `status` */
+  persistent?: SkfAlert["persistent"];
   /** If defined, gives the supplied appearance */
-  severity?: "error" | "info" | "warning" | "success" | "alert";
+  severity?: SkfAlert["severity"];
 
   /** Fires when the close button is clicked */
-  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
+  "onskf-alert-close"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export 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"];
+};
+
+export type SkfBreadcrumbProps = {
+  /** aria-label for the breadcrumb control */
+  label?: SkfBreadcrumb["label"];
+  /** If true, renders a smaller version */
+  small?: SkfBreadcrumb["small"];
+
+  /** Fired when the item is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+export 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"];
 };
 
 export type SkfButtonProps = {
   /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
-  destructive?: boolean;
+  destructive?: SkfButton["destructive"];
   /** If true, removes border */
-  disabled?: boolean;
+  disabled?: SkfButton["disabled"];
   /** If provided, renders an icon before or after the text */
-  icon?:
-    | "arrowDown"
-    | "arrowDownUp"
-    | "arrowLeft"
-    | "arrowRight"
-    | "arrowUp"
-    | "article"
-    | "artificialIntelligence"
-    | "asset"
-    | "attachment"
-    | "bandCursor"
-    | "bands"
-    | "batteryEmpty"
-    | "batteryFull"
-    | "batteryLow"
-    | "bearingFault"
-    | "book"
-    | "bulb"
-    | "burger"
-    | "cPM"
-    | "calendar"
-    | "calendarBooked"
-    | "calendarEmpty"
-    | "calendarNotBooked"
-    | "calendarRecurring"
-    | "caretDown"
-    | "caretUp"
-    | "caretUpDown"
-    | "chat"
-    | "check"
-    | "checkCircle"
-    | "checkSmall"
-    | "chevronDown"
-    | "chevronLeft"
-    | "chevronRight"
-    | "chevronUp"
-    | "chevronUpDown"
-    | "close"
-    | "closeAllFaults"
-    | "closeFault"
-    | "closeSmall"
-    | "columnGraph"
-    | "comment"
-    | "connection1"
-    | "connection2"
-    | "connection3"
-    | "connection4"
-    | "danger"
-    | "defectFrequencies"
-    | "defectFrequenciesAlternative"
-    | "doubleChevronLeft"
-    | "doubleChevronRight"
-    | "download"
-    | "draft"
-    | "draftFilled"
-    | "draftOutlined"
-    | "dragNDrop"
-    | "drop"
-    | "duplicate"
-    | "edit"
-    | "emailFilled"
-    | "emailOutlined"
-    | "exclamation"
-    | "eye"
-    | "eyeHidden"
-    | "eyeVisible"
-    | "filter"
-    | "forbidden"
-    | "fullScreen"
-    | "fullScreenExit"
-    | "functionalLocation"
-    | "harmonicCursor"
-    | "heatmap"
-    | "hierarchy"
-    | "history"
-    | "historyAlt"
-    | "hourglassFramedFilled"
-    | "hourglassFramedOutlined"
-    | "hourglassOutlined"
-    | "hz"
-    | "iMX"
-    | "image"
-    | "infoCircleFilled"
-    | "infoCircleOutlined"
-    | "integration"
-    | "kebab"
-    | "link"
-    | "listGroup"
-    | "listItem"
-    | "locationPin"
-    | "lock"
-    | "logOut"
-    | "meatballs"
-    | "microphone"
-    | "minus"
-    | "minusSmall"
-    | "noData"
-    | "o"
-    | "openInNew"
-    | "overlayBaseline"
-    | "pDF"
-    | "paper"
-    | "pause"
-    | "pieChart"
-    | "pin"
-    | "play"
-    | "plus"
-    | "powerOff"
-    | "printer"
-    | "proCollect"
-    | "recAction"
-    | "received"
-    | "refresh"
-    | "reorder"
-    | "replace"
-    | "reply"
-    | "rewalkableRoute"
-    | "routes"
-    | "search"
-    | "send"
-    | "sensorA"
-    | "sensorB"
-    | "settings"
-    | "sidebandCursor"
-    | "singleCursor"
-    | "spectrum"
-    | "starFilled"
-    | "starOutlined"
-    | "statusCircle"
-    | "stop"
-    | "structuralVibration"
-    | "sync"
-    | "timewave"
-    | "trash"
-    | "trend"
-    | "trendingUp"
-    | "undo"
-    | "unknownCircle"
-    | "unknownDiamond"
-    | "unlink"
-    | "unlock"
-    | "unscheduledAction"
-    | "upload"
-    | "user"
-    | "viewFull"
-    | "viewHorizontal"
-    | "viewVertical"
-    | "warning"
-    | "warningCircle"
-    | "warningDiamond"
-    | "zoomIn"
-    | "zoomOut";
-  /** If true, removes border */
-  iconOnly?: boolean;
-  /** If provided, determines the positioning of the icon in relation to the text */
-  "icon-position"?: "left" | "right" | undefined;
+  icon?: SkfButton["icon"];
+  /** If true, button will take a square shape */
+  "icon-only"?: SkfButton["iconOnly"];
+  /** Determines the positioning of the icon in relation to the text */
+  "icon-position"?: SkfButton["iconPosition"];
   /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
-  loading?: boolean;
+  loading?: SkfButton["loading"];
   /**  */
-  "no-validate"?: boolean;
+  "no-validate"?: SkfButton["noValidate"];
   /** If provided, displays an alternative size */
-  size?: "sm" | "md" | "lg";
+  size?: SkfButton["size"];
   /** If provided, changes the button type */
-  type?: "button" | "submit" | "reset";
+  type?: SkfButton["type"];
   /** If provided, alters the appearance */
-  variant?: "primary" | "secondary";
+  variant?: SkfButton["variant"];
 
   /** Fires when the button is clicked */
-  onclick?: (e: CustomEvent<never>) => void;
+  onclick?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfCardProps = {
   /** If true, removes border */
-  "no-border"?: boolean;
+  "no-border"?: SkfCard["noBorder"];
   /** If true, removes padding */
-  "no-padding"?: boolean;
+  "no-padding"?: SkfCard["noPadding"];
   /** If true, the Card fills the parent element height */
-  stretch?: boolean;
+  stretch?: SkfCard["stretch"];
 };
 
 export type SkfCheckboxProps = {
   /** If true, sets disabled state */
-  disabled?: boolean;
+  disabled?: SkfCheckbox["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
-  required?: boolean;
+  required?: SkfCheckbox["undefined"];
   /** If defined, outputs helping hints in console */
-  debug?: boolean | undefined;
+  debug?: SkfCheckbox["debug"];
   /** If true, outputs helping hints in console */
-  checked?: boolean | undefined;
+  checked?: SkfCheckbox["checked"];
   /** If true, forces component to invalid state until removed */
-  "custom-invalid"?: boolean | undefined;
+  "custom-invalid"?: SkfCheckbox["customInvalid"];
   /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
-  indeterminate?: boolean | undefined;
+  indeterminate?: SkfCheckbox["indeterminate"];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
-  label?: string | undefined;
+  label?: SkfCheckbox["label"];
   /** If defined, adds name to the input-element */
-  name?: string | undefined;
+  name?: SkfCheckbox["name"];
   /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: string | undefined;
+  "required-label"?: SkfCheckbox["requiredLabel"];
   /** If defined, styles checkbox using provided severity */
-  severity?: "alert" | "success" | "info" | "warning";
+  severity?: SkfCheckbox["severity"];
   /** If true, displays valid state after interaction */
-  "show-valid"?: boolean | undefined;
+  "show-valid"?: SkfCheckbox["showValid"];
   /** Size of the checkbox */
-  size?: "sm" | "md";
+  size?: SkfCheckbox["size"];
   /** The current value of the input field */
-  value?: string;
+  value?: SkfCheckbox["value"];
 
-  /** {object} - When the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  /** When the value of the input changes */
+  onchange?: (e: CustomEvent<Event>) => void;
 };
 
-export type SkfCollapseProps = {
-  /** If true, will animate the expand/collapse state */
-  animated?: boolean;
-  /** If true, will set the collapse to be expanded by default */
-  expanded?: boolean;
-  /** Heading for the collapse */
-  heading?: string | undefined;
-  /** Defines which heading element will be rendered */
-  "heading-as"?: "h2" | "h3" | "h4";
-  /** If true, renders the small version */
-  small?: boolean;
-  /** If true, will truncate the heading in collapsed state */
-  truncate?: boolean;
+export type SkfDatepickerCalendarProps = {
+  /**  */
+  eventid?: SkfDatepickerCalendar["eventid"];
+  /**  */
+  firstDayOfWeek?: SkfDatepickerCalendar["firstDayOfWeek"];
+  /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
+  "invalid-dates"?: SkfDatepickerCalendar["invalidDates"];
+  /**  */
+  locale?: SkfDatepickerCalendar["locale"];
+  /**  */
+  range?: SkfDatepickerCalendar["range"];
+  /** Earliest selectable date. (yyyy-mm-dd format) */
+  "selectable-from"?: SkfDatepickerCalendar["selectableFrom"];
+  /** Latest selectable date. (yyyy-mm-dd format) */
+  "selectable-to"?: SkfDatepickerCalendar["selectableTo"];
+  /**  */
+  "selected-date"?: SkfDatepickerCalendar["selectedDate"];
+  /**  */
+  selectedDateRange?: SkfDatepickerCalendar["selectedDateRange"];
+  /**  */
+  _listenToKeyboard?: SkfDatepickerCalendar["_listenToKeyboard"];
+  /**  */
+  _handleKeyDown?: SkfDatepickerCalendar["_handleKeyDown"];
+  /**  */
+  dateSelectable?: SkfDatepickerCalendar["dateSelectable"];
+};
 
-  /** Event emitted when toggled */
-  "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
+export 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"];
+  /** 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"];
+  /**  */
+  range?: SkfDatepicker["range"];
+  /** If true, makes the element not mutable, meaning the user can not edit the control */
+  readonly?: SkfDatepicker["readonly"];
+  /** If defined, renders an alternative A11y text for the asterisk */
+  "required-label"?: SkfDatepicker["requiredLabel"];
+  /** 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"];
+  /**  */
+  focusTimeoutId?: SkfDatepicker["focusTimeoutId"];
+};
+
+export 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"];
 };
 
 export type SkfDialogProps = {
   /** If defined, sets the aria-label for the close button */
-  "close-button-aria-label"?: string | undefined;
+  "close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
   /** Title for the modal/dialog */
-  heading?: string | undefined;
+  heading?: SkfDialog["heading"];
   /** If true, makes the dialog stretch edge to edge on screen */
-  fullscreen?: boolean;
+  fullscreen?: SkfDialog["fullscreen"];
   /** If true, removes the close button */
-  "no-close-button"?: boolean;
+  "no-close-button"?: SkfDialog["noCloseButton"];
   /** If defined, removes the inner padding */
-  "no-padding"?: boolean;
-  /**  */
-  open?: boolean | null | undefined;
-  /** If provided, will run function on dialog close */
-  onClose?: ((event: Event) => void) | null | undefined;
-  /** Method that opens the dialog in modal state */
-  showModal?: string;
-  /** Method that closes the dialog */
-  close?: string;
+  "no-padding"?: SkfDialog["noPadding"];
+  /** If true, indicates that the dialog is active and is available for interaction */
+  open?: SkfDialog["open"];
+
   /** Fires when the dialog is opened (after transitioned in) */
-  "onskf-dialog-open"?: (e: CustomEvent<never>) => void;
-  /** Fires when the dialog is closed (before transitioned out) */
-  "onskf-dialog-close"?: (e: CustomEvent<never>) => void;
+  "onskf-dialog-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the dialog is closing (before transitioned out) */
+  "onskf-dialog-closing"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the dialog is closed (after transitioned out) */
-  onclose?: (e: CustomEvent<never>) => void;
+  "onskf-dialog-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfDividerProps = {
   /** Defines the Divider color */
-  color?: "emphasised" | "primary" | "secondary" | "tertiary" | "inverse";
+  color?: SkfDivider["color"];
   /** If true, renders a div for presentational purpose instead of the semantic hr-element */
-  decorative?: boolean;
+  decorative?: SkfDivider["decorative"];
   /** If true, renders the divider vertically */
-  vertical?: boolean;
+  vertical?: SkfDivider["vertical"];
 };
 
-export type SkfHeadingProps = {
-  /** Controls which heading element will be rendered. Should not be used to affect appearance */
-  as?: "h1" | "h2" | "h3" | "h4";
-  /** If provided, changes the appearance of the heading */
-  "styled-as"?: "h1" | "h2" | "h3" | "h4";
+export 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"];
+
+  /** Fires when the drawer is opened (after transitioned in) */
+  "onskf-drawer-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the drawer is closing (before transitioned out) */
+  "onskf-drawer-closing"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the drawer is closed (after transitioned out) */
+  "onskf-drawer-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type SkfIconProps = {
-  /** Sets the color of the icon */
-  color?: "primary" | "inverse" | "emphasised" | "secondary" | "success" | "info" | "warning" | "error" | "alert";
-  /** If defined, adds an alternate description to use for assistive devices */
-  label?: string | undefined;
-  /** Name of the icon to display */
-  name?:
-    | "arrowDown"
-    | "arrowDownUp"
-    | "arrowLeft"
-    | "arrowRight"
-    | "arrowUp"
-    | "article"
-    | "artificialIntelligence"
-    | "asset"
-    | "attachment"
-    | "bandCursor"
-    | "bands"
-    | "batteryEmpty"
-    | "batteryFull"
-    | "batteryLow"
-    | "bearingFault"
-    | "book"
-    | "bulb"
-    | "burger"
-    | "cPM"
-    | "calendar"
-    | "calendarBooked"
-    | "calendarEmpty"
-    | "calendarNotBooked"
-    | "calendarRecurring"
-    | "caretDown"
-    | "caretUp"
-    | "caretUpDown"
-    | "chat"
-    | "check"
-    | "checkCircle"
-    | "checkSmall"
-    | "chevronDown"
-    | "chevronLeft"
-    | "chevronRight"
-    | "chevronUp"
-    | "chevronUpDown"
-    | "close"
-    | "closeAllFaults"
-    | "closeFault"
-    | "closeSmall"
-    | "columnGraph"
-    | "comment"
-    | "connection1"
-    | "connection2"
-    | "connection3"
-    | "connection4"
-    | "danger"
-    | "defectFrequencies"
-    | "defectFrequenciesAlternative"
-    | "doubleChevronLeft"
-    | "doubleChevronRight"
-    | "download"
-    | "draft"
-    | "draftFilled"
-    | "draftOutlined"
-    | "dragNDrop"
-    | "drop"
-    | "duplicate"
-    | "edit"
-    | "emailFilled"
-    | "emailOutlined"
-    | "exclamation"
-    | "eye"
-    | "eyeHidden"
-    | "eyeVisible"
-    | "filter"
-    | "forbidden"
-    | "fullScreen"
-    | "fullScreenExit"
-    | "functionalLocation"
-    | "harmonicCursor"
-    | "heatmap"
-    | "hierarchy"
-    | "history"
-    | "historyAlt"
-    | "hourglassFramedFilled"
-    | "hourglassFramedOutlined"
-    | "hourglassOutlined"
-    | "hz"
-    | "iMX"
-    | "image"
-    | "infoCircleFilled"
-    | "infoCircleOutlined"
-    | "integration"
-    | "kebab"
-    | "link"
-    | "listGroup"
-    | "listItem"
-    | "locationPin"
-    | "lock"
-    | "logOut"
-    | "meatballs"
-    | "microphone"
-    | "minus"
-    | "minusSmall"
-    | "noData"
-    | "o"
-    | "openInNew"
-    | "overlayBaseline"
-    | "pDF"
-    | "paper"
-    | "pause"
-    | "pieChart"
-    | "pin"
-    | "play"
-    | "plus"
-    | "powerOff"
-    | "printer"
-    | "proCollect"
-    | "recAction"
-    | "received"
-    | "refresh"
-    | "reorder"
-    | "replace"
-    | "reply"
-    | "rewalkableRoute"
-    | "routes"
-    | "search"
-    | "send"
-    | "sensorA"
-    | "sensorB"
-    | "settings"
-    | "sidebandCursor"
-    | "singleCursor"
-    | "spectrum"
-    | "starFilled"
-    | "starOutlined"
-    | "statusCircle"
-    | "stop"
-    | "structuralVibration"
-    | "sync"
-    | "timewave"
-    | "trash"
-    | "trend"
-    | "trendingUp"
-    | "undo"
-    | "unknownCircle"
-    | "unknownDiamond"
-    | "unlink"
-    | "unlock"
-    | "unscheduledAction"
-    | "upload"
-    | "user"
-    | "viewFull"
-    | "viewHorizontal"
-    | "viewVertical"
-    | "warning"
-    | "warningCircle"
-    | "warningDiamond"
-    | "zoomIn"
-    | "zoomOut";
-  /** Size of the icon */
-  size?: "xs" | "sm" | "md" | "lg";
+export type SkfLogoProps = {
+  /** Defines the title of the logo */
+  title?: SkfLogo["title"];
+  /** Defines the color of the logo */
+  color?: SkfLogo["color"];
+};
+
+export type SkfNavProps = {
+  /**  */
+  vertical?: SkfNav["vertical"];
+};
+
+export 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"];
 };
 
 export type SkfInputProps = {
   /** If true, sets disabled state */
-  disabled?: boolean;
+  disabled?: SkfInput["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
-  required?: boolean;
-  /** -m  } */
-  autocomplete?: string;
+  required?: SkfInput["undefined"];
+  /** 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"?: string;
+  "button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
   /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
-  "button-aria-label-hide"?: string;
+  "button-aria-label-hide"?: SkfInput["buttonAriaLabelHide"];
   /** Custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
-  "button-aria-label-show"?: string;
+  "button-aria-label-show"?: SkfInput["buttonAriaLabelShow"];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
-  "custom-invalid"?: string;
+  "custom-invalid"?: SkfInput["customInvalid"];
   /** If true, outputs helping hints in console */
-  debug?: boolean | undefined;
+  debug?: SkfInput["debug"];
   /** If true, hides the label visually */
-  "hide-label"?: boolean | undefined;
+  "hide-label"?: SkfInput["hideLabel"];
   /** If defined, displays informational text below the field */
-  hint?: string | undefined;
-  /** Tells what keyboard to use if applicable */
-  inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
+  hint?: SkfInput["hint"];
+  /** Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See
+[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details. */
+  inputmode?: SkfInput["inputmode"];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
-  label?: string | undefined;
+  label?: SkfInput["label"];
   /** If defined, displays a prefix/adornment before the input-element */
-  leading?: string | undefined;
+  leading?: SkfInput["leading"];
   /** If defined, sets the maximum value to accept for this input */
-  max?: number | string | undefined;
+  max?: SkfInput["max"];
   /** If defined, sets the maximum character length to accept for this input */
-  maxlength?: number | undefined;
+  maxlength?: SkfInput["maxLength"];
   /** If defined, sets the minimum value to accept for this input */
-  min?: number | string | undefined;
+  min?: SkfInput["min"];
   /** If defined, sets the minimum character length to accept for this input */
-  minlength?: number | undefined;
+  minlength?: SkfInput["minLength"];
   /** If defined, adds name to the input-element */
-  name?: string | undefined;
+  name?: SkfInput["name"];
   /** If defined, adds name to the input-element */
-  pattern?: string | undefined;
+  pattern?: SkfInput["pattern"];
   /** If defined, displays placeholder text */
-  placeholder?: string | undefined;
+  placeholder?: SkfInput["placeholder"];
   /** If true, makes the element not mutable, meaning the user can not edit the control */
-  readonly?: boolean | undefined;
+  readonly?: SkfInput["readonly"];
   /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: string | undefined;
+  "required-label"?: SkfInput["requiredLabel"];
   /** If defined, displays provided severity state */
-  severity?: "alert" | "success" | "info" | "warning";
+  severity?: SkfInput["severity"];
   /** If true, displays valid state after interaction */
-  "show-valid"?: boolean | undefined;
+  "show-valid"?: SkfInput["showValid"];
   /** Size of the input */
-  size?: "sm" | "md";
+  size?: SkfInput["size"];
   /** If defined, displays a suffix/adornment after the input-element */
-  trailing?: string | undefined;
-  /** Type of input control */
-  type?:
-    | "button"
-    | "color"
-    | "date"
-    | "datetime-local"
-    | "email"
-    | "file"
-    | "hidden"
-    | "image"
-    | "month"
-    | "number"
-    | "password"
-    | "range"
-    | "reset"
-    | "search"
-    | "submit"
-    | "tel"
-    | "text"
-    | "time"
-    | "url"
-    | "week";
+  trailing?: SkfInput["trailing"];
+  /** Type of input */
+  type?: SkfInput["type"];
   /** Sets validation start */
-  "validate-on"?: "input" | "change" | "submit";
+  "validate-on"?: SkfInput["validateOn"];
   /** The current value of the input field */
-  value?: string;
+  value?: SkfInput["value"];
 
   /** Fires when the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  onchange?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the input is invalid */
-  oninvalid?: (e: CustomEvent<never>) => void;
+  oninvalid?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfLinkProps = {
   /** Defines the semantic element to render */
-  as?: "button" | "a";
+  as?: SkfLink["as"];
   /** Defines the text-color */
-  color?: "primary" | "inverse";
+  color?: SkfLink["color"];
   /** If true, disables the link */
-  disabled?: boolean | undefined;
+  disabled?: SkfLink["disabled"];
   /** If defined, downloads the url */
-  download?: string | undefined;
+  download?: SkfLink["download"];
   /** If defined, loads url on click */
-  href?: string | undefined;
+  href?: SkfLink["href"];
   /** If defined, renders an icon before or after the text */
-  icon?:
-    | "arrowDown"
-    | "arrowDownUp"
-    | "arrowLeft"
-    | "arrowRight"
-    | "arrowUp"
-    | "article"
-    | "artificialIntelligence"
-    | "asset"
-    | "attachment"
-    | "bandCursor"
-    | "bands"
-    | "batteryEmpty"
-    | "batteryFull"
-    | "batteryLow"
-    | "bearingFault"
-    | "book"
-    | "bulb"
-    | "burger"
-    | "cPM"
-    | "calendar"
-    | "calendarBooked"
-    | "calendarEmpty"
-    | "calendarNotBooked"
-    | "calendarRecurring"
-    | "caretDown"
-    | "caretUp"
-    | "caretUpDown"
-    | "chat"
-    | "check"
-    | "checkCircle"
-    | "checkSmall"
-    | "chevronDown"
-    | "chevronLeft"
-    | "chevronRight"
-    | "chevronUp"
-    | "chevronUpDown"
-    | "close"
-    | "closeAllFaults"
-    | "closeFault"
-    | "closeSmall"
-    | "columnGraph"
-    | "comment"
-    | "connection1"
-    | "connection2"
-    | "connection3"
-    | "connection4"
-    | "danger"
-    | "defectFrequencies"
-    | "defectFrequenciesAlternative"
-    | "doubleChevronLeft"
-    | "doubleChevronRight"
-    | "download"
-    | "draft"
-    | "draftFilled"
-    | "draftOutlined"
-    | "dragNDrop"
-    | "drop"
-    | "duplicate"
-    | "edit"
-    | "emailFilled"
-    | "emailOutlined"
-    | "exclamation"
-    | "eye"
-    | "eyeHidden"
-    | "eyeVisible"
-    | "filter"
-    | "forbidden"
-    | "fullScreen"
-    | "fullScreenExit"
-    | "functionalLocation"
-    | "harmonicCursor"
-    | "heatmap"
-    | "hierarchy"
-    | "history"
-    | "historyAlt"
-    | "hourglassFramedFilled"
-    | "hourglassFramedOutlined"
-    | "hourglassOutlined"
-    | "hz"
-    | "iMX"
-    | "image"
-    | "infoCircleFilled"
-    | "infoCircleOutlined"
-    | "integration"
-    | "kebab"
-    | "link"
-    | "listGroup"
-    | "listItem"
-    | "locationPin"
-    | "lock"
-    | "logOut"
-    | "meatballs"
-    | "microphone"
-    | "minus"
-    | "minusSmall"
-    | "noData"
-    | "o"
-    | "openInNew"
-    | "overlayBaseline"
-    | "pDF"
-    | "paper"
-    | "pause"
-    | "pieChart"
-    | "pin"
-    | "play"
-    | "plus"
-    | "powerOff"
-    | "printer"
-    | "proCollect"
-    | "recAction"
-    | "received"
-    | "refresh"
-    | "reorder"
-    | "replace"
-    | "reply"
-    | "rewalkableRoute"
-    | "routes"
-    | "search"
-    | "send"
-    | "sensorA"
-    | "sensorB"
-    | "settings"
-    | "sidebandCursor"
-    | "singleCursor"
-    | "spectrum"
-    | "starFilled"
-    | "starOutlined"
-    | "statusCircle"
-    | "stop"
-    | "structuralVibration"
-    | "sync"
-    | "timewave"
-    | "trash"
-    | "trend"
-    | "trendingUp"
-    | "undo"
-    | "unknownCircle"
-    | "unknownDiamond"
-    | "unlink"
-    | "unlock"
-    | "unscheduledAction"
-    | "upload"
-    | "user"
-    | "viewFull"
-    | "viewHorizontal"
-    | "viewVertical"
-    | "warning"
-    | "warningCircle"
-    | "warningDiamond"
-    | "zoomIn"
-    | "zoomOut";
+  icon?: SkfLink["icon"];
   /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: "left" | "right";
+  "icon-placement"?: SkfLink["iconPlacement"];
   /** If defined, describes the relationship between a linked resource and the current document */
-  rel?: string | undefined;
+  rel?: SkfLink["rel"];
   /** If defined, used on conjunction with onClick property, second argument */
-  route?: string | undefined;
+  route?: SkfLink["route"];
   /** If true, fills the parents horizontal axis */
-  stretch?: boolean;
+  stretch?: SkfLink["stretch"];
   /** If defined, specifies where to open the linked document */
-  target?: "_blank" | "_parent" | "_self" | "_top" | undefined;
+  target?: SkfLink["target"];
   /** Defines the type of button */
-  type?: "button" | "submit" | "reset";
-  /** If provided, custom function triggered by click where the second return parameter enables custom routing. */
-  onClick?: function;
-};
-
-export type SkfLoaderProps = {
-  /** Defines the aria-label */
-  "aria-label"?: string;
-  /** If true, inverts the color (to be used on colored backgrounds) */
-  invert?: boolean;
-  /** Defines the size of the loader */
-  size?: "md" | "sm" | undefined;
-  /**  */
-  role?: string;
-  /**  */
-  ariaLive?: string;
-};
-
-export type SkfLogoProps = {
-  /** Defines the title of the logo */
-  title?: string;
-  /** Defines the color of the logo */
-  color?: "primary" | "secondary" | "inverse";
-};
-
-export type SkfMenuProps = {
-  /** The placement of the menu */
-  placement?:
-    | "top"
-    | "right"
-    | "bottom"
-    | "left"
-    | "top-start"
-    | "top-end"
-    | "right-start"
-    | "right-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "left-start"
-    | "left-end";
-  /** Whether the menu is open */
-  isOpen?: boolean;
-  /** The id of the element the menu will be anchored to */
-  anchor?: string;
-  /** Fired when the menu is opened */
-  onopen?: (e: CustomEvent<never>) => void;
-  /** Fired when the menu is closed */
-  onclose?: (e: CustomEvent<never>) => void;
+  type?: SkfLink["type"];
+  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
+  onClick?: SkfLink["onClick"];
 };
 
 export type SkfMenuItemProps = {
   /** Defines the semantic element to render */
-  as?: "button" | "a";
+  as?: SkfMenuItem["as"];
   /** Defines the text-color */
-  color?: "primary" | "inverse";
+  color?: SkfMenuItem["color"];
   /** If true, disables the link */
-  disabled?: boolean | undefined;
+  disabled?: SkfMenuItem["disabled"];
   /** If defined, downloads the url */
-  download?: string | undefined;
+  download?: SkfMenuItem["download"];
   /** If defined, loads url on click */
-  href?: string | undefined;
+  href?: SkfMenuItem["href"];
   /** If defined, renders an icon before or after the text */
-  icon?:
-    | "arrowDown"
-    | "arrowDownUp"
-    | "arrowLeft"
-    | "arrowRight"
-    | "arrowUp"
-    | "article"
-    | "artificialIntelligence"
-    | "asset"
-    | "attachment"
-    | "bandCursor"
-    | "bands"
-    | "batteryEmpty"
-    | "batteryFull"
-    | "batteryLow"
-    | "bearingFault"
-    | "book"
-    | "bulb"
-    | "burger"
-    | "cPM"
-    | "calendar"
-    | "calendarBooked"
-    | "calendarEmpty"
-    | "calendarNotBooked"
-    | "calendarRecurring"
-    | "caretDown"
-    | "caretUp"
-    | "caretUpDown"
-    | "chat"
-    | "check"
-    | "checkCircle"
-    | "checkSmall"
-    | "chevronDown"
-    | "chevronLeft"
-    | "chevronRight"
-    | "chevronUp"
-    | "chevronUpDown"
-    | "close"
-    | "closeAllFaults"
-    | "closeFault"
-    | "closeSmall"
-    | "columnGraph"
-    | "comment"
-    | "connection1"
-    | "connection2"
-    | "connection3"
-    | "connection4"
-    | "danger"
-    | "defectFrequencies"
-    | "defectFrequenciesAlternative"
-    | "doubleChevronLeft"
-    | "doubleChevronRight"
-    | "download"
-    | "draft"
-    | "draftFilled"
-    | "draftOutlined"
-    | "dragNDrop"
-    | "drop"
-    | "duplicate"
-    | "edit"
-    | "emailFilled"
-    | "emailOutlined"
-    | "exclamation"
-    | "eye"
-    | "eyeHidden"
-    | "eyeVisible"
-    | "filter"
-    | "forbidden"
-    | "fullScreen"
-    | "fullScreenExit"
-    | "functionalLocation"
-    | "harmonicCursor"
-    | "heatmap"
-    | "hierarchy"
-    | "history"
-    | "historyAlt"
-    | "hourglassFramedFilled"
-    | "hourglassFramedOutlined"
-    | "hourglassOutlined"
-    | "hz"
-    | "iMX"
-    | "image"
-    | "infoCircleFilled"
-    | "infoCircleOutlined"
-    | "integration"
-    | "kebab"
-    | "link"
-    | "listGroup"
-    | "listItem"
-    | "locationPin"
-    | "lock"
-    | "logOut"
-    | "meatballs"
-    | "microphone"
-    | "minus"
-    | "minusSmall"
-    | "noData"
-    | "o"
-    | "openInNew"
-    | "overlayBaseline"
-    | "pDF"
-    | "paper"
-    | "pause"
-    | "pieChart"
-    | "pin"
-    | "play"
-    | "plus"
-    | "powerOff"
-    | "printer"
-    | "proCollect"
-    | "recAction"
-    | "received"
-    | "refresh"
-    | "reorder"
-    | "replace"
-    | "reply"
-    | "rewalkableRoute"
-    | "routes"
-    | "search"
-    | "send"
-    | "sensorA"
-    | "sensorB"
-    | "settings"
-    | "sidebandCursor"
-    | "singleCursor"
-    | "spectrum"
-    | "starFilled"
-    | "starOutlined"
-    | "statusCircle"
-    | "stop"
-    | "structuralVibration"
-    | "sync"
-    | "timewave"
-    | "trash"
-    | "trend"
-    | "trendingUp"
-    | "undo"
-    | "unknownCircle"
-    | "unknownDiamond"
-    | "unlink"
-    | "unlock"
-    | "unscheduledAction"
-    | "upload"
-    | "user"
-    | "viewFull"
-    | "viewHorizontal"
-    | "viewVertical"
-    | "warning"
-    | "warningCircle"
-    | "warningDiamond"
-    | "zoomIn"
-    | "zoomOut";
+  icon?: SkfMenuItem["icon"];
   /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: "left" | "right";
+  "icon-placement"?: SkfMenuItem["iconPlacement"];
   /** If defined, describes the relationship between a linked resource and the current document */
-  rel?: string | undefined;
+  rel?: SkfMenuItem["rel"];
   /** If defined, used on conjunction with onClick property, second argument */
-  route?: string | undefined;
+  route?: SkfMenuItem["route"];
   /** If true, fills the parents horizontal axis */
-  stretch?: boolean;
+  stretch?: SkfMenuItem["stretch"];
   /** If defined, specifies where to open the linked document */
-  target?: "_blank" | "_parent" | "_self" | "_top" | undefined;
+  target?: SkfMenuItem["target"];
   /** Defines the type of button */
-  type?: "button" | "submit" | "reset";
-  /** If provided, custom function triggered by click where the second return parameter enables custom routing. */
-  onClick?: function;
-  /** Fired when something happens */
-  "onmy-tag-my-event"?: (e: CustomEvent<CustomEvent>) => void;
-  /** Fired when the component is clicked */
-  onclick?: (e: CustomEvent<never>) => void;
-  /** Fired when the mouse is over the component */
-  onmouseover?: (e: CustomEvent<never>) => void;
-  /** Fired when the mouse is out of the component */
-  onmouseout?: (e: CustomEvent<never>) => void;
-  /** Fired when the component is focused */
-  onfocus?: (e: CustomEvent<never>) => void;
-  /** Fired when the component is blurred */
-  onblur?: (e: CustomEvent<never>) => void;
-  /** Fired when the component's value changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  type?: SkfMenuItem["type"];
+  /**  */
+  role?: SkfMenuItem["role"];
+  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
+  onClick?: SkfMenuItem["onClick"];
+};
+
+export type SkfMenuProps = {
+  /** The placement of the menu */
+  placement?: SkfMenu["undefined"];
+  /** The id of the element the menu will be anchored to */
+  anchor?: SkfMenu["undefined"];
+
+  /** Fired when the menu is opened */
+  "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when the menu is closed */
+  "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type SkfNavItemProps = {
+  /**  */
+  href?: SkfNavItem["href"];
+  /**  */
+  icon?: SkfNavItem["icon"];
 };
 
 export type SkfPopoverProps = {
+  /** The placement of the popover */
+  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?: number;
+  offset?: SkfPopover["offset"];
   /** If true, hides the arrow */
-  hideArrow?: boolean;
-  /**  */
-  arrow?: boolean;
-  /** The placement of the menu */
-  placement?:
-    | "top"
-    | "right"
-    | "bottom"
-    | "left"
-    | "top-start"
-    | "top-end"
-    | "right-start"
-    | "right-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "left-start"
-    | "left-end";
-  /** Whether the menu is open */
-  isOpen?: boolean;
-  /** The id of the element the menu will be anchored to */
-  anchor?: string;
+  hideArrow?: SkfPopover["hideArrow"];
+
   /** Fired when the menu is opened */
-  onopen?: (e: CustomEvent<never>) => void;
+  "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fired when the menu is closed */
-  onclose?: (e: CustomEvent<never>) => void;
+  "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfProgressProps = {
   /** If true, the progress-bar's fill value is animated */
-  animated?: boolean;
+  animated?: SkfProgress["animated"];
   /** Describes how much work the task indicated by the progress element requires */
-  max?: number;
+  max?: SkfProgress["max"];
   /** Specifies how much of the task that has been completed */
-  value?: number;
+  value?: SkfProgress["value"];
 };
 
 export type SkfRadioProps = {
   /** If true, sets disabled state */
-  disabled?: boolean;
+  disabled?: SkfRadio["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
-  required?: boolean;
+  required?: SkfRadio["undefined"];
   /** If true, outputs helping hints in console */
-  debug?: boolean | undefined;
+  debug?: SkfRadio["debug"];
   /** If true, outputs helping hints in console */
-  checked?: boolean | undefined;
+  checked?: SkfRadio["checked"];
   /** If true, forces component to invalid state until removed */
-  "custom-invalid"?: boolean | undefined;
+  "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?: string | undefined;
+  label?: SkfRadio["label"];
   /** If defined, adds name to the input-element */
-  name?: string | undefined;
+  name?: SkfRadio["name"];
   /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: string | undefined;
+  "required-label"?: SkfRadio["requiredLabel"];
   /** Size of the Radio */
-  size?: "sm" | "md";
+  size?: SkfRadio["size"];
   /** If defined, displays provided severity state */
-  severity?: "success" | "info" | "warning" | "alert";
+  severity?: SkfRadio["severity"];
   /** If true, displays valid state after interaction */
-  "show-valid"?: boolean | undefined;
+  "show-valid"?: SkfRadio["showValid"];
   /** The current value of the input field */
-  value?: string;
+  value?: SkfRadio["value"];
 
-  /** {object} - When the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  /** When the value of the input changes */
+  onchange?: (e: CustomEvent<Event>) => void;
+};
+
+export type SkfSegmentedButtonItemProps = {
+  /** If true, items is marked as disabled */
+  disabled?: SkfSegmentedButtonItem["disabled"];
+  /** If true, items is marked as selected */
+  selected?: SkfSegmentedButtonItem["selected"];
+  /** Sets the item value */
+  value?: SkfSegmentedButtonItem["value"];
+
+  /** Fired when selected */
+  "onskf-segmented-button-item-select"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type SkfSegmentedButtonProps = {
+  /** If true, allowes multiple items to be selected */
+  multiple?: SkfSegmentedButton["multiple"];
+};
+
+export type SkfSelectOptionGroupProps = {
+  /**  */
+  label?: SkfSelectOptionGroup["label"];
+};
+
+export 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"];
 };
 
 export type SkfSelectProps = {
-  /** If true, the select is disabled	`default: false` */
-  disabled?: boolean;
+  /** If true, the select is disabled */
+  disabled?: SkfSelect["undefined"];
+  /** If true, the select is required */
+  required?: SkfSelect["undefined"];
   /** Sets the first visible text on the component */
-  "button-label"?: string;
+  "button-label"?: SkfSelect["buttonLabel"];
   /** If defined, forces component to invalid state until removed */
-  "custom-invalid"?: string | undefined;
+  "custom-invalid"?: SkfSelect["customInvalid"];
   /** If true, hides the label visually */
-  "hide-label"?: boolean | undefined;
+  "hide-label"?: SkfSelect["hideLabel"];
   /** If true and mulltiple is true, no tags are displayed under the select */
-  "hide-tags"?: boolean | undefined;
+  "hide-tags"?: SkfSelect["hideTags"];
   /** If defined, sets the hint text under the select component in the form */
-  hint?: string | undefined;
+  hint?: SkfSelect["hint"];
   /** If defined, displays provided label */
-  label?: string | undefined;
+  label?: SkfSelect["label"];
   /** If defined, limits the number of selectable options */
-  max?: number | undefined;
+  max?: SkfSelect["max"];
   /** If defined, sets the minimum number of required options */
-  min?: number | undefined;
+  min?: SkfSelect["min"];
   /** If true, allows for multiple options to be selected */
-  multiple?: boolean | undefined;
+  multiple?: SkfSelect["multiple"];
   /** If defined, set name of the component */
-  name?: string | undefined;
+  name?: SkfSelect["name"];
   /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: string | undefined;
+  "required-label"?: SkfSelect["requiredLabel"];
   /** If defined, displays provided severity state */
-  severity?: FormFieldBaseProps["severity"] | undefined;
+  severity?: SkfSelect["severity"];
   /** If true, displays valid state after interaction */
-  "show-valid"?: boolean | undefined;
+  "show-valid"?: SkfSelect["showValid"];
   /** Size of the Select */
-  size?: "sm" | "md";
+  size?: SkfSelect["size"];
   /** A readonly property that returns the selected value(s) in a array */
-  selectedValues?: string;
+  selectedValues?: SkfSelect["selectedValues"];
   /** A readonly property that returns the selected slot(s) text content in a array */
-  selectedOptionsText?: string;
+  selectedOptionsText?: SkfSelect["selectedOptionsText"];
   /** Read only, returns the selected value. (if multiple: in a comma separated string) */
-  value?: string;
+  value?: SkfSelect["value"];
   /**  */
-  _selectedOptions?: array;
+  _selectedOptions?: SkfSelect["_selectedOptions"];
   /** Fired when the selected option(s) changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  onchange?: (e: CustomEvent<Event>) => void;
   /** Fired when the select is invalid */
-  oninvalid?: (e: CustomEvent<never>) => void;
+  oninvalid?: (e: CustomEvent<Event>) => void;
   /** Fired when the form is reset */
-  onreset?: (e: CustomEvent<never>) => void;
+  onreset?: (e: CustomEvent<Event>) => void;
   /** {detail: {expanded: boolean}} Fired when the select dropdown is toggled */
-  "onskf-select:dropdown"?: (e: CustomEvent<never>) => void;
+  "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<never>) => void;
+  "onskf-select-option-select"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfSelectOptionProps = {
   /** If true, prevents interaction with the option */
-  disabled?: boolean | undefined;
+  disabled?: SkfSelectOption["disabled"];
   /** If defined, set an icon */
-  icon?: SkfIcon["name"] | undefined;
+  icon?: SkfSelectOption["icon"];
   /** If defined, sets provided color on the icon */
-  "icon-color"?: SeverityFgColor | undefined;
+  "icon-color"?: SkfSelectOption["iconColor"];
   /** If true, sets the option as selected */
-  selected?: boolean | undefined;
+  selected?: SkfSelectOption["selected"];
   /** If defined, sets a short label */
-  "short-label"?: string | undefined;
+  "short-label"?: SkfSelectOption["shortLabel"];
   /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
-  value?: string;
+  value?: SkfSelectOption["value"];
   /** The option's label text (equivalent to the tags textContent) */
-  text?: string;
+  text?: SkfSelectOption["text"];
   /**  */
-  role?: string;
+  role?: SkfSelectOption["role"];
   /**  */
-  _parent?: string;
+  _parent?: SkfSelectOption["_parent"];
   /**  */
-  _shortcutUpdate?: boolean;
+  _shortcutUpdate?: SkfSelectOption["_shortcutUpdate"];
   /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
-  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
+  "onskf-select-option-select"?: (e: CustomEvent<never>) => void;
 };
 
-export type SkfSelectOptionGroupProps = {
+export type SkfStepperItemProps = {
+  /** If defined, gives the supplied appearance */
+  state?: SkfStepperItem["state"];
+  /** If true, item marked as completed */
+  completed?: SkfStepperItem["completed"];
   /**  */
-  label?: string;
+  _setInternalState?: SkfStepperItem["_setInternalState"];
+  /**  */
+  role?: SkfStepperItem["role"];
+  /** Dispatched when the stepper item is selected */
+  "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
 };
 
 export type SkfStepperProps = {
   /** Sets the active item */
-  activeIndex?: number;
+  "active-index"?: SkfStepper["activeIndex"];
   /** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
-  linear?: boolean;
+  linear?: SkfStepper["linear"];
 
   /** Dispatched when the stepper item is selected */
-  "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
-};
-
-export type SkfStepperItemProps = {
-  /** If defined, gives the supplied appearance */
-  state?: Extract<SkfStepperItemState, "active" | "completed"> | undefined;
-  /** If true, item marked as completed */
-  completed?: boolean;
-  /**  */
-  _setInternalState?: string;
-  /**  */
-  role?: string;
-  /** Dispatched when the stepper item is selected */
-  "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
+  "onskf-stepper-item-select"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfSwitchProps = {
   /** If true, sets disabled state */
-  disabled?: boolean;
+  disabled?: SkfSwitch["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
-  required?: boolean;
+  required?: SkfSwitch["undefined"];
   /** If true, outputs helping hints in console */
-  debug?: boolean | undefined;
+  debug?: SkfSwitch["debug"];
   /** If true, outputs helping hints in console */
-  checked?: boolean | undefined;
+  checked?: SkfSwitch["checked"];
   /** If true, hides the label visually */
-  "hide-label"?: boolean | undefined;
+  "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?: string | undefined;
+  label?: SkfSwitch["label"];
   /** If defined, adds name to the input-element */
-  name?: string | undefined;
+  name?: SkfSwitch["name"];
   /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: string | undefined;
+  "required-label"?: SkfSwitch["requiredLabel"];
   /** Size of the Switch */
-  size?: "sm" | "md";
+  size?: SkfSwitch["size"];
   /** The current value of the input field */
-  value?: string;
+  value?: SkfSwitch["value"];
 };
 
-export type SkfTabProps = {
-  /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
-  panel?: string;
-  /**  */
-  selected?: boolean;
+export type SkfTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SkfTabPanel["name"];
   /**  */
-  variant?: SkfTabGroup["variant"];
+  active?: SkfTabPanel["active"];
   /**  */
-  role?: string;
-  /** {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"];
 };
 
-export type SkfTabGroupProps = {
+export type SkfTabsProps = {
   /** Sets the default selected tab */
-  "default-selected"?: number;
+  "default-selected"?: SkfTabs["defaultSelected"];
   /** If true, removes border */
-  "no-border"?: boolean;
+  "no-border"?: SkfTabs["noBorder"];
   /** If true, removes padding */
-  "no-padding"?: boolean;
+  "no-padding"?: SkfTabs["noPadding"];
   /** If true, component fills the parent element height */
-  stretch?: boolean;
+  stretch?: SkfTabs["stretch"];
   /** Sets the appearance of the tabs */
-  variant?: "compressed" | "expanded";
+  variant?: SkfTabs["variant"];
 };
 
-export type SkfTabPanelProps = {
-  /** The tab panel's name. */
-  name?: string;
+export 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?: boolean;
+  selected?: SkfTab["selected"];
   /**  */
-  role?: string;
-};
-
-export type SkfTagProps = {
-  /** Specifies Tag size */
-  size?: "sm" | "md" | "lg";
-  /** If defined, displays leading/provided icon */
-  icon?:
-    | "arrowDown"
-    | "arrowDownUp"
-    | "arrowLeft"
-    | "arrowRight"
-    | "arrowUp"
-    | "article"
-    | "artificialIntelligence"
-    | "asset"
-    | "attachment"
-    | "bandCursor"
-    | "bands"
-    | "batteryEmpty"
-    | "batteryFull"
-    | "batteryLow"
-    | "bearingFault"
-    | "book"
-    | "bulb"
-    | "burger"
-    | "cPM"
-    | "calendar"
-    | "calendarBooked"
-    | "calendarEmpty"
-    | "calendarNotBooked"
-    | "calendarRecurring"
-    | "caretDown"
-    | "caretUp"
-    | "caretUpDown"
-    | "chat"
-    | "check"
-    | "checkCircle"
-    | "checkSmall"
-    | "chevronDown"
-    | "chevronLeft"
-    | "chevronRight"
-    | "chevronUp"
-    | "chevronUpDown"
-    | "close"
-    | "closeAllFaults"
-    | "closeFault"
-    | "closeSmall"
-    | "columnGraph"
-    | "comment"
-    | "connection1"
-    | "connection2"
-    | "connection3"
-    | "connection4"
-    | "danger"
-    | "defectFrequencies"
-    | "defectFrequenciesAlternative"
-    | "doubleChevronLeft"
-    | "doubleChevronRight"
-    | "download"
-    | "draft"
-    | "draftFilled"
-    | "draftOutlined"
-    | "dragNDrop"
-    | "drop"
-    | "duplicate"
-    | "edit"
-    | "emailFilled"
-    | "emailOutlined"
-    | "exclamation"
-    | "eye"
-    | "eyeHidden"
-    | "eyeVisible"
-    | "filter"
-    | "forbidden"
-    | "fullScreen"
-    | "fullScreenExit"
-    | "functionalLocation"
-    | "harmonicCursor"
-    | "heatmap"
-    | "hierarchy"
-    | "history"
-    | "historyAlt"
-    | "hourglassFramedFilled"
-    | "hourglassFramedOutlined"
-    | "hourglassOutlined"
-    | "hz"
-    | "iMX"
-    | "image"
-    | "infoCircleFilled"
-    | "infoCircleOutlined"
-    | "integration"
-    | "kebab"
-    | "link"
-    | "listGroup"
-    | "listItem"
-    | "locationPin"
-    | "lock"
-    | "logOut"
-    | "meatballs"
-    | "microphone"
-    | "minus"
-    | "minusSmall"
-    | "noData"
-    | "o"
-    | "openInNew"
-    | "overlayBaseline"
-    | "pDF"
-    | "paper"
-    | "pause"
-    | "pieChart"
-    | "pin"
-    | "play"
-    | "plus"
-    | "powerOff"
-    | "printer"
-    | "proCollect"
-    | "recAction"
-    | "received"
-    | "refresh"
-    | "reorder"
-    | "replace"
-    | "reply"
-    | "rewalkableRoute"
-    | "routes"
-    | "search"
-    | "send"
-    | "sensorA"
-    | "sensorB"
-    | "settings"
-    | "sidebandCursor"
-    | "singleCursor"
-    | "spectrum"
-    | "starFilled"
-    | "starOutlined"
-    | "statusCircle"
-    | "stop"
-    | "structuralVibration"
-    | "sync"
-    | "timewave"
-    | "trash"
-    | "trend"
-    | "trendingUp"
-    | "undo"
-    | "unknownCircle"
-    | "unknownDiamond"
-    | "unlink"
-    | "unlock"
-    | "unscheduledAction"
-    | "upload"
-    | "user"
-    | "viewFull"
-    | "viewHorizontal"
-    | "viewVertical"
-    | "warning"
-    | "warningCircle"
-    | "warningDiamond"
-    | "zoomIn"
-    | "zoomOut";
-  /** If defined, gives the supplied appearance */
-  color?: "warning" | "success" | "info" | "error" | "alert";
-  /** If true, adds trailing button to remove tag */
-  removable?: boolean | undefined;
-  /** If defined, accepts a function that runs on click */
-  onClick?: string;
-  /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
-  onRemove?: string;
+  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;
 };
 
 export type SkfTextAreaProps = {
   /** If true, sets disabled state */
-  disabled?: boolean;
+  disabled?: SkfTextArea["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
-  required?: boolean;
+  required?: SkfTextArea["undefined"];
   /** If defined, sets the cols of the textarea */
-  cols?: number | undefined;
+  cols?: SkfTextArea["cols"];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
-  "custom-invalid"?: string;
+  "custom-invalid"?: SkfTextArea["customInvalid"];
   /** If true, outputs helping hints in console */
-  debug?: boolean | undefined;
+  debug?: SkfTextArea["debug"];
   /** If true, hides the label visually */
-  "hide-label"?: boolean | undefined;
+  "hide-label"?: SkfTextArea["hideLabel"];
   /** If defined, displays informational text below the field */
-  hint?: string | undefined;
+  hint?: SkfTextArea["hint"];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
-  label?: string | undefined;
+  label?: SkfTextArea["label"];
   /** If defined, adds name to the input-element */
-  name?: string | undefined;
+  name?: SkfTextArea["name"];
   /** If defined, sets the maximum character length to accept for this input */
-  maxlength?: number | undefined;
+  maxlength?: SkfTextArea["maxLength"];
   /** If defined, sets the minimum character length to accept for this input */
-  minlength?: number | undefined;
+  minlength?: SkfTextArea["minLength"];
   /** If defined, displays placeholder text */
-  placeholder?: string | undefined;
+  placeholder?: SkfTextArea["placeholder"];
   /** If true, makes the element not mutable, meaning the user can not edit the control */
-  readonly?: boolean | undefined;
+  readonly?: SkfTextArea["readonly"];
   /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: string | undefined;
+  "required-label"?: SkfTextArea["requiredLabel"];
   /** If defined, sets the rows of the textarea */
-  rows?: number | undefined;
+  rows?: SkfTextArea["rows"];
   /** If defined, displays provided severity state */
-  severity?: "success" | "info" | "warning" | "alert";
+  severity?: SkfTextArea["severity"];
   /** If true, displays valid state after interaction */
-  "show-valid"?: boolean | undefined;
+  "show-valid"?: SkfTextArea["showValid"];
   /** Size of the Textarea */
-  size?: "sm" | "md" | undefined;
+  size?: SkfTextArea["size"];
   /** Sets validation start */
-  "validate-on"?: "input" | "change" | "submit";
+  "validate-on"?: SkfTextArea["validateOn"];
   /** The current value of the text area */
-  value?: string;
+  value?: SkfTextArea["value"];
 
   /** Fires when the value of the input changes */
   onchange?: (e: CustomEvent<never>) => void;
@@ -1483,56 +853,74 @@ export type SkfTextAreaProps = {
   oninvalid?: (e: CustomEvent<never>) => void;
 };
 
-export type SkfToastProps = {
-  /** If provided, adds a close button to the toast and will not disapear until user actively dismisses it. */
-  closeable?: boolean;
+export type SkfToastWrapperProps = {
   /**  */
-  debug?: boolean;
-  /** Severity of the toast. */
-  severity?: "info" | "success" | "warning" | "error";
-  /** Time in seconds before the toast disappears. */
-  timer?: number;
-  /** offsets where toasts emerge vertically */
-  topOffset?: number | undefined;
+  debug?: SkfToastWrapper["debug"];
 };
 
-export type SkfToastWrapperProps = {
+export type SkfToastProps = {
   /**  */
-  debug?: boolean;
+  debug?: SkfToast["debug"];
+  /** If defined, displays leading icon */
+  icon?: SkfToast["icon"];
+  /** If true, renders with an close button and sets aria-role to `status` */
+  persistent?: SkfToast["persistent"];
+  /** If defined, gives the supplied appearance */
+  severity?: SkfToast["severity"];
+  /** Time in seconds before the toast disappears. */
+  timer?: SkfToast["timer"];
+  /** offsets where toasts emerge vertically */
+  topOffset?: SkfToast["topOffset"];
 };
 
 export type SkfTooltipProps = {
-  /**  */
-  offset?: number;
   /** The placement of the dropdown */
-  placement?:
-    | "top"
-    | "right"
-    | "bottom"
-    | "left"
-    | "top-start"
-    | "top-end"
-    | "right-start"
-    | "right-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "left-start"
-    | "left-end";
-  /** Whether the dropdown is open */
-  isOpen?: boolean;
+  placement?: SkfTooltip["undefined"];
   /** The id of the element the dropdown will be anchored to */
-  anchor?: string;
+  anchor?: SkfTooltip["undefined"];
+  /**  */
+  role?: SkfTooltip["role"];
+  /**  */
+  offset?: SkfTooltip["offset"];
+  /**  */
+  placement?: SkfTooltip["placement"];
+  /**  */
+  variant?: SkfTooltip["variant"];
   /** 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-accordion>` component consists of multiple `<skf-collapse>`, working together.
+   * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text.
+   * ---
+   *
+   */
+  "skf-icon": Partial<SkfIconProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-accordion-item>` is used in conjunction with the `<skf-accordion>` component
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-accordion-item-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-accordion-item": Partial<SkfAccordionItemProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-accordion>` component consists of one or more `<skf-accordion-item>` item(s) working together
    *
-   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles
    * ---
    *
    *
@@ -1543,6 +931,8 @@ export type CustomElements = {
 
   /**
    * The `<skf-alert>` is a type of notification that appears in-line
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/990ec5-alert) for design principles
    * ---
    *
    *
@@ -1555,8 +945,42 @@ export type CustomElements = {
    */
   "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
 
+  /**
+   * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Label of the breadcrumb item
+   */
+  "skf-breadcrumb-item": Partial<SkfBreadcrumbItemProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/3338ef-breadcrumbs) for design principles.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **click** - Fired when the item is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - One or more `<skf-breadcrumb-item>`
+   */
+  "skf-breadcrumb": Partial<SkfBreadcrumbProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
+   * ---
+   *
+   */
+  "skf-loader": Partial<SkfLoaderProps & BaseProps & BaseEvents>;
+
   /**
    * Component to be used in forms or for interactivity
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/02493d-buttons) for design principles
    * ---
    *
    *
@@ -1573,6 +997,8 @@ export type CustomElements = {
 
   /**
    * The `<skf-card>` can be used to group related subjects in a container
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles
    * ---
    *
    *
@@ -1587,7 +1013,7 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **change** - {object} - When the value of the input changes
+   *  - **change** - When the value of the input changes
    *
    * ### **Slots:**
    *  - _default_ - The Radios label. Alternatively, you can use the `label` attribute.
@@ -1595,37 +1021,49 @@ export type CustomElements = {
   "skf-checkbox": Partial<SkfCheckboxProps & BaseProps & BaseEvents>;
 
   /**
-   * 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.
    * ---
    *
+   */
+  "skf-datepicker-calendar": Partial<SkfDatepickerCalendarProps & BaseProps & BaseEvents>;
+
+  /**
+   *
+   * ---
    *
-   * ### **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
+   *  - **clear()** - Clears the input field
+   */
+  "skf-datepicker": Partial<SkfDatepickerProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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.
+   * ---
+   *
    *
    * ### **Slots:**
-   *  - _default_ - Main content
+   *  - _default_ - The headings content
    */
-  "skf-collapse": Partial<SkfCollapseProps & BaseProps & BaseEvents>;
+  "skf-heading": Partial<SkfHeadingProps & BaseProps & BaseEvents>;
 
   /**
-   * 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 closing (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
-   * - **heading** - The dialog component's heading
    * - **footer** - The dialog component's buttons goes here
    *
    * ### **CSS Properties:**
@@ -1646,25 +1084,54 @@ export type CustomElements = {
   "skf-divider": Partial<SkfDividerProps & BaseProps & BaseEvents>;
 
   /**
-   * 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 closing (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": Partial<SkfHeadingProps & BaseProps & BaseEvents>;
+  "skf-drawer": Partial<SkfDrawerProps & BaseProps & BaseEvents>;
 
   /**
-   * 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:**
+   *  - **--mod-logo-height** - The height of the logo _(default: undefined)_
    */
-  "skf-icon": Partial<SkfIconProps & BaseProps & BaseEvents>;
+  "skf-logo": Partial<SkfLogoProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-nav>` is a component that displays a list of <nav-items>.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's main content
+   */
+  "skf-nav": Partial<SkfNavProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Navigation items
+   */
+  "skf-header": Partial<SkfHeaderProps & BaseProps & BaseEvents>;
 
   /**
-   * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
+   * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles
    * ---
    *
    *
@@ -1688,30 +1155,25 @@ export type CustomElements = {
   "skf-link": Partial<SkfLinkProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
-   * ---
-   *
-   */
-  "skf-loader": Partial<SkfLoaderProps & BaseProps & BaseEvents>;
-
-  /**
-   * The `<skf-logo>` component is used to display the SKF logo.
+   * The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component
    * ---
    *
    *
-   * ### **CSS Properties:**
-   *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
+   * ### **Slots:**
+   *  - _default_ - The component's main content
    */
-  "skf-logo": Partial<SkfLogoProps & BaseProps & BaseEvents>;
+  "skf-menu-item": Partial<SkfMenuItemProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-menu>` is a component that displays a list of actions or options.
+   * The `<skf-menu>` is a component that displays a list of actions or options
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles
    * ---
    *
    *
    * ### **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
@@ -1719,33 +1181,25 @@ export type CustomElements = {
   "skf-menu": Partial<SkfMenuProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-menu-item>` is a component that displays a list of actions or options.
+   * The `<skf-nav>` is a component that displays a list of <nav-items>.
    * ---
    *
    *
-   * ### **Events:**
-   *  - **my-tag-my-event** - Fired when something happens
-   * - **click** - Fired when the component is clicked
-   * - **mouseover** - Fired when the mouse is over the component
-   * - **mouseout** - Fired when the mouse is out of the component
-   * - **focus** - Fired when the component is focused
-   * - **blur** - Fired when the component is blurred
-   * - **change** - Fired when the component's value changes
-   *
    * ### **Slots:**
    *  - _default_ - The component's main content
-   * - **my-named-slot** - A named slot of the component
    */
-  "skf-menu-item": Partial<SkfMenuItemProps & BaseProps & BaseEvents>;
+  "skf-nav-item": Partial<SkfNavItemProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-popover>` is a general purpose component that displays the slot content.
+   * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles
    * ---
    *
    *
    * ### **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
@@ -1761,11 +1215,13 @@ export type CustomElements = {
 
   /**
    * The `<skf-radio>` component is used to create a radio input
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
    * ---
    *
    *
    * ### **Events:**
-   *  - **change** - {object} - When the value of the input changes
+   *  - **change** - When the value of the input changes
    *
    * ### **Slots:**
    *  - _default_ - The radios label. Alternatively, you can use the `label` attribute.
@@ -1773,35 +1229,29 @@ export type CustomElements = {
   "skf-radio": Partial<SkfRadioProps & BaseProps & BaseEvents>;
 
   /**
-   * 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
+   *  - **skf-segmented-button-item-select** - Fired when selected
    *
    * ### **Slots:**
-   *  - _default_ - The select's placeholder content
+   *  - _default_ - Label for the button
    */
-  "skf-select": Partial<SkfSelectProps & BaseProps & BaseEvents>;
+  "skf-segmented-button-item": Partial<SkfSegmentedButtonItemProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
+   * 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
    * ---
    *
    *
-   * ### **Events:**
-   *  - **skf-select-option:select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.
-   *
    * ### **Slots:**
-   *  - _default_ - The option's text content
-   * - **icon** - The option's slot for icon or custom meta information (svg).
+   *  - _default_ - One or more `<skf-segmented-button-item>`
    */
-  "skf-select-option": Partial<SkfSelectOptionProps & BaseProps & BaseEvents>;
+  "skf-segmented-button": Partial<SkfSegmentedButtonProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-select-option-group>` is a component that groups select-options
@@ -1814,65 +1264,85 @@ export type CustomElements = {
   "skf-select-option-group": Partial<SkfSelectOptionGroupProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-stepper>` is a component that displays a list of actions or options.
+   * The `<skf-tag>` is a component that displays a list of actions or options
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-tag": Partial<SkfTagProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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.
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/91c9f0-select-and-combobox) for design principles
    * ---
    *
    *
    * ### **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": Partial<SkfStepperProps & BaseProps & BaseEvents>;
+  "skf-select": Partial<SkfSelectProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component
+   * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
    * ---
    *
    *
    * ### **Events:**
-   *  - **skf-stepper-item-select** - Dispatched when the stepper item is selected
+   *  - **skf-select-option-select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.
    *
    * ### **Slots:**
-   *  - _default_ - Label of the stepper item
+   *  - _default_ - The option's text content
+   * - **icon** - The option's slot for icon or custom meta information (svg).
    */
-  "skf-stepper-item": Partial<SkfStepperItemProps & BaseProps & BaseEvents>;
+  "skf-select-option": Partial<SkfSelectOptionProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-switch>` is a component that displays a list of actions or options
+   * The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component
    * ---
    *
    *
+   * ### **Events:**
+   *  - **skf-stepper-item-select** - Dispatched when the stepper item is selected
+   *
    * ### **Slots:**
-   *  - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.
+   *  - _default_ - Label of the stepper item
    */
-  "skf-switch": Partial<SkfSwitchProps & BaseProps & BaseEvents>;
+  "skf-stepper-item": Partial<SkfStepperItemProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-tab>` is a component that displays a list of actions or options
+   * The `<skf-stepper>` 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
+   *  - **skf-stepper-item-select** - Dispatched when the stepper item is selected
    *
    * ### **Slots:**
-   *  - _default_ - The tab's label
+   *  - _default_ - One or more `<skf-stepper-item>`
    */
-  "skf-tab": Partial<SkfTabProps & BaseProps & BaseEvents>;
+  "skf-stepper": Partial<SkfStepperProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-tab-group>` is a component that displays a list of actions or options.
+   * 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
    * ---
    *
    *
    * ### **Slots:**
-   *  - _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
+   *  - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.
    */
-  "skf-tab-group": Partial<SkfTabGroupProps & BaseProps & BaseEvents>;
+  "skf-switch": Partial<SkfSwitchProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tab-panel>` is a component that displays a list of actions or options.
@@ -1885,14 +1355,29 @@ export type CustomElements = {
   "skf-tab-panel": Partial<SkfTabPanelProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-tag>` 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
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The component's placeholder content
+   *  - _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-tag": Partial<SkfTagProps & BaseProps & BaseEvents>;
+  "skf-tabs": Partial<SkfTabsProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-tab>` 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
+   */
+  "skf-tab": Partial<SkfTabProps & BaseProps & BaseEvents>;
 
   /**
    * The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.
@@ -1909,33 +1394,33 @@ export type CustomElements = {
   "skf-textarea": Partial<SkfTextAreaProps & BaseProps & BaseEvents>;
 
   /**
-   * 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": Partial<SkfToastProps & BaseProps & BaseEvents>;
+  "skf-toast-wrapper": Partial<SkfToastWrapperProps & BaseProps & BaseEvents>;
 
   /**
-   * 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": Partial<SkfToastWrapperProps & BaseProps & BaseEvents>;
+  "skf-toast": Partial<SkfToastProps & BaseProps & BaseEvents>;
 
   /**
-   * 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