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

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

@@ -1,40 +1,40 @@
 import type { SkfIcon } from "../../components/icon/icon.component.js";
-import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js";
+import type { SkfAccordionItem, CustomEvent } from "../../components/accordion-item/accordion-item.component.js";
 import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
 import type { SkfAlert } from "../../components/alert/alert.component.js";
 import type { SkfBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
 import type { SkfBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
 import type { SkfLoader } from "../../components/loader/loader.component.js";
-import type { SkfButton } from "../../components/button/button.component.js";
+import type { SkfButton, CustomEvent } from "../../components/button/button.component.js";
 import type { SkfCard } from "../../components/card/card.component.js";
-import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
+import type { SkfCheckbox, Event } from "../../components/checkbox/checkbox.component.js";
 import type { SkfDatePicker } from "../../components/datepicker/datepicker.component.js";
 import type { SkfHeading } from "../../components/heading/heading.component.js";
-import type { SkfDialog } from "../../components/dialog/dialog.component.js";
+import type { SkfDialog, CustomEvent } from "../../components/dialog/dialog.component.js";
 import type { SkfDivider } from "../../components/divider/divider.component.js";
-import type { SkfDrawer } from "../../components/drawer/drawer.component.js";
+import type { SkfDrawer, CustomEvent } from "../../components/drawer/drawer.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
 import type { SkfNav } from "../../components/nav/nav.component.js";
 import type { SkfHeader } from "../../components/header/header.component.js";
-import type { SkfInput } from "../../components/input/input.component.js";
+import type { SkfInput, CustomEvent } from "../../components/input/input.component.js";
 import type { SkfLink } from "../../components/link/link.component.js";
-import type { SkfMenu } from "../../components/menu/menu.component.js";
-import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
+import type { SkfMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SkfMenu, CustomEvent } from "../../components/menu/menu.component.js";
 import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
-import type { SkfPopover } from "../../components/popover/popover.component.js";
+import type { SkfPopover, CustomEvent } from "../../components/popover/popover.component.js";
 import type { SkfProgress } from "../../components/progress/progress.component.js";
-import type { SkfRadio } from "../../components/radio/radio.component.js";
+import type { SkfRadio, Event } from "../../components/radio/radio.component.js";
 import type {
   SkfSegmentedButtonItem,
   CustomEvent,
 } from "../../components/segmented-button-item/segmented-button-item.component.js";
 import type { SkfSegmentedButton } from "../../components/segmented-button/segmented-button.component.js";
-import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
-import type { SkfTag } from "../../components/tag/tag.component.js";
-import type { SkfSelect } from "../../components/select/select.component.js";
 import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js";
+import type { SkfTag } from "../../components/tag/tag.component.js";
+import type { SkfSelect, Event, CustomEvent } from "../../components/select/select.component.js";
+import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
 import type { SkfStepperItem } from "../../components/stepper-item/stepper-item.component.js";
-import type { SkfStepper } from "../../components/stepper/stepper.component.js";
+import type { SkfStepper, CustomEvent } from "../../components/stepper/stepper.component.js";
 import type { SkfSwitch } from "../../components/switch/switch.component.js";
 import type { SkfTabPanel } from "../../components/tab-panel/tab-panel.component.js";
 import type { SkfTabGroup } from "../../components/tab-group/tab-group.component.js";
@@ -117,22 +117,22 @@ export type SkfIconProps = {
   size?: SkfIcon["size"];
 };
 
-export type SkfCollapseProps = {
-  /** If true, will animate the expand/collapse state */
-  animated?: SkfCollapse["animated"];
-  /** If true, will set the collapse to be expanded by default */
-  expanded?: SkfCollapse["expanded"];
-  /** Heading for the collapse */
-  heading?: SkfCollapse["heading"];
+export type SkfAccordionItemProps = {
+  /** If true, will animate the expand/accordion-item state */
+  animated?: SkfAccordionItem["animated"];
+  /** If true, will set the accordion-item to be expanded by default */
+  expanded?: SkfAccordionItem["expanded"];
+  /** Heading for the accordion-item */
+  heading?: SkfAccordionItem["heading"];
   /** Defines which heading element will be rendered */
-  "heading-as"?: SkfCollapse["headingAs"];
+  "heading-as"?: SkfAccordionItem["headingAs"];
   /** If true, renders the small version */
-  small?: SkfCollapse["small"];
-  /** If true, will truncate the heading in collapsed state */
-  truncate?: SkfCollapse["truncate"];
+  small?: SkfAccordionItem["small"];
+  /** If true, will truncate the heading in accordion-item state */
+  truncate?: SkfAccordionItem["truncate"];
 
   /** Event emitted when toggled */
-  "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
+  "onskf-accordion-item-toggle"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfAccordionProps = {
@@ -188,10 +188,6 @@ export type SkfLoaderProps = {
   invert?: SkfLoader["invert"];
   /** Defines the size of the loader */
   size?: SkfLoader["size"];
-  /**  */
-  role?: SkfLoader["role"];
-  /**  */
-  ariaLive?: SkfLoader["ariaLive"];
 };
 
 export type SkfButtonProps = {
@@ -201,8 +197,8 @@ export type SkfButtonProps = {
   disabled?: SkfButton["disabled"];
   /** If provided, renders an icon before or after the text */
   icon?: SkfButton["icon"];
-  /** If true, removes border */
-  iconOnly?: SkfButton["iconOnly"];
+  /** If true, button will take a square shape */
+  "icon-only"?: SkfButton["iconOnly"];
   /** 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`. */
@@ -217,7 +213,7 @@ export type SkfButtonProps = {
   variant?: SkfButton["variant"];
 
   /** Fires when the button is clicked */
-  onclick?: (e: CustomEvent<never>) => void;
+  onclick?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfCardProps = {
@@ -257,8 +253,8 @@ export type SkfCheckboxProps = {
   /** The current value of the input field */
   value?: SkfCheckbox["value"];
 
-  /** {object} - When the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  /** When the value of the input changes */
+  onchange?: (e: CustomEvent<Event>) => void;
 };
 
 export type SkfDatePickerProps = {
@@ -308,11 +304,11 @@ export type SkfDialogProps = {
   open?: SkfDialog["open"];
 
   /** Fires when the dialog is opened (after transitioned in) */
-  "onskf-dialog-opened"?: (e: CustomEvent<never>) => void;
-  /** Fires when the dialog is closed (before transitioned out) */
-  "onskf-dialog-closing"?: (e: CustomEvent<never>) => void;
+  "onskf-dialog-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the dialog is closing (before transitioned out) */
+  "onskf-dialog-closing"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the dialog is closed (after transitioned out) */
-  "onskf-dialog-closed"?: (e: CustomEvent<never>) => void;
+  "onskf-dialog-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfDividerProps = {
@@ -335,18 +331,13 @@ export type SkfDrawerProps = {
   open?: SkfDrawer["open"];
   /** Placement of the Drawer */
   placement?: SkfDrawer["placement"];
-  /**  */
-  _clickstartInDialog?: SkfDrawer["_clickstartInDialog"];
-  /**  */
-  _handleMouseDown?: SkfDrawer["_handleMouseDown"];
-  /**  */
-  _handleMouseUp?: SkfDrawer["_handleMouseUp"];
+
   /** Fires when the drawer is opened (after transitioned in) */
-  "onskf-drawer-opened"?: (e: CustomEvent<never>) => void;
-  /** Fires when the drawer is closed (before transitioned out) */
-  "onskf-drawer-closing"?: (e: CustomEvent<never>) => void;
+  "onskf-drawer-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the drawer is closing (before transitioned out) */
+  "onskf-drawer-closing"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the drawer is closed (after transitioned out) */
-  "onskf-drawer-closed"?: (e: CustomEvent<never>) => void;
+  "onskf-drawer-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfLogoProps = {
@@ -377,8 +368,8 @@ export type SkfInputProps = {
   disabled?: SkfInput["undefined"];
   /** If true, value is required or must be checked for the form to be submittable */
   required?: SkfInput["undefined"];
-  /** Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
-[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values. */
+  /** Indicates whether the value of the control can be automatically completed by the browser. See
+[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. */
   autocomplete?: SkfInput["autocomplete"];
   /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
   "button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
@@ -394,7 +385,8 @@ export type SkfInputProps = {
   "hide-label"?: SkfInput["hideLabel"];
   /** If defined, displays informational text below the field */
   hint?: SkfInput["hint"];
-  /** Tells what keyboard to use if applicable */
+  /** Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See
+[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details. */
   inputmode?: SkfInput["inputmode"];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
   label?: SkfInput["label"];
@@ -426,7 +418,7 @@ export type SkfInputProps = {
   size?: SkfInput["size"];
   /** If defined, displays a suffix/adornment after the input-element */
   trailing?: SkfInput["trailing"];
-  /** Type of input control */
+  /** Type of input */
   type?: SkfInput["type"];
   /** Sets validation start */
   "validate-on"?: SkfInput["validateOn"];
@@ -434,9 +426,9 @@ export type SkfInputProps = {
   value?: SkfInput["value"];
 
   /** Fires when the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  onchange?: (e: CustomEvent<CustomEvent>) => void;
   /** Fires when the input is invalid */
-  oninvalid?: (e: CustomEvent<never>) => void;
+  oninvalid?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfLinkProps = {
@@ -464,25 +456,10 @@ export type SkfLinkProps = {
   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. */
+  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
   onClick?: SkfLink["onClick"];
 };
 
-export type SkfMenuProps = {
-  /** The placement of the menu */
-  placement?: SkfMenu["undefined"];
-  /** The id of the element the menu will be anchored to */
-  anchor?: SkfMenu["undefined"];
-  /**  */
-  placement?: SkfMenu["placement"];
-  /**  */
-  triggerEvent?: SkfMenu["triggerEvent"];
-  /** Fired when the menu is opened */
-  "onskf-opened"?: (e: CustomEvent<never>) => void;
-  /** Fired when the menu is closed */
-  "onskf-closed"?: (e: CustomEvent<never>) => void;
-};
-
 export type SkfMenuItemProps = {
   /** Defines the semantic element to render */
   as?: SkfMenuItem["as"];
@@ -508,22 +485,22 @@ export type SkfMenuItemProps = {
   target?: SkfMenuItem["target"];
   /** Defines the type of button */
   type?: SkfMenuItem["type"];
-  /** If provided, custom function triggered by click where the second return parameter enables custom routing. */
+  /**  */
+  role?: SkfMenuItem["role"];
+  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
   onClick?: SkfMenuItem["onClick"];
-  /** Fired when something happens */
-  "onmy-tag-my-event"?: (e: CustomEvent<CustomEvent>) => void;
-  /** Fired when the component is clicked */
-  onclick?: (e: CustomEvent<never>) => void;
-  /** Fired when the mouse is over the component */
-  onmouseover?: (e: CustomEvent<never>) => void;
-  /** Fired when the mouse is out of the component */
-  onmouseout?: (e: CustomEvent<never>) => void;
-  /** Fired when the component is focused */
-  onfocus?: (e: CustomEvent<never>) => void;
-  /** Fired when the component is blurred */
-  onblur?: (e: CustomEvent<never>) => void;
-  /** Fired when the component's value changes */
-  onchange?: (e: CustomEvent<never>) => void;
+};
+
+export type SkfMenuProps = {
+  /** The placement of the menu */
+  placement?: SkfMenu["undefined"];
+  /** The id of the element the menu will be anchored to */
+  anchor?: SkfMenu["undefined"];
+
+  /** Fired when the menu is opened */
+  "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when the menu is closed */
+  "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfNavItemProps = {
@@ -534,7 +511,7 @@ export type SkfNavItemProps = {
 };
 
 export type SkfPopoverProps = {
-  /** The placement of the menu */
+  /** The placement of the popover */
   placement?: SkfPopover["undefined"];
   /** The id of the element the menu will be anchored to */
   anchor?: SkfPopover["undefined"];
@@ -542,16 +519,11 @@ export type SkfPopoverProps = {
   offset?: SkfPopover["offset"];
   /** If true, hides the arrow */
   hideArrow?: SkfPopover["hideArrow"];
-  /**  */
-  arrow?: SkfPopover["arrow"];
-  /**  */
-  placement?: SkfPopover["placement"];
-  /**  */
-  triggerEvent?: SkfPopover["triggerEvent"];
+
   /** Fired when the menu is opened */
-  "onskf-opened"?: (e: CustomEvent<never>) => void;
+  "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fired when the menu is closed */
-  "onskf-closed"?: (e: CustomEvent<never>) => void;
+  "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfProgressProps = {
@@ -589,50 +561,30 @@ export type SkfRadioProps = {
   /** The current value of the input field */
   value?: SkfRadio["value"];
 
-  /** {object} - When the value of the input changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  /** When the value of the input changes */
+  onchange?: (e: CustomEvent<Event>) => void;
 };
 
 export type SkfSegmentedButtonItemProps = {
   /** If true, items is marked as disabled */
   disabled?: SkfSegmentedButtonItem["disabled"];
+  /** If true, items is marked as selected */
+  selected?: SkfSegmentedButtonItem["selected"];
   /** Sets the item value */
   value?: SkfSegmentedButtonItem["value"];
 
-  /** Fired when something happens */
-  "onmy-tag-my-event"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when selected */
+  "onskf-segmented-button-item-select"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfSegmentedButtonProps = {
-  /** Sets the default selected control */
-  "default-selected"?: SkfSegmentedButton["defaultSelected"];
   /** If true, allowes multiple items to be selected */
   multiple?: SkfSegmentedButton["multiple"];
 };
 
-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"];
+export type SkfSelectOptionGroupProps = {
   /**  */
-  _shortcutUpdate?: SkfSelectOption["_shortcutUpdate"];
-  /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
-  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
+  label?: SkfSelectOptionGroup["label"];
 };
 
 export type SkfTagProps = {
@@ -651,8 +603,10 @@ export type SkfTagProps = {
 };
 
 export type SkfSelectProps = {
-  /** If true, the select is disabled	`default: false` */
+  /** If true, the select is disabled */
   disabled?: SkfSelect["undefined"];
+  /** If true, the select is required */
+  required?: SkfSelect["undefined"];
   /** Sets the first visible text on the component */
   "button-label"?: SkfSelect["buttonLabel"];
   /** If defined, forces component to invalid state until removed */
@@ -690,20 +644,40 @@ export type SkfSelectProps = {
   /**  */
   _selectedOptions?: SkfSelect["_selectedOptions"];
   /** Fired when the selected option(s) changes */
-  onchange?: (e: CustomEvent<never>) => void;
+  onchange?: (e: CustomEvent<Event>) => void;
   /** Fired when the select is invalid */
-  oninvalid?: (e: CustomEvent<never>) => void;
+  oninvalid?: (e: CustomEvent<Event>) => void;
   /** Fired when the form is reset */
-  onreset?: (e: CustomEvent<never>) => void;
+  onreset?: (e: CustomEvent<Event>) => void;
   /** {detail: {expanded: boolean}} Fired when the select dropdown is toggled */
-  "onskf-select:dropdown"?: (e: CustomEvent<never>) => void;
+  "onskf-select-dropdown"?: (e: CustomEvent<CustomEvent>) => void;
   /** {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled */
-  "onskf-select-option:select"?: (e: CustomEvent<never>) => void;
+  "onskf-select-option-select"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type SkfSelectOptionGroupProps = {
+export type SkfSelectOptionProps = {
+  /** If true, prevents interaction with the option */
+  disabled?: SkfSelectOption["disabled"];
+  /** If defined, set an icon */
+  icon?: SkfSelectOption["icon"];
+  /** If defined, sets provided color on the icon */
+  "icon-color"?: SkfSelectOption["iconColor"];
+  /** If 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"];
   /**  */
-  label?: SkfSelectOptionGroup["label"];
+  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 SkfStepperItemProps = {
@@ -721,12 +695,12 @@ export type SkfStepperItemProps = {
 
 export type SkfStepperProps = {
   /** Sets the active item */
-  activeIndex?: SkfStepper["activeIndex"];
+  "active-index"?: SkfStepper["activeIndex"];
   /** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
   linear?: SkfStepper["linear"];
 
   /** Dispatched when the stepper item is selected */
-  "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
+  "onskf-stepper-item-select"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfSwitchProps = {
@@ -863,9 +837,13 @@ export type SkfTooltipProps = {
   /** The id of the element the dropdown will be anchored to */
   anchor?: SkfTooltip["undefined"];
   /**  */
+  role?: SkfTooltip["role"];
+  /**  */
   offset?: SkfTooltip["offset"];
   /**  */
   placement?: SkfTooltip["placement"];
+  /**  */
+  variant?: SkfTooltip["variant"];
   /** Fired when the dropdown is opened */
   "onskf-opened"?: (e: CustomEvent<never>) => void;
   /** Fired when the dropdown is closed */
@@ -874,21 +852,19 @@ export type SkfTooltipProps = {
 
 export type CustomElements = {
   /**
-   * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
+   * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text.
    * ---
    *
    */
   "skf-icon": Partial<SkfIconProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
-   *
-   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
+   * The `<skf-accordion-item>` is used in conjunction with the `<skf-accordion>` component
    * ---
    *
    *
    * ### **Events:**
-   *  - **skf-collapse-toggle** - Event emitted when toggled
+   *  - **skf-accordion-item-toggle** - Event emitted when toggled
    *
    * ### **Methods:**
    *  - **setClose()** - Class method as alternative to manipulate attribute
@@ -897,12 +873,12 @@ export type CustomElements = {
    * ### **Slots:**
    *  - _default_ - Main content
    */
-  "skf-collapse": Partial<SkfCollapseProps & BaseProps & BaseEvents>;
+  "skf-accordion-item": Partial<SkfAccordionItemProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
+   * The `<skf-accordion>` component consists of one or more `<skf-accordion-item>` item(s) working together
    *
-   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles
    * ---
    *
    *
@@ -913,6 +889,8 @@ export type CustomElements = {
 
   /**
    * The `<skf-alert>` is a type of notification that appears in-line
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/990ec5-alert) for design principles
    * ---
    *
    *
@@ -959,6 +937,8 @@ export type CustomElements = {
 
   /**
    * Component to be used in forms or for interactivity
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/02493d-buttons) for design principles
    * ---
    *
    *
@@ -975,6 +955,8 @@ export type CustomElements = {
 
   /**
    * The `<skf-card>` can be used to group related subjects in a container
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles
    * ---
    *
    *
@@ -989,7 +971,7 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **change** - {object} - When the value of the input changes
+   *  - **change** - When the value of the input changes
    *
    * ### **Slots:**
    *  - _default_ - The Radios label. Alternatively, you can use the `label` attribute.
@@ -1034,7 +1016,7 @@ export type CustomElements = {
    *
    * ### **Events:**
    *  - **skf-dialog-opened** - Fires when the dialog is opened (after transitioned in)
-   * - **skf-dialog-closing** - Fires when the dialog is closed (before transitioned out)
+   * - **skf-dialog-closing** - Fires when the dialog is closing (before transitioned out)
    * - **skf-dialog-closed** - Fires when the dialog is closed (after transitioned out)
    *
    * ### **Methods:**
@@ -1063,13 +1045,13 @@ export type CustomElements = {
   "skf-divider": Partial<SkfDividerProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge.
+   * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge
    * ---
    *
    *
    * ### **Events:**
    *  - **skf-drawer-opened** - Fires when the drawer is opened (after transitioned in)
-   * - **skf-drawer-closing** - Fires when the drawer is closed (before transitioned out)
+   * - **skf-drawer-closing** - Fires when the drawer is closing (before transitioned out)
    * - **skf-drawer-closed** - Fires when the drawer is closed (after transitioned out)
    *
    * ### **Slots:**
@@ -1098,7 +1080,7 @@ export type CustomElements = {
   "skf-nav": Partial<SkfNavProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-header>` component is to be used as the site-header in the app
+   * The `<skf-header>` component is to be used as the site-header in the app. The navigation will be collapsed to mobile-view if the menu items exceed the available width.
    * ---
    *
    *
@@ -1108,7 +1090,9 @@ export type CustomElements = {
   "skf-header": Partial<SkfHeaderProps & BaseProps & BaseEvents>;
 
   /**
-   * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
+   * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles
    * ---
    *
    *
@@ -1132,38 +1116,30 @@ export type CustomElements = {
   "skf-link": Partial<SkfLinkProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-menu>` is a component that displays a list of actions or options.
+   * The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component
    * ---
    *
    *
-   * ### **Events:**
-   *  - **skf-opened** - Fired when the menu is opened
-   * - **skf-closed** - Fired when the menu is closed
-   *
    * ### **Slots:**
-   *  - _default_ - The menu popover content
+   *  - _default_ - The component's main content
    */
-  "skf-menu": Partial<SkfMenuProps & BaseProps & BaseEvents>;
+  "skf-menu-item": Partial<SkfMenuItemProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-menu-item>` is a component that displays a list of actions or options.
+   * The `<skf-menu>` is a component that displays a list of actions or options
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles
    * ---
    *
    *
    * ### **Events:**
-   *  - **my-tag-my-event** - Fired when something happens
-   * - **click** - Fired when the component is clicked
-   * - **mouseover** - Fired when the mouse is over the component
-   * - **mouseout** - Fired when the mouse is out of the component
-   * - **focus** - Fired when the component is focused
-   * - **blur** - Fired when the component is blurred
-   * - **change** - Fired when the component's value changes
+   *  - **skf-opened** - Fired when the menu is opened
+   * - **skf-closed** - Fired when the menu is closed
    *
    * ### **Slots:**
-   *  - _default_ - The component's main content
-   * - **my-named-slot** - A named slot of the component
+   *  - _default_ - The menu popover content
    */
-  "skf-menu-item": Partial<SkfMenuItemProps & BaseProps & BaseEvents>;
+  "skf-menu": Partial<SkfMenuProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-nav>` is a component that displays a list of <nav-items>.
@@ -1177,6 +1153,8 @@ export type CustomElements = {
 
   /**
    * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/983e5d-popover) for design principles
    * ---
    *
    *
@@ -1198,11 +1176,13 @@ export type CustomElements = {
 
   /**
    * The `<skf-radio>` component is used to create a radio input
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
    * ---
    *
    *
    * ### **Events:**
-   *  - **change** - {object} - When the value of the input changes
+   *  - **change** - When the value of the input changes
    *
    * ### **Slots:**
    *  - _default_ - The radios label. Alternatively, you can use the `label` attribute.
@@ -1215,10 +1195,10 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **my-tag-my-event** - Fired when something happens
+   *  - **skf-segmented-button-item-select** - Fired when selected
    *
    * ### **Slots:**
-   *  - _default_ - The items label
+   *  - _default_ - Label for the button
    */
   "skf-segmented-button-item": Partial<SkfSegmentedButtonItemProps & BaseProps & BaseEvents>;
 
@@ -1235,18 +1215,14 @@ export type CustomElements = {
   "skf-segmented-button": Partial<SkfSegmentedButtonProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
+   * The `<skf-select-option-group>` is a component that groups select-options
    * ---
    *
    *
-   * ### **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).
+   *  - _default_ - The component's placeholder content
    */
-  "skf-select-option": Partial<SkfSelectOptionProps & BaseProps & BaseEvents>;
+  "skf-select-option-group": Partial<SkfSelectOptionGroupProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-tag>` is a component that displays a list of actions or options
@@ -1260,6 +1236,8 @@ export type CustomElements = {
 
   /**
    * The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.
+   *
+   * See [zeroheight](https://zeroheight.com/853e936c9/p/91c9f0-select-and-combobox) for design principles
    * ---
    *
    *
@@ -1267,8 +1245,8 @@ export type CustomElements = {
    *  - **change** - Fired when the selected option(s) changes
    * - **invalid** - Fired when the select is invalid
    * - **reset** - Fired when the form is reset
-   * - **skf-select:dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled
-   * - **skf-select-option:select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
+   * - **skf-select-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
@@ -1276,14 +1254,18 @@ export type CustomElements = {
   "skf-select": Partial<SkfSelectProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-select-option-group>` is a component that groups select-options
+   * 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 component's placeholder content
+   *  - _default_ - The option's text content
+   * - **icon** - The option's slot for icon or custom meta information (svg).
    */
-  "skf-select-option-group": Partial<SkfSelectOptionGroupProps & BaseProps & BaseEvents>;
+  "skf-select-option": Partial<SkfSelectOptionProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component