@skf-design-system/ui-components 1.0.0-alpha.28 → 1.0.0-alpha.30

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

@@ -1,30 +1,3 @@
-import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
-import type { SkfAlert } from "../../components/alert/alert.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 { 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 { 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 { 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 { SkfSelectOption } from "../../components/select-option/select-option.component.js";
-import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.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 { 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";
-
 /**
  * This type can be used to create scoped tags for your components.
  *
@@ -85,6 +58,1476 @@ type BaseProps = {
   translate?: "yes" | "no";
 };
 
+type BaseEvents = {};
+
+export type SkfAccordionProps = {
+  /** If true, will animate the expand/collapse state */
+  animated?: boolean | undefined;
+  /** Defines which heading element will be rendered */
+  "heading-as"?: "h1" | "h2" | "h3" | "h4";
+  /** If true, adds a gap between each item */
+  gap?: boolean;
+  /** If true, allowes multiple accordion items to open */
+  multiple?: boolean | undefined;
+  /** If true, renders the small version */
+  small?: boolean | undefined;
+  /** If true, will truncate all headings in collapsed state */
+  truncate?: boolean | undefined;
+};
+
+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;
+  /** If defined, displays leading icon */
+  icon?: SkfIcon["name"] | undefined;
+  /** If defined, gives the supplied appearance */
+  severity?: "error" | "info" | "warning" | "success" | "alert";
+
+  /** Fires when the close button is clicked */
+  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfButtonProps = {
+  /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
+  destructive?: boolean;
+  /** If true, removes border */
+  disabled?: boolean;
+  /** 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;
+  /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
+  loading?: boolean;
+  /**  */
+  "no-validate"?: boolean;
+  /** If provided, displays an alternative size */
+  size?: "sm" | "md" | "lg";
+  /** If provided, changes the button type */
+  type?: "button" | "submit" | "reset";
+  /** If provided, alters the appearance */
+  variant?: "primary" | "secondary";
+
+  /** Fires when the button is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfCardProps = {
+  /** If true, removes border */
+  "no-border"?: boolean;
+  /** If true, removes padding */
+  "no-padding"?: boolean;
+  /** If true, the Card fills the parent element height */
+  stretch?: boolean;
+};
+
+export type SkfCheckboxProps = {
+  /** If true, sets disabled state */
+  disabled?: boolean;
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: boolean;
+  /** If defined, outputs helping hints in console */
+  debug?: boolean | undefined;
+  /** If true, outputs helping hints in console */
+  checked?: boolean | undefined;
+  /** If true, forces component to invalid state until removed */
+  "custom-invalid"?: boolean | undefined;
+  /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
+  indeterminate?: boolean | undefined;
+  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+  label?: string | undefined;
+  /** If defined, adds name to the input-element */
+  name?: string | undefined;
+  /** If defined, renders an alternative A11y text for the asterisk */
+  "required-label"?: string | undefined;
+  /** If defined, styles checkbox using provided severity */
+  severity?: "alert" | "success" | "info" | "warning";
+  /** If true, displays valid state after interaction */
+  "show-valid"?: boolean | undefined;
+  /** Size of the checkbox */
+  size?: "sm" | "md";
+  /** The current value of the input field */
+  value?: string;
+
+  /** {object} - When the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => 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;
+
+  /** Event emitted when toggled */
+  "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type SkfDialogProps = {
+  /** If defined, sets the aria-label for the close button */
+  "close-button-aria-label"?: string | undefined;
+  /** Title for the modal/dialog */
+  heading?: string | undefined;
+  /** If true, makes the dialog stretch edge to edge on screen */
+  fullscreen?: boolean;
+  /** If true, removes the close button */
+  "no-close-button"?: boolean;
+  /** 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;
+  /** 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;
+  /** Fires when the dialog is closed (after transitioned out) */
+  onclose?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfDividerProps = {
+  /** Defines the Divider color */
+  color?: "emphasised" | "primary" | "secondary" | "tertiary" | "inverse";
+  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
+  decorative?: boolean;
+  /** If true, renders the divider vertically */
+  vertical?: boolean;
+};
+
+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 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 SkfInputProps = {
+  /** If true, sets disabled state */
+  disabled?: boolean;
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: boolean;
+  /** -m  } */
+  autocomplete?: string;
+  /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
+  "button-aria-label-clear"?: string;
+  /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
+  "button-aria-label-hide"?: string;
+  /** Custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
+  "button-aria-label-show"?: string;
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+  "custom-invalid"?: string;
+  /** If true, outputs helping hints in console */
+  debug?: boolean | undefined;
+  /** If true, hides the label visually */
+  "hide-label"?: boolean | undefined;
+  /** 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";
+  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+  label?: string | undefined;
+  /** If defined, displays a prefix/adornment before the input-element */
+  leading?: string | undefined;
+  /** If defined, sets the maximum value to accept for this input */
+  max?: number | string | undefined;
+  /** If defined, sets the maximum character length to accept for this input */
+  maxlength?: number | undefined;
+  /** If defined, sets the minimum value to accept for this input */
+  min?: number | string | undefined;
+  /** If defined, sets the minimum character length to accept for this input */
+  minlength?: number | undefined;
+  /** If defined, adds name to the input-element */
+  name?: string | undefined;
+  /** If defined, adds name to the input-element */
+  pattern?: string | undefined;
+  /** If defined, displays placeholder text */
+  placeholder?: string | undefined;
+  /** If true, makes the element not mutable, meaning the user can not edit the control */
+  readonly?: boolean | undefined;
+  /** If defined, renders an alternative A11y text for the asterisk */
+  "required-label"?: string | undefined;
+  /** If defined, displays provided severity state */
+  severity?: "alert" | "success" | "info" | "warning";
+  /** If true, displays valid state after interaction */
+  "show-valid"?: boolean | undefined;
+  /** Size of the input */
+  size?: "sm" | "md";
+  /** 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";
+  /** Sets validation start */
+  "validate-on"?: "input" | "change" | "submit";
+  /** The current value of the input field */
+  value?: string;
+
+  /** Fires when the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => void;
+  /** Fires when the input is invalid */
+  oninvalid?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfLinkProps = {
+  /** Defines the semantic element to render */
+  as?: "button" | "a";
+  /** Defines the text-color */
+  color?: "primary" | "inverse";
+  /** If true, disables the link */
+  disabled?: boolean | undefined;
+  /** If defined, downloads the url */
+  download?: string | undefined;
+  /** If defined, loads url on click */
+  href?: string | undefined;
+  /** 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";
+  /** Defines the position of the icon in relation to the text */
+  "icon-placement"?: "left" | "right";
+  /** If defined, describes the relationship between a linked resource and the current document */
+  rel?: string | undefined;
+  /** If defined, used on conjunction with onClick property, second argument */
+  route?: string | undefined;
+  /** If true, fills the parents horizontal axis */
+  stretch?: boolean;
+  /** If defined, specifies where to open the linked document */
+  target?: "_blank" | "_parent" | "_self" | "_top" | undefined;
+  /** 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;
+};
+
+export type SkfMenuItemProps = {
+  /** Defines the semantic element to render */
+  as?: "button" | "a";
+  /** Defines the text-color */
+  color?: "primary" | "inverse";
+  /** If true, disables the link */
+  disabled?: boolean | undefined;
+  /** If defined, downloads the url */
+  download?: string | undefined;
+  /** If defined, loads url on click */
+  href?: string | undefined;
+  /** 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";
+  /** Defines the position of the icon in relation to the text */
+  "icon-placement"?: "left" | "right";
+  /** If defined, describes the relationship between a linked resource and the current document */
+  rel?: string | undefined;
+  /** If defined, used on conjunction with onClick property, second argument */
+  route?: string | undefined;
+  /** If true, fills the parents horizontal axis */
+  stretch?: boolean;
+  /** If defined, specifies where to open the linked document */
+  target?: "_blank" | "_parent" | "_self" | "_top" | undefined;
+  /** 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;
+};
+
+export type SkfPopoverProps = {
+  /** If defined, sets a custom offset for the popover */
+  offset?: number;
+  /** 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;
+  /** Fired when the menu is opened */
+  onopen?: (e: CustomEvent<never>) => void;
+  /** Fired when the menu is closed */
+  onclose?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfProgressProps = {
+  /** If true, the progress-bar's fill value is animated */
+  animated?: boolean;
+  /** Describes how much work the task indicated by the progress element requires */
+  max?: number;
+  /** Specifies how much of the task that has been completed */
+  value?: number;
+};
+
+export type SkfRadioProps = {
+  /** If true, sets disabled state */
+  disabled?: boolean;
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: boolean;
+  /** If true, outputs helping hints in console */
+  debug?: boolean | undefined;
+  /** If true, outputs helping hints in console */
+  checked?: boolean | undefined;
+  /** If true, forces component to invalid state until removed */
+  "custom-invalid"?: boolean | undefined;
+  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
+  label?: string | undefined;
+  /** If defined, adds name to the input-element */
+  name?: string | undefined;
+  /** If defined, renders an alternative A11y text for the asterisk */
+  "required-label"?: string | undefined;
+  /** Size of the Radio */
+  size?: "sm" | "md";
+  /** If defined, displays provided severity state */
+  severity?: "success" | "info" | "warning" | "alert";
+  /** If true, displays valid state after interaction */
+  "show-valid"?: boolean | undefined;
+  /** The current value of the input field */
+  value?: string;
+
+  /** {object} - When the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfSelectProps = {
+  /** If true, the select is disabled	`default: false` */
+  disabled?: boolean;
+  /** Sets the first visible text on the component */
+  "button-label"?: string;
+  /** If defined, forces component to invalid state until removed */
+  "custom-invalid"?: string | undefined;
+  /** If true, hides the label visually */
+  "hide-label"?: boolean | undefined;
+  /** If true and mulltiple is true, no tags are displayed under the select */
+  "hide-tags"?: boolean | undefined;
+  /** If defined, sets the hint text under the select component in the form */
+  hint?: string | undefined;
+  /** If defined, displays provided label */
+  label?: string | undefined;
+  /** If defined, limits the number of selectable options */
+  max?: number | undefined;
+  /** If defined, sets the minimum number of required options */
+  min?: number | undefined;
+  /** If true, allows for multiple options to be selected */
+  multiple?: boolean | undefined;
+  /** If defined, set name of the component */
+  name?: string | undefined;
+  /** If defined, renders an alternative A11y text for the asterisk */
+  "required-label"?: string | undefined;
+  /** If defined, displays provided severity state */
+  severity?: FormFieldBaseProps["severity"] | undefined;
+  /** If true, displays valid state after interaction */
+  "show-valid"?: boolean | undefined;
+  /** Size of the Select */
+  size?: "sm" | "md";
+  /** A readonly property that returns the selected value(s) in a array */
+  selectedValues?: string;
+  /** A readonly property that returns the selected slot(s) text content in a array */
+  selectedOptionsText?: string;
+  /** Read only, returns the selected value. (if multiple: in a comma separated string) */
+  value?: string;
+  /**  */
+  _selectedOptions?: array;
+  /** Fired when the selected option(s) changes */
+  onchange?: (e: CustomEvent<never>) => void;
+  /** Fired when the select is invalid */
+  oninvalid?: (e: CustomEvent<never>) => void;
+  /** Fired when the form is reset */
+  onreset?: (e: CustomEvent<never>) => void;
+  /** {detail: {expanded: boolean}} Fired when the select dropdown is toggled */
+  "onskf-select:dropdown"?: (e: CustomEvent<never>) => void;
+  /** {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled */
+  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfSelectOptionProps = {
+  /** If true, prevents interaction with the option */
+  disabled?: boolean | undefined;
+  /** If defined, set an icon */
+  icon?: SkfIcon["name"] | undefined;
+  /** If defined, sets provided color on the icon */
+  "icon-color"?: SeverityFgColor | undefined;
+  /** If true, sets the option as selected */
+  selected?: boolean | undefined;
+  /** If defined, sets a short label */
+  "short-label"?: string | undefined;
+  /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
+  value?: string;
+  /** The option's label text (equivalent to the tags textContent) */
+  text?: string;
+  /**  */
+  role?: string;
+  /**  */
+  _parent?: string;
+  /**  */
+  _shortcutUpdate?: boolean;
+  /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
+  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfSelectOptionGroupProps = {
+  /**  */
+  label?: string;
+};
+
+export type SkfStepperProps = {
+  /** Sets the active item */
+  activeIndex?: number;
+  /** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
+  linear?: boolean;
+
+  /** 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;
+};
+
+export type SkfSwitchProps = {
+  /** If true, sets disabled state */
+  disabled?: boolean;
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: boolean;
+  /** If true, outputs helping hints in console */
+  debug?: boolean | undefined;
+  /** If true, outputs helping hints in console */
+  checked?: boolean | undefined;
+  /** If true, hides the label visually */
+  "hide-label"?: boolean | undefined;
+  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
+  label?: string | undefined;
+  /** If defined, adds name to the input-element */
+  name?: string | undefined;
+  /** If defined, renders an alternative A11y text for the asterisk */
+  "required-label"?: string | undefined;
+  /** Size of the Switch */
+  size?: "sm" | "md";
+  /** The current value of the input field */
+  value?: 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?: string;
+  /**  */
+  selected?: boolean;
+  /**  */
+  variant?: SkfTabGroup["variant"];
+  /**  */
+  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;
+};
+
+export type SkfTabGroupProps = {
+  /** Sets the default selected tab */
+  "default-selected"?: number;
+  /** If true, removes border */
+  "no-border"?: boolean;
+  /** If true, removes padding */
+  "no-padding"?: boolean;
+  /** If true, component fills the parent element height */
+  stretch?: boolean;
+  /** Sets the appearance of the tabs */
+  variant?: "compressed" | "expanded";
+};
+
+export type SkfTabPanelProps = {
+  /** The tab panel's name. */
+  name?: string;
+  /**  */
+  active?: boolean;
+  /**  */
+  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;
+};
+
+export type SkfTextAreaProps = {
+  /** If true, sets disabled state */
+  disabled?: boolean;
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: boolean;
+  /** If defined, sets the cols of the textarea */
+  cols?: number | undefined;
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+  "custom-invalid"?: string;
+  /** If true, outputs helping hints in console */
+  debug?: boolean | undefined;
+  /** If true, hides the label visually */
+  "hide-label"?: boolean | undefined;
+  /** If defined, displays informational text below the field */
+  hint?: string | undefined;
+  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
+  label?: string | undefined;
+  /** If defined, adds name to the input-element */
+  name?: string | undefined;
+  /** If defined, sets the maximum character length to accept for this input */
+  maxlength?: number | undefined;
+  /** If defined, sets the minimum character length to accept for this input */
+  minlength?: number | undefined;
+  /** If defined, displays placeholder text */
+  placeholder?: string | undefined;
+  /** If true, makes the element not mutable, meaning the user can not edit the control */
+  readonly?: boolean | undefined;
+  /** If defined, renders an alternative A11y text for the asterisk */
+  "required-label"?: string | undefined;
+  /** If defined, sets the rows of the textarea */
+  rows?: number | undefined;
+  /** If defined, displays provided severity state */
+  severity?: "success" | "info" | "warning" | "alert";
+  /** If true, displays valid state after interaction */
+  "show-valid"?: boolean | undefined;
+  /** Size of the Textarea */
+  size?: "sm" | "md" | undefined;
+  /** Sets validation start */
+  "validate-on"?: "input" | "change" | "submit";
+  /** The current value of the text area */
+  value?: string;
+
+  /** Fires when the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => void;
+  /** Fires when the input is invalid */
+  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;
+  /**  */
+  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;
+};
+
+export type SkfToastWrapperProps = {
+  /**  */
+  debug?: boolean;
+};
+
+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;
+  /** The id of the element the dropdown will be anchored to */
+  anchor?: string;
+  /** Fired when the dropdown is opened */
+  onopen?: (e: CustomEvent<never>) => void;
+  /** Fired when the dropdown is closed */
+  onclose?: (e: CustomEvent<never>) => void;
+};
+
 export type CustomElements = {
   /**
    * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
@@ -96,7 +1539,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - Expects one or more <skf-accordion-item> element(s)
    */
-  "skf-accordion": Partial<SkfAccordion & BaseProps & BaseEvents>;
+  "skf-accordion": Partial<SkfAccordionProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-alert>` is a type of notification that appears in-line
@@ -110,7 +1553,7 @@ export type CustomElements = {
    *  - _default_ - Alert message. **Notice!** See design principles for approved content
    * - **link** - Slot for the link
    */
-  "skf-alert": Partial<SkfAlert & BaseProps & BaseEvents>;
+  "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
 
   /**
    * Component to be used in forms or for interactivity
@@ -126,7 +1569,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The Primary content
    */
-  "skf-button": Partial<SkfButton & BaseProps & BaseEvents>;
+  "skf-button": Partial<SkfButtonProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-card>` can be used to group related subjects in a container
@@ -136,7 +1579,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The card's main content
    */
-  "skf-card": Partial<SkfCard & BaseProps & BaseEvents>;
+  "skf-card": Partial<SkfCardProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-checkbox>` component is used to create a checkbox input
@@ -149,7 +1592,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The Radios label. Alternatively, you can use the `label` attribute.
    */
-  "skf-checkbox": Partial<SkfCheckbox & BaseProps & BaseEvents>;
+  "skf-checkbox": Partial<SkfCheckboxProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
@@ -168,7 +1611,28 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - Main content
    */
-  "skf-collapse": Partial<SkfCollapse & BaseProps & BaseEvents>;
+  "skf-collapse": Partial<SkfCollapseProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-dialog>` is a component that open up a dialog with the content provided
+   * ---
+   *
+   *
+   * ### **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)
+   *
+   * ### **Slots:**
+   *  - _default_ - The dialog component's content
+   * - **heading** - The dialog component's heading
+   * - **footer** - The dialog component's buttons goes here
+   *
+   * ### **CSS Properties:**
+   *  - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_
+   * - **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_
+   */
+  "skf-dialog": Partial<SkfDialogProps & BaseProps & BaseEvents>;
 
   /**
    * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
@@ -179,7 +1643,7 @@ export type CustomElements = {
    *  - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_
    * - **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_
    */
-  "skf-divider": Partial<SkfDivider & BaseProps & BaseEvents>;
+  "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>
@@ -190,14 +1654,14 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The headings content
    */
-  "skf-heading": Partial<SkfHeading & BaseProps & BaseEvents>;
+  "skf-heading": Partial<SkfHeadingProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
    * ---
    *
    */
-  "skf-icon": Partial<SkfIcon & BaseProps & BaseEvents>;
+  "skf-icon": Partial<SkfIconProps & BaseProps & BaseEvents>;
 
   /**
    * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
@@ -211,7 +1675,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.
    */
-  "skf-input": Partial<SkfInput & BaseProps & BaseEvents>;
+  "skf-input": Partial<SkfInputProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-link>` can be used as either a regular link or a link styled semantic button
@@ -221,14 +1685,14 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The links' main content
    */
-  "skf-link": Partial<SkfLink & BaseProps & BaseEvents>;
+  "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<SkfLoader & BaseProps & BaseEvents>;
+  "skf-loader": Partial<SkfLoaderProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-logo>` component is used to display the SKF logo.
@@ -238,14 +1702,62 @@ export type CustomElements = {
    * ### **CSS Properties:**
    *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
    */
-  "skf-logo": Partial<SkfLogo & BaseProps & BaseEvents>;
+  "skf-logo": Partial<SkfLogoProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-menu>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **open** - Fired when the menu is opened
+   * - **close** - Fired when the menu is closed
+   *
+   * ### **Slots:**
+   *  - _default_ - The menu popover content
+   */
+  "skf-menu": Partial<SkfMenuProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-menu-item>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **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>;
+
+  /**
+   * The `<skf-popover>` is a general purpose component that displays the slot content.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **open** - Fired when the menu is opened
+   * - **close** - Fired when the menu is closed
+   *
+   * ### **Slots:**
+   *  - _default_ - The popover content
+   */
+  "skf-popover": Partial<SkfPopoverProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
    * ---
    *
    */
-  "skf-progress": Partial<SkfProgress & BaseProps & BaseEvents>;
+  "skf-progress": Partial<SkfProgressProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-radio>` component is used to create a radio input
@@ -258,7 +1770,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The radios label. Alternatively, you can use the `label` attribute.
    */
-  "skf-radio": Partial<SkfRadio & BaseProps & BaseEvents>;
+  "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.
@@ -275,7 +1787,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The select's placeholder content
    */
-  "skf-select": Partial<SkfSelect & BaseProps & BaseEvents>;
+  "skf-select": Partial<SkfSelectProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
@@ -289,7 +1801,7 @@ export type CustomElements = {
    *  - _default_ - The option's text content
    * - **icon** - The option's slot for icon or custom meta information (svg).
    */
-  "skf-select-option": Partial<SkfSelectOption & BaseProps & BaseEvents>;
+  "skf-select-option": Partial<SkfSelectOptionProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-select-option-group>` is a component that groups select-options
@@ -299,7 +1811,33 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-select-option-group": Partial<SkfSelectOptionGroup & BaseProps & BaseEvents>;
+  "skf-select-option-group": Partial<SkfSelectOptionGroupProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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": Partial<SkfStepperProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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_ - Label of the stepper item
+   */
+  "skf-stepper-item": Partial<SkfStepperItemProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-switch>` is a component that displays a list of actions or options
@@ -309,7 +1847,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.
    */
-  "skf-switch": Partial<SkfSwitch & BaseProps & BaseEvents>;
+  "skf-switch": Partial<SkfSwitchProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tab>` is a component that displays a list of actions or options
@@ -323,7 +1861,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The tab's label
    */
-  "skf-tab": Partial<SkfTab & BaseProps & BaseEvents>;
+  "skf-tab": Partial<SkfTabProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tab-group>` is a component that displays a list of actions or options.
@@ -334,7 +1872,7 @@ export type CustomElements = {
    *  - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements
    * - **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements
    */
-  "skf-tab-group": Partial<SkfTabGroup & BaseProps & BaseEvents>;
+  "skf-tab-group": Partial<SkfTabGroupProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tab-panel>` is a component that displays a list of actions or options.
@@ -344,7 +1882,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The tab panel's content
    */
-  "skf-tab-panel": Partial<SkfTabPanel & BaseProps & BaseEvents>;
+  "skf-tab-panel": Partial<SkfTabPanelProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tag>` is a component that displays a list of actions or options
@@ -354,7 +1892,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-tag": Partial<SkfTag & BaseProps & BaseEvents>;
+  "skf-tag": Partial<SkfTagProps & BaseProps & BaseEvents>;
 
   /**
    * The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.
@@ -368,7 +1906,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The textareas label. Alternatively, you can use the `label` attribute.
    */
-  "skf-textarea": Partial<SkfTextArea & BaseProps & BaseEvents>;
+  "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.
@@ -378,7 +1916,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-toast": Partial<SkfToast & BaseProps & BaseEvents>;
+  "skf-toast": Partial<SkfToastProps & 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.
@@ -388,5 +1926,19 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The alert components that the toast creates will render here.
    */
-  "skf-toast-wrapper": Partial<SkfToastWrapper & BaseProps & BaseEvents>;
+  "skf-toast-wrapper": Partial<SkfToastWrapperProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-tooltip>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **open** - Fired when the dropdown is opened
+   * - **close** - Fired when the dropdown is closed
+   *
+   * ### **Slots:**
+   *  - _default_ - The tooltip popover content
+   */
+  "skf-tooltip": Partial<SkfTooltipProps & BaseProps & BaseEvents>;
 };