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

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

@@ -1,5 +1,6 @@
+
 import type { SkfIcon } from "../../components/icon/icon.component.js";
-import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js";
+import type { SkfAccordionItem } from "../../components/accordion-item/accordion-item.component.js";
 import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
 import type { SkfAlert } from "../../components/alert/alert.component.js";
 import type { SkfBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
@@ -8,37 +9,35 @@ import type { SkfLoader } from "../../components/loader/loader.component.js";
 import type { SkfButton } from "../../components/button/button.component.js";
 import type { SkfCard } from "../../components/card/card.component.js";
 import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
-import type { SkfDatePicker } from "../../components/datepicker/datepicker.component.js";
+import type { SkfDatepickerCalendar } from "../../components/datepicker-calendar/datepicker-calendar.component.js";
+import type { SkfDatepicker } from "../../components/datepicker/datepicker.component.js";
 import type { SkfHeading } from "../../components/heading/heading.component.js";
 import type { SkfDialog } from "../../components/dialog/dialog.component.js";
 import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfDrawer } from "../../components/drawer/drawer.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
+import type { SkfLink } from "../../components/link/link.component.js";
+import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SkfNav } from "../../components/nav/nav.component.js";
 import type { SkfHeader } from "../../components/header/header.component.js";
 import type { SkfInput } from "../../components/input/input.component.js";
-import type { SkfLink } from "../../components/link/link.component.js";
+import type { SkfMenuItem } from "../../components/menu-item/menu-item.component.js";
 import type { SkfMenu } from "../../components/menu/menu.component.js";
-import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
-import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SkfPopover } from "../../components/popover/popover.component.js";
 import type { SkfProgress } from "../../components/progress/progress.component.js";
 import type { SkfRadio } from "../../components/radio/radio.component.js";
-import type {
-  SkfSegmentedButtonItem,
-  CustomEvent,
-} from "../../components/segmented-button-item/segmented-button-item.component.js";
+import type { SkfSegmentedButtonItem } from "../../components/segmented-button-item/segmented-button-item.component.js";
 import type { SkfSegmentedButton } from "../../components/segmented-button/segmented-button.component.js";
-import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
+import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js";
 import type { SkfTag } from "../../components/tag/tag.component.js";
 import type { SkfSelect } from "../../components/select/select.component.js";
-import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js";
+import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
 import type { SkfStepperItem } from "../../components/stepper-item/stepper-item.component.js";
 import type { SkfStepper } from "../../components/stepper/stepper.component.js";
 import type { SkfSwitch } from "../../components/switch/switch.component.js";
 import type { SkfTabPanel } from "../../components/tab-panel/tab-panel.component.js";
-import type { SkfTabGroup } from "../../components/tab-group/tab-group.component.js";
-import type { SkfTab, CustomEvent } from "../../components/tab/tab.component.js";
+import type { SkfTabs } from "../../components/tabs/tabs.component.js";
+import type { SkfTab } from "../../components/tab/tab.component.js";
 import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
 import type { SkfToastWrapper } from "../../components/toast-wrapper/toast-wrapper.component.js";
 import type { SkfToast } from "../../components/toast/toast.component.js";
@@ -46,12 +45,12 @@ import type { SkfTooltip } from "../../components/tooltip/tooltip.component.js";
 
 /**
  * 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
@@ -59,13 +58,18 @@ import type { SkfTooltip } from "../../components/tooltip/tooltip.component.js";
  *   }
  * }
  * ```
- *
+ * 
+ * @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
  */
