diff --git a/src/components/action-bar/examples/action-bar-as-list-component.tsx b/src/components/action-bar/examples/action-bar-as-list-component.tsx
index 281692f6db..fe2e69c555 100644
--- a/src/components/action-bar/examples/action-bar-as-list-component.tsx
+++ b/src/components/action-bar/examples/action-bar-as-list-component.tsx
@@ -15,8 +15,8 @@ import { Component, h } from '@stencil/core';
  * There should be a `min-width` and `max-width` on the component in order to prevent
  * the overflow menu to cause infinite rendering loops.
  * :::
- * @link action-bar-in-list.tsx
- * @link action-bar-in-list.scss
+ * @sourceFileLink action-bar-in-list.tsx
+ * @sourceFileLink action-bar-in-list.scss
  */
 @Component({
     tag: 'limel-example-action-bar-as-primary-component',
diff --git a/src/components/badge/format.ts b/src/components/badge/format.ts
index d154a3d08b..013e7250fa 100644
--- a/src/components/badge/format.ts
+++ b/src/components/badge/format.ts
@@ -2,8 +2,8 @@ import NumAbbr from 'number-abbreviate';
 
 /**
  * Abbreviate a number
- * @param {number} value the number to abbreviate
- * @returns {string} abbreviated number
+ * @param value - the number to abbreviate
+ * @returns abbreviated number
  */
 export function abbreviate(value: number): string {
     if (typeof value !== 'number') {
diff --git a/src/components/breadcrumbs/breadcrumbs.spec.tsx b/src/components/breadcrumbs/breadcrumbs.spec.tsx
index 5e230d7236..85dcd89fc6 100644
--- a/src/components/breadcrumbs/breadcrumbs.spec.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.spec.tsx
@@ -163,9 +163,8 @@ describe('limel-breadcrumbs', () => {
  * Ids are randomly generated and we do not have access to them as they
  * are inside the breadcrumbs component. But we can get them this way.
  * Retrieves ids via inorder traversal
- * @param {Element} node base node
- * @param {string[]} ids id array that you wish to populate
- * @return void
+ * @param node - base node
+ * @param ids - id array that you wish to populate
  */
 function getIDs(node: Element, ids: string[]) {
     if (node.children && node.id) {
diff --git a/src/components/chip-set/chip-set-input-helpers.ts b/src/components/chip-set/chip-set-input-helpers.ts
index a5d28771f6..c59011c091 100644
--- a/src/components/chip-set/chip-set-input-helpers.ts
+++ b/src/components/chip-set/chip-set-input-helpers.ts
@@ -16,8 +16,8 @@ import {
 /**
  * Key handler for the input field.
  * Lets the user select, activate, and remove chips with the keyboard.
- * @param {KeyboardEvent} event event
- * @returns {void}
+ * @param event - event
+
  */
 export function handleKeyboardEvent(event: KeyboardEvent) {
     if (this.textValue.length) {
diff --git a/src/components/chip-set/chip-set.tsx b/src/components/chip-set/chip-set.tsx
index 2d4fa1cddd..dbde18271b 100644
--- a/src/components/chip-set/chip-set.tsx
+++ b/src/components/chip-set/chip-set.tsx
@@ -224,7 +224,7 @@ export class ChipSet {
 
     /**
      * Used to find out whether the chip-set is in edit mode.
-     * @returns {Promise<boolean>} `true` if the chip-set is in edit mode, `false` otherwise.
+     * @returns `true` if the chip-set is in edit mode, `false` otherwise.
      */
     @Method()
     public async getEditMode(): Promise<boolean> {
@@ -233,8 +233,8 @@ export class ChipSet {
 
     /**
      * Used to set focus to the chip-set input field.
-     * @param {boolean} emptyInput if `true`, any text in the input is discarded
-     * @returns {Promise<void>} does not return anything, but methods have to be async
+     * @param emptyInput - if `true`, any text in the input is discarded
+     * @returns does not return anything, but methods have to be async
      */
     @Method()
     public async setFocus(emptyInput: boolean = false) {
@@ -254,7 +254,7 @@ export class ChipSet {
     /**
      * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the
      * consumer control when the input is emptied.
-     * @returns {Promise<void>} does not return anything, but methods have to be async
+     * @returns does not return anything, but methods have to be async
      */
     @Method()
     public async emptyInput() {
@@ -499,7 +499,7 @@ export class ChipSet {
 
     /**
      * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible
-     * @returns {void}
+
      */
     private handleTextFieldFocus() {
         if (this.disabled || this.readonly) {
@@ -517,7 +517,7 @@ export class ChipSet {
     /**
      * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any
      * additional space when the user it not typing anything
-     * @returns {void}
+
      */
     private handleInputBlur() {
         if (this.emptyInputOnBlur) {
diff --git a/src/components/dock/dock.types.ts b/src/components/dock/dock.types.ts
index 3532ebc775..82eff93d6b 100644
--- a/src/components/dock/dock.types.ts
+++ b/src/components/dock/dock.types.ts
@@ -30,7 +30,7 @@ export interface DockItem {
      * item is pointing at, or
      * - the user interface is showing a page which is a sub-location of the
      * top-level location. For example, when user is at
-     * _My Account > Notification Settings_, the dock item of _My Account_
+     * _My Account ➡ Notification Settings_, the dock item of _My Account_
      * should have the `selected` state.
      */
     selected?: boolean;
diff --git a/src/components/dock/examples/dock-custom-component.tsx b/src/components/dock/examples/dock-custom-component.tsx
index 8280fe484f..2968a8125c 100644
--- a/src/components/dock/examples/dock-custom-component.tsx
+++ b/src/components/dock/examples/dock-custom-component.tsx
@@ -13,7 +13,7 @@ import { DockItem } from '@limetech/lime-elements';
  * `.SCSS` file. That defines the width the popover component, which is `auto`
  * by default. But modifying it may be helpful depending on the usage.
  * :::
- * @link my-custom-menu.tsx
+ * @sourceFileLink my-custom-menu.tsx
  */
 
 @Component({
diff --git a/src/components/flex-container/flex-container.tsx b/src/components/flex-container/flex-container.tsx
index 6c0ffc16bb..be9ceeb2fd 100644
--- a/src/components/flex-container/flex-container.tsx
+++ b/src/components/flex-container/flex-container.tsx
@@ -9,7 +9,7 @@ import { Component, h, Prop } from '@stencil/core';
  * This component is deprecated and will be removed in a future version of
  * Lime Elements. Please use CSS for your flexible container needs 🙂
  * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- * @deprecated
+ * @deprecated - Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
  * @private
  * @slot - Container content
  */
diff --git a/src/components/form/adapters/base-adapter.ts b/src/components/form/adapters/base-adapter.ts
index 8a54a4eba6..463cbede9f 100644
--- a/src/components/form/adapters/base-adapter.ts
+++ b/src/components/form/adapters/base-adapter.ts
@@ -22,8 +22,8 @@ import {
  * really means "can be properly rendered to the dom by react". It just so
  * happens that react can render most primitives to the dom correctly.
  * @see https://developer.mozilla.org/en-US/docs/Glossary/Primitive
- * @param {any} value the value to check
- * @returns {boolean} Whether or not the value is primitive
+ * @param value - the value to check
+ * @returns Whether or not the value is primitive
  */
 const isPrimitive = (value) =>
     isNil(value) || isNumber(value) || isString(value) || isBoolean(value);
@@ -75,9 +75,9 @@ export class LimeElementsAdapter extends React.Component<any, any> {
     /**
      * Given a key a value set the value of property named `key` to
      * the value of `value`
-     * @param {string} key The name of the property
-     * @param {any} value The value of the property
-     * @returns {void}
+     * @param key - The name of the property
+     * @param value - The value of the property
+
      */
     setComponentProperty(key: string, value: any): void {
         const element = this.component.current;
@@ -89,8 +89,8 @@ export class LimeElementsAdapter extends React.Component<any, any> {
      *
      * Events must be bound using this function otherwise events will bubble up too far
      * since react events are different that native dom events
-     * @param {string} eventName the name of the event to get the handler for
-     * @returns {any} the handler to bind to the component for the event name
+     * @param eventName - the name of the event to get the handler for
+     * @returns the handler to bind to the component for the event name
      */
     getHandler(eventName: string) {
         const { events } = this.props;
@@ -103,8 +103,8 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Set events on the web component
-     * @param {object} events Event names to handlers
-     * @returns {void}
+     * @param events - Event names to handlers
+
      */
     setEvents(events: object) {
         const element = this.component.current;
@@ -115,8 +115,8 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Remove events on the web component
-     * @param {object} events Event names to handlers
-     * @returns {void}
+     * @param events - Event names to handlers
+
      */
     removeEvents(events: object) {
         const element = this.component.current;
@@ -127,9 +127,9 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Get the events to remove from the component
-     * @param {object} prevEvents previous events
-     * @param {object} nextEvents new events
-     * @returns {object} the events to remove
+     * @param prevEvents - previous events
+     * @param nextEvents - new events
+     * @returns the events to remove
      */
     getEventsToRemove(prevEvents: object, nextEvents: object): object {
         return pickBy(
@@ -140,9 +140,9 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Get the events to add to the component
-     * @param {object} prevEvents previous events
-     * @param {object} nextEvents new events
-     * @returns {object} the events to add
+     * @param prevEvents - previous events
+     * @param nextEvents - new events
+     * @returns the events to add
      */
     getEventsToAdd(prevEvents: object, nextEvents: object): object {
         return pickBy(
@@ -155,7 +155,7 @@ export class LimeElementsAdapter extends React.Component<any, any> {
      * Detect if event handlers have changed. If they
      * have changed, store them in the state, and remove and
      * re-add the changed event handlers
-     * @returns {void}
+
      */
     updateEvents() {
         const { prevEvents } = this.state;
@@ -185,8 +185,8 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Get non primitive props. i.e. object, function, array, etc
-     * @param {object} elementProps the props to pass the webcomponet
-     * @returns {object} non primitive props
+     * @param elementProps - the props to pass the webcomponet
+     * @returns non primitive props
      */
     getNonPrimitiveProps(elementProps: object) {
         return pickBy(elementProps, negate(isPrimitive));
@@ -194,8 +194,8 @@ export class LimeElementsAdapter extends React.Component<any, any> {
 
     /**
      * Get primitive props. i.e. integer, boolean, etc
-     * @param {object} elementProps the props to pass the webcomponet
-     * @returns {object} primitive props
+     * @param elementProps - the props to pass the webcomponet
+     * @returns primitive props
      */
     getPrimitiveProps(elementProps: object): object {
         return pickBy(elementProps, isPrimitive);
@@ -205,9 +205,9 @@ export class LimeElementsAdapter extends React.Component<any, any> {
      * Given the previous renders props and the next renders props,
      * check if any of the property values have changed and return an
      * object with only those values
-     * @param {object} prevNonPrimitiveProps the previous renders non primitive props
-     * @param {object} nextNonPrimitiveProps the current renders non primitive props
-     * @returns {object} the changed primitive props
+     * @param prevNonPrimitiveProps - the previous renders non primitive props
+     * @param nextNonPrimitiveProps - the current renders non primitive props
+     * @returns the changed primitive props
      */
     getChangedNonPrimitiveProps(
         prevNonPrimitiveProps: object,
@@ -226,8 +226,8 @@ export class LimeElementsAdapter extends React.Component<any, any> {
      * instead of passing them as props the the React.createElement
      * function because non primitive props are not passed properly to the web
      * component via React.createElement
-     * @param {object} elementProps element props to set
-     * @returns {void}
+     * @param elementProps - element props to set
+
      */
     setNonPrimitives(elementProps: object): void {
         toPairs(elementProps).forEach(([key, value]) =>
diff --git a/src/components/form/examples/basic-form.tsx b/src/components/form/examples/basic-form.tsx
index b1549d2817..49d975aa9a 100644
--- a/src/components/form/examples/basic-form.tsx
+++ b/src/components/form/examples/basic-form.tsx
@@ -4,7 +4,7 @@ import { schema } from './basic-schema';
 
 /**
  * Basic form with validation
- * @link basic-schema.ts
+ * @sourceFileLink basic-schema.ts
  */
 @Component({
     tag: 'limel-example-form',
diff --git a/src/components/form/examples/custom-component-form.tsx b/src/components/form/examples/custom-component-form.tsx
index 3ee368bfb8..22c66d9f33 100644
--- a/src/components/form/examples/custom-component-form.tsx
+++ b/src/components/form/examples/custom-component-form.tsx
@@ -28,8 +28,8 @@ import { schema } from './custom-component-schema';
  * While you can, in principle, use any component in a form, your custom form
  * components should implement the [FormComponent](#/type/FormComponent/)
  * interface.
- * @link custom-component-schema.ts
- * @link custom-component-picker.tsx
+ * @sourceFileLink custom-component-schema.ts
+ * @sourceFileLink custom-component-picker.tsx
  */
 @Component({
     tag: 'limel-example-custom-component-form',
diff --git a/src/components/form/examples/custom-component-picker.tsx b/src/components/form/examples/custom-component-picker.tsx
index 73f60da046..91dd8ce995 100644
--- a/src/components/form/examples/custom-component-picker.tsx
+++ b/src/components/form/examples/custom-component-picker.tsx
@@ -11,37 +11,37 @@ import {
 })
 export class CustomPickerExample implements FormComponent<number> {
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public value: number;
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public label: string;
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public required: boolean;
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public readonly: boolean;
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public disabled: boolean;
 
     /**
-     * @inheritdoc
+     * {@inheritdoc}
      */
     @Prop({ reflect: true })
     public helperText?: string;
diff --git a/src/components/form/examples/custom-error-message-form.tsx b/src/components/form/examples/custom-error-message-form.tsx
index c46f7b6572..ea50b8a451 100644
--- a/src/components/form/examples/custom-error-message-form.tsx
+++ b/src/components/form/examples/custom-error-message-form.tsx
@@ -4,7 +4,7 @@ import { schema } from './custom-error-message-schema';
 
 /**
  * Form with custom error message
- * @link custom-error-message-schema.ts
+ * @sourceFileLink custom-error-message-schema.ts
  */
 @Component({
     tag: 'limel-example-custom-error-message',
diff --git a/src/components/form/examples/layout-form.tsx b/src/components/form/examples/layout-form.tsx
index 30224e1092..ffb925a867 100644
--- a/src/components/form/examples/layout-form.tsx
+++ b/src/components/form/examples/layout-form.tsx
@@ -47,7 +47,7 @@ import { schema } from './layout-schema';
  * In this example, each collapsible section has its own `colSpan`.
  * However, since the layout is responsive, make sure to change the browser
  * window size to see how their responsive layout changes.
- * @link layout-schema.ts
+ * @sourceFileLink layout-schema.ts
  */
 @Component({
     tag: 'limel-example-form-layout',
diff --git a/src/components/form/examples/list-form.tsx b/src/components/form/examples/list-form.tsx
index 6e0a5c5b0d..fd0f9fcf13 100644
--- a/src/components/form/examples/list-form.tsx
+++ b/src/components/form/examples/list-form.tsx
@@ -3,7 +3,7 @@ import { schema } from './list-schema';
 
 /**
  * List data
- * @link list-schema.ts
+ * @sourceFileLink list-schema.ts
  */
 @Component({
     tag: 'limel-example-list-form',
diff --git a/src/components/form/examples/nested-form.tsx b/src/components/form/examples/nested-form.tsx
index 7019a4a4e5..3396715da0 100644
--- a/src/components/form/examples/nested-form.tsx
+++ b/src/components/form/examples/nested-form.tsx
@@ -3,7 +3,7 @@ import { schema } from './nested-schema';
 
 /**
  * Nested data
- * @link nested-schema.ts
+ * @sourceFileLink nested-schema.ts
  */
 @Component({
     tag: 'limel-example-nested-form',
diff --git a/src/components/form/examples/props-factory-form.tsx b/src/components/form/examples/props-factory-form.tsx
index 6271cf7be3..ceda5b6760 100644
--- a/src/components/form/examples/props-factory-form.tsx
+++ b/src/components/form/examples/props-factory-form.tsx
@@ -3,8 +3,8 @@ import { schema } from './props-factory-schema';
 
 /**
  * Using `propsFactory`
- * @link props-factory-schema.ts
- * @link props-factory-picker.tsx
+ * @sourceFileLink props-factory-schema.ts
+ * @sourceFileLink props-factory-picker.tsx
  */
 @Component({
     tag: 'limel-example-props-factory-form',
diff --git a/src/components/form/examples/row-layout.tsx b/src/components/form/examples/row-layout.tsx
index 70d1f26c05..8a1cc53904 100644
--- a/src/components/form/examples/row-layout.tsx
+++ b/src/components/form/examples/row-layout.tsx
@@ -3,7 +3,7 @@ import { schema } from './row-layout-schema';
 
 /**
  * Row layout
- * @link row-layout-schema.ts
+ * @sourceFileLink row-layout-schema.ts
  */
 @Component({
     tag: 'limel-example-form-row-layout',
diff --git a/src/components/form/examples/server-errors.tsx b/src/components/form/examples/server-errors.tsx
index 27bafbbb0c..ea09a801a8 100644
--- a/src/components/form/examples/server-errors.tsx
+++ b/src/components/form/examples/server-errors.tsx
@@ -4,7 +4,7 @@ import { schema } from './list-schema';
 
 /**
  * Form with server validation
- * @link list-schema.ts
+ * @sourceFileLink list-schema.ts
  */
 @Component({
     tag: 'limel-example-server-errors',
diff --git a/src/components/form/examples/span-fields.tsx b/src/components/form/examples/span-fields.tsx
index a08281375e..9e4aa6921b 100644
--- a/src/components/form/examples/span-fields.tsx
+++ b/src/components/form/examples/span-fields.tsx
@@ -149,7 +149,7 @@ import { schema } from './span-fields-schema';
  * }
  * ```
  * :::
- * @link span-fields-schema.ts
+ * @sourceFileLink span-fields-schema.ts
  */
 @Component({
     tag: 'limel-example-form-span-fields',
diff --git a/src/components/form/fields/field-helpers.ts b/src/components/form/fields/field-helpers.ts
index 0e97708495..8d528a9c63 100644
--- a/src/components/form/fields/field-helpers.ts
+++ b/src/components/form/fields/field-helpers.ts
@@ -4,9 +4,9 @@ import { retrieveSchema, ADDITIONAL_PROPERTY_FLAG } from '@rjsf/core/lib/utils';
 /**
  * Given two objects, get a list of keys for each value that is different between
  * the two objects. Compares using deep comparison
- * @param {object} a first object
- * @param {object} b second object
- * @returns {any[]} the array of keys
+ * @param a - first object
+ * @param b - second object
+ * @returns the array of keys
  */
 const getDifferentKeys = (a: object = {}, b: object = {}): any[] => {
     const keys = union(Object.keys(a), Object.keys(b));
@@ -21,11 +21,11 @@ const getDifferentKeys = (a: object = {}, b: object = {}): any[] => {
  * has any other fields that are dependent on it, and if so reset those dependent fields
  * (by deleting them from the data so that their defaults are populated on the next rerender).
  * Call onChange with the updated data
- * @param {any} oldData The previous data before a data change event
- * @param {any} newData The form data from a change event
- * @param {object} schema The schema associated with the data
- * @param {object} rootSchema The root schema
- * @returns {void}
+ * @param oldData - The previous data before a data change event
+ * @param newData - The form data from a change event
+ * @param schema - The schema associated with the data
+ * @param rootSchema - The root schema
+
  */
 export const resetDependentFields = (oldData, newData, schema, rootSchema) => {
     // Dependencies only exist on object types
@@ -63,8 +63,8 @@ export const resetDependentFields = (oldData, newData, schema, rootSchema) => {
 
 /**
  * Check if the schema is of type object and have no declared properties
- * @param {any} schema the schema
- * @returns {boolean} true if the schema is for a custom object
+ * @param schema - the schema
+ * @returns true if the schema is for a custom object
  */
 export function isCustomObjectSchema(schema: any) {
     if (!schema.additionalProperties) {
diff --git a/src/components/form/fields/schema-field.ts b/src/components/form/fields/schema-field.ts
index 053e5fe52e..75e609d9cd 100644
--- a/src/components/form/fields/schema-field.ts
+++ b/src/components/form/fields/schema-field.ts
@@ -19,15 +19,15 @@ import { FieldTemplate } from '../templates';
  * and its purpose.
  *
  * Example:
- * If I have an object { name?: string, email?: string } that I am using a custom web component for `name`,
- * then initially, the formData will be {} which is fine because neither name or email are required. Then if i input a
- * value for name the formData will be { name: 'some_value' } which is also fine. But then if I want to remove name
+ * If I have an object `{ name?: string, email?: string }` that I am using a custom web component for `name`,
+ * then initially, the formData will be `{}` which is fine because neither name or email are required. Then if i input a
+ * value for name the formData will be `{ name: 'some_value' }` which is also fine. But then if I want to remove name
  * from the form data I would delete all the text from the name input field. Web components would emit this empty value
  * as '' or null. If the web component tries to emit `undefined`, null would be emitted instead because CustomEvent has
  * a default `detail` value of null
- * @param {any} value the value associated with the schema
- * @param {any} schema the schema for the value
- * @returns {boolean} whether or not null should be changed to undefined
+ * @param value - the value associated with the schema
+ * @param schema - the schema for the value
+ * @returns whether or not null should be changed to undefined
  */
 const shouldChangeToUndefined = (value, schema): boolean => {
     return value === null && !schema.type.includes('null');
@@ -76,9 +76,9 @@ const getCustomComponent = (
 
 /**
  * Create properties from the factory that is set on `limel-form`
- * @param {*} formContext the form context
- * @param {*} schema the schema for the current field
- * @returns {object} the properties created by the factory
+ * @param formContext - the form context
+ * @param schema - the schema for the current field
+ * @returns the properties created by the factory
  */
 export function getFactoryProps(
     formContext: any,
@@ -283,12 +283,12 @@ export class SchemaField extends React.Component<FieldProps> {
 
     /**
      * Gets the path to the current property within the schema
-     * @param {string} schemaId the id of the schema
-     * @returns {string[]} an array with the schema path for the current property
+     * @param schemaId - the id of the schema
+     * @returns an array with the schema path for the current property
      * @example
      * const schemaId = 'root_sections_0_controls_0_name';
      * const schemaPath = getSchemaPath(schemaId);
-     * // => ['sections', '0', 'controls', '0', 'name']
+     * // ➡ ['sections', '0', 'controls', '0', 'name']
      */
     private getSchemaPath(schemaId: string): string[] {
         if (schemaId === undefined) {
diff --git a/src/components/form/templates/common.ts b/src/components/form/templates/common.ts
index 0b463d0bcd..626b8b132c 100644
--- a/src/components/form/templates/common.ts
+++ b/src/components/form/templates/common.ts
@@ -32,10 +32,10 @@ export function renderDescription(description: string) {
  * If an object has the key 'title' it will have priority, followed by the key 'name'.
  * If 'title' nor 'name' is found, a required item will be considered.
  * Otherwise the first occurrence of a nonempty string is chosen.
- * @param {*} data the data to find the title for
- * @param {*} fieldSchema schema for the item
- * @param {*} formSchema schema for the form
- * @returns {string} describing title of the data
+ * @param data - the data to find the title for
+ * @param fieldSchema - schema for the item
+ * @param formSchema - schema for the form
+ * @returns describing title of the data
  */
 export function findTitle(data: any, fieldSchema: any, formSchema: any) {
     if (!data) {
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 92c5951dfb..75bbb513a1 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -13,8 +13,8 @@ import { IconSize } from '../../interface';
  * standard sizes defined that can be used with the `size` property.
  *
  * ### Setup
- * To use **@lundalogik/lime-icons8**, the `/assets` folder from
- * __@lundalogik/lime-icons8__ must be made available on the webserver.
+ * To use `@lundalogik/lime-icons8`, the `/assets` folder from
+ * `@lundalogik/lime-icons8` must be made available on the webserver.
  * To use a different icon set, the icons must be placed in a folder structure
  * that looks like this: `assets/icons/<name-of-icon>.svg`
  *
@@ -36,7 +36,7 @@ import { IconSize } from '../../interface';
  * ```
  *
  * ### Lime icons
- * There are icons included in the **@lundalogik/lime-icons8** package which are
+ * There are icons included in the `@lundalogik/lime-icons8` package which are
  * designed by our designers at Lime.
  * The names of these icons start with `-lime-`, which makes them easy to
  * find using the Icon Finder tool below.
@@ -104,8 +104,8 @@ export class Icon {
 
     /**
      * Load the SVG data for the icon from the icon cache
-     * @param {string} name name of the icon
-     * @returns {string} the icon SVG data
+     * @param name - name of the icon
+     * @returns the icon SVG data
      */
     private loadSvg(name: string) {
         return iconCache.get(name, config.iconPath);
diff --git a/src/components/input-field/input-field.tsx b/src/components/input-field/input-field.tsx
index 1be0b23e84..471c9a3504 100644
--- a/src/components/input-field/input-field.tsx
+++ b/src/components/input-field/input-field.tsx
@@ -734,8 +734,8 @@ export class InputField {
     /**
      * Key handler for the input field
      * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
-     * @param {KeyboardEvent} event event
-     * @returns {void}
+     * @param event - event
+
      */
 
     private onKeyDown = (event: KeyboardEvent): void => {
diff --git a/src/components/list/list-renderer.tsx b/src/components/list/list-renderer.tsx
index c1140ee1b9..c8ddff3c9c 100644
--- a/src/components/list/list-renderer.tsx
+++ b/src/components/list/list-renderer.tsx
@@ -75,8 +75,8 @@ export class ListRenderer {
      * and return the index at which that ListItem is located in `items`.
      * Returns `undefined` if no item should have the attribute set.
      * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
-     * @param {Array<ListItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
-     * @returns {number} the index as per the description
+     * @param items - the items of the list, including any `ListSeparator`:s
+     * @returns the index as per the description
      */
     private getIndexForWhichToApplyTabIndex = (
         items: Array<ListItem | ListSeparator>
@@ -105,9 +105,9 @@ export class ListRenderer {
 
     /**
      * Render a single list item
-     * @param {ListItem | ListSeparator} item the item to render
-     * @param {number} index the index the item had in the `items` array
-     * @returns {HTMLElement} the list item
+     * @param item - the item to render
+     * @param index - the index the item had in the `items` array
+     * @returns the list item
      */
     private renderListItem = (
         item: ListItem | ListSeparator,
@@ -178,8 +178,8 @@ export class ListRenderer {
 
     /**
      * Render the text of the list item
-     * @param {ListItem} item the list item
-     * @returns {HTMLElement | string} the text for the list item
+     * @param item - the list item
+     * @returns the text for the list item
      */
     private renderText = (item: ListItem) => {
         if (this.isSimpleItem(item)) {
@@ -208,9 +208,9 @@ export class ListRenderer {
 
     /**
      * Render an icon for a list item
-     * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function
-     * @param {ListItem} item the list item
-     * @returns {HTMLElement} the icon element
+     * @param config - the config object, passed on from the `renderListItem` function
+     * @param item - the list item
+     * @returns the icon element
      */
     private renderIcon = (config: ListRendererConfig, item: ListItem) => {
         const style: any = {};
diff --git a/src/components/markdown/markdown-parser.ts b/src/components/markdown/markdown-parser.ts
index 7f3825b0a4..55b117ae29 100644
--- a/src/components/markdown/markdown-parser.ts
+++ b/src/components/markdown/markdown-parser.ts
@@ -16,9 +16,9 @@ import rehypeRaw from 'rehype-raw';
  *
  * If the text already is in HTML it will be sanitized and
  * "dangerous" tags such as <script> will be removed.
- * @param {string} text The string to convert.
- * @param {markdownToHTMLOptions} [options] Options for the conversions.
- * @returns {Promise<string>} The resulting HTML.
+ * @param text - The string to convert.
+ * @param options - Options for the conversions.
+ * @returns The resulting HTML.
  */
 export async function markdownToHTML(
     text: string,
diff --git a/src/components/menu-list/menu-list-renderer.tsx b/src/components/menu-list/menu-list-renderer.tsx
index 1dbf9a3186..928b9d8500 100644
--- a/src/components/menu-list/menu-list-renderer.tsx
+++ b/src/components/menu-list/menu-list-renderer.tsx
@@ -70,8 +70,8 @@ export class MenuListRenderer {
      * and return the index at which that MenuItem is located in `items`.
      * Returns `undefined` if no item should have the attribute set.
      * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
-     * @param {Array<MenuItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
-     * @returns {number} the index as per the description
+     * @param items - the items of the list, including any `ListSeparator`:s
+     * @returns the index as per the description
      */
     private getIndexForWhichToApplyTabIndex = (
         items: Array<MenuItem | ListSeparator>
@@ -100,9 +100,9 @@ export class MenuListRenderer {
 
     /**
      * Render a single list item
-     * @param {MenuItem | ListSeparator} item the item to render
-     * @param {number} index the index the item had in the `items` array
-     * @returns {HTMLElement} the list item
+     * @param item - the item to render
+     * @param index - the index the item had in the `items` array
+     * @returns the list item
      */
     private renderMenuItem = (
         item: MenuItem | ListSeparator,
@@ -147,8 +147,8 @@ export class MenuListRenderer {
 
     /**
      * Render the text of the list item
-     * @param {MenuItem} item the list item
-     * @returns {HTMLElement | string} the text for the list item
+     * @param item - the list item
+     * @returns the text for the list item
      */
     private renderText = (item: MenuItem) => {
         if (this.isSimpleItem(item)) {
@@ -200,9 +200,9 @@ export class MenuListRenderer {
 
     /**
      * Render an icon for a list item
-     * @param {MenuListRendererConfig} config the config object, passed on from the `renderMenuItem` function
-     * @param {MenuItem} item the list item
-     * @returns {HTMLElement} the icon element
+     * @param config - the config object, passed on from the `renderMenuItem` function
+     * @param item - the list item
+     * @returns the icon element
      */
     private renderIcon = (config: MenuListRendererConfig, item: MenuItem) => {
         const style: any = {};
diff --git a/src/components/picker/picker.tsx b/src/components/picker/picker.tsx
index 7f1ccc9cb6..843d413a01 100644
--- a/src/components/picker/picker.tsx
+++ b/src/components/picker/picker.tsx
@@ -333,7 +333,7 @@ export class Picker {
     /**
      * Renders the dropdown with the items to pick from, or a spinner if the picker
      * is waiting for items to be received
-     * @returns {HTMLElement} picker dropdown
+     * @returns picker dropdown
      */
     private renderDropdown() {
         const dropDownContent = this.getDropdownContent();
@@ -417,7 +417,7 @@ export class Picker {
     /**
      * Returns true if the picker is "full"
      * The picker is considered to be full if it has a value and only one is allowed
-     * @returns {boolean} true if the picker is full
+     * @returns true if the picker is full
      */
     private isFull(): boolean {
         return !this.multiple && !!this.value;
@@ -507,7 +507,7 @@ export class Picker {
 
     /**
      * Check if a descendant still has focus. If not, reset text value and search result.
-     * @returns {void}
+
      */
     private handleStopEditAndBlur() {
         // In browsers where shadow DOM is not supported activeElement on shadowRoot will return null
@@ -527,8 +527,8 @@ export class Picker {
 
     /**
      * Input handler for the input field
-     * @param {InputEvent} event event
-     * @returns {void}
+     * @param event - event
+
      */
     private async handleTextInput(event) {
         event.stopPropagation();
@@ -545,8 +545,8 @@ export class Picker {
 
     /**
      * Change handler for the list
-     * @param {LimelListCustomEvent<ListItem>} event event
-     * @returns {void}
+     * @param event - event
+
      */
     private handleListChange(event: LimelListCustomEvent<ListItem>) {
         event.stopPropagation();
@@ -567,8 +567,8 @@ export class Picker {
 
     /**
      * Change handler for the list
-     * @param {LimelChipSetCustomEvent} event event
-     * @returns {void}
+     * @param event - event
+
      */
     private handleActionListChange(
         event: LimelListCustomEvent<ListItem<Action>>
@@ -585,7 +585,7 @@ export class Picker {
     /**
      * Focus handler for the chip set
      * Prevent focus if the picker has a value and does not support multiple values
-     * @returns {void}
+
      */
     private async handleInputFieldFocus() {
         this.loading = true;
@@ -618,8 +618,8 @@ export class Picker {
     /**
      * Key handler for the input field
      * Will change focus to the first/last item in the dropdown list to enable selection with the keyboard
-     * @param {KeyboardEvent} event event
-     * @returns {void}
+     * @param event - event
+
      */
     private handleInputKeyDown(event: KeyboardEvent) {
         const isForwardTab =
@@ -662,8 +662,8 @@ export class Picker {
 
     /**
      * Key handler for the dropdown
-     * @param {KeyboardEvent} event event
-     * @returns {void}
+     * @param event - event
+
      */
     private handleDropdownKeyDown(event: KeyboardEvent) {
         const isEscape =
diff --git a/src/components/picker/searcher.types.ts b/src/components/picker/searcher.types.ts
index 0e09f58e60..4102a4ee0e 100644
--- a/src/components/picker/searcher.types.ts
+++ b/src/components/picker/searcher.types.ts
@@ -3,8 +3,8 @@ import { ListItem } from '../../interface';
 /**
  * A search function that takes a search-string as an argument, and returns
  * a promise that will eventually be resolved with an array of `ListItem`:s.
- * @param {string} query A search query. Typically what the user has written
+ * @param query - A search query. Typically what the user has written
  * in the input field of a limel-picker.
- * @returns {Promise<ListItem[]>} The search result.
+ * @returns The search result.
  */
 export type Searcher = (query: string) => Promise<ListItem[]>;
diff --git a/src/components/portal/contains.ts b/src/components/portal/contains.ts
index d364d0f0f6..267f761f66 100644
--- a/src/components/portal/contains.ts
+++ b/src/components/portal/contains.ts
@@ -3,9 +3,9 @@
  *
  * If the child element is a descendant of a limel-portal, this function will
  * go back through the portal and check the original tree recursively
- * @param {HTMLElement} element the parent element
- * @param {HTMLElement} child the child element to check
- * @returns {boolean} `true` if child is a descendant of element, taking
+ * @param element - the parent element
+ * @param child - the child element to check
+ * @returns `true` if child is a descendant of element, taking
  * portals into account
  */
 export function portalContains(
diff --git a/src/components/portal/portal.tsx b/src/components/portal/portal.tsx
index 390ac71161..6fa2ebacbb 100644
--- a/src/components/portal/portal.tsx
+++ b/src/components/portal/portal.tsx
@@ -8,7 +8,6 @@ import {
 } from '@popperjs/core';
 import { FlipModifier } from '@popperjs/core/lib/modifiers/flip';
 
-/* eslint-disable jsdoc/check-indentation */
 /**
  * The portal component provides a way to render children into a DOM node that
  * exist outside the DOM hierarchy of the parent component.
@@ -33,7 +32,6 @@ import { FlipModifier } from '@popperjs/core/lib/modifiers/flip';
  * @private
  * @exampleComponent limel-example-portal-basic
  */
-/* eslint-enable jsdoc/check-indentation */
 @Component({
     tag: 'limel-portal',
     shadow: true,
diff --git a/src/components/tab-bar/tabs.ts b/src/components/tab-bar/tabs.ts
index b3168736ba..2578c71b56 100644
--- a/src/components/tab-bar/tabs.ts
+++ b/src/components/tab-bar/tabs.ts
@@ -3,9 +3,9 @@ import { Tab } from '../../interface';
 /**
  * Set a tabs `active` state to true in a list of tabs. The previous tab with
  * `active` set to true will have it set to `false` instead.
- * @param {Tab[]} tabs list of tabs
- * @param {number} index the index of the tab to set to active
- * @returns {Tab[]} a copy of the list of tabs with the changed tabs replaced
+ * @param tabs - list of tabs
+ * @param index - the index of the tab to set to active
+ * @returns a copy of the list of tabs with the changed tabs replaced
  */
 export function setActiveTab(tabs: Tab[], index: number): Tab[] {
     const oldSelectedTabIndex = tabs.findIndex((t) => t.active === true);
diff --git a/src/components/tab-panel/examples/tab-panel.tsx b/src/components/tab-panel/examples/tab-panel.tsx
index 861dc21a51..5f52b524a2 100644
--- a/src/components/tab-panel/examples/tab-panel.tsx
+++ b/src/components/tab-panel/examples/tab-panel.tsx
@@ -8,8 +8,8 @@ import { Tab } from '@limetech/lime-elements';
  * activated and then display the actual content. If the button is pressed, the
  * component will emit the `changeTab` event to change the badge inside the
  * corresponding tab.
- * @link tab-panel-content.tsx
- * @link tab-panel-content.scss
+ * @sourceFileLink tab-panel-content.tsx
+ * @sourceFileLink tab-panel-content.scss
  */
 @Component({
     tag: 'limel-example-tab-panel',
diff --git a/src/components/table/columns.ts b/src/components/table/columns.ts
index 8a65faaf63..7a120c2814 100644
--- a/src/components/table/columns.ts
+++ b/src/components/table/columns.ts
@@ -15,8 +15,8 @@ export class ColumnDefinitionFactory {
 
     /**
      * Create Tabulator column definitions from a limel-table column configuration
-     * @param {Column} column config describing the column
-     * @returns {Tabulator.ColumnDefinition} Tabulator column
+     * @param column - config describing the column
+     * @returns Tabulator column
      */
     public create(column: Column<object>): Tabulator.ColumnDefinition {
         const definition: Tabulator.ColumnDefinition = {
@@ -46,8 +46,8 @@ export class ColumnDefinitionFactory {
 
 /**
  * Formats the header of the column
- * @param {Column} column the configuration for the column
- * @returns {string | HTMLElement} custom component that renders a column header
+ * @param column - the configuration for the column
+ * @returns custom component that renders a column header
  */
 export const formatHeader = (column: Column) => (): string | HTMLElement => {
     const headerElement = document.createElement('div');
@@ -79,9 +79,9 @@ export const formatHeader = (column: Column) => (): string | HTMLElement => {
 
 /**
  * Create a formatter to be used to format values in a column
- * @param {Column} column config describing the column
- * @param {ElementPool} pool pool to get custom components from
- * @returns {Tabulator.Formatter} Tabulator formatter
+ * @param column - config describing the column
+ * @param pool - pool to get custom components from
+ * @returns Tabulator formatter
  */
 export function createFormatter(
     column: Column,
@@ -123,9 +123,9 @@ function columnElementExists(column: Column<any>) {
 
 /**
  * Format the value of a cell in the table
- * @param {Tabulator.CellComponent} cell the cell being rendered in the table
- * @param {Column} column configuration for the current column
- * @returns {string} the formatted value
+ * @param cell - the cell being rendered in the table
+ * @param column - configuration for the current column
+ * @returns the formatted value
  */
 export function formatCell(
     cell: Tabulator.CellComponent,
@@ -147,11 +147,11 @@ export function formatCell(
 
 /**
  * Create a custom component that renders a cell value
- * @param {Tabulator.CellComponent} cell Tabulator cell
- * @param {Column} column lime-elements column configuration
- * @param {string} value the value of the cell being rendered
- * @param {ElementPool} pool pool to get custom components from
- * @returns {HTMLElement} custom component that renders a value in the table
+ * @param cell - Tabulator cell
+ * @param column - lime-elements column configuration
+ * @param value - the value of the cell being rendered
+ * @param pool - pool to get custom components from
+ * @returns custom component that renders a value in the table
  */
 export function createCustomComponent(
     cell: Tabulator.CellComponent,
@@ -188,8 +188,8 @@ export function createCustomComponent(
 
 /**
  * Set all properties for a custom element, including event listeners
- * @param {HTMLElement} element the custom element
- * @param {object} props object of properties and event listeners
+ * @param element - the custom element
+ * @param props - object of properties and event listeners
  */
 export function setElementProperties(element: HTMLElement, props: object) {
     const properties = pickBy(props, negate(isEventListener));
@@ -207,9 +207,9 @@ export function setElementProperties(element: HTMLElement, props: object) {
  *
  * An event listener has to be a function and its property name have to start
  * with "on" followed by the name of the event in camel case, e.g. "onEventName"
- * @param {any} value the value to check
- * @param {string} key name of the property
- * @returns {boolean} true if the property of the object is an event listener
+ * @param value - the value to check
+ * @param key - name of the property
+ * @returns true if the property of the object is an event listener
  */
 function isEventListener(value: any, key: string): boolean {
     if (typeof value !== 'function') {
@@ -223,8 +223,8 @@ function isEventListener(value: any, key: string): boolean {
  * Get the name of an event from the name of an event listener
  *
  * E.g. "onMyEvent" will return "myEvent"
- * @param {string} eventListener name of the event listener
- * @returns {string} the name of the event
+ * @param eventListener - name of the event listener
+ * @returns the name of the event
  */
 function getEventName(eventListener: string): string {
     // eslint-disable-next-line no-magic-numbers
@@ -269,8 +269,8 @@ interface TabulatorSorter extends Tabulator.Sorter {
 
 /**
  * Create a column sorter from a tabulator sorter
- * @param {Column[]} columns all available columns in the table
- * @returns {Function} function that creates a sorter from a tabulator sorter
+ * @param columns - all available columns in the table
+ * @returns function that creates a sorter from a tabulator sorter
  */
 export const createColumnSorter =
     (columns: Column[]) =>
diff --git a/src/components/table/element-pool.ts b/src/components/table/element-pool.ts
index 94ffd7c1e8..1a6c4c93dc 100644
--- a/src/components/table/element-pool.ts
+++ b/src/components/table/element-pool.ts
@@ -11,8 +11,8 @@ export class ElementPool {
 
     /**
      * Get an element from the pool
-     * @param {string} name tag name of the element
-     * @returns {HTMLElement} the element
+     * @param name - tag name of the element
+     * @returns the element
      */
     public get(name: string): HTMLElement {
         let element = this.pool[name]?.find(this.isFree);
@@ -31,7 +31,7 @@ export class ElementPool {
 
     /**
      * Release an element from the pool so that it can be reused
-     * @param {HTMLElement} element the element to release from the pool
+     * @param element - the element to release from the pool
      */
     public release(element: HTMLElement): void {
         this.usedElements.delete(element);
diff --git a/src/components/table/examples/table-activate-row.tsx b/src/components/table/examples/table-activate-row.tsx
index 8462145156..1b9c222e5c 100644
--- a/src/components/table/examples/table-activate-row.tsx
+++ b/src/components/table/examples/table-activate-row.tsx
@@ -4,7 +4,7 @@ import { persons, Person } from './persons';
 
 /**
  * Activate a row
- * @link persons.ts
+ * @sourceFileLink persons.ts
  */
 @Component({
     tag: 'limel-example-table-activate-row',
diff --git a/src/components/table/examples/table-custom-components.tsx b/src/components/table/examples/table-custom-components.tsx
index dcf920643c..495298164b 100644
--- a/src/components/table/examples/table-custom-components.tsx
+++ b/src/components/table/examples/table-custom-components.tsx
@@ -24,8 +24,8 @@ import { capitalize } from 'lodash-es';
  * While you can, in principle, use any component in a table, your custom table
  * components should implement the [TableComponent](#/type/TableComponent/)
  * interface.
- * @link birds.ts
- * @link table-food.tsx
+ * @sourceFileLink birds.ts
+ * @sourceFileLink table-food.tsx
  */
 @Component({
     tag: 'limel-example-table-custom-components',
diff --git a/src/components/table/examples/table-header-menu.tsx b/src/components/table/examples/table-header-menu.tsx
index 92be4ba559..a3783e6546 100644
--- a/src/components/table/examples/table-header-menu.tsx
+++ b/src/components/table/examples/table-header-menu.tsx
@@ -9,8 +9,8 @@ import { persons, Person } from './persons';
  * contrast to custom components used elsewhere in the table, custom components
  * used in the header do not replace the entire content of the cell. Instead,
  * they appear in a slot next to the column sorting icon.
- * @link persons.ts
- * @link header-menu.tsx
+ * @sourceFileLink persons.ts
+ * @sourceFileLink header-menu.tsx
  */
 @Component({
     tag: 'limel-example-table-header-menu',
diff --git a/src/components/table/examples/table-layout-default.tsx b/src/components/table/examples/table-layout-default.tsx
index 3a825dab38..cd69971156 100644
--- a/src/components/table/examples/table-layout-default.tsx
+++ b/src/components/table/examples/table-layout-default.tsx
@@ -9,9 +9,9 @@ import { invoices, Invoice } from './invoices';
  * rendering, choose one of the available `layout` properties.
  *
  *
- * ````tsx
+ * ```tsx
  * layout="default"
- * ````
+ * ```
  * The default layout resizes the table's columns,
  * in a way that each column becomes as wide as the data it holds.
  *
@@ -37,7 +37,7 @@ import { invoices, Invoice } from './invoices';
  * `horizontalAlign` on the column headers, to `left` (default), `center`,
  * or `right`. This basically defines the text-alignment for all the cells in that column.
  * :::
- * @link invoices.ts
+ * @sourceFileLink invoices.ts
  */
 @Component({
     tag: 'limel-example-table-layout-default',
diff --git a/src/components/table/examples/table-layout-lowDensity.tsx b/src/components/table/examples/table-layout-lowDensity.tsx
index 8484e82348..5817f0fecb 100644
--- a/src/components/table/examples/table-layout-lowDensity.tsx
+++ b/src/components/table/examples/table-layout-lowDensity.tsx
@@ -4,9 +4,9 @@ import { invoices, Invoice } from './invoices';
 
 /**
  *
- *````tsx
+ *```tsx
  *layout="lowDensity"
- *````
+ *```
  *By using this layout option, you can easily convert the table into an airy list of items.
  *
  *This type of UI is suitable for generating minimalist lists of items with
@@ -25,7 +25,7 @@ import { invoices, Invoice } from './invoices';
  *task is processing the presented data and making sense of it. For such views,
  *use the table component with its normal density.
  *:::
- * @link invoices.ts
+ * @sourceFileLink invoices.ts
  */
 @Component({
     tag: 'limel-example-table-layout-low-density',
diff --git a/src/components/table/examples/table-layout-stretchColumns.tsx b/src/components/table/examples/table-layout-stretchColumns.tsx
index 49050ebbc8..98be24e90c 100644
--- a/src/components/table/examples/table-layout-stretchColumns.tsx
+++ b/src/components/table/examples/table-layout-stretchColumns.tsx
@@ -4,15 +4,15 @@ import { invoices, Invoice } from './invoices';
 
 /**
  *
- *````tsx
+ *```tsx
  *layout="stretchColumns"
- *````
+ *```
  *
  *With this layout, the table stretches columns so that all
  *fit perfectly in the table container, when extra space is available.
  *If all columns cannot fit within the available width,
  *then a horizontal scrollbar will appear.
- * @link invoices.ts
+ * @sourceFileLink invoices.ts
  */
 @Component({
     tag: 'limel-example-table-layout-stretch-columns',
diff --git a/src/components/table/examples/table-layout-stretchLastColumn.tsx b/src/components/table/examples/table-layout-stretchLastColumn.tsx
index 1d0fa93fa4..30d8ab3ae5 100644
--- a/src/components/table/examples/table-layout-stretchLastColumn.tsx
+++ b/src/components/table/examples/table-layout-stretchLastColumn.tsx
@@ -4,14 +4,14 @@ import { invoices, Invoice } from './invoices';
 
 /**
  *
- *````tsx
+ *```tsx
  *layout="stretchLastColumn"
- *````
+ *```
  *
  *Works just like `default`, but unlike the default layout
  *which resulted in having an empty last column, in this layout
  *the last existing column will stretch out to fill up the remaining table width.
- * @link invoices.ts
+ * @sourceFileLink invoices.ts
  */
 @Component({
     tag: 'limel-example-table-layout-stretch-last-column',
diff --git a/src/components/table/examples/table-local.tsx b/src/components/table/examples/table-local.tsx
index ca2921705e..88c39a6c89 100644
--- a/src/components/table/examples/table-local.tsx
+++ b/src/components/table/examples/table-local.tsx
@@ -9,7 +9,7 @@ import { capitalize } from 'lodash-es';
 
 /**
  * Local sorting and pagination
- * @link birds.ts
+ * @sourceFileLink birds.ts
  */
 @Component({
     tag: 'limel-example-table-local',
diff --git a/src/components/table/examples/table-movable-columns.tsx b/src/components/table/examples/table-movable-columns.tsx
index b43bc8f88b..176ed8d224 100644
--- a/src/components/table/examples/table-movable-columns.tsx
+++ b/src/components/table/examples/table-movable-columns.tsx
@@ -5,7 +5,7 @@ import { capitalize } from 'lodash-es';
 
 /**
  * Movable columns
- * @link birds.ts
+ * @sourceFileLink birds.ts
  */
 @Component({
     tag: 'limel-example-table-movable-columns',
diff --git a/src/components/table/examples/table-remote.tsx b/src/components/table/examples/table-remote.tsx
index 8144c7f5f8..e4aa73b416 100644
--- a/src/components/table/examples/table-remote.tsx
+++ b/src/components/table/examples/table-remote.tsx
@@ -7,7 +7,7 @@ const NETWORK_DELAY = 500;
 
 /**
  * Remote sorting and pagination
- * @link birds.ts
+ * @sourceFileLink birds.ts
  */
 @Component({
     tag: 'limel-example-table-remote',
diff --git a/src/components/table/examples/table-selectable-rows.tsx b/src/components/table/examples/table-selectable-rows.tsx
index b90ad85e2a..dd7fc108ba 100644
--- a/src/components/table/examples/table-selectable-rows.tsx
+++ b/src/components/table/examples/table-selectable-rows.tsx
@@ -8,7 +8,7 @@ import { persons, Person } from './persons';
 
 /**
  * Selectable rows with updating aggregates
- * @link persons.ts
+ * @sourceFileLink persons.ts
  */
 @Component({
     tag: 'limel-example-table-selectable-rows',
diff --git a/src/components/table/examples/table-sorting-disabled.tsx b/src/components/table/examples/table-sorting-disabled.tsx
index 8a6bf3352a..78ac8470de 100644
--- a/src/components/table/examples/table-sorting-disabled.tsx
+++ b/src/components/table/examples/table-sorting-disabled.tsx
@@ -11,7 +11,7 @@ import { invoices, Invoice } from './invoices';
  *
  * However, you can disable the sorting possibility in individual columns,
  * by setting the `headerSort` to `false`.
- * @link invoices.ts
+ * @sourceFileLink invoices.ts
  */
 @Component({
     tag: 'limel-example-table-sorting-disabled',
diff --git a/src/components/table/examples/table.tsx b/src/components/table/examples/table.tsx
index b0d8e75713..664851daa0 100644
--- a/src/components/table/examples/table.tsx
+++ b/src/components/table/examples/table.tsx
@@ -4,7 +4,7 @@ import { Person, persons } from './persons';
 
 /**
  *
- * @link persons.ts
+ * @sourceFileLink persons.ts
  */
 @Component({
     tag: 'limel-example-table',
diff --git a/src/components/table/selection.ts b/src/components/table/selection.ts
index 26dc32c1e2..72a4c36708 100644
--- a/src/components/table/selection.ts
+++ b/src/components/table/selection.ts
@@ -31,28 +31,28 @@ export class Selection {
      * The provided function `getDataByIndex` is used to provide data for the
      * selected items when selection is toggled by using the item index,
      * which can be the row position in a table.
-     * @param {Function} getDataByIndex A function that returns the data at the given index
+     * @param getDataByIndex - A function that returns the data at the given index
      */
-    constructor(private getDataByIndex: (number) => any) {
+    constructor(private getDataByIndex: (index: number) => any) {
         this.clear();
     }
 
     /**
-     * @returns {number} The size of the selection
+     * @returns The size of the selection
      */
     get size(): number {
         return this.selectedItems.size;
     }
 
     /**
-     * @returns {any[]} The selected items
+     * @returns The selected items
      */
     get items(): any[] {
         return Array.from(this.selectedItems);
     }
 
     /**
-     * @param {any[]} items The selected items
+     * @param items - The selected items
      */
     set items(items: any[]) {
         this.selectedItems = new Set(items);
@@ -61,8 +61,8 @@ export class Selection {
 
     /**
      * Checks whether the given item exist in the selection
-     * @param {any} data The data to look up
-     * @returns {boolean} `true` if the given data exist in the selection, otherwise `false`
+     * @param data - The data to look up
+     * @returns `true` if the given data exist in the selection, otherwise `false`
      */
     public has(data: any) {
         return this.selectedItems.has(data);
@@ -70,8 +70,8 @@ export class Selection {
 
     /**
      * Toggles the item at the given index in the selection
-     * @param {number} index The index of the item to toggle
-     * @returns {SelectionChangeSet} The changes made to the selection
+     * @param index - The index of the item to toggle
+     * @returns The changes made to the selection
      */
     public toggleSelection(index: number): SelectionChangeSet {
         return this.toggleRange(index, index);
@@ -83,8 +83,8 @@ export class Selection {
      * their current state in the selection.
      * Initially, when no last toggled index exist, this function behaves like
      * `toggleSelection`.
-     * @param {number} index The index of the item to toggle
-     * @returns {SelectionChangeSet} The changes made to the selection
+     * @param index - The index of the item to toggle
+     * @returns The changes made to the selection
      */
     public toggleSelectionFromLastIndex(index: number): SelectionChangeSet {
         if (this.lastToggledIndex < 0) {
diff --git a/src/components/table/table-selection.ts b/src/components/table/table-selection.ts
index 9c7c8b0558..8bdfb8368f 100644
--- a/src/components/table/table-selection.ts
+++ b/src/components/table/table-selection.ts
@@ -15,9 +15,9 @@ export class TableSelection {
 
     /**
      * Creates an instance of the TableSelection class
-     * @param {Function} getTable Function that returns the Tabulator instance
-     * @param {ElementPool} pool The element pool used to cache the checkbox components
-     * @param {EventEmitter<object[]>} selectEvent The event emitter to use when checkboxes are toggled
+     * @param getTable - Function that returns the Tabulator instance
+     * @param pool - The element pool used to cache the checkbox components
+     * @param selectEvent - The event emitter to use when checkboxes are toggled
      */
     constructor(
         private getTable: () => Tabulator,
@@ -30,7 +30,7 @@ export class TableSelection {
     }
 
     /**
-     * @returns {boolean} Returns `true` when the selection is non-empty, otherwise `false`
+     * @returns Returns `true` when the selection is non-empty, otherwise `false`
      */
     get hasSelection(): boolean {
         return this.selection.size > 0;
@@ -39,15 +39,15 @@ export class TableSelection {
     /**
      * Clears the selection
      */
-    public clear() {
+    public clear(): void {
         this.selection.clear();
     }
 
     /**
      * Sets the selected items
-     * @param {any[]} data The selected items
+     * @param data - The selected items
      */
-    public setSelection(data: any[]) {
+    public setSelection(data: any[]): void {
         if (isEqual(this.selection.items, data)) {
             return;
         }
@@ -61,8 +61,8 @@ export class TableSelection {
 
     /**
      * Prepends a checkbox column used for row selection to the given column definitions
-     * @param {Tabulator.ColumnDefinition[]} columnDefinitions The column definition for the table
-     * @returns {Tabulator.ColumnDefinition[]} The column definitions with the checkbox column prepended to it
+     * @param columnDefinitions - The column definition for the table
+     * @returns The column definitions with the checkbox column prepended to it
      */
     public getColumnDefinitions(
         columnDefinitions: Tabulator.ColumnDefinition[]
@@ -84,7 +84,7 @@ export class TableSelection {
         };
     }
 
-    private headerClick(ev: Event) {
+    private headerClick(ev: Event): void {
         ev.stopPropagation();
     }
 
@@ -104,13 +104,13 @@ export class TableSelection {
      * Tabulator cell click handler that updates the selection for the clicked
      * row and toggles the selection from the last clicked row if the shift key
      * is pressed down.
-     * @param {PointerEvent} ev The pointer event
-     * @param {Tabulator.CellComponent} cell The clicked cell component
+     * @param ev - The pointer event
+     * @param cell - The clicked cell component
      */
     protected rowSelectorCellClick = (
         ev: PointerEvent,
         cell: Tabulator.CellComponent
-    ) => {
+    ): void => {
         ev.stopPropagation();
         ev.preventDefault();
 
@@ -130,7 +130,7 @@ export class TableSelection {
         this.selectEvent.emit(this.selection.items);
     };
 
-    private updateRowSelectors = (changeSet: SelectionChangeSet) => {
+    private updateRowSelectors = (changeSet: SelectionChangeSet): void => {
         changeSet.indexes
             .map(this.getRowByIndex)
             .forEach((row) => this.updateRowSelector(row, changeSet.selected));
@@ -139,7 +139,7 @@ export class TableSelection {
     private updateRowSelector = (
         row: Tabulator.RowComponent,
         checked: boolean
-    ) => {
+    ): void => {
         const cell = row.getCells()[0];
         if (cell) {
             const checkBox = cell.getElement().querySelector(LIMEL_CHECKBOX);
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index bc9ae63605..d6cefdc88f 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -388,7 +388,7 @@ export class Table {
      * @param table {HTMLElement}
      * @param options {Tabulator.Options}
      *
-     * @returns {void}
+
      */
     private initTabulatorComponent(
         table: HTMLElement,
diff --git a/src/components/table/table.types.ts b/src/components/table/table.types.ts
index c6907dab88..1a9208b2ba 100644
--- a/src/components/table/table.types.ts
+++ b/src/components/table/table.types.ts
@@ -72,9 +72,9 @@ export interface TableComponentDefinition {
      * The properties returned from this function will be merged with the
      * `props` properties when the component is created.
      *
-     * When the propsFactory is used for header components there will be no data available
-     * @param {*} data the data for the current row
-     * @returns {object} properties for the component
+     * When the propsFactory is used for header components there will be no data available.
+     * @param data - The data for the current row
+     * @returns Properties for the component
      */
     propsFactory?: (data: object) => Record<string, any>;
 }
@@ -149,10 +149,10 @@ export enum ColumnAggregatorType {
 
 /**
  * Calculate an aggregated value for a column
- * @param {Column} column the configuration for the column
- * @param {*[]} values list of all values to be aggregated
- * @param {T[]} data list of all objects to be aggregated
- * @returns {*} the aggregated data
+ * @param column - the configuration for the column
+ * @param values - list of all values to be aggregated
+ * @param data - list of all objects to be aggregated
+ * @returns the aggregated data
  */
 export type ColumnAggregatorFunction<T = object> = (
     column?: Column,
diff --git a/src/global/icon-cache/cache-storage-icon-cache.ts b/src/global/icon-cache/cache-storage-icon-cache.ts
index 9000501ced..6e7a01f650 100644
--- a/src/global/icon-cache/cache-storage-icon-cache.ts
+++ b/src/global/icon-cache/cache-storage-icon-cache.ts
@@ -12,11 +12,11 @@ export class CacheStorageIconCache {
 
     /**
      * Get icon data from the cache
-     * @param {string} name name of the icon
-     * @param {string} path path on the server where the assets are located
-     * @returns {Promise<string>} svg markup
+     * @param name - Name of the icon
+     * @param path - Path on the server where the assets are located
+     * @returns SVG markup
      */
-    public async get(name: string, path: string = ''): Promise<string> {
+    public async get(name: string, path = ''): Promise<string> {
         const cache = await this.cache;
         const url = this.getUrl(name, path);
 
diff --git a/src/global/icon-cache/in-memory-icon-cache.ts b/src/global/icon-cache/in-memory-icon-cache.ts
index b70d303ce1..302a81b326 100644
--- a/src/global/icon-cache/in-memory-icon-cache.ts
+++ b/src/global/icon-cache/in-memory-icon-cache.ts
@@ -11,11 +11,11 @@ export class InMemoryIconCache {
 
     /**
      * Get icon data from the cache
-     * @param {string} name name of the icon
-     * @param {string} path path on the server where the assets are located
-     * @returns {string} svg markup
+     * @param name - Name of the icon
+     * @param path - Path on the server where the assets are located
+     * @returns SVG markup
      */
-    public async get(name, path = '') {
+    public async get(name: string, path = ''): Promise<string> {
         if (!this.cache[name]) {
             this.cache[name] = await this.getIcon(name, path);
         }
diff --git a/src/util/dom.ts b/src/util/dom.ts
index 31c4be7e06..4edf6f39e1 100644
--- a/src/util/dom.ts
+++ b/src/util/dom.ts
@@ -1,10 +1,10 @@
 /**
  * Check if an element is a descendant of another, even if it is located within a shadow root
- * @param {Node} element the element to check
- * @param {Node} parent the parent element
- * @returns {boolean} true if the element is a descendant of the parent element, false otherwise
+ * @param element - The element to check
+ * @param parent - The parent element
+ * @returns True if the element is a descendant of the parent element, false otherwise
  */
-export function isDescendant(element: Node, parent: Node) {
+export function isDescendant(element: Node, parent: Node): boolean {
     if (!parent) {
         return false;
     }
diff --git a/src/util/make-enter-clickable.ts b/src/util/make-enter-clickable.ts
index aa16f73b4e..bc5c7f43ea 100644
--- a/src/util/make-enter-clickable.ts
+++ b/src/util/make-enter-clickable.ts
@@ -76,7 +76,7 @@ class EnterClickable {
 /**
  * Overrides the default browser behavior for clickable elements
  * When focused and pressing down enter, avoids calling onClick repeatedly
- * @param {HTMLElement} element the clickable element
+ * @param element - The clickable element
  */
 export function makeEnterClickable(element: HTMLElement) {
     if (!eventHandlers.has(element)) {
diff --git a/src/util/multiple.ts b/src/util/multiple.ts
index 766b7f055c..0410b007af 100644
--- a/src/util/multiple.ts
+++ b/src/util/multiple.ts
@@ -2,8 +2,8 @@ import { isArray } from 'lodash-es';
 
 /**
  * Type guard for checking if a value is multiple items or not
- * @param {T | T[]} value the value to check
- * @returns {boolean} true if value is multiple items, false otherwise
+ * @param value - The value to check
+ * @returns True if value is multiple items, false otherwise
  */
 export function isMultiple<T>(value: T | T[]): value is T[] {
     return isArray(value);