@skf-design-system/ui-components 0.0.1-beta.4 → 1.0.0-alpha.28

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

@@ -1,3 +1,30 @@
+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.
  *
@@ -58,986 +85,18 @@ type BaseProps = {
   translate?: "yes" | "no";
 };
 
-type BaseEvents = {};
-
-export type SkfAccordionProps = {
-  /** If true, will animate the expand/collapse state */
-  animated?: boolean | undefined;
-  /** Controls which heading element will be rendered */
-  "heading-as"?: Exclude<HeadingType, "h1">;
-  /** If provided, adds a gap between each item */
-  gap?: boolean | undefined;
-  /** 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 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?: SeverityFgColor | undefined;
-
-  /** 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 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;
-  /** 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";
-};
-
-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, hides the label visually */
-  "hide-label"?: 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;
-  /** Size of the checkbox */
-  size?: "sm" | "md";
-  /** If defined, styles checkbox using provided severity */
-  severity?: FormFieldBaseProps["severity"] | undefined;
-  /** If defined, 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 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;
-  /** Controls which heading element will be rendered */
-  "heading-as"?: Exclude<HeadingType, "h1">;
-  /** 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 SkfDividerProps = {
-  /** If provided, alters 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?: HeadingType;
-  /** If provided, changes the appearance of the heading */
-  "styled-as"?: HeadingType | undefined;
-};
-
-export type SkfIconProps = {
-  /**  */
-  color?: "primary" | "inverse" | "emphasised" | "secondary" | "success" | "info" | "warning" | "error" | "alert";
-  /** If provided, adds an alternate description to use for assistive devices */
-  label?: string | undefined;
-  /**  */
-  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?: "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;
-  /** If provided, renders a custom aria-label for the clear button **Notice!** Only applicable to type=search. */
-  "button-aria-label-clear"?: string;
-  /** If provided, renders a custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
-  "button-aria-label-hide"?: string;
-  /** If provided, renders a custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
-  "button-aria-label-show"?: string;
-  /** If provided, forces component to invalid state until removed. Its value is used as hint text. */
-  "custom-invalid"?: string;
-  /** If provided, outputs helping hints in console */
-  debug?: boolean;
-  /** If true, hides the label visually */
-  "hide-label"?: boolean;
-  /** If provided, displays informational text below the field */
-  hint?: string | undefined;
-  /** If provided, tells what keyboard to use if applicable */
-  inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
-  /** The input's label. Alternatively, you can use the `label` attribute. */
-  label?: string | undefined;
-  /** If provided, displays a prefix/adornment before the input-element */
-  leading?: string | undefined;
-  /** If provided, sets the maximum value to accept for this input */
-  max?: number | string | undefined;
-  /** If provided, sets the maximum character length to accept for this input */
-  maxlength?: number | undefined;
-  /** If provided, sets the minimum value to accept for this input */
-  min?: number | string | undefined;
-  /** If provided, sets the minimum character length to accept for this input */
-  minlength?: number | undefined;
-  /** If provided, adds name to the input-element */
-  name?: string | undefined;
-  /** If provided, adds name to the input-element */
-  pattern?: string | undefined;
-  /** If provided, 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 provided, renders an alternative A11y text for the asterisk */
-  "required-label"?: string | undefined;
-  /** If provided, displays provided severity state */
-  severity?: FormFieldBaseProps["severity"] | undefined;
-  /** If provided, displays provided severity state */
-  "show-valid"?: boolean | undefined;
-  /** If provided, displays an alternative size */
-  size?: "sm" | "md" | undefined;
-  /** If provided, displays a suffix/adornment after the input-element */
-  trailing?: string | undefined;
-  /** If provided, changes the type of form control */
-  type?: Exclude<FormFieldBaseProps["type"], "checkbox" | "radio"> | undefined;
-  /** If provided, sets validation start, "input", "change" or "submit" */
-  "validate-on"?: "input" | "change" | "submit" | undefined;
-  /** The current value of the input field */
-  value?: string;
-  /**  */
-  _numberController?: string;
-  /**  */
-  _passwordController?: 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 = {
-  /** Specifies semantic element to render - */
-  as?: "button" | "a";
-  /**  */
-  color?: "primary" | "inverse";
-  /** If true, disables the link */
-  disabled?: boolean | undefined;
-  /** If provided, downloads the url */
-  download?: string | undefined;
-  /** If provided, loads url on click */
-  href?: string | undefined;
-  /** 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";
-  /** Position of the icon in relation to the text - */
-  "icon-placement"?: "left" | "right";
-  /** Specifies the relationship of the target object to the link object - */
-  rel?: string;
-  /** If provided, used on conjunction with onClick property, second argument */
-  route?: string | undefined;
-  /** If true, fills the parents horizontal axis */
-  stretch?: boolean | undefined;
-  /** If provided, specifies where to open the linked document */
-  target?: "_blank" | "_parent" | "_self" | "_top" | undefined;
-  /** 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 = {
-  /**  */
-  "aria-label"?: string;
-  /** If true, inverts the color (to be used on colored backgrounds) */
-  invert?: boolean;
-  /** If provided, displays an alternative size */
-  size?: "md" | "sm" | undefined;
-};
-
-export type SkfLogoProps = {
-  /** The title of the logo */
-  title?: string;
-  /** If provided, sets color of the logo */
-  color?: "primary" | "secondary" | "inverse";
-};
-
-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 provided, outputs helping hints in console */
-  debug?: boolean;
-  /** 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, hides the label visually */
-  "hide-label"?: boolean;
-  /** The input's label. Alternatively, you can use the `label` attribute. */
-  label?: string | undefined;
-  /** If provided, adds name to the input-element */
-  name?: string | undefined;
-  /** If provided, renders an alternative A11y text for the asterisk */
-  "required-label"?: string | undefined;
-  /** If provided, displays an alternative size */
-  size?: "sm" | "md" | undefined;
-  /** If provided, displays provided severity state */
-  severity?: FormFieldBaseProps["severity"] | undefined;
-  /** If provided, 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 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. 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 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;
-};
-
-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 provided, sets the cols of the textarea */
-  cols?: number;
-  /** If provided, forces component to invalid state until removed. Its value is used as hint text. */
-  "custom-invalid"?: string;
-  /** If provided, outputs helping hints in console */
-  debug?: boolean;
-  /** hide-label - If true, hides the label visually */
-  "hide-label"?: boolean;
-  /** If provided, displays informational text below the field */
-  hint?: string | undefined;
-  /** The input's label. Alternatively, you can use the component slot. */
-  label?: string;
-  /** If provided, adds name to the input-element */
-  name?: string | undefined;
-  /** If provided, sets the maximum character length to accept for this input */
-  maxlength?: number | undefined;
-  /** If provided, sets the minimum character length to accept for this input */
-  minlength?: number | undefined;
-  /** If provided, 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 provided, renders an alternative A11y text for the asterisk */
-  "required-label"?: string | undefined;
-  /** If provided, sets the rows of the textarea */
-  rows?: number;
-  /** If provided, displays provided severity state */
-  severity?: "success" | "error";
-  /** If true, displays valid state after interaction */
-  "show-valid"?: boolean | undefined;
-  /** If provided, displays an alternative size */
-  size?: "sm" | "md" | undefined;
-  /** If provided, sets validation start, "input", "change" or "submit" */
-  "validate-on"?: "input" | "change" | "submit" | undefined;
-  /** 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 CustomElements = {
   /**
    * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
    *
-   * See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6256cb1b44eba592d319d92e) for design principles.
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
    * ---
    *
    *
    * ### **Slots:**
    *  - _default_ - Expects one or more <skf-accordion-item> element(s)
    */
-  "skf-accordion": Partial<SkfAccordionProps | BaseProps | BaseEvents>;
+  "skf-accordion": Partial<SkfAccordion & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-alert>` is a type of notification that appears in-line
@@ -1049,19 +108,25 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - _default_ - Alert message. **Notice!** See design principles for approved content
-   * - **link** - lodjvodjvodjo
+   * - **link** - Slot for the link
    */
-  "skf-alert": Partial<SkfAlertProps | BaseProps | BaseEvents>;
+  "skf-alert": Partial<SkfAlert & BaseProps & BaseEvents>;
 
   /**
    * Component to be used in forms or for interactivity
    * ---
    *
    *
+   * ### **Events:**
+   *  - **click** - Fires when the button is clicked
+   *
+   * ### **Methods:**
+   *  - **click()** - Simulates a click on the button.
+   *
    * ### **Slots:**
    *  - _default_ - The Primary content
    */
-  "skf-button": Partial<SkfButtonProps | BaseProps | BaseEvents>;
+  "skf-button": Partial<SkfButton & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-card>` can be used to group related subjects in a container
@@ -1071,7 +136,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The card's main content
    */
-  "skf-card": Partial<SkfCardProps | BaseProps | BaseEvents>;
+  "skf-card": Partial<SkfCard & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-checkbox>` component is used to create a checkbox input
@@ -1082,14 +147,14 @@ export type CustomElements = {
    *  - **change** - {object} - When the value of the input changes
    *
    * ### **Slots:**
-   *  - **Default** - Alternatively, you can use the `label` attribute
+   *  - _default_ - The Radios label. Alternatively, you can use the `label` attribute.
    */
-  "skf-checkbox": Partial<SkfCheckboxProps | BaseProps | BaseEvents>;
+  "skf-checkbox": Partial<SkfCheckbox & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
    *
-   * See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229e2eb8a8dacf366dc3243) for design principles.
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
    * ---
    *
    *
@@ -1103,10 +168,10 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - Main content
    */
-  "skf-collapse": Partial<SkfCollapseProps | BaseProps | BaseEvents>;
+  "skf-collapse": Partial<SkfCollapse & BaseProps & BaseEvents>;
 
   /**
-   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information.
+   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
    * ---
    *
    *
@@ -1114,22 +179,25 @@ 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<SkfDividerProps | BaseProps | BaseEvents>;
+  "skf-divider": Partial<SkfDivider & 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_ - The headings content
    */
-  "skf-heading": Partial<SkfHeadingProps | BaseProps | BaseEvents>;
+  "skf-heading": Partial<SkfHeading & 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<SkfIconProps | BaseProps | BaseEvents>;
+  "skf-icon": Partial<SkfIcon & BaseProps & BaseEvents>;
 
   /**
    * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
@@ -1141,9 +209,9 @@ export type CustomElements = {
    * - **invalid** - Fires when the input is invalid
    *
    * ### **Slots:**
-   *  - **Default** -  Alternatively, you can use the `label` attribute
+   *  - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.
    */
-  "skf-input": Partial<SkfInputProps | BaseProps | BaseEvents>;
+  "skf-input": Partial<SkfInput & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-link>` can be used as either a regular link or a link styled semantic button
@@ -1153,14 +221,14 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The links' main content
    */
-  "skf-link": Partial<SkfLinkProps | BaseProps | BaseEvents>;
+  "skf-link": Partial<SkfLink & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities.
+   * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
    * ---
    *
    */
-  "skf-loader": Partial<SkfLoaderProps | BaseProps | BaseEvents>;
+  "skf-loader": Partial<SkfLoader & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-logo>` component is used to display the SKF logo.
@@ -1170,7 +238,14 @@ export type CustomElements = {
    * ### **CSS Properties:**
    *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
    */
-  "skf-logo": Partial<SkfLogoProps | BaseProps | BaseEvents>;
+  "skf-logo": Partial<SkfLogo & 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>;
 
   /**
    * The `<skf-radio>` component is used to create a radio input
@@ -1181,19 +256,95 @@ export type CustomElements = {
    *  - **change** - {object} - When the value of the input changes
    *
    * ### **Slots:**
-   *  - **Default** -  Alternatively, you can use the `label` attribute
+   *  - _default_ - The radios label. Alternatively, you can use the `label` attribute.
    */
-  "skf-radio": Partial<SkfRadioProps | BaseProps | BaseEvents>;
+  "skf-radio": Partial<SkfRadio & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-switch>` is a component that displays a list of actions or options
+   * The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **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_ - The select's placeholder content
+   */
+  "skf-select": Partial<SkfSelect & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
+   * ---
+   *
+   *
+   * ### **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).
+   */
+  "skf-select-option": Partial<SkfSelectOption & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-select-option-group>` is a component that groups select-options
    * ---
    *
    *
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-switch": Partial<SkfSwitchProps | BaseProps | BaseEvents>;
+  "skf-select-option-group": Partial<SkfSelectOptionGroup & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-switch>` is a component that displays a list of actions or options
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.
+   */
+  "skf-switch": Partial<SkfSwitch & 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<SkfTab & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-tab-group>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **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
+   */
+  "skf-tab-group": Partial<SkfTabGroup & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-tab-panel>` is a component that displays a list of actions or options.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The tab panel's content
+   */
+  "skf-tab-panel": Partial<SkfTabPanel & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tag>` is a component that displays a list of actions or options
@@ -1203,7 +354,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-tag": Partial<SkfTagProps | BaseProps | BaseEvents>;
+  "skf-tag": Partial<SkfTag & BaseProps & BaseEvents>;
 
   /**
    * The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.
@@ -1215,7 +366,27 @@ export type CustomElements = {
    * - **invalid** - Fires when the input is invalid
    *
    * ### **Slots:**
-   *  - **The** - textareas label. Alternatively, you can use the `label` attribute.
+   *  - _default_ - The textareas label. Alternatively, you can use the `label` attribute.
+   */
+  "skf-textarea": Partial<SkfTextArea & 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.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-toast": Partial<SkfToast & 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.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The alert components that the toast creates will render here.
    */
-  "skf-textarea": Partial<SkfTextAreaProps | BaseProps | BaseEvents>;
+  "skf-toast-wrapper": Partial<SkfToastWrapper & BaseProps & BaseEvents>;
 };