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

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

@@ -46,7 +46,7 @@ export type ScopedElements<Prefix extends string = "", Suffix extends string = "
   [Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
 };
 
-type BaseProps = {
+type BaseProps = Partial<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) */
@@ -85,6 +85,523 @@ type BaseProps = {
   translate?: "yes" | "no";
 };
 
+type BaseEvents = {};
+
+export type SkfAccordionProps = {
+  /** If true, will animate the expand/collapse state */
+  animated?: SkfAccordion["animated"];
+  /** Defines which heading element will be rendered */
+  "heading-as"?: SkfAccordion["headingAs"];
+  /** If true, adds a gap between each item */
+  gap?: SkfAccordion["gap"];
+  /** If true, allowes multiple accordion items to open */
+  multiple?: SkfAccordion["multiple"];
+  /** If true, renders the small version */
+  small?: SkfAccordion["small"];
+  /** If true, will truncate all headings in collapsed state */
+  truncate?: SkfAccordion["truncate"];
+};
+
+export type SkfAlertProps = {
+  /** If true, alert is being used as a toast (alertdialog) with an close button */
+  closeable?: SkfAlert["closeable"];
+  /** Close button aria-label */
+  "button-label"?: SkfAlert["buttonLabel"];
+  /** If defined, displays leading icon */
+  icon?: SkfAlert["icon"];
+  /** If defined, gives the supplied appearance */
+  severity?: SkfAlert["severity"];
+
+  /** Fires when the close button is clicked */
+  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfButtonProps = {
+  /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
+  destructive?: SkfButton["destructive"];
+  /** If true, removes border */
+  disabled?: SkfButton["disabled"];
+  /** If provided, renders an icon before or after the text */
+  icon?: SkfButton["icon"];
+  /** If provided, determines the positioning of the icon in relation to the text */
+  "icon-position"?: SkfButton["iconPosition"];
+  /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
+  loading?: SkfButton["loading"];
+  /**  */
+  "no-validate"?: SkfButton["noValidate"];
+  /** If provided, displays an alternative size */
+  size?: SkfButton["size"];
+  /** If provided, changes the button type */
+  type?: SkfButton["type"];
+  /** If provided, alters the appearance */
+  variant?: SkfButton["variant"];
+
+  /** Fires when the button is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfCardProps = {
+  /** If true, removes border */
+  "no-border"?: SkfCard["noBorder"];
+  /** If true, removes padding */
+  "no-padding"?: SkfCard["noPadding"];
+  /** If true, the Card fills the parent element height */
+  stretch?: SkfCard["stretch"];
+};
+
+export type SkfCheckboxProps = {
+  /** If true, sets disabled state */
+  disabled?: SkfCheckbox["undefined"];
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: SkfCheckbox["undefined"];
+  /** If defined, outputs helping hints in console */
+  debug?: SkfCheckbox["debug"];
+  /** If true, outputs helping hints in console */
+  checked?: SkfCheckbox["checked"];
+  /** If true, forces component to invalid state until removed */
+  "custom-invalid"?: SkfCheckbox["customInvalid"];
+  /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
+  indeterminate?: SkfCheckbox["indeterminate"];
+  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+  label?: SkfCheckbox["label"];
+  /** 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"];
+  /** If defined, styles checkbox using provided severity */
+  severity?: SkfCheckbox["severity"];
+  /** If true, displays valid state after interaction */
+  "show-valid"?: SkfCheckbox["showValid"];
+  /** Size of the checkbox */
+  size?: SkfCheckbox["size"];
+  /** The current value of the input field */
+  value?: SkfCheckbox["value"];
+
+  /** {object} - When the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfCollapseProps = {
+  /** If true, will animate the expand/collapse state */
+  animated?: SkfCollapse["animated"];
+  /** If true, will set the collapse to be expanded by default */
+  expanded?: SkfCollapse["expanded"];
+  /** Heading for the collapse */
+  heading?: SkfCollapse["heading"];
+  /** Defines which heading element will be rendered */
+  "heading-as"?: SkfCollapse["headingAs"];
+  /** If true, renders the small version */
+  small?: SkfCollapse["small"];
+  /** If true, will truncate the heading in collapsed state */
+  truncate?: SkfCollapse["truncate"];
+
+  /** Event emitted when toggled */
+  "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type SkfDividerProps = {
+  /** Defines the Divider color */
+  color?: SkfDivider["color"];
+  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
+  decorative?: SkfDivider["decorative"];
+  /** If true, renders the divider vertically */
+  vertical?: SkfDivider["vertical"];
+};
+
+export type SkfHeadingProps = {
+  /** Controls which heading element will be rendered. Should not be used to affect appearance */
+  as?: SkfHeading["as"];
+  /** If provided, changes the appearance of the heading */
+  "styled-as"?: SkfHeading["styledAs"];
+};
+
+export type SkfIconProps = {
+  /** Sets the color of the icon */
+  color?: SkfIcon["color"];
+  /** If defined, adds an alternate description to use for assistive devices */
+  label?: SkfIcon["label"];
+  /** Name of the icon to display */
+  name?: SkfIcon["name"];
+  /** Size of the icon */
+  size?: SkfIcon["size"];
+};
+
+export type SkfInputProps = {
+  /** If true, sets disabled state */
+  disabled?: SkfInput["undefined"];
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: SkfInput["undefined"];
+  /** -m  } */
+  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"];
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+  "custom-invalid"?: SkfInput["customInvalid"];
+  /** If true, outputs helping hints in console */
+  debug?: SkfInput["debug"];
+  /** If true, hides the label visually */
+  "hide-label"?: SkfInput["hideLabel"];
+  /** If defined, displays informational text below the field */
+  hint?: SkfInput["hint"];
+  /** Tells what keyboard to use if applicable */
+  inputmode?: SkfInput["inputmode"];
+  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+  label?: SkfInput["label"];
+  /** If defined, displays a prefix/adornment before the input-element */
+  leading?: SkfInput["leading"];
+  /** If defined, sets the maximum value to accept for this input */
+  max?: SkfInput["max"];
+  /** If defined, sets the maximum character length to accept for this input */
+  maxlength?: SkfInput["maxLength"];
+  /** If defined, sets the minimum value to accept for this input */
+  min?: SkfInput["min"];
+  /** 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"];
+  /** If defined, adds name to the input-element */
+  pattern?: SkfInput["pattern"];
+  /** If defined, displays placeholder text */
+  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"];
+  /** If defined, displays provided severity state */
+  severity?: SkfInput["severity"];
+  /** If true, displays valid state after interaction */
+  "show-valid"?: SkfInput["showValid"];
+  /** Size of the input */
+  size?: SkfInput["size"];
+  /** If defined, displays a suffix/adornment after the input-element */
+  trailing?: SkfInput["trailing"];
+  /** Type of input control */
+  type?: SkfInput["type"];
+  /** Sets validation start */
+  "validate-on"?: SkfInput["validateOn"];
+  /** The current value of the input field */
+  value?: SkfInput["value"];
+
+  /** Fires when the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => void;
+  /** Fires when the input is invalid */
+  oninvalid?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfLinkProps = {
+  /** Defines the semantic element to render */
+  as?: 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"];
+  /** Defines the position of the icon in relation to the text */
+  "icon-placement"?: SkfLink["iconPlacement"];
+  /** Defines the relationship of the target object to the link object */
+  rel?: SkfLink["rel"];
+  /** If defined, used on conjunction with onClick property, second argument */
+  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"];
+  /** 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"];
+};
+
+export type SkfLoaderProps = {
+  /** Defines the aria-label */
+  "aria-label"?: SkfLoader["ariaLabel"];
+  /** If true, inverts the color (to be used on colored backgrounds) */
+  invert?: SkfLoader["invert"];
+  /** Defines the size of the loader */
+  size?: SkfLoader["size"];
+  /**  */
+  role?: SkfLoader["role"];
+  /**  */
+  ariaLive?: SkfLoader["ariaLive"];
+};
+
+export type SkfLogoProps = {
+  /** Defines the title of the logo */
+  title?: SkfLogo["title"];
+  /** If defined, sets color of the logo */
+  color?: SkfLogo["color"];
+};
+
+export type SkfProgressProps = {
+  /** If true, the progress-bar's fill value is animated */
+  animated?: SkfProgress["animated"];
+  /** Describes how much work the task indicated by the progress element requires */
+  max?: SkfProgress["max"];
+  /** Specifies how much of the task that has been completed */
+  value?: SkfProgress["value"];
+};
+
+export type SkfRadioProps = {
+  /** If true, sets disabled state */
+  disabled?: SkfRadio["undefined"];
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: SkfRadio["undefined"];
+  /** If true, outputs helping hints in console */
+  debug?: SkfRadio["debug"];
+  /** If true, outputs helping hints in console */
+  checked?: SkfRadio["checked"];
+  /** If true, forces component to invalid state until removed */
+  "custom-invalid"?: SkfRadio["customInvalid"];
+  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
+  label?: SkfRadio["label"];
+  /** 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"];
+  /** Size of the Radio */
+  size?: SkfRadio["size"];
+  /** If defined, displays provided severity state */
+  severity?: SkfRadio["severity"];
+  /** If true, displays valid state after interaction */
+  "show-valid"?: SkfRadio["showValid"];
+  /** The current value of the input field */
+  value?: SkfRadio["value"];
+
+  /** {object} - When the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfSelectProps = {
+  /** If true, the select is disabled	`default: false` */
+  disabled?: SkfSelect["undefined"];
+  /** Sets the first visible text on the component */
+  "button-label"?: SkfSelect["buttonLabel"];
+  /** If defined, forces component to invalid state until removed */
+  "custom-invalid"?: SkfSelect["customInvalid"];
+  /** If true, hides the label visually */
+  "hide-label"?: SkfSelect["hideLabel"];
+  /** If true and mulltiple is true, no tags are displayed under the select */
+  "hide-tags"?: SkfSelect["hideTags"];
+  /** If defined, sets the hint text under the select component in the form */
+  hint?: SkfSelect["hint"];
+  /** If defined, displays provided label */
+  label?: SkfSelect["label"];
+  /** If defined, limits the number of selectable options */
+  max?: SkfSelect["max"];
+  /** If defined, sets the minimum number of required options */
+  min?: SkfSelect["min"];
+  /** If true, allows for multiple options to be selected */
+  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"];
+  /** If defined, displays provided severity state */
+  severity?: SkfSelect["severity"];
+  /** If true, displays valid state after interaction */
+  "show-valid"?: SkfSelect["showValid"];
+  /** Size of the Select */
+  size?: SkfSelect["size"];
+  /** A readonly property that returns the selected value(s) in a array */
+  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"];
+  /**  */
+  _selectedOptions?: SkfSelect["_selectedOptions"];
+  /** Fired when the selected option(s) changes */
+  onchange?: (e: CustomEvent<never>) => void;
+  /** Fired when the select is invalid */
+  oninvalid?: (e: CustomEvent<never>) => void;
+  /** Fired when the form is reset */
+  onreset?: (e: CustomEvent<never>) => void;
+  /** {detail: {expanded: boolean}} Fired when the select dropdown is toggled */
+  "onskf-select:dropdown"?: (e: CustomEvent<never>) => void;
+  /** {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled */
+  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfSelectOptionProps = {
+  /** If true, prevents interaction with the option */
+  disabled?: 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"];
+  /**  */
+  _parent?: SkfSelectOption["_parent"];
+  /**  */
+  _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 SkfSelectOptionGroupProps = {
+  /**  */
+  label?: SkfSelectOptionGroup["label"];
+};
+
+export type SkfSwitchProps = {
+  /** If true, sets disabled state */
+  disabled?: SkfSwitch["undefined"];
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: SkfSwitch["undefined"];
+  /** If true, outputs helping hints in console */
+  debug?: SkfSwitch["debug"];
+  /** If true, outputs helping hints in console */
+  checked?: SkfSwitch["checked"];
+  /** If true, hides the label visually */
+  "hide-label"?: SkfSwitch["hideLabel"];
+  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
+  label?: SkfSwitch["label"];
+  /** 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"];
+  /** Size of the Switch */
+  size?: SkfSwitch["size"];
+  /** The current value of the input field */
+  value?: SkfSwitch["value"];
+};
+
+export type SkfTabProps = {
+  /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
+  panel?: SkfTab["panel"];
+  /**  */
+  selected?: SkfTab["selected"];
+  /**  */
+  variant?: SkfTab["variant"];
+  /**  */
+  role?: SkfTab["role"];
+  /** {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected */
+  "onskf-tab-select"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when the component is clicked */
+  onclick?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfTabGroupProps = {
+  /** Sets the default selected tab */
+  "default-selected"?: SkfTabGroup["defaultSelected"];
+  /** If true, removes border */
+  "no-border"?: SkfTabGroup["noBorder"];
+  /** If true, removes padding */
+  "no-padding"?: SkfTabGroup["noPadding"];
+  /** If true, component fills the parent element height */
+  stretch?: SkfTabGroup["stretch"];
+  /** Sets the appearance of the tabs */
+  variant?: SkfTabGroup["variant"];
+};
+
+export type SkfTabPanelProps = {
+  /** The tab panel's name. */
+  name?: SkfTabPanel["name"];
+  /**  */
+  active?: SkfTabPanel["active"];
+  /**  */
+  role?: SkfTabPanel["role"];
+};
+
+export type SkfTagProps = {
+  /** Specifies Tag size */
+  size?: SkfTag["size"];
+  /** If defined, displays leading/provided icon */
+  icon?: SkfTag["icon"];
+  /** If defined, gives the supplied appearance */
+  color?: SkfTag["color"];
+  /** If true, adds trailing button to remove tag */
+  removable?: SkfTag["removable"];
+  /** If defined, accepts a function that runs on click */
+  onClick?: SkfTag["onClick"];
+  /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
+  onRemove?: SkfTag["onRemove"];
+};
+
+export type SkfTextAreaProps = {
+  /** If true, sets disabled state */
+  disabled?: SkfTextArea["undefined"];
+  /** If true, value is required or must be checked for the form to be submittable */
+  required?: SkfTextArea["undefined"];
+  /** If defined, sets the cols of the textarea */
+  cols?: SkfTextArea["cols"];
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
+  "custom-invalid"?: SkfTextArea["customInvalid"];
+  /** If true, outputs helping hints in console */
+  debug?: SkfTextArea["debug"];
+  /** If true, hides the label visually */
+  "hide-label"?: SkfTextArea["hideLabel"];
+  /** If defined, displays informational text below the field */
+  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"];
+  /** If defined, adds name to the input-element */
+  name?: SkfTextArea["name"];
+  /** If defined, sets the maximum character length to accept for this input */
+  maxlength?: SkfTextArea["maxLength"];
+  /** If defined, sets the minimum character length to accept for this input */
+  minlength?: SkfTextArea["minLength"];
+  /** If defined, displays placeholder text */
+  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"];
+  /** If defined, sets the rows of the textarea */
+  rows?: SkfTextArea["rows"];
+  /** If defined, displays provided severity state */
+  severity?: SkfTextArea["severity"];
+  /** If true, displays valid state after interaction */
+  "show-valid"?: SkfTextArea["showValid"];
+  /** Size of the Textarea */
+  size?: SkfTextArea["size"];
+  /** Sets validation start */
+  "validate-on"?: SkfTextArea["validateOn"];
+  /** The current value of the text area */
+  value?: SkfTextArea["value"];
+
+  /** Fires when the value of the input changes */
+  onchange?: (e: CustomEvent<never>) => void;
+  /** Fires when the input is invalid */
+  oninvalid?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfToastProps = {
+  /** If provided, adds a close button to the toast and will not disapear until user actively dismisses it. */
+  closeable?: SkfToast["closeable"];
+  /**  */
+  debug?: SkfToast["debug"];
+  /** Severity of the toast. */
+  severity?: SkfToast["severity"];
+  /** Time in seconds before the toast disappears. */
+  timer?: SkfToast["timer"];
+  /** offsets where toasts emerge vertically */
+  topOffset?: SkfToast["topOffset"];
+};
+
+export type SkfToastWrapperProps = {
+  /**  */
+  debug?: SkfToastWrapper["debug"];
+};
+
 export type CustomElements = {
   /**
    * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
@@ -96,7 +613,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - Expects one or more <skf-accordion-item> element(s)
    */
-  "skf-accordion": Partial<SkfAccordion & BaseProps & BaseEvents>;
+  "skf-accordion": Partial<SkfAccordionProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-alert>` is a type of notification that appears in-line
@@ -110,7 +627,7 @@ export type CustomElements = {
    *  - _default_ - Alert message. **Notice!** See design principles for approved content
    * - **link** - Slot for the link
    */
-  "skf-alert": Partial<SkfAlert & BaseProps & BaseEvents>;
+  "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
 
   /**
    * Component to be used in forms or for interactivity
@@ -126,7 +643,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The Primary content
    */
-  "skf-button": Partial<SkfButton & BaseProps & BaseEvents>;
+  "skf-button": Partial<SkfButtonProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-card>` can be used to group related subjects in a container
@@ -136,7 +653,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The card's main content
    */
-  "skf-card": Partial<SkfCard & BaseProps & BaseEvents>;
+  "skf-card": Partial<SkfCardProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-checkbox>` component is used to create a checkbox input
@@ -149,7 +666,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The Radios label. Alternatively, you can use the `label` attribute.
    */
-  "skf-checkbox": Partial<SkfCheckbox & BaseProps & BaseEvents>;
+  "skf-checkbox": Partial<SkfCheckboxProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
@@ -168,7 +685,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - Main content
    */
-  "skf-collapse": Partial<SkfCollapse & BaseProps & BaseEvents>;
+  "skf-collapse": Partial<SkfCollapseProps & BaseProps & BaseEvents>;
 
   /**
    * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
@@ -179,7 +696,7 @@ export type CustomElements = {
    *  - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_
    * - **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_
    */
-  "skf-divider": Partial<SkfDivider & BaseProps & BaseEvents>;
+  "skf-divider": Partial<SkfDividerProps & BaseProps & BaseEvents>;
 
   /**
    * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
@@ -190,14 +707,14 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The headings content
    */
-  "skf-heading": Partial<SkfHeading & BaseProps & BaseEvents>;
+  "skf-heading": Partial<SkfHeadingProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
    * ---
    *
    */
-  "skf-icon": Partial<SkfIcon & BaseProps & BaseEvents>;
+  "skf-icon": Partial<SkfIconProps & BaseProps & BaseEvents>;
 
   /**
    * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
@@ -211,7 +728,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.
    */
-  "skf-input": Partial<SkfInput & BaseProps & BaseEvents>;
+  "skf-input": Partial<SkfInputProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-link>` can be used as either a regular link or a link styled semantic button
@@ -221,14 +738,14 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The links' main content
    */
-  "skf-link": Partial<SkfLink & BaseProps & BaseEvents>;
+  "skf-link": Partial<SkfLinkProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
    * ---
    *
    */
-  "skf-loader": Partial<SkfLoader & BaseProps & BaseEvents>;
+  "skf-loader": Partial<SkfLoaderProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-logo>` component is used to display the SKF logo.
@@ -238,14 +755,14 @@ export type CustomElements = {
    * ### **CSS Properties:**
    *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
    */
-  "skf-logo": Partial<SkfLogo & BaseProps & BaseEvents>;
+  "skf-logo": Partial<SkfLogoProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
    * ---
    *
    */
-  "skf-progress": Partial<SkfProgress & BaseProps & BaseEvents>;
+  "skf-progress": Partial<SkfProgressProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-radio>` component is used to create a radio input
@@ -258,7 +775,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The radios label. Alternatively, you can use the `label` attribute.
    */
-  "skf-radio": Partial<SkfRadio & BaseProps & BaseEvents>;
+  "skf-radio": Partial<SkfRadioProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.
@@ -275,7 +792,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The select's placeholder content
    */
-  "skf-select": Partial<SkfSelect & BaseProps & BaseEvents>;
+  "skf-select": Partial<SkfSelectProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
@@ -289,7 +806,7 @@ export type CustomElements = {
    *  - _default_ - The option's text content
    * - **icon** - The option's slot for icon or custom meta information (svg).
    */
-  "skf-select-option": Partial<SkfSelectOption & BaseProps & BaseEvents>;
+  "skf-select-option": Partial<SkfSelectOptionProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-select-option-group>` is a component that groups select-options
@@ -299,7 +816,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-select-option-group": Partial<SkfSelectOptionGroup & BaseProps & BaseEvents>;
+  "skf-select-option-group": Partial<SkfSelectOptionGroupProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-switch>` is a component that displays a list of actions or options
@@ -309,7 +826,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.
    */
-  "skf-switch": Partial<SkfSwitch & BaseProps & BaseEvents>;
+  "skf-switch": Partial<SkfSwitchProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tab>` is a component that displays a list of actions or options
@@ -323,7 +840,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The tab's label
    */
-  "skf-tab": Partial<SkfTab & BaseProps & BaseEvents>;
+  "skf-tab": Partial<SkfTabProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tab-group>` is a component that displays a list of actions or options.
@@ -334,7 +851,7 @@ export type CustomElements = {
    *  - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements
    * - **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements
    */
-  "skf-tab-group": Partial<SkfTabGroup & BaseProps & BaseEvents>;
+  "skf-tab-group": Partial<SkfTabGroupProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tab-panel>` is a component that displays a list of actions or options.
@@ -344,7 +861,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The tab panel's content
    */
-  "skf-tab-panel": Partial<SkfTabPanel & BaseProps & BaseEvents>;
+  "skf-tab-panel": Partial<SkfTabPanelProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tag>` is a component that displays a list of actions or options
@@ -354,7 +871,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-tag": Partial<SkfTag & BaseProps & BaseEvents>;
+  "skf-tag": Partial<SkfTagProps & BaseProps & BaseEvents>;
 
   /**
    * The skf-textarea is used to create a textarea. Use it inside a form element or wherever you like.
@@ -368,7 +885,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The textareas label. Alternatively, you can use the `label` attribute.
    */
-  "skf-textarea": Partial<SkfTextArea & BaseProps & BaseEvents>;
+  "skf-textarea": Partial<SkfTextAreaProps & BaseProps & BaseEvents>;
 
   /**
    * A simple toast component that displays a message to the user. Use by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant.
@@ -378,7 +895,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-toast": Partial<SkfToast & BaseProps & BaseEvents>;
+  "skf-toast": Partial<SkfToastProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.
@@ -388,5 +905,5 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The alert components that the toast creates will render here.
    */
-  "skf-toast-wrapper": Partial<SkfToastWrapper & BaseProps & BaseEvents>;
+  "skf-toast-wrapper": Partial<SkfToastWrapperProps & BaseProps & BaseEvents>;
 };

package/package.json

@@ -34,7 +34,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.0-alpha.28",
+  "version": "1.0.0-alpha.29",
   "dependencies": {
     "@floating-ui/dom": "^1.6.12"
   },