@skf-design-system/ui-components 1.0.2-beta.4 → 1.0.2-beta.6

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

@@ -15,13 +15,13 @@ import type { SkfDialog, CustomEvent } from "../../components/dialog/dialog.comp
 import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfDrawer, CustomEvent } from "../../components/drawer/drawer.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
+import type { SkfLink, CustomEvent } from "../../components/link/link.component.js";
+import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SkfNav } from "../../components/nav/nav.component.js";
 import type { SkfHeader } from "../../components/header/header.component.js";
 import type { SkfInput, CustomEvent } from "../../components/input/input.component.js";
-import type { SkfLink } from "../../components/link/link.component.js";
-import type { SkfMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SkfMenuItem, CustomEvent } 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, CustomEvent } from "../../components/popover/popover.component.js";
 import type { SkfProgress } from "../../components/progress/progress.component.js";
 import type { SkfRadio, Event } from "../../components/radio/radio.component.js";
@@ -105,7 +105,113 @@ type BaseProps = {
   translate?: "yes" | "no";
 };
 
-type BaseEvents = {};
+type BaseEvents = {
+  // Mouse Events
+
+  /** Triggered when the element is clicked by the user by mouse or keyboard. */
+  onClick?: (event: MouseEvent) => void;
+  /** Fired when the context menu is triggered, often by right-clicking. */
+  onContextMenu?: (event: MouseEvent) => void;
+  /** Fired when the element is double-clicked. */
+  onDoubleClick?: (event: MouseEvent) => void;
+  /** Fired repeatedly as the draggable element is being dragged. */
+  onDrag?: (event: DragEvent) => void;
+  /** Fired when the dragging of a draggable element is finished. */
+  onDragEnd?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection enters a valid drop target. */
+  onDragEnter?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragExit?: (event: DragEvent) => void;
+  /** Fired when a dragged element or text selection leaves a valid drop target. */
+  onDragLeave?: (event: DragEvent) => void;
+  /** Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds). */
+  onDragOver?: (event: DragEvent) => void;
+  /** Fired when a draggable element starts being dragged. */
+  onDragStart?: (event: DragEvent) => void;
+  /** Fired when a dragged element is dropped onto a drop target. */
+  onDrop?: (event: DragEvent) => void;
+  /** Fired when a mouse button is pressed down on the element. */
+  onMouseDown?: (event: MouseEvent) => void;
+  /** Fired when the mouse cursor enters the element. */
+  onMouseEnter?: (event: MouseEvent) => void;
+  /** Triggered when the mouse cursor leaves the element. */
+  onMouseLeave?: (event: MouseEvent) => void;
+  /** Fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it. */
+  onMouseMove?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children. */
+  onMouseOut?: (event: MouseEvent) => void;
+  /** Fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements. */
+  onMouseOver?: (event: MouseEvent) => void;
+  /** Fired when a mouse button is released on the element. */
+  onMouseUp?: (event: MouseEvent) => void;
+
+  // Keyboard Events
+
+  /** Fired when a key is pressed down. */
+  onKeyDown?: (event: KeyboardEvent) => void;
+  /** Fired when a key is released.. */
+  onKeyUp?: (event: KeyboardEvent) => void;
+  /** Fired when a key is pressed down. */
+  onKeyPressed?: (event: KeyboardEvent) => void;
+
+  // Focus Events
+
+  /** Fired when the element receives focus, often triggered by tab navigation. */
+  onFocus?: (event: FocusEvent) => void;
+  /** Fired when the element loses focus. */
+  onBlur?: (event: FocusEvent) => void;
+
+  // Form Events
+
+  /** Fired when the value of an input element changes, such as with text inputs or select elements. */
+  onChange?: (event: Event) => void;
+  /** Fires when the value of an <input>, <select>, or <textarea> element has been changed. */
+  onInput?: (event: Event) => void;
+  /** Fired when a form is submitted, usually on pressing Enter in a text input. */
+  onSubmit?: (event: Event) => void;
+  /** Fired when a form is reset. */
+  onReset?: (event: Event) => void;
+
+  // UI Events
+
+  /** Fired when the content of an element is scrolled. */
+  onScroll?: (event: UIEvent) => void;
+
+  // Wheel Events
+
+  /** Fired when the mouse wheel is scrolled while the element is focused. */
+  onWheel?: (event: WheelEvent) => void;
+
+  // Animation Events
+
+  /** Fired when a CSS animation starts. */
+  onAnimationStart?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes. */
+  onAnimationEnd?: (event: AnimationEvent) => void;
+  /** Fired when a CSS animation completes one iteration. */
+  onAnimationIteration?: (event: AnimationEvent) => void;
+
+  // Transition Events
+
+  /** Fired when a CSS transition has completed. */
+  onTransitionEnd?: (event: TransitionEvent) => void;
+
+  // Media Events
+
+  /** Fired when an element (usually an image) finishes loading */
+  onLoad?: (event: Event) => void;
+  /** Fired when an error occurs during the loading of an element, like an image not being found. */
+  onError?: (event: Event) => void;
+
+  // Clipboard Events
+
+  /** Fires when the user initiates a copy action through the browser's user interface. */
+  onCopy?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "cut" action through the browser's user interface. */
+  onCut?: (event: ClipboardEvent) => void;
+  /** Fired when the user has initiated a "paste" action through the browser's user interface. */
+  onPaste?: (event: ClipboardEvent) => void;
+};
 
 export type SkfIconProps = {
   /** Sets the color of the icon */
@@ -389,8 +495,45 @@ export type SkfLogoProps = {
   color?: SkfLogo["color"];
 };
 
-export type SkfNavProps = {
+export type SkfLinkProps = {
+  /** Defines the semantic element to render */
+  as?: SkfLink["as"];
+  /** Defines the text-color */
+  color?: SkfLink["color"];
+  /** If true, disables the link */
+  disabled?: SkfLink["disabled"];
+  /** If defined, downloads the url */
+  download?: SkfLink["download"];
+  /** If defined, loads url on click */
+  href?: SkfLink["href"];
+  /** If defined, renders an icon before or after the text */
+  icon?: SkfLink["icon"];
+  /** If true, the icon is placed to the right in relation to the text */
+  "icon-right"?: SkfLink["iconRight"];
+  /** If defined, describes the relationship between a linked resource and the current document */
+  rel?: SkfLink["rel"];
+  /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
+  route?: SkfLink["route"];
+  /** If true, fills the parents horizontal axis */
+  stretch?: SkfLink["stretch"];
+  /** If defined, specifies where to open the linked document */
+  target?: SkfLink["target"];
+
+  /** Fired when the link is clicked */
+  "onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+export type SkfNavItemProps = {
   /**  */
+  href?: SkfNavItem["href"];
+  /**  */
+  icon?: SkfNavItem["icon"];
+  /**  */
+  vertical?: SkfNavItem["vertical"];
+};
+
+export type SkfNavProps = {
+  /** If true, the navigation will be displayed vertically */
   vertical?: SkfNav["vertical"];
 };
 
@@ -473,35 +616,6 @@ export type SkfInputProps = {
   oninvalid?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type SkfLinkProps = {
-  /** Defines the semantic element to render */
-  as?: SkfLink["as"];
-  /** Defines the text-color */
-  color?: SkfLink["color"];
-  /** If true, disables the link */
-  disabled?: SkfLink["disabled"];
-  /** If defined, downloads the url */
-  download?: SkfLink["download"];
-  /** If defined, loads url on click */
-  href?: SkfLink["href"];
-  /** If defined, renders an icon before or after the text */
-  icon?: SkfLink["icon"];
-  /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: SkfLink["iconPlacement"];
-  /** If defined, describes the relationship between a linked resource and the current document */
-  rel?: SkfLink["rel"];
-  /** If defined, used on conjunction with onClick property, second argument */
-  route?: SkfLink["route"];
-  /** If true, fills the parents horizontal axis */
-  stretch?: SkfLink["stretch"];
-  /** If defined, specifies where to open the linked document */
-  target?: SkfLink["target"];
-  /** Defines the type of button */
-  type?: SkfLink["type"];
-  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-  onClick?: SkfLink["onClick"];
-};
-
 export type SkfMenuItemProps = {
   /** Defines the semantic element to render */
   as?: SkfMenuItem["as"];
@@ -515,22 +629,19 @@ export type SkfMenuItemProps = {
   href?: SkfMenuItem["href"];
   /** If defined, renders an icon before or after the text */
   icon?: SkfMenuItem["icon"];
-  /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: SkfMenuItem["iconPlacement"];
+  /** If true, the icon is placed to the right in relation to the text */
+  "icon-right"?: SkfMenuItem["iconRight"];
   /** If defined, describes the relationship between a linked resource and the current document */
   rel?: SkfMenuItem["rel"];
-  /** If defined, used on conjunction with onClick property, second argument */
+  /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
   route?: SkfMenuItem["route"];
   /** If true, fills the parents horizontal axis */
   stretch?: SkfMenuItem["stretch"];
   /** If defined, specifies where to open the linked document */
   target?: SkfMenuItem["target"];
-  /** Defines the type of button */
-  type?: SkfMenuItem["type"];
-  /**  */
-  role?: SkfMenuItem["role"];
-  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-  onClick?: SkfMenuItem["onClick"];
+
+  /** Fired when the link is clicked */
+  "onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type SkfMenuProps = {
@@ -545,13 +656,6 @@ export type SkfMenuProps = {
   "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-export type SkfNavItemProps = {
-  /**  */
-  href?: SkfNavItem["href"];
-  /**  */
-  icon?: SkfNavItem["icon"];
-};
-
 export type SkfPopoverProps = {
   /** The placement of the popover */
   placement?: SkfPopover["undefined"];
@@ -627,6 +731,8 @@ export type SkfSegmentedButtonProps = {
 export type SkfSelectOptionGroupProps = {
   /**  */
   label?: SkfSelectOptionGroup["label"];
+  /**  */
+  small?: SkfSelectOptionGroup["small"];
 };
 
 export type SkfTagProps = {
@@ -713,9 +819,7 @@ export type SkfSelectOptionProps = {
   /** The option's label text (equivalent to the tags textContent) */
   text?: SkfSelectOption["text"];
   /**  */
-  role?: SkfSelectOption["role"];
-  /**  */
-  _parent?: SkfSelectOption["_parent"];
+  small?: SkfSelectOption["small"];
   /**  */
   _shortcutUpdate?: SkfSelectOption["_shortcutUpdate"];
   /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
@@ -729,8 +833,6 @@ export type SkfStepperItemProps = {
   completed?: SkfStepperItem["completed"];
   /**  */
   _setInternalState?: SkfStepperItem["_setInternalState"];
-  /**  */
-  role?: SkfStepperItem["role"];
   /** Dispatched when the stepper item is selected */
   "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
 };
@@ -773,8 +875,6 @@ export type SkfTabPanelProps = {
   name?: SkfTabPanel["name"];
   /**  */
   active?: SkfTabPanel["active"];
-  /**  */
-  role?: SkfTabPanel["role"];
 };
 
 export type SkfTabsProps = {
@@ -797,8 +897,6 @@ export type SkfTabProps = {
   selected?: SkfTab["selected"];
   /**  */
   variant?: SkfTab["variant"];
-  /**  */
-  role?: SkfTab["role"];
   /** {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected */
   "onskf-tab-select"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fired when the component is clicked */
@@ -879,8 +977,6 @@ 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"];
@@ -1111,6 +1207,30 @@ export type CustomElements = {
    */
   "skf-logo": Partial<SkfLogoProps & BaseProps & BaseEvents>;
 
+  /**
+   * The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is
+   * intended to be used for triggering javascript functions, not handling forms.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-link-click** - Fired when the link is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - The links' main content
+   */
+  "skf-link": Partial<SkfLinkProps & BaseProps & BaseEvents>;
+
+  /**
+   * The `<skf-nav>` is a component that displays a list of <nav-items>.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's main content
+   */
+  "skf-nav-item": Partial<SkfNavItemProps & BaseProps & BaseEvents>;
+
   /**
    * The `<skf-nav>` is a component that displays a list of <nav-items>.
    * ---
@@ -1147,21 +1267,14 @@ export type CustomElements = {
    */
   "skf-input": Partial<SkfInputProps & BaseProps & BaseEvents>;
 
-  /**
-   * The `<skf-link>` can be used as either a regular link or a link styled semantic button
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The links' main content
-   */
-  "skf-link": Partial<SkfLinkProps & BaseProps & BaseEvents>;
-
   /**
    * The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component
    * ---
    *
    *
+   * ### **Events:**
+   *  - **skf-link-click** - Fired when the link is clicked
+   *
    * ### **Slots:**
    *  - _default_ - The component's main content
    */
@@ -1183,16 +1296,6 @@ export type CustomElements = {
    */
   "skf-menu": Partial<SkfMenuProps & BaseProps & BaseEvents>;
 
-  /**
-   * The `<skf-nav>` is a component that displays a list of <nav-items>.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The component's main content
-   */
-  "skf-nav-item": Partial<SkfNavItemProps & BaseProps & BaseEvents>;
-
   /**
    * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
    *

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

@@ -17,13 +17,13 @@ import type { SkfDialog, CustomEvent } from "../../components/dialog/dialog.comp
 import type { SkfDivider } from "../../components/divider/divider.component.js";
 import type { SkfDrawer, CustomEvent } from "../../components/drawer/drawer.component.js";
 import type { SkfLogo } from "../../components/logo/logo.component.js";
+import type { SkfLink, CustomEvent } from "../../components/link/link.component.js";
+import type { SkfNavItem } from "../../components/nav-item/nav-item.component.js";
 import type { SkfNav } from "../../components/nav/nav.component.js";
 import type { SkfHeader } from "../../components/header/header.component.js";
 import type { SkfInput, CustomEvent } from "../../components/input/input.component.js";
-import type { SkfLink } from "../../components/link/link.component.js";
-import type { SkfMenuItem } from "../../components/menu-item/menu-item.component.js";
+import type { SkfMenuItem, CustomEvent } 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, CustomEvent } from "../../components/popover/popover.component.js";
 import type { SkfProgress } from "../../components/progress/progress.component.js";
 import type { SkfRadio, Event } from "../../components/radio/radio.component.js";
@@ -329,8 +329,45 @@ type SkfLogoProps = {
   color?: SkfLogo["color"];
 };
 
-type SkfNavProps = {
+type SkfLinkProps = {
+  /** Defines the semantic element to render */
+  as?: SkfLink["as"];
+  /** Defines the text-color */
+  color?: SkfLink["color"];
+  /** If true, disables the link */
+  disabled?: SkfLink["disabled"];
+  /** If defined, downloads the url */
+  download?: SkfLink["download"];
+  /** If defined, loads url on click */
+  href?: SkfLink["href"];
+  /** If defined, renders an icon before or after the text */
+  icon?: SkfLink["icon"];
+  /** If true, the icon is placed to the right in relation to the text */
+  "icon-right"?: SkfLink["iconRight"];
+  /** If defined, describes the relationship between a linked resource and the current document */
+  rel?: SkfLink["rel"];
+  /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
+  route?: SkfLink["route"];
+  /** If true, fills the parents horizontal axis */
+  stretch?: SkfLink["stretch"];
+  /** If defined, specifies where to open the linked document */
+  target?: SkfLink["target"];
+
+  /** Fired when the link is clicked */
+  "onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+type SkfNavItemProps = {
+  /**  */
+  href?: SkfNavItem["href"];
   /**  */
+  icon?: SkfNavItem["icon"];
+  /**  */
+  vertical?: SkfNavItem["vertical"];
+};
+
+type SkfNavProps = {
+  /** If true, the navigation will be displayed vertically */
   vertical?: SkfNav["vertical"];
 };
 
@@ -413,35 +450,6 @@ type SkfInputProps = {
   oninvalid?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SkfLinkProps = {
-  /** Defines the semantic element to render */
-  as?: SkfLink["as"];
-  /** Defines the text-color */
-  color?: SkfLink["color"];
-  /** If true, disables the link */
-  disabled?: SkfLink["disabled"];
-  /** If defined, downloads the url */
-  download?: SkfLink["download"];
-  /** If defined, loads url on click */
-  href?: SkfLink["href"];
-  /** If defined, renders an icon before or after the text */
-  icon?: SkfLink["icon"];
-  /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: SkfLink["iconPlacement"];
-  /** If defined, describes the relationship between a linked resource and the current document */
-  rel?: SkfLink["rel"];
-  /** If defined, used on conjunction with onClick property, second argument */
-  route?: SkfLink["route"];
-  /** If true, fills the parents horizontal axis */
-  stretch?: SkfLink["stretch"];
-  /** If defined, specifies where to open the linked document */
-  target?: SkfLink["target"];
-  /** Defines the type of button */
-  type?: SkfLink["type"];
-  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-  onClick?: SkfLink["onClick"];
-};
-
 type SkfMenuItemProps = {
   /** Defines the semantic element to render */
   as?: SkfMenuItem["as"];
@@ -455,22 +463,19 @@ type SkfMenuItemProps = {
   href?: SkfMenuItem["href"];
   /** If defined, renders an icon before or after the text */
   icon?: SkfMenuItem["icon"];
-  /** Defines the position of the icon in relation to the text */
-  "icon-placement"?: SkfMenuItem["iconPlacement"];
+  /** If true, the icon is placed to the right in relation to the text */
+  "icon-right"?: SkfMenuItem["iconRight"];
   /** If defined, describes the relationship between a linked resource and the current document */
   rel?: SkfMenuItem["rel"];
-  /** If defined, used on conjunction with onClick property, second argument */
+  /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
   route?: SkfMenuItem["route"];
   /** If true, fills the parents horizontal axis */
   stretch?: SkfMenuItem["stretch"];
   /** If defined, specifies where to open the linked document */
   target?: SkfMenuItem["target"];
-  /** Defines the type of button */
-  type?: SkfMenuItem["type"];
-  /**  */
-  role?: SkfMenuItem["role"];
-  /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-  onClick?: SkfMenuItem["onClick"];
+
+  /** Fired when the link is clicked */
+  "onskf-link-click"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfMenuProps = {
@@ -485,13 +490,6 @@ type SkfMenuProps = {
   "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type SkfNavItemProps = {
-  /**  */
-  href?: SkfNavItem["href"];
-  /**  */
-  icon?: SkfNavItem["icon"];
-};
-
 type SkfPopoverProps = {
   /** The placement of the popover */
   placement?: SkfPopover["undefined"];
@@ -567,6 +565,8 @@ type SkfSegmentedButtonProps = {
 type SkfSelectOptionGroupProps = {
   /**  */
   label?: SkfSelectOptionGroup["label"];
+  /**  */
+  small?: SkfSelectOptionGroup["small"];
 };
 
 type SkfTagProps = {
@@ -653,9 +653,7 @@ type SkfSelectOptionProps = {
   /** The option's label text (equivalent to the tags textContent) */
   text?: SkfSelectOption["text"];
   /**  */
-  role?: SkfSelectOption["role"];
-  /**  */
-  _parent?: SkfSelectOption["_parent"];
+  small?: SkfSelectOption["small"];
   /**  */
   _shortcutUpdate?: SkfSelectOption["_shortcutUpdate"];
   /** {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected. */
@@ -669,8 +667,6 @@ type SkfStepperItemProps = {
   completed?: SkfStepperItem["completed"];
   /**  */
   _setInternalState?: SkfStepperItem["_setInternalState"];
-  /**  */
-  role?: SkfStepperItem["role"];
   /** Dispatched when the stepper item is selected */
   "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
 };
@@ -713,8 +709,6 @@ type SkfTabPanelProps = {
   name?: SkfTabPanel["name"];
   /**  */
   active?: SkfTabPanel["active"];
-  /**  */
-  role?: SkfTabPanel["role"];
 };
 
 type SkfTabsProps = {
@@ -737,8 +731,6 @@ type SkfTabProps = {
   selected?: SkfTab["selected"];
   /**  */
   variant?: SkfTab["variant"];
-  /**  */
-  role?: SkfTab["role"];
   /** {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected */
   "onskf-tab-select"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fired when the component is clicked */
@@ -819,8 +811,6 @@ 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"];
@@ -1051,6 +1041,30 @@ export type CustomElements = {
    */
   "skf-logo": DefineComponent<SkfLogoProps>;
 
+  /**
+   * The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is
+   * intended to be used for triggering javascript functions, not handling forms.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **skf-link-click** - Fired when the link is clicked
+   *
+   * ### **Slots:**
+   *  - _default_ - The links' main content
+   */
+  "skf-link": DefineComponent<SkfLinkProps>;
+
+  /**
+   * The `<skf-nav>` is a component that displays a list of <nav-items>.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's main content
+   */
+  "skf-nav-item": DefineComponent<SkfNavItemProps>;
+
   /**
    * The `<skf-nav>` is a component that displays a list of <nav-items>.
    * ---
@@ -1087,21 +1101,14 @@ export type CustomElements = {
    */
   "skf-input": DefineComponent<SkfInputProps>;
 
-  /**
-   * The `<skf-link>` can be used as either a regular link or a link styled semantic button
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The links' main content
-   */
-  "skf-link": DefineComponent<SkfLinkProps>;
-
   /**
    * The `<skf-menu-item>` is used in conjunction with the `<skf-menu>` component
    * ---
    *
    *
+   * ### **Events:**
+   *  - **skf-link-click** - Fired when the link is clicked
+   *
    * ### **Slots:**
    *  - _default_ - The component's main content
    */
@@ -1123,16 +1130,6 @@ export type CustomElements = {
    */
   "skf-menu": DefineComponent<SkfMenuProps>;
 
-  /**
-   * The `<skf-nav>` is a component that displays a list of <nav-items>.
-   * ---
-   *
-   *
-   * ### **Slots:**
-   *  - _default_ - The component's main content
-   */
-  "skf-nav-item": DefineComponent<SkfNavItemProps>;
-
   /**
    * The `<skf-popover>` is a general purpose component that displays the slot content in a popover.
    *