-export type ScopedElements<Prefix extends string = "", Suffix extends string = ""> = {
+export type ScopedElements<
+  Prefix extends string = "",
+  Suffix extends string = ""
+> = {
   [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
 };
 
-type BaseProps = {
+type BaseProps<T extends HTMLElement> = {
+
   /** 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) */
@@ -91,7 +95,7 @@ type BaseProps = {
   /** 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);
+  ref?: T | ((e: T) => void);
   /** Adds a reference for a custom element slot */
   slot?: string;
   /** Prop for setting inline styles */
@@ -102,1307 +106,2407 @@ type BaseProps = {
   title?: string;
   /** Passing 'no' excludes the element content from being translated. */
   translate?: "yes" | "no";
+  /** The popover global attribute is used to designate an element as a popover element. */
+  popover?: "auto" | "hint" | "manual";
+  /** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
+  popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
+  /** Specifies the action to be performed on a popover element being controlled by a control element. */
+  popovertargetaction?: "show" | "hide" | "toggle";
+
+} ;
+
+type BaseEvents = {
+
+  // Mouse Events
+
+  /** Triggered when the element is clicked by the user by mouse or keyboard. */
+  onClick?: (event: MouseEvent) => void;
+  /** Fired when the context menu is triggered, often by right-clicking. */
+  onContextMenu?: (event: MouseEvent) => void;
+  /** Fired when the element is double-clicked. */
+  onDoubleClick?: (event: MouseEvent) => void;
+  /** Fired repeatedly as the draggable element is being dragged. */
+  onDrag?: (event: DragEvent) => void;
+  /** Fired when the dragging of a draggable element is finished. */
+  onDragEnd?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection enters a valid drop target. */
+  onDragEnter?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragExit?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragLeave?: (event: DragEvent) => void;
+  /** Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds). */
+  onDragOver?: (event: DragEvent) => void;
+  /** Fired when a draggable element starts being dragged. */
+  onDragStart?: (event: DragEvent) => void;
+  /** Fired when a dragged element is dropped onto a drop target. */
+  onDrop?: (event: DragEvent) => void;
+  /** Fired when a mouse button is pressed down on the element. */
+  onMouseDown?: (event: MouseEvent) => void;
+  /** Fired when the mouse cursor enters the element. */
+  onMouseEnter?: (event: MouseEvent) => void;
+  /** Triggered when the mouse cursor leaves the element. */
+  onMouseLeave?: (event: MouseEvent) => void;
+  /** Fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it. */
+  onMouseMove?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. */
+  onMouseOut?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements. */
+  onMouseOver?: (event: MouseEvent) => void;
+  /** Fired when a mouse button is released on the element. */
+  onMouseUp?: (event: MouseEvent) => void;
+
+  // Keyboard Events
+
+  /** Fired when a key is pressed down. */
+  onKeyDown?: (event: KeyboardEvent) => void;
+  /** Fired when a key is released.. */
+  onKeyUp?: (event: KeyboardEvent) => void;
+  /** Fired when a key is pressed down. */
+  onKeyPressed?: (event: KeyboardEvent) => void;
+
+  // Focus Events
+
+  /** Fired when the element receives focus, often triggered by tab navigation. */
+  onFocus?: (event: FocusEvent) => void;
+  /** Fired when the element loses focus. */
+  onBlur?: (event: FocusEvent) => void;
+
+  // Form Events
+
+  /** Fired when the value of an input element changes, such as with text inputs or select elements. */
+  onChange?: (event: Event) => void;
+  /** Fires when the value of an <input>, <select>, or <textarea> element has been changed. */
+  onInput?: (event: Event) => void;
+  /** Fired when a form is submitted, usually on pressing Enter in a text input. */
+  onSubmit?: (event: Event) => void;
+  /** Fired when a form is reset. */
+  onReset?: (event: Event) => void;
+
+  // UI Events
+
+  /** Fired when the content of an element is scrolled. */
+  onScroll?: (event: UIEvent) => void;
+
+  // Wheel Events
+
+  /** Fired when the mouse wheel is scrolled while the element is focused. */
+  onWheel?: (event: WheelEvent) => void;
+
+  // Animation Events
+
+  /** Fired when a CSS animation starts. */
+  onAnimationStart?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes. */
+  onAnimationEnd?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes one iteration. */
+  onAnimationIteration?: (event: AnimationEvent) => void;
+
+  // Transition Events
+
+  /** Fired when a CSS transition has completed. */
+  onTransitionEnd?: (event: TransitionEvent) => void;
+
+  // Media Events
+
+  /** Fired when an element (usually an image) finishes loading */
+  onLoad?: (event: Event) => void;
+  /** Fired when an error occurs during the loading of an element, like an image not being found. */
+  onError?: (event: Event) => void;
+
+  // Clipboard Events
+
+  /** Fires when the user initiates a copy action through the browser's user interface. */
+  onCopy?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "cut" action through the browser's user interface. */
+  onCut?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "paste" action through the browser's user interface. */
+  onPaste?: (event: ClipboardEvent) => void;
+
+true
 };
 
-type BaseEvents = {};
+
 
 export type SkfIconProps = {
   /** Sets the color of the icon */
-  color?: SkfIcon["color"];
+  "color"?: SkfIcon['color'];
   /** If defined, adds an alternate description to use for assistive devices */
-  label?: SkfIcon["label"];
+  "label"?: SkfIcon['label'];
   /** Name of the icon to display */
-  name?: SkfIcon["name"];
+  "name"?: SkfIcon['name'];
   /** Size of the icon */
-  size?: SkfIcon["size"];
-};
+  "size"?: SkfIcon['size'];
 
-export type SkfCollapseProps = {
-  /** If true, will animate the expand/collapse state */
-  animated?: SkfCollapse["animated"];
-  /** If true, will set the collapse to be expanded by default */
-  expanded?: SkfCollapse["expanded"];
-  /** Heading for the collapse */
-  heading?: SkfCollapse["heading"];
+
+}
+
+
+export type SkfAccordionItemProps = {
+  /** If true, will animate the expand/accordion-item state */
+  "animated"?: SkfAccordionItem['animated'];
+  /** If true, will set the accordion-item to be expanded by default */
+  "expanded"?: SkfAccordionItem['expanded'];
+  /** Heading for the accordion-item */
+  "heading"?: SkfAccordionItem['heading'];
+  /** Defines which heading element will be rendered */
+  "heading-as"?: SkfAccordionItem['headingAs'];
   /** Defines which heading element will be rendered */
-  "heading-as"?: SkfCollapse["headingAs"];
+  "headingAs"?: SkfAccordionItem['headingAs'];
   /** If true, renders the small version */
-  small?: SkfCollapse["small"];
-  /** If true, will truncate the heading in collapsed state */
-  truncate?: SkfCollapse["truncate"];
+  "small"?: SkfAccordionItem['small'];
+  /** If true, will truncate the heading in accordion-item state */
+  "truncate"?: SkfAccordionItem['truncate'];
 
   /** Event emitted when toggled */
-  "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
-};
+  "onskf-accordion-item-toggle"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
 
 export type SkfAccordionProps = {
   /** If true, will animate the expand/collapse state */
-  animated?: SkfAccordion["animated"];
+  "animated"?: SkfAccordion['animated'];
+  /** Defines which heading element will be rendered */
+  "heading-as"?: SkfAccordion['headingAs'];
   /** Defines which heading element will be rendered */
-  "heading-as"?: SkfAccordion["headingAs"];
+  "headingAs"?: SkfAccordion['headingAs'];
   /** If true, adds a gap between each item */
-  gap?: SkfAccordion["gap"];
+  "gap"?: SkfAccordion['gap'];
   /** If true, allowes multiple accordion items to open */
-  multiple?: SkfAccordion["multiple"];
+  "multiple"?: SkfAccordion['multiple'];
   /** If true, renders the small version */
-  small?: SkfAccordion["small"];
+  "small"?: SkfAccordion['small'];
   /** If true, will truncate all headings in collapsed state */
-  truncate?: SkfAccordion["truncate"];
-};
+  "truncate"?: SkfAccordion['truncate'];
+
+
+}
+
 
 export type SkfAlertProps = {
-  /** Close button aria-label */
-  "button-label"?: SkfAlert["buttonLabel"];
   /** If defined, displays leading icon */
-  icon?: SkfAlert["icon"];
+  "icon"?: SkfAlert['icon'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfAlert['lang'];
   /** If true, renders with an close button and sets aria-role to `status` */
-  persistent?: SkfAlert["persistent"];
+  "persistent"?: SkfAlert['persistent'];
   /** If defined, gives the supplied appearance */
-  severity?: SkfAlert["severity"];
+  "severity"?: SkfAlert['severity'];
 
   /** Fires when the close button is clicked */
-  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
-};
+  "onskf-alert-close"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
 
 export type SkfBreadcrumbItemProps = {
   /** If defined, loads url on click */
-  href?: SkfBreadcrumbItem["href"];
+  "href"?: SkfBreadcrumbItem['href'];
   /** If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. */
-  onClick?: SkfBreadcrumbItem["onClick"];
-};
+  "onClick"?: SkfBreadcrumbItem['onClick'];
+
+
+}
+
 
 export type SkfBreadcrumbProps = {
   /** aria-label for the breadcrumb control */
-  label?: SkfBreadcrumb["label"];
-  /** Displays an alternative size */
-  size?: SkfBreadcrumb["size"];
+  "label"?: SkfBreadcrumb['label'];
+  /** If true, renders a smaller version */
+  "small"?: SkfBreadcrumb['small'];
 
   /** Fired when the item is clicked */
-  onclick?: (e: CustomEvent<never>) => void;
-};
+  "onclick"?: (e: CustomEvent<never>) => void;
+}
+
 
 export type SkfLoaderProps = {
-  /** Defines the aria-label */
-  "aria-label"?: SkfLoader["ariaLabel"];
   /** If true, inverts the color (to be used on colored backgrounds) */
-  invert?: SkfLoader["invert"];
+  "invert"?: SkfLoader['invert'];
   /** Defines the size of the loader */
-  size?: SkfLoader["size"];
-  /**  */
-  role?: SkfLoader["role"];
-  /**  */
-  ariaLive?: SkfLoader["ariaLive"];
-};
+  "size"?: SkfLoader['size'];
+
+
+}
+
 
 export type SkfButtonProps = {
   /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
-  destructive?: SkfButton["destructive"];
+  "destructive"?: SkfButton['destructive'];
   /** If true, removes border */
-  disabled?: SkfButton["disabled"];
+  "disabled"?: SkfButton['disabled'];
   /** If provided, renders an icon before or after the text */
-  icon?: SkfButton["icon"];
-  /** If true, removes border */
-  iconOnly?: SkfButton["iconOnly"];
+  "icon"?: SkfButton['icon'];
+  /** If true, button will take a square shape */
+  "icon-only"?: SkfButton['iconOnly'];
+  /** If true, button will take a square shape */
+  "iconOnly"?: SkfButton['iconOnly'];
   /** Determines the positioning of the icon in relation to the text */
-  "icon-position"?: SkfButton["iconPosition"];
+  "icon-position"?: SkfButton['iconPosition'];
+  /** Determines the positioning of the icon in relation to the text */
+  "iconPosition"?: SkfButton['iconPosition'];
   /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
-  loading?: SkfButton["loading"];
+  "loading"?: SkfButton['loading'];
+  /**  */
+  "no-validate"?: SkfButton['noValidate'];
   /**  */
-  "no-validate"?: SkfButton["noValidate"];
+  "noValidate"?: SkfButton['noValidate'];
   /** If provided, displays an alternative size */
-  size?: SkfButton["size"];
+  "size"?: SkfButton['size'];
   /** If provided, changes the button type */
-  type?: SkfButton["type"];
+  "type"?: SkfButton['type'];
   /** If provided, alters the appearance */
-  variant?: SkfButton["variant"];
+  "variant"?: SkfButton['variant'];
 
   /** Fires when the button is clicked */
-  onclick?: (e: CustomEvent<never>) => void;
-};
+  "onclick"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
 
 export type SkfCardProps = {
   /** If true, removes border */
-  "no-border"?: SkfCard["noBorder"];
+  "no-border"?: SkfCard['noBorder'];
+  /** If true, removes border */
+  "noBorder"?: SkfCard['noBorder'];
   /** If true, removes padding */
-  "no-padding"?: SkfCard["noPadding"];
+  "no-padding"?: SkfCard['noPadding'];
+  /** If true, removes padding */
+  "noPadding"?: SkfCard['noPadding'];
   /** If true, the Card fills the parent element height */
-  stretch?: SkfCard["stretch"];
-};
+  "stretch"?: SkfCard['stretch'];
+
+
+}
+
 
 export type SkfCheckboxProps = {
   /** If true, sets disabled state */
-  disabled?: SkfCheckbox["undefined"];
+  "disabled"?: unknown;
+  /** If true, sets disabled state */
+  "undefined"?: unknown;
   /** If true, value is required or must be checked for the form to be submittable */
-  required?: SkfCheckbox["undefined"];
+  "required"?: unknown;
   /** If defined, outputs helping hints in console */
-  debug?: SkfCheckbox["debug"];
+  "debug"?: SkfCheckbox['debug'];
   /** If true, outputs helping hints in console */
-  checked?: SkfCheckbox["checked"];
+  "checked"?: SkfCheckbox['checked'];
   /** If true, forces component to invalid state until removed */
-  "custom-invalid"?: SkfCheckbox["customInvalid"];
+  "custom-invalid"?: SkfCheckbox['customInvalid'];
+  /** If true, forces component to invalid state until removed */
+  "customInvalid"?: SkfCheckbox['customInvalid'];
   /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
-  indeterminate?: SkfCheckbox["indeterminate"];
+  "indeterminate"?: SkfCheckbox['indeterminate'];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
-  label?: SkfCheckbox["label"];
+  "label"?: SkfCheckbox['label'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfCheckbox['lang'];
   /** If defined, adds name to the input-element */
-  name?: SkfCheckbox["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfCheckbox["requiredLabel"];
+  "name"?: SkfCheckbox['name'];
   /** If defined, styles checkbox using provided severity */
-  severity?: SkfCheckbox["severity"];
+  "severity"?: SkfCheckbox['severity'];
+  /** If true, displays valid state after interaction */
+  "show-valid"?: SkfCheckbox['showValid'];
   /** If true, displays valid state after interaction */
-  "show-valid"?: SkfCheckbox["showValid"];
+  "showValid"?: SkfCheckbox['showValid'];
   /** Size of the checkbox */
-  size?: SkfCheckbox["size"];
+  "size"?: SkfCheckbox['size'];
   /** The current value of the input field */
-  value?: SkfCheckbox["value"];
+  "value"?: SkfCheckbox['value'];
 
-  /** {object} - When the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
-};
+  /** When the value of the input changes */
+  "onchange"?: (e: CustomEvent<Event>) => void;
+}
 
-export type SkfDatePickerProps = {
-  /** The locale to use for formatting the date */
-  locale?: SkfDatePicker["locale"];
-  /** The date to display in the date picker */
-  date?: SkfDatePicker["date"];
+
+export type SkfDatepickerCalendarProps = {
+  /**  */
+  "eventid"?: SkfDatepickerCalendar['eventid'];
   /**  */
-  id?: SkfDatePicker["id"];
+  "firstDayOfWeek"?: SkfDatepickerCalendar['firstDayOfWeek'];
   /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
-  "invalid-dates"?: SkfDatePicker["invalidDates"];
-  /** If true, the date picker will allow the selection of a range of dates */
-  range?: SkfDatePicker["range"];
+  "invalid-dates"?: SkfDatepickerCalendar['invalidDates'];
+  /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
+  "invalidDates"?: SkfDatepickerCalendar['invalidDates'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfDatepickerCalendar['lang'];
+  /**  */
+  "locale"?: SkfDatepickerCalendar['locale'];
+  /**  */
+  "range"?: SkfDatepickerCalendar['range'];
   /** Earliest selectable date. (yyyy-mm-dd format) */
-  "selectable-from"?: SkfDatePicker["selectableFrom"];
+  "selectable-from"?: SkfDatepickerCalendar['selectableFrom'];
+  /** Earliest selectable date. (yyyy-mm-dd format) */
+  "selectableFrom"?: SkfDatepickerCalendar['selectableFrom'];
+  /** Latest selectable date. (yyyy-mm-dd format) */
+  "selectable-to"?: SkfDatepickerCalendar['selectableTo'];
   /** Latest selectable date. (yyyy-mm-dd format) */
-  "selectable-to"?: SkfDatePicker["selectableTo"];
+  "selectableTo"?: SkfDatepickerCalendar['selectableTo'];
   /**  */
-  selectedDate?: SkfDatePicker["selectedDate"];
+  "selected-date"?: SkfDatepickerCalendar['selectedDate'];
   /**  */
-  selectedDateRange?: SkfDatePicker["selectedDateRange"];
-  /** When a date is selected */
-  "onselected-date-changed"?: (e: CustomEvent<never>) => void;
-  /** When a range of dates is selected */
-  "onselected-date-range-changed"?: (e: CustomEvent<never>) => void;
-};
+  "selectedDate"?: SkfDatepickerCalendar['selectedDate'];
+  /**  */
+  "selectedDateRange"?: SkfDatepickerCalendar['selectedDateRange'];
+  /**  */
+  "_listenToKeyboard"?: SkfDatepickerCalendar['_listenToKeyboard'];
+  /**  */
+  "_handleKeyDown"?: SkfDatepickerCalendar['_handleKeyDown'];
+  /**  */
+  "dateSelectable"?: SkfDatepickerCalendar['dateSelectable'];
+
+
+}
+
+
+export type SkfDatepickerProps = {
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+  "custom-invalid"?: SkfDatepicker['customInvalid'];
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+  "customInvalid"?: SkfDatepicker['customInvalid'];
+  /**  */
+  "id"?: SkfDatepicker['id'];
+  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+  "label"?: SkfDatepicker['label'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfDatepicker['lang'];
+  /** If true, hides the label visually */
+  "hide-label"?: SkfDatepicker['hideLabel'];
+  /** If true, hides the label visually */
+  "hideLabel"?: SkfDatepicker['hideLabel'];
+  /** If defined, displays informational text below the field */
+  "hint"?: SkfDatepicker['hint'];
+  /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
+  "invalid-dates"?: SkfDatepicker['invalidDates'];
+  /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
+  "invalidDates"?: SkfDatepicker['invalidDates'];
+  /** If defined, adds name to the input-element */
+  "name"?: SkfDatepicker['name'];
+  /**  */
+  "placeholder"?: SkfDatepicker['placeholder'];
+  /**  */
+  "range"?: SkfDatepicker['range'];
+  /** If true, makes the element not mutable, meaning the user can not edit the control */
+  "readonly"?: SkfDatepicker['readonly'];
+  /** Earliest selectable date. (yyyy-mm-dd format) */
+  "selectable-from"?: SkfDatepicker['selectableFrom'];
+  /** Earliest selectable date. (yyyy-mm-dd format) */
+  "selectableFrom"?: SkfDatepicker['selectableFrom'];
+  /** Latest selectable date. (yyyy-mm-dd format) */
+  "selectable-to"?: SkfDatepicker['selectableTo'];
+  /** Latest selectable date. (yyyy-mm-dd format) */
+  "selectableTo"?: SkfDatepicker['selectableTo'];
+  /** If defined, displays provided severity state */
+  "severity"?: SkfDatepicker['severity'];
+  /** Size of the input */
+  "size"?: SkfDatepicker['size'];
+  /** Sets validation start */
+  "validate-on"?: SkfDatepicker['validateOn'];
+  /** Sets validation start */
+  "validateOn"?: SkfDatepicker['validateOn'];
+  /** The current value of the input field */
+  "value"?: SkfDatepicker['value'];
+  /**  */
+  "focusTimeoutId"?: SkfDatepicker['focusTimeoutId'];
+
+
+}
+
 
 export type SkfHeadingProps = {
   /** Controls which heading element will be rendered. Should not be used to affect appearance */
-  as?: SkfHeading["as"];
+  "as"?: SkfHeading['as'];
   /** If defined, changes the appearance of the heading */
-  "styled-as"?: SkfHeading["styledAs"];
-};
+  "styled-as"?: SkfHeading['styledAs'];
+  /** If defined, changes the appearance of the heading */
+  "styledAs"?: SkfHeading['styledAs'];
+
+
+}
+
 
 export type SkfDialogProps = {
-  /** If defined, sets the aria-label for the close button */
-  "close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
   /** Title for the modal/dialog */
-  heading?: SkfDialog["heading"];
+  "heading"?: SkfDialog['heading'];
   /** If true, makes the dialog stretch edge to edge on screen */
-  fullscreen?: SkfDialog["fullscreen"];
+  "fullscreen"?: SkfDialog['fullscreen'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfDialog['lang'];
+  /** If true, removes the close button */
+  "no-close-button"?: SkfDialog['noCloseButton'];
   /** If true, removes the close button */
-  "no-close-button"?: SkfDialog["noCloseButton"];
+  "noCloseButton"?: SkfDialog['noCloseButton'];
+  /** If defined, removes the inner padding */
+  "no-padding"?: SkfDialog['noPadding'];
   /** If defined, removes the inner padding */
-  "no-padding"?: SkfDialog["noPadding"];
+  "noPadding"?: SkfDialog['noPadding'];
   /** If true, indicates that the dialog is active and is available for interaction */
-  open?: SkfDialog["open"];
+  "open"?: SkfDialog['open'];
 
   /** Fires when the dialog is opened (after transitioned in) */
-  "onskf-dialog-opened"?: (e: CustomEvent<never>) => void;
-  /** Fires when the dialog is closed (before transitioned out) */
-  "onskf-dialog-closing"?: (e: CustomEvent<never>) => void;
+  "onskf-dialog-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the dialog is closing (before transitioned out) */
+  "onskf-dialog-closing"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the dialog is closed (after transitioned out) */
-  "onskf-dialog-closed"?: (e: CustomEvent<never>) => void;
-};
+  "onskf-dialog-closed"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
 
 export type SkfDividerProps = {
   /** Defines the Divider color */
-  color?: SkfDivider["color"];
+  "color"?: SkfDivider['color'];
   /** If true, renders a div for presentational purpose instead of the semantic hr-element */
-  decorative?: SkfDivider["decorative"];
+  "decorative"?: SkfDivider['decorative'];
   /** If true, renders the divider vertically */
-  vertical?: SkfDivider["vertical"];
-};
+  "vertical"?: SkfDivider['vertical'];
+
+
+}
+
 
 export type SkfDrawerProps = {
-  /** If defined, sets the aria-label for the close button */
-  "close-button-aria-label"?: SkfDrawer["closeButtonAriaLabel"];
   /** Heading for the Drawer */
-  heading?: SkfDrawer["heading"];
+  "heading"?: SkfDrawer['heading'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfDrawer['lang'];
   /** Sets the max-width */
-  size?: SkfDrawer["size"];
+  "size"?: SkfDrawer['size'];
   /** If true, Drawer is open */
-  open?: SkfDrawer["open"];
+  "open"?: SkfDrawer['open'];
   /** Placement of the Drawer */
-  placement?: SkfDrawer["placement"];
-  /**  */
-  _clickstartInDialog?: SkfDrawer["_clickstartInDialog"];
-  /**  */
-  _handleMouseDown?: SkfDrawer["_handleMouseDown"];
-  /**  */
-  _handleMouseUp?: SkfDrawer["_handleMouseUp"];
+  "placement"?: SkfDrawer['placement'];
+
   /** Fires when the drawer is opened (after transitioned in) */
-  "onskf-drawer-opened"?: (e: CustomEvent<never>) => void;
-  /** Fires when the drawer is closed (before transitioned out) */
-  "onskf-drawer-closing"?: (e: CustomEvent<never>) => void;
+  "onskf-drawer-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the drawer is closing (before transitioned out) */
+  "onskf-drawer-closing"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the drawer is closed (after transitioned out) */
-  "onskf-drawer-closed"?: (e: CustomEvent<never>) => void;
-};
+  "onskf-drawer-closed"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
 
 export type SkfLogoProps = {
   /** Defines the title of the logo */
-  title?: SkfLogo["title"];
+  "title"?: SkfLogo['title'];
   /** Defines the color of the logo */
-  color?: SkfLogo["color"];
-};
+  "color"?: SkfLogo['color'];
 
-export type SkfNavProps = {
+
+}
+
+
+export type SkfLinkProps = {
+  /** Defines the semantic element to render */
+  "as"?: SkfLink['as'];
+  /** Defines the text-color */
+  "color"?: SkfLink['color'];
+  /** If true, disables the link */
+  "disabled"?: SkfLink['disabled'];
+  /** If defined, downloads the url */
+  "download"?: SkfLink['download'];
+  /** If defined, loads url on click */
+  "href"?: SkfLink['href'];
+  /** If defined, renders an icon before or after the text */
+  "icon"?: SkfLink['icon'];
+  /** If true, the icon is placed to the right in relation to the text */
+  "icon-right"?: SkfLink['iconRight'];
+  /** If true, the icon is placed to the right in relation to the text */
+  "iconRight"?: SkfLink['iconRight'];
+  /** If defined, describes the relationship between a linked resource and the current document */
+  "rel"?: SkfLink['rel'];
+  /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
+  "route"?: SkfLink['route'];
+  /** If true, fills the parents horizontal axis */
+  "stretch"?: SkfLink['stretch'];
+  /** If defined, specifies where to open the linked document */
+  "target"?: SkfLink['target'];
+
+  /** Fired when the link is clicked */
+  "onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+
+export type SkfNavItemProps = {
   /**  */
-  vertical?: SkfNav["vertical"];
-};
+  "href"?: SkfNavItem['href'];
+  /**  */
+  "icon"?: SkfNavItem['icon'];
+  /**  */
+  "vertical"?: SkfNavItem['vertical'];
+
+
+}
+
+
+export type SkfNavProps = {
+  /** Sets the internal language of the component */
+  "lang"?: SkfNav['lang'];
+  /** If true, the navigation will be displayed vertically */
+  "vertical"?: SkfNav['vertical'];
+
+
+}
+
 
 export type SkfHeaderProps = {
   /** If true, sets header to display in compact mode only (hanburger menu and drawer) */
-  compact?: SkfHeader["compact"];
-  /** If defined, sets the aria-label for the hamburger button */
-  "hamburger-aria-label"?: SkfHeader["hamburgerAriaLabel"];
+  "compact"?: SkfHeader['compact'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfHeader['lang'];
+  /** If defined, sets the app or site's name */
+  "site-name"?: SkfHeader['siteName'];
   /** If defined, sets the app or site's name */
-  "site-name"?: SkfHeader["siteName"];
+  "siteName"?: SkfHeader['siteName'];
   /** If defined, sets the site's base-url for the "logo-link" */
-  "site-url"?: SkfHeader["siteUrl"];
-};
+  "site-url"?: SkfHeader['siteUrl'];
+  /** If defined, sets the site's base-url for the "logo-link" */
+  "siteUrl"?: SkfHeader['siteUrl'];
+
+
+}
+
 
 export type SkfInputProps = {
   /** If true, sets disabled state */
-  disabled?: SkfInput["undefined"];
+  "disabled"?: unknown;
+  /** If true, sets disabled state */
+  "undefined"?: unknown;
   /** If true, value is required or must be checked for the form to be submittable */
-  required?: SkfInput["undefined"];
-  /** Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
-[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. */
-  autocomplete?: SkfInput["autocomplete"];
-  /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
-  "button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
-  /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
-  "button-aria-label-hide"?: SkfInput["buttonAriaLabelHide"];
-  /** Custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
-  "button-aria-label-show"?: SkfInput["buttonAriaLabelShow"];
+  "required"?: unknown;
+  /** Indicates whether the value of the control can be automatically completed by the browser. See
+[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. */
+  "autocomplete"?: SkfInput['autocomplete'];
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+  "custom-invalid"?: SkfInput['customInvalid'];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
-  "custom-invalid"?: SkfInput["customInvalid"];
+  "customInvalid"?: SkfInput['customInvalid'];
   /** If true, outputs helping hints in console */
-  debug?: SkfInput["debug"];
+  "debug"?: SkfInput['debug'];
   /** If true, hides the label visually */
-  "hide-label"?: SkfInput["hideLabel"];
+  "hide-label"?: SkfInput['hideLabel'];
+  /** If true, hides the label visually */
+  "hideLabel"?: SkfInput['hideLabel'];
   /** If defined, displays informational text below the field */
-  hint?: SkfInput["hint"];
-  /** Tells what keyboard to use if applicable */
-  inputmode?: SkfInput["inputmode"];
+  "hint"?: SkfInput['hint'];
+  /** Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See
+[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details. */
+  "inputmode"?: SkfInput['inputmode'];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
-  label?: SkfInput["label"];
+  "label"?: SkfInput['label'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfInput['lang'];
   /** If defined, displays a prefix/adornment before the input-element */
-  leading?: SkfInput["leading"];
+  "leading"?: SkfInput['leading'];
   /** If defined, sets the maximum value to accept for this input */
-  max?: SkfInput["max"];
+  "max"?: SkfInput['max'];
+  /** If defined, sets the maximum character length to accept for this input */
+  "maxlength"?: SkfInput['maxLength'];
   /** If defined, sets the maximum character length to accept for this input */
-  maxlength?: SkfInput["maxLength"];
+  "maxLength"?: SkfInput['maxLength'];
   /** If defined, sets the minimum value to accept for this input */
-  min?: SkfInput["min"];
+  "min"?: SkfInput['min'];
   /** If defined, sets the minimum character length to accept for this input */
-  minlength?: SkfInput["minLength"];
+  "minlength"?: SkfInput['minLength'];
+  /** If defined, sets the minimum character length to accept for this input */
+  "minLength"?: SkfInput['minLength'];
   /** If defined, adds name to the input-element */
-  name?: SkfInput["name"];
+  "name"?: SkfInput['name'];
   /** If defined, adds name to the input-element */
-  pattern?: SkfInput["pattern"];
+  "pattern"?: SkfInput['pattern'];
   /** If defined, displays placeholder text */
-  placeholder?: SkfInput["placeholder"];
+  "placeholder"?: SkfInput['placeholder'];
   /** If true, makes the element not mutable, meaning the user can not edit the control */
-  readonly?: SkfInput["readonly"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfInput["requiredLabel"];
+  "readonly"?: SkfInput['readonly'];
   /** If defined, displays provided severity state */
-  severity?: SkfInput["severity"];
+  "severity"?: SkfInput['severity'];
+  /** If true, displays valid state after interaction */
+  "show-valid"?: SkfInput['showValid'];
   /** If true, displays valid state after interaction */
-  "show-valid"?: SkfInput["showValid"];
+  "showValid"?: SkfInput['showValid'];
   /** Size of the input */
-  size?: SkfInput["size"];
+  "size"?: SkfInput['size'];
   /** If defined, displays a suffix/adornment after the input-element */
-  trailing?: SkfInput["trailing"];
-  /** Type of input control */
-  type?: SkfInput["type"];
+  "trailing"?: SkfInput['trailing'];
+  /** Type of input */
+  "type"?: SkfInput['type'];
+  /** Sets validation start */
+  "validate-on"?: SkfInput['validateOn'];
   /** Sets validation start */
-  "validate-on"?: SkfInput["validateOn"];
+  "validateOn"?: SkfInput['validateOn'];
   /** The current value of the input field */
-  value?: SkfInput["value"];
+  "value"?: SkfInput['value'];
 
   /** Fires when the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  "onchange"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the input is invalid */
-  oninvalid?: (e: CustomEvent<never>) => void;
-};
+  "oninvalid"?: (e: CustomEvent<CustomEvent>) => void;
+}
 
-export type SkfLinkProps = {
+
+export type SkfMenuItemProps = {
   /** Defines the semantic element to render */
-  as?: SkfLink["as"];
+  "as"?: SkfMenuItem['as'];
   /** Defines the text-color */
-  color?: SkfLink["color"];
+  "color"?: SkfMenuItem['color'];
   /** If true, disables the link */
-  disabled?: SkfLink["disabled"];
+  "disabled"?: SkfMenuItem['disabled'];
   /** If defined, downloads the url */
-  download?: SkfLink["download"];
+  "download"?: SkfMenuItem['download'];
   /** If defined, loads url on click */
-  href?: SkfLink["href"];
+  "href"?: SkfMenuItem['href'];
   /** If defined, renders an icon before or after the text */
-  icon?: SkfLink["icon"];
-  /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: SkfLink["iconPlacement"];
+  "icon"?: SkfMenuItem['icon'];
+  /** If true, the icon is placed to the right in relation to the text */
+  "icon-right"?: SkfMenuItem['iconRight'];
+  /** If true, the icon is placed to the right in relation to the text */
+  "iconRight"?: SkfMenuItem['iconRight'];
   /** If defined, describes the relationship between a linked resource and the current document */
-  rel?: SkfLink["rel"];
-  /** If defined, used on conjunction with onClick property, second argument */
-  route?: SkfLink["route"];
+  "rel"?: SkfMenuItem['rel'];
+  /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
+  "route"?: SkfMenuItem['route'];
   /** If true, fills the parents horizontal axis */
-  stretch?: SkfLink["stretch"];
+  "stretch"?: SkfMenuItem['stretch'];
   /** If defined, specifies where to open the linked document */
-  target?: SkfLink["target"];
-  /** Defines the type of button */
-  type?: SkfLink["type"];
-  /** If provided, custom function triggered by click where the second return parameter enables custom routing. */
-  onClick?: SkfLink["onClick"];
-};
+  "target"?: SkfMenuItem['target'];
+
+  /** Fired when the link is clicked */
+  "onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
 
 export type SkfMenuProps = {
   /** The placement of the menu */
-  placement?: SkfMenu["undefined"];
+  "placement"?: unknown;
+  /** The placement of the menu */
+  "undefined"?: unknown;
   /** The id of the element the menu will be anchored to */
-  anchor?: SkfMenu["undefined"];
-  /**  */
-  placement?: SkfMenu["placement"];
-  /**  */
-  triggerEvent?: SkfMenu["triggerEvent"];
+  "anchor"?: unknown;
+  /** Method that opens the menu */
+  "open()"?: SkfMenu['open()'];
+  /** Method that closes the menu */
+  "close()"?: SkfMenu['close()'];
+
   /** Fired when the menu is opened */
-  "onskf-opened"?: (e: CustomEvent<never>) => void;
+  "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fired when the menu is closed */
-  "onskf-closed"?: (e: CustomEvent<never>) => void;
-};
+  "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
+}
 
-export type SkfMenuItemProps = {
-  /** Defines the semantic element to render */
-  as?: SkfMenuItem["as"];
-  /** Defines the text-color */
-  color?: SkfMenuItem["color"];
-  /** If true, disables the link */
-  disabled?: SkfMenuItem["disabled"];
-  /** If defined, downloads the url */
-  download?: SkfMenuItem["download"];
-  /** If defined, loads url on click */
-  href?: SkfMenuItem["href"];
-  /** If defined, renders an icon before or after the text */
-  icon?: SkfMenuItem["icon"];
-  /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: SkfMenuItem["iconPlacement"];
-  /** If defined, describes the relationship between a linked resource and the current document */
-  rel?: SkfMenuItem["rel"];
-  /** If defined, used on conjunction with onClick property, second argument */
-  route?: SkfMenuItem["route"];
-  /** If true, fills the parents horizontal axis */
-  stretch?: SkfMenuItem["stretch"];
-  /** If defined, specifies where to open the linked document */
-  target?: SkfMenuItem["target"];
-  /** Defines the type of button */
-  type?: SkfMenuItem["type"];
-  /** If provided, custom function triggered by click where the second return parameter enables custom routing. */
-  onClick?: SkfMenuItem["onClick"];
-  /** 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 SkfNavItemProps = {
-  /**  */
-  href?: SkfNavItem["href"];
-  /**  */
-  icon?: SkfNavItem["icon"];
-};
 
 export type SkfPopoverProps = {
-  /** The placement of the menu */
-  placement?: SkfPopover["undefined"];
-  /** The id of the element the menu will be anchored to */
-  anchor?: SkfPopover["undefined"];
+  /** The placement of the popover */
+  "placement"?: unknown;
+  /** The placement of the popover */
+  "undefined"?: unknown;
+  /** The id of the element the popover will be anchored to */
+  "anchor"?: unknown;
   /** If defined, sets a custom offset for the popover */
-  offset?: SkfPopover["offset"];
+  "offset"?: SkfPopover['offset'];
   /** If true, hides the arrow */
-  hideArrow?: SkfPopover["hideArrow"];
-  /**  */
-  arrow?: SkfPopover["arrow"];
-  /**  */
-  placement?: SkfPopover["placement"];
-  /**  */
-  triggerEvent?: SkfPopover["triggerEvent"];
-  /** Fired when the menu is opened */
-  "onskf-opened"?: (e: CustomEvent<never>) => void;
-  /** Fired when the menu is closed */
-  "onskf-closed"?: (e: CustomEvent<never>) => void;
-};
+  "hideArrow"?: SkfPopover['hideArrow'];
+  /** Method that opens the popover */
+  "open()"?: SkfPopover['open()'];
+  /** Method that closes the popover */
+  "close()"?: SkfPopover['close()'];
+
+  /** Fired when the popover is opened */
+  "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when the popover is closed */
+  "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
 
 export type SkfProgressProps = {
   /** If true, the progress-bar's fill value is animated */
-  animated?: SkfProgress["animated"];
+  "animated"?: SkfProgress['animated'];
   /** Describes how much work the task indicated by the progress element requires */
-  max?: SkfProgress["max"];
+  "max"?: SkfProgress['max'];
   /** Specifies how much of the task that has been completed */
-  value?: SkfProgress["value"];
-};
+  "value"?: SkfProgress['value'];
+
+
+}
+
 
 export type SkfRadioProps = {
   /** If true, sets disabled state */
-  disabled?: SkfRadio["undefined"];
+  "disabled"?: unknown;
+  /** If true, sets disabled state */
+  "undefined"?: unknown;
   /** If true, value is required or must be checked for the form to be submittable */
-  required?: SkfRadio["undefined"];
+  "required"?: unknown;
   /** If true, outputs helping hints in console */
-  debug?: SkfRadio["debug"];
+  "debug"?: SkfRadio['debug'];
   /** If true, outputs helping hints in console */
-  checked?: SkfRadio["checked"];
+  "checked"?: SkfRadio['checked'];
+  /** If true, forces component to invalid state until removed */
+  "custom-invalid"?: SkfRadio['customInvalid'];
   /** If true, forces component to invalid state until removed */
-  "custom-invalid"?: SkfRadio["customInvalid"];
+  "customInvalid"?: SkfRadio['customInvalid'];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
-  label?: SkfRadio["label"];
+  "label"?: SkfRadio['label'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfRadio['lang'];
   /** If defined, adds name to the input-element */
-  name?: SkfRadio["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfRadio["requiredLabel"];
+  "name"?: SkfRadio['name'];
   /** Size of the Radio */
-  size?: SkfRadio["size"];
+  "size"?: SkfRadio['size'];
   /** If defined, displays provided severity state */
-  severity?: SkfRadio["severity"];
+  "severity"?: SkfRadio['severity'];
+  /** If true, displays valid state after interaction */
+  "show-valid"?: SkfRadio['showValid'];
   /** If true, displays valid state after interaction */
-  "show-valid"?: SkfRadio["showValid"];
+  "showValid"?: SkfRadio['showValid'];
   /** The current value of the input field */
-  value?: SkfRadio["value"];
+  "value"?: SkfRadio['value'];
+
+  /** When the value of the input changes */
+  "onchange"?: (e: CustomEvent<Event>) => void;
+}
 
-  /** {object} - When the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
-};
 
 export type SkfSegmentedButtonItemProps = {
   /** If true, items is marked as disabled */
-  disabled?: SkfSegmentedButtonItem["disabled"];
+  "disabled"?: SkfSegmentedButtonItem['disabled'];
+  /** If true, items is marked as selected */
+  "selected"?: SkfSegmentedButtonItem['selected'];
   /** Sets the item value */
-  value?: SkfSegmentedButtonItem["value"];
+  "value"?: SkfSegmentedButtonItem['value'];
+
+  /** Fired when selected */
+  "onskf-segmented-button-item-select"?: (e: CustomEvent<CustomEvent>) => void;
+}
 
-  /** Fired when something happens */
-  "onmy-tag-my-event"?: (e: CustomEvent<CustomEvent>) => void;
-};
 
 export type SkfSegmentedButtonProps = {
-  /** Sets the default selected control */
-  "default-selected"?: SkfSegmentedButton["defaultSelected"];
   /** If true, allowes multiple items to be selected */
-  multiple?: SkfSegmentedButton["multiple"];
-};
+  "multiple"?: SkfSegmentedButton['multiple'];
 
-export type SkfSelectOptionProps = {
-  /** If true, prevents interaction with the option */
-  disabled?: SkfSelectOption["disabled"];
-  /** If defined, set an icon */
-  icon?: SkfSelectOption["icon"];
-  /** If defined, sets provided color on the icon */
-  "icon-color"?: SkfSelectOption["iconColor"];
-  /** If true, sets the option as selected */
-  selected?: SkfSelectOption["selected"];
-  /** If defined, sets a short label */
-  "short-label"?: SkfSelectOption["shortLabel"];
-  /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
-  value?: SkfSelectOption["value"];
-  /** The option's label text (equivalent to the tags textContent) */
-  text?: SkfSelectOption["text"];
-  /**  */
-  role?: SkfSelectOption["role"];
+
+}
+
+
+export type SkfSelectOptionGroupProps = {
   /**  */
-  _parent?: SkfSelectOption["_parent"];
+  "label"?: SkfSelectOptionGroup['label'];
   /**  */
-  _shortcutUpdate?: SkfSelectOption["_shortcutUpdate"];
-  /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
-  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
-};
+  "small"?: SkfSelectOptionGroup['small'];
+
+
+}
+
 
 export type SkfTagProps = {
   /** Specifies Tag size */
-  size?: SkfTag["size"];
+  "size"?: SkfTag['size'];
   /** If defined, displays leading/provided icon */
-  icon?: SkfTag["icon"];
+  "icon"?: SkfTag['icon'];
   /** If defined, gives the supplied appearance */
-  color?: SkfTag["color"];
+  "color"?: SkfTag['color'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfTag['lang'];
   /** If true, adds trailing button to remove tag */
-  removable?: SkfTag["removable"];
+  "removable"?: SkfTag['removable'];
   /** If defined, accepts a function that runs on click */
-  onClick?: SkfTag["onClick"];
+  "onClick"?: SkfTag['onClick'];
   /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
-  onRemove?: SkfTag["onRemove"];
-};
+  "onRemove"?: SkfTag['onRemove'];
+
+
+}
+
 
 export type SkfSelectProps = {
-  /** If true, the select is disabled	`default: false` */
-  disabled?: SkfSelect["undefined"];
+  /** If true, the select is disabled */
+  "disabled"?: unknown;
+  /** If true, the select is disabled */
+  "undefined"?: unknown;
+  /** If true, the select is required */
+  "required"?: unknown;
+  /** Sets the first visible text on the component */
+  "button-label"?: SkfSelect['buttonLabel'];
   /** Sets the first visible text on the component */
-  "button-label"?: SkfSelect["buttonLabel"];
+  "buttonLabel"?: SkfSelect['buttonLabel'];
   /** If defined, forces component to invalid state until removed */
-  "custom-invalid"?: SkfSelect["customInvalid"];
+  "custom-invalid"?: SkfSelect['customInvalid'];
+  /** If defined, forces component to invalid state until removed */
+  "customInvalid"?: SkfSelect['customInvalid'];
+  /** If true, hides the label visually */
+  "hide-label"?: SkfSelect['hideLabel'];
   /** If true, hides the label visually */
-  "hide-label"?: SkfSelect["hideLabel"];
+  "hideLabel"?: SkfSelect['hideLabel'];
+  /** If true and mulltiple is true, no tags are displayed under the select */
+  "hide-tags"?: SkfSelect['hideTags'];
   /** If true and mulltiple is true, no tags are displayed under the select */
-  "hide-tags"?: SkfSelect["hideTags"];
+  "hideTags"?: SkfSelect['hideTags'];
   /** If defined, sets the hint text under the select component in the form */
-  hint?: SkfSelect["hint"];
+  "hint"?: SkfSelect['hint'];
   /** If defined, displays provided label */
-  label?: SkfSelect["label"];
+  "label"?: SkfSelect['label'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfSelect['lang'];
   /** If defined, limits the number of selectable options */
-  max?: SkfSelect["max"];
+  "max"?: SkfSelect['max'];
   /** If defined, sets the minimum number of required options */
-  min?: SkfSelect["min"];
+  "min"?: SkfSelect['min'];
   /** If true, allows for multiple options to be selected */
-  multiple?: SkfSelect["multiple"];
+  "multiple"?: SkfSelect['multiple'];
   /** If defined, set name of the component */
-  name?: SkfSelect["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfSelect["requiredLabel"];
+  "name"?: SkfSelect['name'];
   /** If defined, displays provided severity state */
-  severity?: SkfSelect["severity"];
+  "severity"?: SkfSelect['severity'];
   /** If true, displays valid state after interaction */
-  "show-valid"?: SkfSelect["showValid"];
+  "show-valid"?: SkfSelect['showValid'];
+  /** If true, displays valid state after interaction */
+  "showValid"?: SkfSelect['showValid'];
   /** Size of the Select */
-  size?: SkfSelect["size"];
+  "size"?: SkfSelect['size'];
   /** A readonly property that returns the selected value(s) in a array */
-  selectedValues?: SkfSelect["selectedValues"];
+  "selectedValues"?: SkfSelect['selectedValues'];
   /** A readonly property that returns the selected slot(s) text content in a array */
-  selectedOptionsText?: SkfSelect["selectedOptionsText"];
-  /** Read only, returns the selected value. (if multiple: in a comma separated string) */
-  value?: SkfSelect["value"];
+  "selectedOptionsText"?: SkfSelect['selectedOptionsText'];
+  /** Returns the selected value. (if multiple: in a comma separated string). If set will default set corresponding option. */
+  "value"?: SkfSelect['value'];
   /**  */
-  _selectedOptions?: SkfSelect["_selectedOptions"];
+  "_selectedOptions"?: SkfSelect['_selectedOptions'];
+
   /** Fired when the selected option(s) changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  "onchange"?: (e: CustomEvent<Event>) => void;
   /** Fired when the select is invalid */
-  oninvalid?: (e: CustomEvent<never>) => void;
+  "oninvalid"?: (e: CustomEvent<Event>) => void;
   /** Fired when the form is reset */
-  onreset?: (e: CustomEvent<never>) => void;
+  "onreset"?: (e: CustomEvent<Event>) => void;
   /** {detail: {expanded: boolean}} Fired when the select dropdown is toggled */
-  "onskf-select:dropdown"?: (e: CustomEvent<never>) => void;
+  "onskf-select-dropdown"?: (e: CustomEvent<CustomEvent>) => void;
   /** {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled */
-  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
-};
+  "onskf-select-option-select"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the select options are connected, useful for setting selected option(s) via value property. E.g mySkfSelect.value = 'option1,option2'; */
+  "onskf-select-connected"?: (e: CustomEvent<CustomEvent>) => void;
+}
 
-export type SkfSelectOptionGroupProps = {
+
+export type SkfSelectOptionProps = {
+  /** If true, prevents interaction with the option */
+  "disabled"?: SkfSelectOption['disabled'];
+  /** If defined, set an icon */
+  "icon"?: SkfSelectOption['icon'];
+  /** If defined, sets provided color on the icon */
+  "icon-color"?: SkfSelectOption['iconColor'];
+  /** If defined, sets provided color on the icon */
+  "iconColor"?: SkfSelectOption['iconColor'];
+  /** If true, sets the option as selected */
+  "selected"?: SkfSelectOption['selected'];
+  /** If defined, sets a short label */
+  "short-label"?: SkfSelectOption['shortLabel'];
+  /** If defined, sets a short label */
+  "shortLabel"?: SkfSelectOption['shortLabel'];
+  /** Returns or sets the option value. If value is omitted, defaults to the tags slotted text. */
+  "value"?: SkfSelectOption['value'];
+  /** The option's label text (equivalent to the tags textContent) */
+  "text"?: SkfSelectOption['text'];
   /**  */
-  label?: SkfSelectOptionGroup["label"];
-};
+  "small"?: SkfSelectOption['small'];
+  /**  */
+  "_shortcutUpdate"?: SkfSelectOption['_shortcutUpdate'];
+
+  /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
+  "onskf-select-option-select"?: (e: CustomEvent<never>) => void;
+}
+
 
 export type SkfStepperItemProps = {
   /** If defined, gives the supplied appearance */
-  state?: SkfStepperItem["state"];
+  "state"?: SkfStepperItem['state'];
   /** If true, item marked as completed */
-  completed?: SkfStepperItem["completed"];
+  "completed"?: SkfStepperItem['completed'];
   /**  */
-  _setInternalState?: SkfStepperItem["_setInternalState"];
-  /**  */
-  role?: SkfStepperItem["role"];
+  "_setInternalState"?: SkfStepperItem['_setInternalState'];
+
   /** Dispatched when the stepper item is selected */
   "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
-};
+}
+
 
 export type SkfStepperProps = {
   /** Sets the active item */
-  activeIndex?: SkfStepper["activeIndex"];
+  "active-index"?: SkfStepper['activeIndex'];
+  /** Sets the active item */
+  "activeIndex"?: SkfStepper['activeIndex'];
   /** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
-  linear?: SkfStepper["linear"];
+  "linear"?: SkfStepper['linear'];
 
   /** Dispatched when the stepper item is selected */
-  "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
-};
+  "onskf-stepper-item-select"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
 
 export type SkfSwitchProps = {
   /** If true, sets disabled state */
-  disabled?: SkfSwitch["undefined"];
+  "disabled"?: unknown;
+  /** If true, sets disabled state */
+  "undefined"?: unknown;
   /** If true, value is required or must be checked for the form to be submittable */
-  required?: SkfSwitch["undefined"];
+  "required"?: unknown;
   /** If true, outputs helping hints in console */
-  debug?: SkfSwitch["debug"];
+  "debug"?: SkfSwitch['debug'];
   /** If true, outputs helping hints in console */
-  checked?: SkfSwitch["checked"];
+  "checked"?: SkfSwitch['checked'];
+  /** If true, hides the label visually */
+  "hide-label"?: SkfSwitch['hideLabel'];
   /** If true, hides the label visually */
-  "hide-label"?: SkfSwitch["hideLabel"];
+  "hideLabel"?: SkfSwitch['hideLabel'];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
-  label?: SkfSwitch["label"];
+  "label"?: SkfSwitch['label'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfSwitch['lang'];
   /** If defined, adds name to the input-element */
-  name?: SkfSwitch["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfSwitch["requiredLabel"];
+  "name"?: SkfSwitch['name'];
   /** Size of the Switch */
-  size?: SkfSwitch["size"];
+  "size"?: SkfSwitch['size'];
   /** The current value of the input field */
-  value?: SkfSwitch["value"];
-};
+  "value"?: SkfSwitch['value'];
+
+
+}
+
 
 export type SkfTabPanelProps = {
   /** The tab panel's name. */
-  name?: SkfTabPanel["name"];
-  /**  */
-  active?: SkfTabPanel["active"];
+  "name"?: SkfTabPanel['name'];
   /**  */
-  role?: SkfTabPanel["role"];
-};
+  "active"?: SkfTabPanel['active'];
 
-export type SkfTabGroupProps = {
+
+}
+
+
+export type SkfTabsProps = {
   /** Sets the default selected tab */
-  "default-selected"?: SkfTabGroup["defaultSelected"];
+  "default-selected"?: SkfTabs['defaultSelected'];
+  /** Sets the default selected tab */
+  "defaultSelected"?: SkfTabs['defaultSelected'];
+  /** If true, removes border */
+  "no-border"?: SkfTabs['noBorder'];
   /** If true, removes border */
-  "no-border"?: SkfTabGroup["noBorder"];
+  "noBorder"?: SkfTabs['noBorder'];
   /** If true, removes padding */
-  "no-padding"?: SkfTabGroup["noPadding"];
+  "no-padding"?: SkfTabs['noPadding'];
+  /** If true, removes padding */
+  "noPadding"?: SkfTabs['noPadding'];
   /** If true, component fills the parent element height */
-  stretch?: SkfTabGroup["stretch"];
+  "stretch"?: SkfTabs['stretch'];
   /** Sets the appearance of the tabs */
-  variant?: SkfTabGroup["variant"];
-};
+  "variant"?: SkfTabs['variant'];
+
+
+}
+
 
 export type SkfTabProps = {
   /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
-  panel?: SkfTab["panel"];
-  /**  */
-  selected?: SkfTab["selected"];
+  "panel"?: SkfTab['panel'];
   /**  */
-  variant?: SkfTab["variant"];
+  "selected"?: SkfTab['selected'];
   /**  */
-  role?: SkfTab["role"];
+  "variant"?: SkfTab['variant'];
+
   /** {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;
-};
+  "onclick"?: (e: CustomEvent<never>) => void;
+}
+
 
 export type SkfTextAreaProps = {
   /** If true, sets disabled state */
-  disabled?: SkfTextArea["undefined"];
+  "disabled"?: unknown;
+  /** If true, sets disabled state */
+  "undefined"?: unknown;
   /** If true, value is required or must be checked for the form to be submittable */
-  required?: SkfTextArea["undefined"];
+  "required"?: unknown;
   /** If defined, sets the cols of the textarea */
-  cols?: SkfTextArea["cols"];
+  "cols"?: SkfTextArea['cols'];
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+  "custom-invalid"?: SkfTextArea['customInvalid'];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
-  "custom-invalid"?: SkfTextArea["customInvalid"];
+  "customInvalid"?: SkfTextArea['customInvalid'];
   /** If true, outputs helping hints in console */
-  debug?: SkfTextArea["debug"];
+  "debug"?: SkfTextArea['debug'];
   /** If true, hides the label visually */
-  "hide-label"?: SkfTextArea["hideLabel"];
+  "hide-label"?: SkfTextArea['hideLabel'];
+  /** If true, hides the label visually */
+  "hideLabel"?: SkfTextArea['hideLabel'];
   /** If defined, displays informational text below the field */
-  hint?: SkfTextArea["hint"];
+  "hint"?: SkfTextArea['hint'];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
-  label?: SkfTextArea["label"];
+  "label"?: SkfTextArea['label'];
+  /** Sets the internal language of the component */
+  "lang"?: SkfTextArea['lang'];
   /** If defined, adds name to the input-element */
-  name?: SkfTextArea["name"];
+  "name"?: SkfTextArea['name'];
+  /** If defined, sets the maximum character length to accept for this input */
+  "maxlength"?: SkfTextArea['maxLength'];
   /** If defined, sets the maximum character length to accept for this input */
-  maxlength?: SkfTextArea["maxLength"];
+  "maxLength"?: SkfTextArea['maxLength'];
+  /** If defined, sets the minimum character length to accept for this input */
+  "minlength"?: SkfTextArea['minLength'];
   /** If defined, sets the minimum character length to accept for this input */
-  minlength?: SkfTextArea["minLength"];
+  "minLength"?: SkfTextArea['minLength'];
   /** If defined, displays placeholder text */
-  placeholder?: SkfTextArea["placeholder"];
+  "placeholder"?: SkfTextArea['placeholder'];
   /** If true, makes the element not mutable, meaning the user can not edit the control */
-  readonly?: SkfTextArea["readonly"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfTextArea["requiredLabel"];
+  "readonly"?: SkfTextArea['readonly'];
   /** If defined, sets the rows of the textarea */
-  rows?: SkfTextArea["rows"];
+  "rows"?: SkfTextArea['rows'];
   /** If defined, displays provided severity state */
-  severity?: SkfTextArea["severity"];
+  "severity"?: SkfTextArea['severity'];
   /** If true, displays valid state after interaction */
-  "show-valid"?: SkfTextArea["showValid"];
+  "show-valid"?: SkfTextArea['showValid'];
+  /** If true, displays valid state after interaction */
+  "showValid"?: SkfTextArea['showValid'];
   /** Size of the Textarea */
-  size?: SkfTextArea["size"];
+  "size"?: SkfTextArea['size'];
+  /** Sets validation start */
+  "validate-on"?: SkfTextArea['validateOn'];
   /** Sets validation start */
-  "validate-on"?: SkfTextArea["validateOn"];
+  "validateOn"?: SkfTextArea['validateOn'];
   /** The current value of the text area */
-  value?: SkfTextArea["value"];
+  "value"?: SkfTextArea['value'];
 
   /** Fires when the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  "onchange"?: (e: CustomEvent<never>) => void;
   /** Fires when the input is invalid */
-  oninvalid?: (e: CustomEvent<never>) => void;
-};
+  "oninvalid"?: (e: CustomEvent<never>) => void;
+}
+
 
 export type SkfToastWrapperProps = {
   /**  */
-  debug?: SkfToastWrapper["debug"];
-};
+  "debug"?: SkfToastWrapper['debug'];
+
+
+}
+
 
 export type SkfToastProps = {
   /**  */
-  debug?: SkfToast["debug"];
+  "debug"?: SkfToast['debug'];
   /** If defined, displays leading icon */
-  icon?: SkfToast["icon"];
+  "icon"?: SkfToast['icon'];
   /** If true, renders with an close button and sets aria-role to `status` */
-  persistent?: SkfToast["persistent"];
+  "persistent"?: SkfToast['persistent'];
   /** If defined, gives the supplied appearance */
-  severity?: SkfToast["severity"];
+  "severity"?: SkfToast['severity'];
   /** Time in seconds before the toast disappears. */
-  timer?: SkfToast["timer"];
+  "timer"?: SkfToast['timer'];
   /** offsets where toasts emerge vertically */
-  topOffset?: SkfToast["topOffset"];
-};
+  "topOffset"?: SkfToast['topOffset'];
+
+
+}
+
 
 export type SkfTooltipProps = {
   /** The placement of the dropdown */
-  placement?: SkfTooltip["undefined"];
+  "placement"?: unknown;
+  /** The placement of the dropdown */
+  "undefined"?: unknown;
   /** The id of the element the dropdown will be anchored to */
-  anchor?: SkfTooltip["undefined"];
+  "anchor"?: unknown;
   /**  */
-  offset?: SkfTooltip["offset"];
+  "offset"?: SkfTooltip['offset'];
   /**  */
-  placement?: SkfTooltip["placement"];
-  /** Fired when the dropdown is opened */
-  "onskf-opened"?: (e: CustomEvent<never>) => void;
-  /** Fired when the dropdown is closed */
-  "onskf-closed"?: (e: CustomEvent<never>) => void;
-};
+  "variant"?: SkfTooltip['variant'];
+  /** Method that opens the tooltip */
+  "open()"?: SkfTooltip['open()'];
+  /** Method that closes the tooltip */
+  "close()"?: SkfTooltip['close()'];
+
+  /** Fired when the tooltip is opened */
+  "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when the tooltip is closed */
+  "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
+}
+
+  export type CustomElements = {
+
 
-export type CustomElements = {
   /**
-   * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
-   * ---
-   *
-   */
-  "skf-icon": Partial<SkfIconProps & BaseProps & BaseEvents>;
+     * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `color`: Sets the color of the icon 
+ * - `label`: If defined, adds an alternate description to use for assistive devices 
+ * - `name`: Name of the icon to display 
+ * - `size`: Size of the icon 
+  */
+    "skf-icon": Partial<SkfIconProps & BaseProps<SkfIcon> & BaseEvents>;
+
 
   /**
-   * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
-   *
-   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
-   * ---
-   *
-   *
-   * ### **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 `<skf-accordion-item>` is used in conjunction with the `<skf-accordion>` component
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `animated`: If true, will animate the expand/accordion-item state 
+ * - `expanded`: If true, will set the accordion-item to be expanded by default 
+ * - `heading`: Heading for the accordion-item 
+ * - `heading-as`/`headingAs`: Defines which heading element will be rendered 
+ * - `small`: If true, renders the small version 
+ * - `truncate`: If true, will truncate the heading in accordion-item state 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-accordion-item-toggle`: Event emitted when toggled
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: Main content
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `setClose() => void`: Class method as alternative to manipulate attribute
+ * - `setOpen() => void`: Class method as alternative to manipulate attribute
+  */
+    "skf-accordion-item": Partial<SkfAccordionItemProps & BaseProps<SkfAccordionItem> & BaseEvents>;
+
 
   /**
-   * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
-   *
-   * 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>;
+     * The `<skf-accordion>` component consists of one or more `<skf-accordion-item>` item(s) working together
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `animated`: If true, will animate the expand/collapse state 
+ * - `heading-as`/`headingAs`: Defines which heading element will be rendered 
+ * - `gap`: If true, adds a gap between each item 
+ * - `multiple`: If true, allowes multiple accordion items to open 
+ * - `small`: If true, renders the small version 
+ * - `truncate`: If true, will truncate all headings in collapsed state 
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: Expects one or more <skf-accordion-item> element(s)
+  */
+    "skf-accordion": Partial<SkfAccordionProps & BaseProps<SkfAccordion> & 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** - Slot for the link
-   */
-  "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
+     * The `<skf-alert>` is a type of notification that appears in-line
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/990ec5-alert) for design principles
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `icon`: If defined, displays leading icon 
+ * - `lang`: Sets the internal language of the component 
+ * - `persistent`: If true, renders with an close button and sets aria-role to `status` 
+ * - `severity`: If defined, gives the supplied appearance 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-alert-close`: Fires when the close button is clicked
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: Alert message. **Notice!** See design principles for approved content
+ * - `link`: Slot for the link
+  */
+    "skf-alert": Partial<SkfAlertProps & BaseProps<SkfAlert> & BaseEvents>;
+
 
   /**
-   * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - Label of the breadcrumb item
-   */
-  "skf-breadcrumb-item": Partial<SkfBreadcrumbItemProps & BaseProps & BaseEvents>;
+     * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `href`: If defined, loads url on click 
+ * - `onClick`: If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. (property only)
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: Label of the breadcrumb item
+  */
+    "skf-breadcrumb-item": Partial<SkfBreadcrumbItemProps & BaseProps<SkfBreadcrumbItem> & BaseEvents>;
+
 
   /**
-   * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
-   *
-   * See [zeroheight](https://zeroheight.com/853e936c9/p/3338ef-breadcrumbs) for design principles.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **click** - Fired when the item is clicked
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more `<skf-breadcrumb-item>`
-   */
-  "skf-breadcrumb": Partial<SkfBreadcrumbProps & BaseProps & BaseEvents>;
+     * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/3338ef-breadcrumbs) for design principles.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `label`: aria-label for the breadcrumb control 
+ * - `small`: If true, renders a smaller version 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `click`: Fired when the item is clicked
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: One or more `<skf-breadcrumb-item>`
+  */
+    "skf-breadcrumb": Partial<SkfBreadcrumbProps & BaseProps<SkfBreadcrumb> & 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-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `invert`: If true, inverts the color (to be used on colored backgrounds) 
+ * - `size`: Defines the size of the loader 
+  */
+    "skf-loader": Partial<SkfLoaderProps & BaseProps<SkfLoader> & 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>;
+     * Component to be used in forms or for interactivity
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/02493d-buttons) for design principles
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `destructive`: If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. 
+ * - `disabled`: If true, removes border 
+ * - `icon`: If provided, renders an icon before or after the text 
+ * - `icon-only`/`iconOnly`: If true, button will take a square shape 
+ * - `icon-position`/`iconPosition`: Determines the positioning of the icon in relation to the text 
+ * - `loading`: If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. 
+ * - `no-validate`/`noValidate`: undefined 
+ * - `size`: If provided, displays an alternative size 
+ * - `type`: If provided, changes the button type 
+ * - `variant`: If provided, alters the appearance 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `click`: Fires when the button is clicked
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The Primary content
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `click() => void`: Simulates a click on the button.
+  */
+    "skf-button": Partial<SkfButtonProps & BaseProps<SkfButton> & 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-card>` can be used to group related subjects in a container
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `no-border`/`noBorder`: If true, removes border 
+ * - `no-padding`/`noPadding`: If true, removes padding 
+ * - `stretch`: If true, the Card fills the parent element height 
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The card's main content
+ * 
+ * #### CSS Custom Properties
+ * 
+ * CSS variables available for styling the component.
+ * 
+ * - `--mod-card-bg-color`: Ability to set a custom background color (default: `undefined`)
+  */
+    "skf-card": Partial<SkfCardProps & BaseProps<SkfCard> & BaseEvents>;
+
 
   /**
-   * The `<skf-checkbox>` component is used to create a checkbox input
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **change** - {object} - When the value of the input changes
-   *
-   * ### **Slots:**
-   *  - _default_ - The Radios label. Alternatively, you can use the `label` attribute.
-   */
-  "skf-checkbox": Partial<SkfCheckboxProps & BaseProps & BaseEvents>;
+     * The `<skf-checkbox>` component is used to create a checkbox input
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `disabled`/`undefined`: If true, sets disabled state 
+ * - `required`/`undefined`: If true, value is required or must be checked for the form to be submittable 
+ * - `debug`: If defined, outputs helping hints in console 
+ * - `checked`: If true, outputs helping hints in console 
+ * - `custom-invalid`/`customInvalid`: If true, forces component to invalid state until removed 
+ * - `indeterminate`: If true and the checkbox is unchecked, the checkbox will appear indeterminate 
+ * - `label`: If defined, sets the input's label. Alternatively, you can use the `label` attribute. 
+ * - `lang`: Sets the internal language of the component 
+ * - `name`: If defined, adds name to the input-element 
+ * - `severity`: If defined, styles checkbox using provided severity 
+ * - `show-valid`/`showValid`: If true, displays valid state after interaction 
+ * - `size`: Size of the checkbox 
+ * - `value`: The current value of the input field 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: When the value of the input changes
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The Radios label. Alternatively, you can use the `label` attribute.
+  */
+    "skf-checkbox": Partial<SkfCheckboxProps & BaseProps<SkfCheckbox> & BaseEvents>;
+
 
   /**
-   * A date picker component that allows users to select a date or a range of dates.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **selected-date-changed** - When a date is selected
-   * - **selected-date-range-changed** - When a range of dates is selected
-   *
-   * ### **Methods:**
-   *  - **gotoDate(date: _Date | string_)** - Navigates to the given date.
-   *
-   * ### **Slots:**
-   *  - _default_ - Default hint content placed inside the date picker
-   *
-   * ### **CSS Properties:**
-   *  - **--max-width** - The maximum width of the date picker _(default: undefined)_
-   */
-  "skf-datepicker": Partial<SkfDatePickerProps & BaseProps & BaseEvents>;
+     * 
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `eventid`: undefined 
+ * - `firstDayOfWeek`: undefined 
+ * - `invalid-dates`/`invalidDates`: A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. 
+ * - `lang`: Sets the internal language of the component 
+ * - `locale`: undefined 
+ * - `range`: undefined 
+ * - `selectable-from`/`selectableFrom`: Earliest selectable date. (yyyy-mm-dd format) 
+ * - `selectable-to`/`selectableTo`: Latest selectable date. (yyyy-mm-dd format) 
+ * - `selected-date`/`selectedDate`: undefined 
+ * - `selectedDateRange`: undefined 
+ * - `_listenToKeyboard`: undefined (property only)
+ * - `_handleKeyDown`: undefined (property only)
+ * - `dateSelectable`: undefined (property only)
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `_createDate({ year, month, day }: DateParts, useTemporalApi?: false) => Date`: undefined
+ * - `_createDate({ year, month, day = 1 }: DateParts, useTemporalApi?: boolean) => Date | Temporal.PlainDate`: undefined
+  */
+    "skf-datepicker-calendar": Partial<SkfDatepickerCalendarProps & BaseProps<SkfDatepickerCalendar> & 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>;
+     * 
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `custom-invalid`/`customInvalid`: If defined, forces component to invalid state until removed. Its value is used as hint text. 
+ * - `id`: undefined 
+ * - `label`: If defined, sets the input's label. Alternatively, you can use the `label` attribute. 
+ * - `lang`: Sets the internal language of the component 
+ * - `hide-label`/`hideLabel`: If true, hides the label visually 
+ * - `hint`: If defined, displays informational text below the field 
+ * - `invalid-dates`/`invalidDates`: A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. 
+ * - `name`: If defined, adds name to the input-element 
+ * - `placeholder`: undefined 
+ * - `range`: undefined 
+ * - `readonly`: If true, makes the element not mutable, meaning the user can not edit the control 
+ * - `selectable-from`/`selectableFrom`: Earliest selectable date. (yyyy-mm-dd format) 
+ * - `selectable-to`/`selectableTo`: Latest selectable date. (yyyy-mm-dd format) 
+ * - `severity`: If defined, displays provided severity state 
+ * - `size`: Size of the input 
+ * - `validate-on`/`validateOn`: Sets validation start 
+ * - `value`: The current value of the input field 
+ * - `focusTimeoutId`: undefined (property only)
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `_handleValueChange() => void`: undefined
+ * - `showPopover() => void`: undefined
+ * - `hidePopover() => void`: undefined
+ * - `clear() => void`: Clears the input field
+  */
+    "skf-datepicker": Partial<SkfDatepickerProps & BaseProps<SkfDatepicker> & BaseEvents>;
+
 
   /**
-   * The `<skf-dialog>` is a component that open up a dialog of type modal with the content provided. (MDN refrains from opening the dialog using the `open` attribute, however skf-dialog does not have that limitation)
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **skf-dialog-opened** - Fires when the dialog is opened (after transitioned in)
-   * - **skf-dialog-closing** - Fires when the dialog is closed (before transitioned out)
-   * - **skf-dialog-closed** - Fires when the dialog is closed (after transitioned out)
-   *
-   * ### **Methods:**
-   *  - **showModal()** - Method that opens the dialog in modal state
-   * - **close()** - Method that closes the dialog
-   *
-   * ### **Slots:**
-   *  - _default_ - The dialog component's content
-   * - **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 `<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.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `as`: Controls which heading element will be rendered. Should not be used to affect appearance 
+ * - `styled-as`/`styledAs`: If defined, changes the appearance of the heading 
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The headings content
+  */
+    "skf-heading": Partial<SkfHeadingProps & BaseProps<SkfHeading> & 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 `<skf-dialog>` is a component that open up a dialog of type modal with the content provided. (MDN refrains from opening the dialog using the `open` attribute, however skf-dialog does not have that limitation)
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `heading`: Title for the modal/dialog 
+ * - `fullscreen`: If true, makes the dialog stretch edge to edge on screen 
+ * - `lang`: Sets the internal language of the component 
+ * - `no-close-button`/`noCloseButton`: If true, removes the close button 
+ * - `no-padding`/`noPadding`: If defined, removes the inner padding 
+ * - `open`: If true, indicates that the dialog is active and is available for interaction 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-dialog-opened`: Fires when the dialog is opened (after transitioned in)
+ * - `skf-dialog-closing`: Fires when the dialog is closing (before transitioned out)
+ * - `skf-dialog-closed`: Fires when the dialog is closed (after transitioned out)
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The dialog component's content
+ * - `footer`: The dialog component's buttons goes here
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `showModal() => void`: Method that opens the dialog in modal state
+ * - `close() => void`: Method that closes the dialog
+ * 
+ * #### CSS Custom Properties
+ * 
+ * CSS variables available for styling the component.
+ * 
+ * - `--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<SkfDialog> & BaseEvents>;
+
 
   /**
-   * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)
-   * - **skf-drawer-closing** - Fires when the drawer is closed (before transitioned out)
-   * - **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)
-   *
-   * ### **Slots:**
-   *  - _default_ - The Drawer's main content
-   */
-  "skf-drawer": Partial<SkfDrawerProps & BaseProps & BaseEvents>;
+     * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `color`: Defines the Divider color 
+ * - `decorative`: If true, renders a div for presentational purpose instead of the semantic hr-element 
+ * - `vertical`: If true, renders the divider vertically 
+ * 
+ * #### CSS Custom Properties
+ * 
+ * CSS variables available for styling the component.
+ * 
+ * - `--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<SkfDivider> & 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-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `heading`: Heading for the Drawer 
+ * - `lang`: Sets the internal language of the component 
+ * - `size`: Sets the max-width 
+ * - `open`: If true, Drawer is open 
+ * - `placement`: Placement of the Drawer 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-drawer-opened`: Fires when the drawer is opened (after transitioned in)
+ * - `skf-drawer-closing`: Fires when the drawer is closing (before transitioned out)
+ * - `skf-drawer-closed`: Fires when the drawer is closed (after transitioned out)
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The Drawer's main content
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `close() => void`: undefined
+  */
+    "skf-drawer": Partial<SkfDrawerProps & BaseProps<SkfDrawer> & BaseEvents>;
+
 
   /**
-   * The `<skf-nav>` is a component that displays a list of <nav-items>.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The component's main content
-   */
-  "skf-nav": Partial<SkfNavProps & BaseProps & BaseEvents>;
+     * The `<skf-logo>` component is used to display the SKF logo.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `title`: Defines the title of the logo 
+ * - `color`: Defines the color of the logo 
+ * 
+ * #### CSS Custom Properties
+ * 
+ * CSS variables available for styling the component.
+ * 
+ * - `--mod-logo-height`: The height of the logo (default: `undefined`)
+  */
+    "skf-logo": Partial<SkfLogoProps & BaseProps<SkfLogo> & BaseEvents>;
+
 
   /**
-   * The `<skf-header>` component is to be used as the site-header in the app
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - Navigation items
-   */
-  "skf-header": Partial<SkfHeaderProps & BaseProps & BaseEvents>;
+     * The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is
+ * intended to be used for triggering javascript functions, not handling forms.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `as`: Defines the semantic element to render 
+ * - `color`: Defines the text-color 
+ * - `disabled`: If true, disables the link 
+ * - `download`: If defined, downloads the url 
+ * - `href`: If defined, loads url on click 
+ * - `icon`: If defined, renders an icon before or after the text 
+ * - `icon-right`/`iconRight`: If true, the icon is placed to the right in relation to the text 
+ * - `rel`: If defined, describes the relationship between a linked resource and the current document 
+ * - `route`: If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. 
+ * - `stretch`: If true, fills the parents horizontal axis 
+ * - `target`: If defined, specifies where to open the linked document 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-link-click`: Fired when the link is clicked
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The links' main content
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `_handleAsChange() => void`: undefined
+  */
+    "skf-link": Partial<SkfLinkProps & BaseProps<SkfLink> & 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_ - The Inputs label. Alternatively, you can use the `label` attribute.
-   */
-  "skf-input": Partial<SkfInputProps & BaseProps & BaseEvents>;
+     * The `<skf-nav>` is a component that displays a list of <nav-items>.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `href`: undefined 
+ * - `icon`: undefined 
+ * - `vertical`: undefined (property only)
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The component's main content
+  */
+    "skf-nav-item": Partial<SkfNavItemProps & BaseProps<SkfNavItem> & 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-nav>` is a component that displays a list of <nav-items>.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `lang`: Sets the internal language of the component 
+ * - `vertical`: If true, the navigation will be displayed vertically 
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The component's main content
+  */
+    "skf-nav": Partial<SkfNavProps & BaseProps<SkfNav> & BaseEvents>;
+
 
   /**
-   * The `<skf-menu>` is a component that displays a list of actions or options.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **skf-opened** - Fired when the menu is opened
-   * - **skf-closed** - Fired when the menu is closed
-   *
-   * ### **Slots:**
-   *  - _default_ - The menu popover content
-   */
-  "skf-menu": Partial<SkfMenuProps & BaseProps & BaseEvents>;
+     * The `<skf-header>` component is to be used as the site-header in the app. The navigation will be collapsed to mobile-view if the menu items exceed the available width.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `compact`: If true, sets header to display in compact mode only (hanburger menu and drawer) 
+ * - `lang`: Sets the internal language of the component 
+ * - `site-name`/`siteName`: If defined, sets the app or site's name 
+ * - `site-url`/`siteUrl`: If defined, sets the site's base-url for the "logo-link" 
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: Navigation items
+  */
+    "skf-header": Partial<SkfHeaderProps & BaseProps<SkfHeader> & 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-text-field is used to create a text input field. It can be used inside a form element or standalone
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `disabled`/`undefined`: If true, sets disabled state 
+ * - `required`/`undefined`: If true, value is required or must be checked for the form to be submittable 
+ * - `autocomplete`: Indicates whether the value of the control can be automatically completed by the browser. See
+ * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. 
+ * - `custom-invalid`/`customInvalid`: If defined, forces component to invalid state until removed. Its value is used as hint text. 
+ * - `debug`: If true, outputs helping hints in console 
+ * - `hide-label`/`hideLabel`: If true, hides the label visually 
+ * - `hint`: If defined, displays informational text below the field 
+ * - `inputmode`: Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See
+ * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details. 
+ * - `label`: If defined, sets the input's label. Alternatively, you can use the `label` attribute. 
+ * - `lang`: Sets the internal language of the component 
+ * - `leading`: If defined, displays a prefix/adornment before the input-element 
+ * - `max`: If defined, sets the maximum value to accept for this input 
+ * - `maxlength`/`maxLength`: If defined, sets the maximum character length to accept for this input 
+ * - `min`: If defined, sets the minimum value to accept for this input 
+ * - `minlength`/`minLength`: If defined, sets the minimum character length to accept for this input 
+ * - `name`: If defined, adds name to the input-element 
+ * - `pattern`: If defined, adds name to the input-element 
+ * - `placeholder`: If defined, displays placeholder text 
+ * - `readonly`: If true, makes the element not mutable, meaning the user can not edit the control 
+ * - `severity`: If defined, displays provided severity state 
+ * - `show-valid`/`showValid`: If true, displays valid state after interaction 
+ * - `size`: Size of the input 
+ * - `trailing`: If defined, displays a suffix/adornment after the input-element 
+ * - `type`: Type of input 
+ * - `validate-on`/`validateOn`: Sets validation start 
+ * - `value`: The current value of the input field 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: Fires when the value of the input changes
+ * - `invalid`: Fires when the input is invalid
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The Inputs label. Alternatively, you can use the `label` attribute.
+  */
+    "skf-input": Partial<SkfInputProps & BaseProps<SkfInput> & BaseEvents>;
+
 
   /**
-   * The `<skf-nav>` is a component that displays a list of <nav-items>.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The component's main content
-   */
-  "skf-nav-item": Partial<SkfNavItemProps & BaseProps & BaseEvents>;
+     * The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `as`: Defines the semantic element to render 
+ * - `color`: Defines the text-color 
+ * - `disabled`: If true, disables the link 
+ * - `download`: If defined, downloads the url 
+ * - `href`: If defined, loads url on click 
+ * - `icon`: If defined, renders an icon before or after the text 
+ * - `icon-right`/`iconRight`: If true, the icon is placed to the right in relation to the text 
+ * - `rel`: If defined, describes the relationship between a linked resource and the current document 
+ * - `route`: If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. 
+ * - `stretch`: If true, fills the parents horizontal axis 
+ * - `target`: If defined, specifies where to open the linked document 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-link-click`: Fired when the link is clicked
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The component's main content
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `_handleAsChange() => void`: undefined
+  */
+    "skf-menu-item": Partial<SkfMenuItemProps & BaseProps<SkfMenuItem> & BaseEvents>;
+
 
   /**
-   * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **skf-opened** - Fired when the menu is opened
-   * - **skf-closed** - Fired when the menu is closed
-   *
-   * ### **Slots:**
-   *  - _default_ - The popover content
-   */
-  "skf-popover": Partial<SkfPopoverProps & BaseProps & BaseEvents>;
+     * The `<skf-menu>` is a component that displays a list of actions or options
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `placement`/`undefined`: The placement of the menu 
+ * - `anchor`/`undefined`: The id of the element the menu will be anchored to 
+ * - `open()`: Method that opens the menu (property only)
+ * - `close()`: Method that closes the menu (property only)
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-opened`: Fired when the menu is opened
+ * - `skf-closed`: Fired when the menu is closed
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The menu content
+  */
+    "skf-menu": Partial<SkfMenuProps & BaseProps<SkfMenu> & BaseEvents>;
+
 
   /**
-   * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
-   * ---
-   *
-   */
-  "skf-progress": Partial<SkfProgressProps & BaseProps & BaseEvents>;
+     * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `placement`/`undefined`: The placement of the popover 
+ * - `anchor`/`undefined`: The id of the element the popover will be anchored to 
+ * - `offset`: If defined, sets a custom offset for the popover 
+ * - `hideArrow`: If true, hides the arrow 
+ * - `open()`: Method that opens the popover (property only)
+ * - `close()`: Method that closes the popover (property only)
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-opened`: Fired when the popover is opened
+ * - `skf-closed`: Fired when the popover is closed
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The popover content
+  */
+    "skf-popover": Partial<SkfPopoverProps & BaseProps<SkfPopover> & BaseEvents>;
+
 
   /**
-   * The `<skf-radio>` component is used to create a radio input
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **change** - {object} - When the value of the input changes
-   *
-   * ### **Slots:**
-   *  - _default_ - The radios label. Alternatively, you can use the `label` attribute.
-   */
-  "skf-radio": Partial<SkfRadioProps & BaseProps & BaseEvents>;
+     * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `animated`: If true, the progress-bar's fill value is animated 
+ * - `max`: Describes how much work the task indicated by the progress element requires 
+ * - `value`: Specifies how much of the task that has been completed 
+  */
+    "skf-progress": Partial<SkfProgressProps & BaseProps<SkfProgress> & BaseEvents>;
+
 
   /**
-   * The `<skf-segmented-button-item>` is used in conjunction with the `<skf-segmented-button>` component
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **my-tag-my-event** - Fired when something happens
-   *
-   * ### **Slots:**
-   *  - _default_ - The items label
-   */
-  "skf-segmented-button-item": Partial<SkfSegmentedButtonItemProps & BaseProps & BaseEvents>;
+     * The `<skf-radio>` component is used to create a radio input
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `disabled`/`undefined`: If true, sets disabled state 
+ * - `required`/`undefined`: If true, value is required or must be checked for the form to be submittable 
+ * - `debug`: If true, outputs helping hints in console 
+ * - `checked`: If true, outputs helping hints in console 
+ * - `custom-invalid`/`customInvalid`: If true, forces component to invalid state until removed 
+ * - `label`: If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. 
+ * - `lang`: Sets the internal language of the component 
+ * - `name`: If defined, adds name to the input-element 
+ * - `size`: Size of the Radio 
+ * - `severity`: If defined, displays provided severity state 
+ * - `show-valid`/`showValid`: If true, displays valid state after interaction 
+ * - `value`: The current value of the input field 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: When the value of the input changes
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The radios label. Alternatively, you can use the `label` attribute.
+  */
+    "skf-radio": Partial<SkfRadioProps & BaseProps<SkfRadio> & BaseEvents>;
+
 
   /**
-   * The `<skf-segmented-button>` component consists of multiple `<skf-segmented-button-item>`, working together.
-   *
-   * See [zeroheight](https://zeroheight.com/853e936c9/p/68ff54-segmented-buttons) for design principles
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - One or more `<skf-segmented-button-item>`
-   */
-  "skf-segmented-button": Partial<SkfSegmentedButtonProps & BaseProps & BaseEvents>;
+     * The `<skf-segmented-button-item>` is used in conjunction with the `<skf-segmented-button>` component
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `disabled`: If true, items is marked as disabled 
+ * - `selected`: If true, items is marked as selected 
+ * - `value`: Sets the item value 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-segmented-button-item-select`: Fired when selected
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: Label for the button
+  */
+    "skf-segmented-button-item": Partial<SkfSegmentedButtonItemProps & BaseProps<SkfSegmentedButtonItem> & 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<SkfSelectOptionProps & BaseProps & BaseEvents>;
+     * The `<skf-segmented-button>` component consists of multiple `<skf-segmented-button-item>`, working together.
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/68ff54-segmented-buttons) for design principles
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `multiple`: If true, allowes multiple items to be selected 
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: One or more `<skf-segmented-button-item>`
+  */
+    "skf-segmented-button": Partial<SkfSegmentedButtonProps & BaseProps<SkfSegmentedButton> & 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-select-option-group>` is a component that groups select-options
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `label`: undefined 
+ * - `small`: undefined (property only)
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The component's placeholder content
+  */
+    "skf-select-option-group": Partial<SkfSelectOptionGroupProps & BaseProps<SkfSelectOptionGroup> & 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.
-   * ---
-   *
-   *
-   * ### **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<SkfSelectProps & BaseProps & BaseEvents>;
+     * The `<skf-tag>` is a component that displays a list of actions or options
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `size`: Specifies Tag size 
+ * - `icon`: If defined, displays leading/provided icon 
+ * - `color`: If defined, gives the supplied appearance 
+ * - `lang`: Sets the internal language of the component 
+ * - `removable`: If true, adds trailing button to remove tag 
+ * - `onClick`: If defined, accepts a function that runs on click (property only)
+ * - `onRemove`: If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. (property only)
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The component's placeholder content
+  */
+    "skf-tag": Partial<SkfTagProps & BaseProps<SkfTag> & BaseEvents>;
+
 
   /**
-   * The `<skf-select-option-group>` is a component that groups select-options
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The component's placeholder content
-   */
-  "skf-select-option-group": Partial<SkfSelectOptionGroupProps & BaseProps & BaseEvents>;
+     * The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/91c9f0-select-and-combobox) for design principles
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `disabled`/`undefined`: If true, the select is disabled 
+ * - `required`/`undefined`: If true, the select is required 
+ * - `button-label`/`buttonLabel`: Sets the first visible text on the component 
+ * - `custom-invalid`/`customInvalid`: If defined, forces component to invalid state until removed 
+ * - `hide-label`/`hideLabel`: If true, hides the label visually 
+ * - `hide-tags`/`hideTags`: If true and mulltiple is true, no tags are displayed under the select 
+ * - `hint`: If defined, sets the hint text under the select component in the form 
+ * - `label`: If defined, displays provided label 
+ * - `lang`: Sets the internal language of the component 
+ * - `max`: If defined, limits the number of selectable options 
+ * - `min`: If defined, sets the minimum number of required options 
+ * - `multiple`: If true, allows for multiple options to be selected 
+ * - `name`: If defined, set name of the component 
+ * - `severity`: If defined, displays provided severity state 
+ * - `show-valid`/`showValid`: If true, displays valid state after interaction 
+ * - `size`: Size of the Select 
+ * - `selectedValues`: A readonly property that returns the selected value(s) in a array (property only)
+ * - `selectedOptionsText`: A readonly property that returns the selected slot(s) text content in a array (property only)
+ * - `value`: Returns the selected value. (if multiple: in a comma separated string). If set will default set corresponding option. (property only)
+ * - `_selectedOptions`: undefined (property only)
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: Fired when the selected option(s) changes
+ * - `invalid`: Fired when the select is invalid
+ * - `reset`: Fired when the form is reset
+ * - `skf-select-dropdown`: {detail: {expanded: boolean}} Fired when the select dropdown is toggled
+ * - `skf-select-option-select`: {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
+ * - `skf-select-connected`: Fires when the select options are connected, useful for setting selected option(s) via value property. E.g mySkfSelect.value = 'option1,option2';
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The select's placeholder content
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `_handleSizeUpdate() => void`: undefined
+ * - `handleExpandedChange() => void`: undefined
+  */
+    "skf-select": Partial<SkfSelectProps & BaseProps<SkfSelect> & 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-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
+ * It represents an individual option in a select dropdown.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `disabled`: If true, prevents interaction with the option 
+ * - `icon`: If defined, set an icon 
+ * - `icon-color`/`iconColor`: If defined, sets provided color on the icon 
+ * - `selected`: If true, sets the option as selected 
+ * - `short-label`/`shortLabel`: If defined, sets a short label 
+ * - `value`: Returns or sets the option value. If value is omitted, defaults to the tags slotted text. 
+ * - `text`: The option's label text (equivalent to the tags textContent) (property only)
+ * - `small`: undefined (property only)
+ * - `_shortcutUpdate`: undefined (property only)
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-select-option-select`: {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The option's text content
+ * - `icon`: The option's slot for icon or custom meta information (svg).
+  */
+    "skf-select-option": Partial<SkfSelectOptionProps & BaseProps<SkfSelectOption> & 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
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `state`: If defined, gives the supplied appearance 
+ * - `completed`: If true, item marked as completed 
+ * - `_setInternalState`: undefined (property only)
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-stepper-item-select`: Dispatched when the stepper item is selected
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: Label of the stepper item
+  */
+    "skf-stepper-item": Partial<SkfStepperItemProps & BaseProps<SkfStepperItem> & BaseEvents>;
+
 
   /**
-   * The `<skf-switch>` is a component that displays a list of actions or options
-   *
-   * See [zeroheight](https://zeroheight.com/853e936c9/p/7282a2-switch) for design principle
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.
-   */
-  "skf-switch": Partial<SkfSwitchProps & BaseProps & BaseEvents>;
+     * The `<skf-stepper>` is a component that displays a list of actions or options.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `active-index`/`activeIndex`: Sets the active item 
+ * - `linear`: If true, sets linear mode (user can't go back to completed steps due to dependencies) 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-stepper-item-select`: Dispatched when the stepper item is selected
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: One or more `<skf-stepper-item>`
+  */
+    "skf-stepper": Partial<SkfStepperProps & BaseProps<SkfStepper> & 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<SkfTabPanelProps & BaseProps & BaseEvents>;
+     * The `<skf-switch>` is a component that displays a list of actions or options
+ * 
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/7282a2-switch) for design principle
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `disabled`/`undefined`: If true, sets disabled state 
+ * - `required`/`undefined`: If true, value is required or must be checked for the form to be submittable 
+ * - `debug`: If true, outputs helping hints in console 
+ * - `checked`: If true, outputs helping hints in console 
+ * - `hide-label`/`hideLabel`: If true, hides the label visually 
+ * - `label`: If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. 
+ * - `lang`: Sets the internal language of the component 
+ * - `name`: If defined, adds name to the input-element 
+ * - `size`: Size of the Switch 
+ * - `value`: The current value of the input field 
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The Switchs label. Alternatively, you can use the `label` attribute.
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `debugOutput() => void`: undefined
+  */
+    "skf-switch": Partial<SkfSwitchProps & BaseProps<SkfSwitch> & 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<SkfTabGroupProps & BaseProps & BaseEvents>;
+     * The `<skf-tab-panel>` is a component that displays a list of actions or options.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `name`: The tab panel's name. 
+ * - `active`: undefined (property only)
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The tab panel's content
+  */
+    "skf-tab-panel": Partial<SkfTabPanelProps & BaseProps<SkfTabPanel> & BaseEvents>;
+
+
+  /**
+     * The `<skf-tabs>` is a component that displays a list of actions or options
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `default-selected`/`defaultSelected`: Sets the default selected tab 
+ * - `no-border`/`noBorder`: If true, removes border 
+ * - `no-padding`/`noPadding`: If true, removes padding 
+ * - `stretch`: If true, component fills the parent element height 
+ * - `variant`: Sets the appearance of the tabs 
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(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-tabs": Partial<SkfTabsProps & BaseProps<SkfTabs> & BaseEvents>;
+
 
   /**
-   * The `<skf-tab>` is a component that displays a list of actions or options
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected
-   * - **click** - Fired when the component is clicked
-   *
-   * ### **Slots:**
-   *  - _default_ - The tab's label
-   */
-  "skf-tab": Partial<SkfTabProps & BaseProps & BaseEvents>;
+     * The `<skf-tab>` is a component that displays a list of actions or options
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `panel`: The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. 
+ * - `selected`: undefined (property only)
+ * - `variant`: undefined (property only)
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-tab-select`: {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected
+ * - `click`: Fired when the component is clicked
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The tab's label
+  */
+    "skf-tab": Partial<SkfTabProps & BaseProps<SkfTab> & 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:**
-   *  - _default_ - The textareas label. Alternatively, you can use the `label` attribute.
-   */
-  "skf-textarea": Partial<SkfTextAreaProps & BaseProps & BaseEvents>;
+     * The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `disabled`/`undefined`: If true, sets disabled state 
+ * - `required`/`undefined`: If true, value is required or must be checked for the form to be submittable 
+ * - `cols`: If defined, sets the cols of the textarea 
+ * - `custom-invalid`/`customInvalid`: If defined, forces component to invalid state until removed. Its value is used as hint text. 
+ * - `debug`: If true, outputs helping hints in console 
+ * - `hide-label`/`hideLabel`: If true, hides the label visually 
+ * - `hint`: If defined, displays informational text below the field 
+ * - `label`: If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. 
+ * - `lang`: Sets the internal language of the component 
+ * - `name`: If defined, adds name to the input-element 
+ * - `maxlength`/`maxLength`: If defined, sets the maximum character length to accept for this input 
+ * - `minlength`/`minLength`: If defined, sets the minimum character length to accept for this input 
+ * - `placeholder`: If defined, displays placeholder text 
+ * - `readonly`: If true, makes the element not mutable, meaning the user can not edit the control 
+ * - `rows`: If defined, sets the rows of the textarea 
+ * - `severity`: If defined, displays provided severity state 
+ * - `show-valid`/`showValid`: If true, displays valid state after interaction 
+ * - `size`: Size of the Textarea 
+ * - `validate-on`/`validateOn`: Sets validation start 
+ * - `value`: The current value of the text area 
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `change`: Fires when the value of the input changes
+ * - `invalid`: Fires when the input is invalid
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The textareas label. Alternatively, you can use the `label` attribute.
+  */
+    "skf-textarea": Partial<SkfTextAreaProps & BaseProps<SkfTextArea> & 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-toast-wrapper": Partial<SkfToastWrapperProps & BaseProps & BaseEvents>;
+     * The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `debug`: undefined 
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The alert components that the toast creates will render here.
+  */
+    "skf-toast-wrapper": Partial<SkfToastWrapperProps & BaseProps<SkfToastWrapper> & BaseEvents>;
+
 
   /**
-   * A simple toast component that displays a message to the user. Invoke a toast message by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant. A transient toast will disappear after a set amount of time. Once toast is dismissed it will be removed from the DOM.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The component's placeholder content
-   */
-  "skf-toast": Partial<SkfToastProps & BaseProps & BaseEvents>;
+     * A simple toast component that displays a message to the user. Invoke a toast message by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant. A transient toast will disappear after a set amount of time. Once toast is dismissed it will be removed from the DOM.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `debug`: undefined 
+ * - `icon`: If defined, displays leading icon 
+ * - `persistent`: If true, renders with an close button and sets aria-role to `status` 
+ * - `severity`: If defined, gives the supplied appearance 
+ * - `timer`: Time in seconds before the toast disappears. 
+ * - `topOffset`: offsets where toasts emerge vertically 
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The component's placeholder content
+  */
+    "skf-toast": Partial<SkfToastProps & BaseProps<SkfToast> & BaseEvents>;
+
 
   /**
-   * The `<skf-tooltip>` is a component that displays a tooltip.
-   * ---
-   *
-   *
-   * ### **Events:**
-   *  - **skf-opened** - Fired when the dropdown is opened
-   * - **skf-closed** - Fired when the dropdown is closed
-   *
-   * ### **Slots:**
-   *  - _default_ - The tooltip popover content
-   */
-  "skf-tooltip": Partial<SkfTooltipProps & BaseProps & BaseEvents>;
-};
+     * The `<skf-tooltip>` is a component that displays a tooltip.
+ * 
+ * #### Attributes & Properties
+ * 
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ * 
+ * - `placement`/`undefined`: The placement of the dropdown 
+ * - `anchor`/`undefined`: The id of the element the dropdown will be anchored to 
+ * - `offset`: undefined (property only)
+ * - `placement`: undefined (property only)
+ * - `variant`: undefined (property only)
+ * - `open()`: Method that opens the tooltip (property only)
+ * - `close()`: Method that closes the tooltip (property only)
+ * 
+ * #### Events
+ * 
+ * Events that will be emitted by the component.
+ * 
+ * - `skf-opened`: Fired when the tooltip is opened
+ * - `skf-closed`: Fired when the tooltip is closed
+ * 
+ * #### Slots
+ * 
+ * Areas where markup can be added to the component.
+ * 
+ * - `(default)`: The tooltip popover content
+  */
+    "skf-tooltip": Partial<SkfTooltipProps & BaseProps<SkfTooltip> & BaseEvents>;
+  }
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module '@builder.io/qwik' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module '@stencil/core' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module 'hono' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare module 'react-native' {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+}