@skf-design-system/ui-components 0.0.1-beta.3 → 1.0.0-beta.3

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

@@ -63,9 +63,9 @@ type BaseEvents = {};
 export type SkfAccordionProps = {
   /** If true, will animate the expand/collapse state */
   animated?: boolean | undefined;
-  /** Controls which heading element will be rendered */
-  "heading-as"?: Exclude<HeadingType, "h1">;
-  /** If provided, adds a gap between each item */
+  /** Defines which heading element will be rendered */
+  "heading-as"?: "h1" | "h2" | "h3" | "h4";
+  /** If true, adds a gap between each item */
   gap?: boolean | undefined;
   /** If true, allowes multiple accordion items to open */
   multiple?: boolean | undefined;
@@ -76,14 +76,14 @@ export type SkfAccordionProps = {
 };
 
 export type SkfAlertProps = {
-  /** If true, alert is being used as a toast with an close button */
+  /** If true, alert is being used as a toast (alertdialog) with an close button */
   closeable?: boolean | undefined;
   /** Close button aria-label */
   "button-label"?: string;
   /** If defined, displays leading icon */
   icon?: SkfIcon["name"] | undefined;
   /** If defined, gives the supplied appearance */
-  severity?: SeverityFgColor | undefined;
+  severity?: "error" | "info" | "warning" | "success" | "alert";
 
   /** Fires when the close button is clicked */
   "onskf-alert-close"?: (e: CustomEvent<never>) => void;
@@ -261,11 +261,11 @@ export type SkfButtonProps = {
 
 export type SkfCardProps = {
   /** If true, removes border */
-  "no-border"?: boolean;
+  "no-border"?: boolean | undefined;
   /** If true, removes padding */
-  "no-padding"?: boolean;
+  "no-padding"?: boolean | undefined;
   /** If true, the Card fills the parent element height */
-  stretch?: boolean;
+  stretch?: boolean | undefined;
 };
 
 export type SkfCheckboxProps = {
@@ -289,12 +289,12 @@ export type SkfCheckboxProps = {
   name?: string | undefined;
   /** If defined, renders an alternative A11y text for the asterisk */
   "required-label"?: string | undefined;
-  /** Size of the checkbox */
-  size?: "sm" | "md";
   /** If defined, styles checkbox using provided severity */
-  severity?: FormFieldBaseProps["severity"] | undefined;
-  /** If defined, displays valid state after interaction */
+  severity?: "alert" | "success" | "info" | "warning";
+  /** If true, displays valid state after interaction */
   "show-valid"?: boolean | undefined;
+  /** Size of the checkbox */
+  size?: "sm" | "md";
   /** The current value of the input field */
   value?: string;
 
@@ -304,44 +304,44 @@ export type SkfCheckboxProps = {
 
 export type SkfCollapseProps = {
   /** If true, will animate the expand/collapse state */
-  animated?: boolean;
+  animated?: boolean | undefined;
   /** If true, will set the collapse to be expanded by default */
-  expanded?: boolean;
+  expanded?: boolean | undefined;
   /** Heading for the collapse */
   heading?: string | undefined;
-  /** Controls which heading element will be rendered */
-  "heading-as"?: Exclude<HeadingType, "h1">;
+  /** Defines which heading element will be rendered */
+  "heading-as"?: "h1" | "h2" | "h3" | "h4";
   /** If true, renders the small version */
-  small?: boolean;
+  small?: boolean | undefined;
   /** If true, will truncate the heading in collapsed state */
-  truncate?: boolean;
+  truncate?: boolean | undefined;
 
   /** Event emitted when toggled */
   "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfDividerProps = {
-  /** If provided, alters the Divider color */
+  /** Defines the Divider color */
   color?: "emphasised" | "primary" | "secondary" | "tertiary" | "inverse";
   /** If true, renders a div for presentational purpose instead of the semantic hr-element */
-  decorative?: boolean;
+  decorative?: boolean | undefined;
   /** If true, renders the divider vertically */
-  vertical?: boolean;
+  vertical?: boolean | undefined;
 };
 
 export type SkfHeadingProps = {
-  /** Controls which heading element will be rendered. Should not be used to affect appearance. */
-  as?: HeadingType;
+  /** Controls which heading element will be rendered. Should not be used to affect appearance */
+  as?: "h1" | "h2" | "h3" | "h4";
   /** If provided, changes the appearance of the heading */
-  "styled-as"?: HeadingType | undefined;
+  "styled-as"?: "h1" | "h2" | "h3" | "h4";
 };
 
 export type SkfIconProps = {
-  /**  */
+  /** Sets the color of the icon */
   color?: "primary" | "inverse" | "emphasised" | "secondary" | "success" | "info" | "warning" | "error" | "alert";
-  /** If provided, adds an alternate description to use for assistive devices */
+  /** If defined, adds an alternate description to use for assistive devices */
   label?: string | undefined;
-  /**  */
+  /** Name of the icon to display */
   name?:
     | "arrowDown"
     | "arrowDownUp"
@@ -494,7 +494,7 @@ export type SkfIconProps = {
     | "warningDiamond"
     | "zoomIn"
     | "zoomOut";
-  /**  */
+  /** Size of the icon */
   size?: "xs" | "sm" | "md" | "lg";
 };
 
@@ -503,62 +503,79 @@ export type SkfInputProps = {
   disabled?: boolean;
   /** If true, value is required or must be checked for the form to be submittable */
   required?: boolean;
-  /** If provided, renders a custom aria-label for the clear button **Notice!** Only applicable to type=search. */
+  /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
   "button-aria-label-clear"?: string;
-  /** If provided, renders a custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
+  /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
   "button-aria-label-hide"?: string;
-  /** If provided, renders a custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
+  /** Custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
   "button-aria-label-show"?: string;
-  /** If provided, forces component to invalid state until removed. Its value is used as hint text. */
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
   "custom-invalid"?: string;
-  /** If provided, outputs helping hints in console */
-  debug?: boolean;
+  /** If true, outputs helping hints in console */
+  debug?: boolean | undefined;
   /** If true, hides the label visually */
-  "hide-label"?: boolean;
-  /** If provided, displays informational text below the field */
+  "hide-label"?: boolean | undefined;
+  /** If defined, displays informational text below the field */
   hint?: string | undefined;
-  /** If provided, tells what keyboard to use if applicable */
+  /** Tells what keyboard to use if applicable */
   inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
-  /** The input's label. Alternatively, you can use the `label` attribute. */
+  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
   label?: string | undefined;
-  /** If provided, displays a prefix/adornment before the input-element */
+  /** If defined, displays a prefix/adornment before the input-element */
   leading?: string | undefined;
-  /** If provided, sets the maximum value to accept for this input */
+  /** If defined, sets the maximum value to accept for this input */
   max?: number | string | undefined;
-  /** If provided, sets the maximum character length to accept for this input */
+  /** If defined, sets the maximum character length to accept for this input */
   maxlength?: number | undefined;
-  /** If provided, sets the minimum value to accept for this input */
+  /** If defined, sets the minimum value to accept for this input */
   min?: number | string | undefined;
-  /** If provided, sets the minimum character length to accept for this input */
+  /** If defined, sets the minimum character length to accept for this input */
   minlength?: number | undefined;
-  /** If provided, adds name to the input-element */
+  /** If defined, adds name to the input-element */
   name?: string | undefined;
-  /** If provided, adds name to the input-element */
+  /** If defined, adds name to the input-element */
   pattern?: string | undefined;
-  /** If provided, displays placeholder text */
+  /** If defined, displays placeholder text */
   placeholder?: string | undefined;
   /** If true, makes the element not mutable, meaning the user can not edit the control */
   readonly?: boolean | undefined;
-  /** If provided, renders an alternative A11y text for the asterisk */
+  /** If defined, renders an alternative A11y text for the asterisk */
   "required-label"?: string | undefined;
-  /** If provided, displays provided severity state */
-  severity?: FormFieldBaseProps["severity"] | undefined;
-  /** If provided, displays provided severity state */
+  /** If defined, displays provided severity state */
+  severity?: "alert" | "success" | "info" | "warning";
+  /** If true, displays valid state after interaction */
   "show-valid"?: boolean | undefined;
-  /** If provided, displays an alternative size */
-  size?: "sm" | "md" | undefined;
-  /** If provided, displays a suffix/adornment after the input-element */
+  /** Size of the input */
+  size?: "sm" | "md";
+  /** If defined, displays a suffix/adornment after the input-element */
   trailing?: string | undefined;
-  /** If provided, changes the type of form control */
-  type?: Exclude<FormFieldBaseProps["type"], "checkbox" | "radio"> | undefined;
-  /** If provided, sets validation start, "input", "change" or "submit" */
-  "validate-on"?: "input" | "change" | "submit" | undefined;
+  /** Type of input control */
+  type?:
+    | "button"
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "file"
+    | "hidden"
+    | "image"
+    | "month"
+    | "number"
+    | "password"
+    | "range"
+    | "reset"
+    | "search"
+    | "submit"
+    | "tel"
+    | "text"
+    | "time"
+    | "url"
+    | "week";
+  /** Sets validation start */
+  "validate-on"?: "input" | "change" | "submit";
   /** The current value of the input field */
   value?: string;
-  /**  */
-  _numberController?: string;
-  /**  */
-  _passwordController?: string;
+
   /** Fires when the value of the input changes */
   onchange?: (e: CustomEvent<never>) => void;
   /** Fires when the input is invalid */
@@ -566,17 +583,17 @@ export type SkfInputProps = {
 };
 
 export type SkfLinkProps = {
-  /** Specifies semantic element to render - */
+  /** Defines the semantic element to render */
   as?: "button" | "a";
-  /**  */
+  /** Defines the text-color */
   color?: "primary" | "inverse";
   /** If true, disables the link */
   disabled?: boolean | undefined;
-  /** If provided, downloads the url */
+  /** If defined, downloads the url */
   download?: string | undefined;
-  /** If provided, loads url on click */
+  /** If defined, loads url on click */
   href?: string | undefined;
-  /** If provided, renders an icon before or after the text */
+  /** If defined, renders an icon before or after the text */
   icon?:
     | "arrowDown"
     | "arrowDownUp"
@@ -729,35 +746,39 @@ export type SkfLinkProps = {
     | "warningDiamond"
     | "zoomIn"
     | "zoomOut";
-  /** Position of the icon in relation to the text - */
+  /** Defines the position of the icon in relation to the text */
   "icon-placement"?: "left" | "right";
-  /** Specifies the relationship of the target object to the link object - */
+  /** Defines the relationship of the target object to the link object */
   rel?: string;
-  /** If provided, used on conjunction with onClick property, second argument */
+  /** If defined, used on conjunction with onClick property, second argument */
   route?: string | undefined;
   /** If true, fills the parents horizontal axis */
   stretch?: boolean | undefined;
-  /** If provided, specifies where to open the linked document */
+  /** If defined, specifies where to open the linked document */
   target?: "_blank" | "_parent" | "_self" | "_top" | undefined;
-  /** Type of button - */
+  /** Defines the type of button */
   type?: "button" | "submit" | "reset";
   /** If provided, custom function triggered by click where the second return parameter enables custom routing. */
   onClick?: function;
 };
 
 export type SkfLoaderProps = {
-  /**  */
+  /** Defines the aria-label */
   "aria-label"?: string;
   /** If true, inverts the color (to be used on colored backgrounds) */
-  invert?: boolean;
-  /** If provided, displays an alternative size */
+  invert?: boolean | undefined;
+  /** Defines the size of the loader */
   size?: "md" | "sm" | undefined;
+  /**  */
+  role?: string;
+  /**  */
+  ariaLive?: string;
 };
 
 export type SkfLogoProps = {
-  /** The title of the logo */
+  /** Defines the title of the logo */
   title?: string;
-  /** If provided, sets color of the logo */
+  /** If defined, sets color of the logo */
   color?: "primary" | "secondary" | "inverse";
 };
 
@@ -766,25 +787,25 @@ export type SkfRadioProps = {
   disabled?: boolean;
   /** If true, value is required or must be checked for the form to be submittable */
   required?: boolean;
-  /** If provided, outputs helping hints in console */
-  debug?: boolean;
+  /** If true, outputs helping hints in console */
+  debug?: boolean | undefined;
   /** If true, outputs helping hints in console */
   checked?: boolean | undefined;
   /** If true, forces component to invalid state until removed */
   "custom-invalid"?: boolean | undefined;
   /** If true, hides the label visually */
-  "hide-label"?: boolean;
-  /** The input's label. Alternatively, you can use the `label` attribute. */
+  "hide-label"?: boolean | undefined;
+  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: string | undefined;
-  /** If provided, adds name to the input-element */
+  /** If defined, adds name to the input-element */
   name?: string | undefined;
-  /** If provided, renders an alternative A11y text for the asterisk */
+  /** If defined, renders an alternative A11y text for the asterisk */
   "required-label"?: string | undefined;
-  /** If provided, displays an alternative size */
-  size?: "sm" | "md" | undefined;
-  /** If provided, displays provided severity state */
-  severity?: FormFieldBaseProps["severity"] | undefined;
-  /** If provided, displays valid state after interaction */
+  /** Size of the Radio */
+  size?: "sm" | "md";
+  /** If defined, displays provided severity state */
+  severity?: "success" | "info" | "warning" | "alert";
+  /** If true, displays valid state after interaction */
   "show-valid"?: boolean | undefined;
   /** The current value of the input field */
   value?: string;
@@ -793,6 +814,87 @@ export type SkfRadioProps = {
   onchange?: (e: CustomEvent<never>) => void;
 };
 
+export type SkfSelectProps = {
+  /** If true, the select is disabled	`default: false` */
+  disabled?: boolean;
+  /** Sets the first visible text on the component */
+  "button-label"?: string;
+  /** If defined, forces component to invalid state until removed */
+  "custom-invalid"?: string | undefined;
+  /** If true, hides the label visually */
+  "hide-label"?: boolean | undefined;
+  /** If true and mulltiple is true, no tags are displayed under the select */
+  "hide-tags"?: boolean | undefined;
+  /** If defined, sets the hint text under the select component in the form */
+  hint?: string | undefined;
+  /** If defined, displays provided label */
+  label?: string | undefined;
+  /** If defined, limits the number of selectable options */
+  max?: number | undefined;
+  /** If defined, sets the minimum number of required options */
+  min?: number | undefined;
+  /** If true, allows for multiple options to be selected */
+  multiple?: boolean | undefined;
+  /** If defined, set name of the component */
+  name?: string | undefined;
+  /** If defined, renders an alternative A11y text for the asterisk */
+  "required-label"?: string | undefined;
+  /** If defined, displays provided severity state */
+  severity?: FormFieldBaseProps["severity"] | undefined;
+  /** If true, displays valid state after interaction */
+  "show-valid"?: boolean | undefined;
+  /** Size of the Select */
+  size?: "sm" | "md";
+  /** A readonly property that returns the selected value(s) in a array */
+  getSelectedValues?: string;
+  /** A readonly property that returns the selected slot(s) text content in a array */
+  getSelectedOptionsText?: string;
+  /** Read only, returns the selected value. (if multiple: in a comma separated string) */
+  value?: string;
+  /**  */
+  _selectedOptions?: array;
+  /** Fired when the selected option(s) changes */
+  onchange?: (e: CustomEvent<never>) => void;
+  /** Fired when the select is invalid */
+  oninvalid?: (e: CustomEvent<never>) => void;
+  /** Fired when the form is reset */
+  onreset?: (e: CustomEvent<never>) => void;
+  /** {detail: {expanded: boolean}} Fired when the select dropdown is toggled */
+  "onskf-select:dropdown"?: (e: CustomEvent<never>) => void;
+  /** {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled */
+  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfSelectOptionProps = {
+  /** If true, prevents interaction with the option */
+  disabled?: boolean | undefined;
+  /** If defined, set an icon */
+  icon?: SkfIcon["name"] | undefined;
+  /** If defined, sets provided color on the icon */
+  "icon-color"?: IconColor | undefined;
+  /** If true, sets the option as selected */
+  selected?: boolean | undefined;
+  /** If defined, sets a short label */
+  "short-label"?: string | undefined;
+  /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
+  value?: string;
+  /** The option's label text (equivalent to the tags textContent) */
+  text?: string;
+  /**  */
+  role?: string;
+  /**  */
+  _parent?: string;
+  /**  */
+  _shortcutUpdate?: boolean;
+  /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
+  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfSelectOptionGroupProps = {
+  /**  */
+  label?: string;
+};
+
 export type SkfSwitchProps = {
   /** If true, sets disabled state */
   disabled?: boolean;
@@ -804,7 +906,7 @@ export type SkfSwitchProps = {
   checked?: boolean | undefined;
   /** If true, hides the label visually */
   "hide-label"?: boolean | undefined;
-  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: string | undefined;
   /** If defined, adds name to the input-element */
   name?: string | undefined;
@@ -817,9 +919,9 @@ export type SkfSwitchProps = {
 };
 
 export type SkfTagProps = {
-  /** Specifies Tag size - */
+  /** Specifies Tag size */
   size?: "sm" | "md" | "lg";
-  /** If defined, displays leading/provided icon - */
+  /** If defined, displays leading/provided icon */
   icon?:
     | "arrowDown"
     | "arrowDownUp"
@@ -972,10 +1074,14 @@ export type SkfTagProps = {
     | "warningDiamond"
     | "zoomIn"
     | "zoomOut";
-  /** If defined, gives the supplied appearance - */
+  /** If defined, gives the supplied appearance */
   color?: "warning" | "success" | "info" | "error" | "alert";
   /** If true, adds trailing button to remove tag */
   removable?: boolean | undefined;
+  /** If defined, accepts a function that runs on click */
+  onClick?: string;
+  /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
+  onRemove?: string;
 };
 
 export type SkfTextAreaProps = {
@@ -983,40 +1089,40 @@ export type SkfTextAreaProps = {
   disabled?: boolean;
   /** If true, value is required or must be checked for the form to be submittable */
   required?: boolean;
-  /** If provided, sets the cols of the textarea */
-  cols?: number;
-  /** If provided, forces component to invalid state until removed. Its value is used as hint text. */
+  /** If defined, sets the cols of the textarea */
+  cols?: number | undefined;
+  /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
   "custom-invalid"?: string;
-  /** If provided, outputs helping hints in console */
-  debug?: boolean;
-  /** hide-label - If true, hides the label visually */
-  "hide-label"?: boolean;
-  /** If provided, displays informational text below the field */
+  /** If true, outputs helping hints in console */
+  debug?: boolean | undefined;
+  /** If true, hides the label visually */
+  "hide-label"?: boolean | undefined;
+  /** If defined, displays informational text below the field */
   hint?: string | undefined;
-  /** The input's label. Alternatively, you can use the component slot. */
-  label?: string;
-  /** If provided, adds name to the input-element */
+  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
+  label?: string | undefined;
+  /** If defined, adds name to the input-element */
   name?: string | undefined;
-  /** If provided, sets the maximum character length to accept for this input */
+  /** If defined, sets the maximum character length to accept for this input */
   maxlength?: number | undefined;
-  /** If provided, sets the minimum character length to accept for this input */
+  /** If defined, sets the minimum character length to accept for this input */
   minlength?: number | undefined;
-  /** If provided, displays placeholder text */
+  /** If defined, displays placeholder text */
   placeholder?: string | undefined;
   /** If true, makes the element not mutable, meaning the user can not edit the control */
   readonly?: boolean | undefined;
-  /** If provided, renders an alternative A11y text for the asterisk */
+  /** If defined, renders an alternative A11y text for the asterisk */
   "required-label"?: string | undefined;
-  /** If provided, sets the rows of the textarea */
-  rows?: number;
-  /** If provided, displays provided severity state */
-  severity?: "success" | "error";
+  /** If defined, sets the rows of the textarea */
+  rows?: number | undefined;
+  /** If defined, displays provided severity state */
+  severity?: "success" | "info" | "warning" | "alert";
   /** If true, displays valid state after interaction */
   "show-valid"?: boolean | undefined;
-  /** If provided, displays an alternative size */
+  /** Size of the Textarea */
   size?: "sm" | "md" | undefined;
-  /** If provided, sets validation start, "input", "change" or "submit" */
-  "validate-on"?: "input" | "change" | "submit" | undefined;
+  /** Sets validation start */
+  "validate-on"?: "input" | "change" | "submit";
   /** The current value of the text area */
   value?: string;
 
@@ -1030,14 +1136,14 @@ export type CustomElements = {
   /**
    * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
    *
-   * See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6256cb1b44eba592d319d92e) for design principles.
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
    * ---
    *
    *
    * ### **Slots:**
    *  - _default_ - Expects one or more <skf-accordion-item> element(s)
    */
-  "skf-accordion": Partial<SkfAccordionProps | BaseProps | BaseEvents>;
+  "skf-accordion": Partial<SkfAccordionProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-alert>` is a type of notification that appears in-line
@@ -1049,9 +1155,9 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - _default_ - Alert message. **Notice!** See design principles for approved content
-   * - **link** - lodjvodjvodjo
+   * - **link** - Slot for the link
    */
-  "skf-alert": Partial<SkfAlertProps | BaseProps | BaseEvents>;
+  "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
 
   /**
    * Component to be used in forms or for interactivity
@@ -1061,7 +1167,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The Primary content
    */
-  "skf-button": Partial<SkfButtonProps | BaseProps | BaseEvents>;
+  "skf-button": Partial<SkfButtonProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-card>` can be used to group related subjects in a container
@@ -1071,7 +1177,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The card's main content
    */
-  "skf-card": Partial<SkfCardProps | BaseProps | BaseEvents>;
+  "skf-card": Partial<SkfCardProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-checkbox>` component is used to create a checkbox input
@@ -1082,14 +1188,14 @@ export type CustomElements = {
    *  - **change** - {object} - When the value of the input changes
    *
    * ### **Slots:**
-   *  - **Default** - Alternatively, you can use the `label` attribute
+   *  - _default_ - The Radios label. Alternatively, you can use the `label` attribute.
    */
-  "skf-checkbox": Partial<SkfCheckboxProps | BaseProps | BaseEvents>;
+  "skf-checkbox": Partial<SkfCheckboxProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
    *
-   * See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229e2eb8a8dacf366dc3243) for design principles.
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
    * ---
    *
    *
@@ -1103,10 +1209,10 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - Main content
    */
-  "skf-collapse": Partial<SkfCollapseProps | 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.
+   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
    * ---
    *
    *
@@ -1114,22 +1220,25 @@ export type CustomElements = {
    *  - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_
    * - **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_
    */
-  "skf-divider": Partial<SkfDividerProps | BaseProps | BaseEvents>;
+  "skf-divider": Partial<SkfDividerProps & BaseProps & BaseEvents>;
 
   /**
    * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
    * It extends the interface of native html `<h1>` to `<h4>` elements.
    * ---
    *
+   *
+   * ### **Slots:**
+   *  - _default_ - The headings content
    */
-  "skf-heading": Partial<SkfHeadingProps | 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<SkfIconProps | 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.
@@ -1141,9 +1250,9 @@ export type CustomElements = {
    * - **invalid** - Fires when the input is invalid
    *
    * ### **Slots:**
-   *  - **Default** -  Alternatively, you can use the `label` attribute
+   *  - _default_ - The Inputs label. Alternatively, you can use the `label` attribute.
    */
-  "skf-input": Partial<SkfInputProps | BaseProps | BaseEvents>;
+  "skf-input": Partial<SkfInputProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-link>` can be used as either a regular link or a link styled semantic button
@@ -1153,14 +1262,14 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The links' main content
    */
-  "skf-link": Partial<SkfLinkProps | BaseProps | BaseEvents>;
+  "skf-link": Partial<SkfLinkProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities.
+   * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
    * ---
    *
    */
-  "skf-loader": Partial<SkfLoaderProps | BaseProps | BaseEvents>;
+  "skf-loader": Partial<SkfLoaderProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-logo>` component is used to display the SKF logo.
@@ -1170,7 +1279,7 @@ export type CustomElements = {
    * ### **CSS Properties:**
    *  - **--skf-logo-height** - The height of the logo _(default: undefined)_
    */
-  "skf-logo": Partial<SkfLogoProps | BaseProps | BaseEvents>;
+  "skf-logo": Partial<SkfLogoProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-radio>` component is used to create a radio input
@@ -1181,19 +1290,60 @@ export type CustomElements = {
    *  - **change** - {object} - When the value of the input changes
    *
    * ### **Slots:**
-   *  - **Default** -  Alternatively, you can use the `label` attribute
+   *  - _default_ - The radios label. Alternatively, you can use the `label` attribute.
    */
-  "skf-radio": Partial<SkfRadioProps | BaseProps | BaseEvents>;
+  "skf-radio": Partial<SkfRadioProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-switch>` is a component that displays a list of actions or options
+   * The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **change** - Fired when the selected option(s) changes
+   * - **invalid** - Fired when the select is invalid
+   * - **reset** - Fired when the form is reset
+   * - **skf-select:dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled
+   * - **skf-select-option:select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
+   *
+   * ### **Slots:**
+   *  - _default_ - The select's placeholder content
+   */
+  "skf-select": Partial<SkfSelectProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-select-option:select** - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.
+   *
+   * ### **Slots:**
+   *  - _default_ - The option's text content
+   * - **icon** - The option's slot for icon or custom meta information (svg).
+   */
+  "skf-select-option": Partial<SkfSelectOptionProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-select-option-group>` is a component that groups select-options
    * ---
    *
    *
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-switch": Partial<SkfSwitchProps | BaseProps | BaseEvents>;
+  "skf-select-option-group": Partial<SkfSelectOptionGroupProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-switch>` is a component that displays a list of actions or options
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.
+   */
+  "skf-switch": Partial<SkfSwitchProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tag>` is a component that displays a list of actions or options
@@ -1203,7 +1353,7 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
-  "skf-tag": Partial<SkfTagProps | 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.
@@ -1215,7 +1365,7 @@ export type CustomElements = {
    * - **invalid** - Fires when the input is invalid
    *
    * ### **Slots:**
-   *  - **The** - textareas label. Alternatively, you can use the `label` attribute.
+   *  - _default_ - The textareas label. Alternatively, you can use the `label` attribute.
    */
-  "skf-textarea": Partial<SkfTextAreaProps | BaseProps | BaseEvents>;
+  "skf-textarea": Partial<SkfTextAreaProps & BaseProps & BaseEvents>;
 };