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

package/dist/types/vue/index.d.ts

@@ -14,6 +14,9 @@ import type { SkfLink } from "../../components/link/link.component.js";
 import type { SkfLoader } from "../../components/loader/loader.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
 import type { SkfRadio } from "../../components/radio/radio.component.js";
+import type { SkfSelect } from "../../components/select/select.component.js";
+import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
+import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js";
 import type { SkfSwitch } from "../../components/switch/switch.component.js";
 import type { SkfTag } from "../../components/tag/tag.component.js";
 import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
@@ -21,9 +24,9 @@ import type { SkfTextArea } from "../../components/textarea/textarea.component.j
 type SkfAccordionProps = {
   /** If true, will animate the expand/collapse state */
   animated?: SkfAccordion["animated"];
-  /** Controls which heading element will be rendered */
+  /** Defines which heading element will be rendered */
   "heading-as"?: SkfAccordion["headingAs"];
-  /** If provided, adds a gap between each item */
+  /** If true, adds a gap between each item */
   gap?: SkfAccordion["gap"];
   /** If true, allowes multiple accordion items to open */
   multiple?: SkfAccordion["multiple"];
@@ -34,7 +37,7 @@ type SkfAccordionProps = {
 };
 
 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?: SkfAlert["closeable"];
   /** Close button aria-label */
   "button-label"?: SkfAlert["buttonLabel"];
@@ -96,12 +99,12 @@ type SkfCheckboxProps = {
   name?: SkfCheckbox["name"];
   /** If defined, renders an alternative A11y text for the asterisk */
   "required-label"?: SkfCheckbox["requiredLabel"];
-  /** Size of the checkbox */
-  size?: SkfCheckbox["size"];
   /** If defined, styles checkbox using provided severity */
   severity?: SkfCheckbox["severity"];
-  /** If defined, displays valid state after interaction */
+  /** 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"];
 
@@ -116,7 +119,7 @@ type SkfCollapseProps = {
   expanded?: SkfCollapse["expanded"];
   /** Heading for the collapse */
   heading?: SkfCollapse["heading"];
-  /** Controls which heading element will be rendered */
+  /** Defines which heading element will be rendered */
   "heading-as"?: SkfCollapse["headingAs"];
   /** If true, renders the small version */
   small?: SkfCollapse["small"];
@@ -128,7 +131,7 @@ type SkfCollapseProps = {
 };
 
 type SkfDividerProps = {
-  /** If provided, alters the Divider color */
+  /** Defines the Divider color */
   color?: SkfDivider["color"];
   /** If true, renders a div for presentational purpose instead of the semantic hr-element */
   decorative?: SkfDivider["decorative"];
@@ -137,20 +140,20 @@ type SkfDividerProps = {
 };
 
 type SkfHeadingProps = {
-  /** Controls which heading element will be rendered. Should not be used to affect appearance. */
+  /** 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"];
 };
 
 type SkfIconProps = {
-  /**  */
+  /** Sets the color of the icon */
   color?: SkfIcon["color"];
-  /** If provided, adds an alternate description to use for assistive devices */
+  /** 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"];
 };
 
@@ -159,62 +162,59 @@ type SkfInputProps = {
   disabled?: SkfInput["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
   required?: SkfInput["undefined"];
-  /** 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"?: SkfInput["buttonAriaLabelClear"];
-  /** 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"?: SkfInput["buttonAriaLabelHide"];
-  /** 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"?: SkfInput["buttonAriaLabelShow"];
-  /** 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"?: SkfInput["customInvalid"];
-  /** If provided, outputs helping hints in console */
+  /** If true, outputs helping hints in console */
   debug?: SkfInput["debug"];
   /** If true, hides the label visually */
   "hide-label"?: SkfInput["hideLabel"];
-  /** If provided, displays informational text below the field */
+  /** If defined, displays informational text below the field */
   hint?: SkfInput["hint"];
-  /** If provided, tells what keyboard to use if applicable */
+  /** Tells what keyboard to use if applicable */
   inputmode?: SkfInput["inputmode"];
-  /** 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?: SkfInput["label"];
-  /** If provided, displays a prefix/adornment before the input-element */
+  /** If defined, displays a prefix/adornment before the input-element */
   leading?: SkfInput["leading"];
-  /** If provided, sets the maximum value to accept for this input */
+  /** If defined, sets the maximum value to accept for this input */
   max?: SkfInput["max"];
-  /** 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?: SkfInput["maxLength"];
-  /** If provided, sets the minimum value to accept for this input */
+  /** If defined, sets the minimum value to accept for this input */
   min?: SkfInput["min"];
-  /** 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?: SkfInput["minLength"];
-  /** If provided, adds name to the input-element */
+  /** If defined, adds name to the input-element */
   name?: SkfInput["name"];
-  /** If provided, adds name to the input-element */
+  /** If defined, adds name to the input-element */
   pattern?: SkfInput["pattern"];
-  /** If provided, displays placeholder text */
+  /** 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 provided, renders an alternative A11y text for the asterisk */
+  /** If defined, renders an alternative A11y text for the asterisk */
   "required-label"?: SkfInput["requiredLabel"];
-  /** If provided, displays provided severity state */
+  /** If defined, displays provided severity state */
   severity?: SkfInput["severity"];
-  /** If provided, displays provided severity state */
+  /** If true, displays valid state after interaction */
   "show-valid"?: SkfInput["showValid"];
-  /** If provided, displays an alternative size */
+  /** Size of the input */
   size?: SkfInput["size"];
-  /** If provided, displays a suffix/adornment after the input-element */
+  /** If defined, displays a suffix/adornment after the input-element */
   trailing?: SkfInput["trailing"];
-  /** If provided, changes the type of form control */
+  /** Type of input control */
   type?: SkfInput["type"];
-  /** If provided, sets validation start, "input", "change" or "submit" */
+  /** Sets validation start */
   "validate-on"?: SkfInput["validateOn"];
   /** The current value of the input field */
   value?: SkfInput["value"];
-  /**  */
-  _numberController?: SkfInput["_numberController"];
-  /**  */
-  _passwordController?: SkfInput["_passwordController"];
+
   /** Fires when the value of the input changes */
   onchange?: (e: CustomEvent<never>) => void;
   /** Fires when the input is invalid */
@@ -222,47 +222,51 @@ type SkfInputProps = {
 };
 
 type SkfLinkProps = {
-  /** Specifies semantic element to render - */
+  /** 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 provided, downloads the url */
+  /** If defined, downloads the url */
   download?: SkfLink["download"];
-  /** If provided, loads url on click */
+  /** If defined, loads url on click */
   href?: SkfLink["href"];
-  /** If provided, renders an icon before or after the text */
+  /** If defined, renders an icon before or after the text */
   icon?: SkfLink["icon"];
-  /** Position of the icon in relation to the text - */
+  /** Defines the position of the icon in relation to the text */
   "icon-placement"?: SkfLink["iconPlacement"];
-  /** Specifies the relationship of the target object to the link object - */
+  /** Defines the relationship of the target object to the link object */
   rel?: SkfLink["rel"];
-  /** If provided, used on conjunction with onClick property, second argument */
+  /** If defined, used on conjunction with onClick property, second argument */
   route?: SkfLink["route"];
   /** If true, fills the parents horizontal axis */
   stretch?: SkfLink["stretch"];
-  /** If provided, specifies where to open the linked document */
+  /** If defined, specifies where to open the linked document */
   target?: SkfLink["target"];
-  /** Type of button - */
+  /** 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"];
 };
 
 type SkfLoaderProps = {
-  /**  */
+  /** Defines the aria-label */
   "aria-label"?: SkfLoader["ariaLabel"];
   /** If true, inverts the color (to be used on colored backgrounds) */
   invert?: SkfLoader["invert"];
-  /** If provided, displays an alternative size */
+  /** Defines the size of the loader */
   size?: SkfLoader["size"];
+  /**  */
+  role?: SkfLoader["role"];
+  /**  */
+  ariaLive?: SkfLoader["ariaLive"];
 };
 
 type SkfLogoProps = {
-  /** The title of the logo */
+  /** Defines the title of the logo */
   title?: SkfLogo["title"];
-  /** If provided, sets color of the logo */
+  /** If defined, sets color of the logo */
   color?: SkfLogo["color"];
 };
 
@@ -271,7 +275,7 @@ type SkfRadioProps = {
   disabled?: SkfRadio["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
   required?: SkfRadio["undefined"];
-  /** If provided, outputs helping hints in console */
+  /** If true, outputs helping hints in console */
   debug?: SkfRadio["debug"];
   /** If true, outputs helping hints in console */
   checked?: SkfRadio["checked"];
@@ -279,17 +283,17 @@ type SkfRadioProps = {
   "custom-invalid"?: SkfRadio["customInvalid"];
   /** If true, hides the label visually */
   "hide-label"?: SkfRadio["hideLabel"];
-  /** 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?: SkfRadio["label"];
-  /** If provided, adds name to the input-element */
+  /** If defined, adds name to the input-element */
   name?: SkfRadio["name"];
-  /** If provided, renders an alternative A11y text for the asterisk */
+  /** If defined, renders an alternative A11y text for the asterisk */
   "required-label"?: SkfRadio["requiredLabel"];
-  /** If provided, displays an alternative size */
+  /** Size of the Radio */
   size?: SkfRadio["size"];
-  /** If provided, displays provided severity state */
+  /** If defined, displays provided severity state */
   severity?: SkfRadio["severity"];
-  /** If provided, displays valid state after interaction */
+  /** If true, displays valid state after interaction */
   "show-valid"?: SkfRadio["showValid"];
   /** The current value of the input field */
   value?: SkfRadio["value"];
@@ -298,6 +302,87 @@ type SkfRadioProps = {
   onchange?: (e: CustomEvent<never>) => void;
 };
 
+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 */
+  getSelectedValues?: SkfSelect["getSelectedValues"];
+  /** A readonly property that returns the selected slot(s) text content in a array */
+  getSelectedOptionsText?: SkfSelect["getSelectedOptionsText"];
+  /** 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;
+};
+
+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;
+};
+
+type SkfSelectOptionGroupProps = {
+  /**  */
+  label?: SkfSelectOptionGroup["label"];
+};
+
 type SkfSwitchProps = {
   /** If true, sets disabled state */
   disabled?: SkfSwitch["undefined"];
@@ -309,7 +394,7 @@ type SkfSwitchProps = {
   checked?: SkfSwitch["checked"];
   /** If true, hides the label visually */
   "hide-label"?: SkfSwitch["hideLabel"];
-  /** 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?: SkfSwitch["label"];
   /** If defined, adds name to the input-element */
   name?: SkfSwitch["name"];
@@ -322,14 +407,18 @@ type SkfSwitchProps = {
 };
 
 type SkfTagProps = {
-  /** Specifies Tag size - */
+  /** Specifies Tag size */
   size?: SkfTag["size"];
-  /** If defined, displays leading/provided icon - */
+  /** If defined, displays leading/provided icon */
   icon?: SkfTag["icon"];
-  /** If defined, gives the supplied appearance - */
+  /** 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"];
 };
 
 type SkfTextAreaProps = {
@@ -337,39 +426,39 @@ type SkfTextAreaProps = {
   disabled?: SkfTextArea["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
   required?: SkfTextArea["undefined"];
-  /** If provided, sets the cols of the textarea */
+  /** If defined, sets the cols of the textarea */
   cols?: SkfTextArea["cols"];
-  /** 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"?: SkfTextArea["customInvalid"];
-  /** If provided, outputs helping hints in console */
+  /** If true, outputs helping hints in console */
   debug?: SkfTextArea["debug"];
-  /** hide-label - If true, hides the label visually */
+  /** If true, hides the label visually */
   "hide-label"?: SkfTextArea["hideLabel"];
-  /** If provided, displays informational text below the field */
+  /** If defined, displays informational text below the field */
   hint?: SkfTextArea["hint"];
-  /** The input's label. Alternatively, you can use the component slot. */
+  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: SkfTextArea["label"];
-  /** If provided, adds name to the input-element */
+  /** If defined, adds name to the input-element */
   name?: SkfTextArea["name"];
-  /** 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?: SkfTextArea["maxLength"];
-  /** 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?: SkfTextArea["minLength"];
-  /** If provided, displays placeholder text */
+  /** 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 provided, renders an alternative A11y text for the asterisk */
+  /** If defined, renders an alternative A11y text for the asterisk */
   "required-label"?: SkfTextArea["requiredLabel"];
-  /** If provided, sets the rows of the textarea */
+  /** If defined, sets the rows of the textarea */
   rows?: SkfTextArea["rows"];
-  /** If provided, displays provided severity state */
+  /** If defined, displays provided severity state */
   severity?: SkfTextArea["severity"];
   /** If true, displays valid state after interaction */
   "show-valid"?: SkfTextArea["showValid"];
-  /** If provided, displays an alternative size */
+  /** Size of the Textarea */
   size?: SkfTextArea["size"];
-  /** If provided, sets validation start, "input", "change" or "submit" */
+  /** Sets validation start */
   "validate-on"?: SkfTextArea["validateOn"];
   /** The current value of the text area */
   value?: SkfTextArea["value"];
@@ -384,7 +473,7 @@ 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.
    * ---
    *
    *
@@ -403,7 +492,7 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - _default_ - Alert message. **Notice!** See design principles for approved content
-   * - **link** - lodjvodjvodjo
+   * - **link** - Slot for the link
    */
   "skf-alert": DefineComponent<SkfAlertProps>;
 
@@ -436,14 +525,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": DefineComponent<SkfCheckboxProps>;
 
   /**
    * 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.
    * ---
    *
    *
@@ -460,7 +549,7 @@ export type CustomElements = {
   "skf-collapse": DefineComponent<SkfCollapseProps>;
 
   /**
-   * 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
    * ---
    *
    *
@@ -475,6 +564,9 @@ export type CustomElements = {
    * It extends the interface of native html `<h1>` to `<h4>` elements.
    * ---
    *
+   *
+   * ### **Slots:**
+   *  - _default_ - The headings content
    */
   "skf-heading": DefineComponent<SkfHeadingProps>;
 
@@ -495,7 +587,7 @@ 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": DefineComponent<SkfInputProps>;
 
@@ -510,7 +602,7 @@ export type CustomElements = {
   "skf-link": DefineComponent<SkfLinkProps>;
 
   /**
-   * 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
    * ---
    *
    */
@@ -535,18 +627,59 @@ 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": DefineComponent<SkfRadioProps>;
 
   /**
-   * 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": DefineComponent<SkfSelectProps>;
+
+  /**
+   * 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": DefineComponent<SkfSelectOptionProps>;
+
+  /**
+   * The `<skf-select-option-group>` is a component that groups select-options
    * ---
    *
    *
    * ### **Slots:**
    *  - _default_ - The component's placeholder content
    */
+  "skf-select-option-group": DefineComponent<SkfSelectOptionGroupProps>;
+
+  /**
+   * 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": DefineComponent<SkfSwitchProps>;
 
   /**
@@ -569,7 +702,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": DefineComponent<SkfTextAreaProps>;
 };