@skf-design-system/ui-components 0.0.1-beta.1

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

@@ -0,0 +1,1221 @@
+/**
+ * This type can be used to create scoped tags for your components.
+ *
+ * Usage:
+ *
+ * ```ts
+ * import type { ScopedElements } from "path/to/library/jsx-integration";
+ *
+ * declare module "my-library" {
+ *   namespace JSX {
+ *     interface IntrinsicElements
+ *       extends ScopedElements<'test-', ''> {}
+ *   }
+ * }
+ * ```
+ *
+ */
+export type ScopedElements<Prefix extends string = "", Suffix extends string = ""> = {
+  [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
+};
+
+type BaseProps = {
+  /** Content added between the opening and closing tags of the element */
+  children?: any;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  class?: string;
+  /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
+  className?: string;
+  /** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
+  classList?: Record<string, boolean | undefined>;
+  /** Specifies the text direction of the element. */
+  dir?: "ltr" | "rtl";
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+  /** For <label> and <output>, lets you associate the label with some control. */
+  htmlFor?: string;
+  /** Specifies whether the element should be hidden. */
+  hidden?: boolean | string;
+  /** A unique identifier for the element. */
+  id?: string;
+  /** Keys tell React which array item each component corresponds to */
+  key?: string | number;
+  /** Specifies the language of the element. */
+  lang?: string;
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+  /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
+  ref?: unknown | ((e: unknown) => void);
+  /** Adds a reference for a custom element slot */
+  slot?: string;
+  /** Prop for setting inline styles */
+  style?: Record<string, string | number>;
+  /** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
+  tabIndex?: number;
+  /** Specifies the tooltip text for the element. */
+  title?: string;
+  /** Passing 'no' excludes the element content from being translated. */
+  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.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Expects one or more <skf-accordion-item> element(s)
+   */
+  "skf-accordion": Partial<SkfAccordionProps | BaseProps | BaseEvents>;
+
+  /**
+   * The `<skf-alert>` is a type of notification that appears in-line
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-alert-close** - Fires when the close button is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - Alert message. **Notice!** See design principles for approved content
+   * - **link** - lodjvodjvodjo
+   */
+  "skf-alert": Partial<SkfAlertProps | BaseProps | BaseEvents>;
+
+  /**
+   * Component to be used in forms or for interactivity
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The Primary content
+   */
+  "skf-button": Partial<SkfButtonProps | BaseProps | BaseEvents>;
+
+  /**
+   * The `<skf-card>` can be used to group related subjects in a container
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The card's main content
+   */
+  "skf-card": Partial<SkfCardProps | BaseProps | BaseEvents>;
+
+  /**
+   * The `<skf-checkbox>` component is used to create a checkbox input
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **change** - {object} - When the value of the input changes
+   *
+   * ### **Slots:**
+   *  - **Default** - Alternatively, you can use the `label` attribute
+   */
+  "skf-checkbox": Partial<SkfCheckboxProps | 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.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-collapse-toggle** - Event emitted when toggled
+   *
+   * ### **Methods:**
+   *  - **setClose()** - Class method as alternative to manipulate attribute
+   * - **setOpen()** - Class method as alternative to manipulate attribute
+   *
+   * ### **Slots:**
+   *  - _default_ - Main content
+   */
+  "skf-collapse": Partial<SkfCollapseProps | BaseProps | BaseEvents>;
+
+  /**
+   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--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>;
+
+  /**
+   * 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.
+   * ---
+   *
+   */
+  "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<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.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **change** - Fires when the value of the input changes
+   * - **invalid** - Fires when the input is invalid
+   *
+   * ### **Slots:**
+   *  - **Default** -  Alternatively, you can use the `label` attribute
+   */
+  "skf-input": Partial<SkfInputProps | BaseProps | BaseEvents>;
+
+  /**
+   * The `<skf-link>` can be used as either a regular link or a link styled semantic button
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The links' main content
+   */
+  "skf-link": Partial<SkfLinkProps | BaseProps | BaseEvents>;
+
+  /**
+   * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities.
+   * ---
+   *
+   */
+  "skf-loader": Partial<SkfLoaderProps | BaseProps | BaseEvents>;
+
+  /**
+   * The `<skf-logo>` component is used to display the SKF logo.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
+   */
+  "skf-logo": Partial<SkfLogoProps | BaseProps | BaseEvents>;
+
+  /**
+   * The `<skf-radio>` component is used to create a radio input
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **change** - {object} - When the value of the input changes
+   *
+   * ### **Slots:**
+   *  - **Default** -  Alternatively, you can use the `label` attribute
+   */
+  "skf-radio": Partial<SkfRadioProps | BaseProps | BaseEvents>;
+
+  /**
+   * The `<skf-switch>` is a component that displays a list of actions or options
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-switch": Partial<SkfSwitchProps | BaseProps | BaseEvents>;
+
+  /**
+   * The `<skf-tag>` is a component that displays a list of actions or options
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-tag": Partial<SkfTagProps | BaseProps | BaseEvents>;
+
+  /**
+   * The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **change** - Fires when the value of the input changes
+   * - **invalid** - Fires when the input is invalid
+   *
+   * ### **Slots:**
+   *  - **The** - textareas label. Alternatively, you can use the `label` attribute.
+   */
+  "skf-textarea": Partial<SkfTextAreaProps | BaseProps | BaseEvents>;
+};