diff --git a/packages/ui/components/accordion/src/LionAccordion.js b/packages/ui/components/accordion/src/LionAccordion.js
index 6c58bd3ad..b1b090806 100644
--- a/packages/ui/components/accordion/src/LionAccordion.js
+++ b/packages/ui/components/accordion/src/LionAccordion.js
@@ -14,10 +14,11 @@ import { uuid } from '@lion/ui/core.js';
  */
 
 /**
- * # <lion-accordion> webcomponent
+ * @slot invoker - The invoker element for the accordion
+ * @slot content - The content element for the accordion
+ * @slot _accordion - The slot for the accordion, used to rearrange invokers and content
  *
  * @customElement lion-accordion
- * @extends LitElement
  */
 export class LionAccordion extends LitElement {
   static get properties() {
diff --git a/packages/ui/components/button/src/LionButton.js b/packages/ui/components/button/src/LionButton.js
index 191a56805..ac757a944 100644
--- a/packages/ui/components/button/src/LionButton.js
+++ b/packages/ui/components/button/src/LionButton.js
@@ -25,6 +25,8 @@ const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key ===
  * `<form>` support is needed:
  * - When type="reset|submit" should be supported, use LionButtonReset.
  * - When implicit form submission should be supported on top, use LionButtonSubmit.
+ *
+ * @customElement lion-button
  */
 export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
   static get properties() {
diff --git a/packages/ui/components/button/src/LionButtonReset.js b/packages/ui/components/button/src/LionButtonReset.js
index cd729fad2..53846e068 100644
--- a/packages/ui/components/button/src/LionButtonReset.js
+++ b/packages/ui/components/button/src/LionButtonReset.js
@@ -17,6 +17,8 @@ import { LionButton } from './LionButton.js';
  * implicit form submission logic), but LionButtonReset is an easier to grasp name for
  * Application Developers: for reset buttons, always use LionButtonReset, for submit
  * buttons always use LionButtonSubmit.
+ *
+ * @customElement lion-button-reset
  */
 export class LionButtonReset extends LionButton {
   constructor() {
diff --git a/packages/ui/components/button/src/LionButtonSubmit.js b/packages/ui/components/button/src/LionButtonSubmit.js
index 9839a21db..8f607b67f 100644
--- a/packages/ui/components/button/src/LionButtonSubmit.js
+++ b/packages/ui/components/button/src/LionButtonSubmit.js
@@ -39,6 +39,8 @@ function createImplicitSubmitHelperButton() {
  * - the Application Developer should be able to switch types between 'submit'|'reset'|'button'
  * (this is similar to how native HTMLButtonElement works)
  * - a submit button with native form support is needed
+ *
+ * @customElement lion-button-submit
  */
 export class LionButtonSubmit extends LionButtonReset {
   /**
diff --git a/packages/ui/components/checkbox-group/src/LionCheckbox.js b/packages/ui/components/checkbox-group/src/LionCheckbox.js
index b4243f83f..fa3567456 100644
--- a/packages/ui/components/checkbox-group/src/LionCheckbox.js
+++ b/packages/ui/components/checkbox-group/src/LionCheckbox.js
@@ -1,6 +1,9 @@
 import { LionInput } from '@lion/ui/input.js';
 import { ChoiceInputMixin } from '@lion/ui/form-core.js';
 
+/**
+ * @customElement lion-checkbox
+ */
 export class LionCheckbox extends ChoiceInputMixin(LionInput) {
   connectedCallback() {
     super.connectedCallback();
diff --git a/packages/ui/components/checkbox-group/src/LionCheckboxGroup.js b/packages/ui/components/checkbox-group/src/LionCheckboxGroup.js
index a96ddbcc3..fa286a054 100644
--- a/packages/ui/components/checkbox-group/src/LionCheckboxGroup.js
+++ b/packages/ui/components/checkbox-group/src/LionCheckboxGroup.js
@@ -3,6 +3,8 @@ import { ChoiceGroupMixin, FormGroupMixin } from '@lion/ui/form-core.js';
 
 /**
  * A wrapper around multiple checkboxes
+ *
+ * @customElement lion-checkbox-group
  */
 export class LionCheckboxGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {
   constructor() {
diff --git a/packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js b/packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js
index 728b9d448..dfbb44c72 100644
--- a/packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js
+++ b/packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js
@@ -5,6 +5,9 @@ import { LionCheckbox } from './LionCheckbox.js';
  * @typedef {import('./LionCheckboxGroup.js').LionCheckboxGroup} LionCheckboxGroup
  */
 
+/**
+ * @customElement lion-checkbox-indeterminate
+ */
 export class LionCheckboxIndeterminate extends LionCheckbox {
   static get styles() {
     return [
diff --git a/packages/ui/components/collapsible/src/LionCollapsible.js b/packages/ui/components/collapsible/src/LionCollapsible.js
index 284a24023..4cfe391cb 100644
--- a/packages/ui/components/collapsible/src/LionCollapsible.js
+++ b/packages/ui/components/collapsible/src/LionCollapsible.js
@@ -1,10 +1,13 @@
 import { LitElement, html, css } from 'lit';
 import { uuid } from '@lion/ui/core.js';
+
 /**
  * `LionCollapsible` is a class for custom collapsible element (`<lion-collapsible>` web component).
  *
+ * @slot invoker - The invoker element for the collapsible
+ * @slot content - The content element for the collapsible
+ *
  * @customElement lion-collapsible
- * @extends LitElement
  */
 export class LionCollapsible extends LitElement {
   static get styles() {
diff --git a/packages/ui/components/combobox/src/LionCombobox.js b/packages/ui/components/combobox/src/LionCombobox.js
index b345901ec..d77056af1 100644
--- a/packages/ui/components/combobox/src/LionCombobox.js
+++ b/packages/ui/components/combobox/src/LionCombobox.js
@@ -28,6 +28,11 @@ const matchA11ySpanReverseFns = new WeakMap();
 /**
  * LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion
  * FormControl
+ *
+ * @slot listbox - The listbox element for the combobox, e.g. <lion-options>
+ * @slot selection-display - The selection display element for the combobox, e.g. <lion-selection-display>
+ *
+ * @customElement lion-combobox
  */
 export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMixin(LionListbox))) {
   /** @type {any} */
diff --git a/packages/ui/components/dialog/src/LionDialog.js b/packages/ui/components/dialog/src/LionDialog.js
index 55069f95d..c18ac9837 100644
--- a/packages/ui/components/dialog/src/LionDialog.js
+++ b/packages/ui/components/dialog/src/LionDialog.js
@@ -1,6 +1,9 @@
 import { html, LitElement } from 'lit';
 import { OverlayMixin, withModalDialogConfig } from '@lion/ui/overlays.js';
 
+/**
+ * @customElement lion-dialog
+ */
 export class LionDialog extends OverlayMixin(LitElement) {
   /** @type {any} */
   static get properties() {
diff --git a/packages/ui/components/drawer/src/LionDrawer.js b/packages/ui/components/drawer/src/LionDrawer.js
index 9cbf65924..05e755834 100644
--- a/packages/ui/components/drawer/src/LionDrawer.js
+++ b/packages/ui/components/drawer/src/LionDrawer.js
@@ -7,6 +7,15 @@ const EVENT = {
   TRANSITION_START: 'transitionstart',
 };
 
+/**
+ * LionDrawer: extension of lion-collapsible with drawer specific styles and animations
+ *
+ * @slot invoker - The invoker element for the drawer
+ * @slot content - The content element for the drawer
+ * @slot headline - The headline element for the drawer
+ *
+ * @customElement lion-drawer
+ */
 export class LionDrawer extends LionCollapsible {
   static get properties() {
     return {
diff --git a/packages/ui/components/fieldset/src/LionFieldset.js b/packages/ui/components/fieldset/src/LionFieldset.js
index 075b221bd..03d5112ee 100644
--- a/packages/ui/components/fieldset/src/LionFieldset.js
+++ b/packages/ui/components/fieldset/src/LionFieldset.js
@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 import { FormGroupMixin } from '@lion/ui/form-core.js';
 
 /**
- * @desc LionFieldset is basically a 'sub form' and can have its own nested sub forms.
+ * LionFieldset is basically a 'sub form' and can have its own nested sub forms.
  * It mimics the native <fieldset> element in this sense, but has all the functionality of
  * a FormControl (advanced styling, validation, interaction states etc.) Also see
  * FormGroupMixin it depends on.
diff --git a/packages/ui/components/form-core/src/FormControlMixin.js b/packages/ui/components/form-core/src/FormControlMixin.js
index 974a07da7..ca9198ca1 100644
--- a/packages/ui/components/form-core/src/FormControlMixin.js
+++ b/packages/ui/components/form-core/src/FormControlMixin.js
@@ -24,6 +24,16 @@ import { FormRegisteringMixin } from './registration/FormRegisteringMixin.js';
  * This Mixin is a shared fundament for all form components, it's applied on:
  * - LionField (which is extended to LionInput, LionTextarea, LionSelect etc. etc.)
  * - LionFieldset (which is extended to LionRadioGroup, LionCheckboxGroup, LionForm)
+ *
+ * @slot label - The label for the form control
+ * @slot help-text - The help text for the form control
+ * @slot input - The input element for the form control, e.g. <input>, <textarea>, <select>
+ * @slot feedback - The validation feedback for the form control
+ * @slot prefix - The prefix for the form control, e.g. currency symbol
+ * @slot suffix - The suffix for the form control, e.g. currency symbol
+ * @slot before - The before element for the form control, e.g. a label
+ * @slot after - The after element for the form control, e.g. a label
+ *
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  * @type {FormControlMixin}
  */
diff --git a/packages/ui/components/form-core/src/FormatMixin.js b/packages/ui/components/form-core/src/FormatMixin.js
index ffe7fc6f6..19aa900ce 100644
--- a/packages/ui/components/form-core/src/FormatMixin.js
+++ b/packages/ui/components/form-core/src/FormatMixin.js
@@ -25,7 +25,7 @@ import { Unparseable } from './validate/Unparseable.js';
 // formattedValue condition needs to be evaluated right before syncing back to the view
 
 /**
- * @desc Designed to be applied on top of a LionField.
+ * Designed to be applied on top of a LionField.
  * To understand all concepts within the Mixin, please consult the flow diagram in the
  * documentation.
  *
diff --git a/packages/ui/components/form/src/LionForm.js b/packages/ui/components/form/src/LionForm.js
index 57014307b..6384cbc7b 100644
--- a/packages/ui/components/form/src/LionForm.js
+++ b/packages/ui/components/form/src/LionForm.js
@@ -15,7 +15,6 @@ const throwFormNodeError = () => {
  *
  * @customElement lion-form
  */
-// eslint-disable-next-line no-unused-vars
 export class LionForm extends LionFieldset {
   constructor() {
     super();
diff --git a/packages/ui/components/icon/src/LionIcon.js b/packages/ui/components/icon/src/LionIcon.js
index 93f14bdca..7fbf77ed7 100644
--- a/packages/ui/components/icon/src/LionIcon.js
+++ b/packages/ui/components/icon/src/LionIcon.js
@@ -29,6 +29,8 @@ function validateSvg(svg) {
 
 /**
  * Custom element for rendering SVG icons
+ *
+ * @customElement lion-icon
  */
 export class LionIcon extends LitElement {
   static get properties() {
diff --git a/packages/ui/components/input-file/src/LionInputFile.js b/packages/ui/components/input-file/src/LionInputFile.js
index 5936e59cc..e6789f59c 100644
--- a/packages/ui/components/input-file/src/LionInputFile.js
+++ b/packages/ui/components/input-file/src/LionInputFile.js
@@ -31,6 +31,15 @@ function formatBytes(bytes, decimals = 2) {
   return `${parseFloat((bytes / k ** i).toFixed(dm))}${sizes[i]}`;
 }
 
+/**
+ * LionInputFile: A file input component
+ * This component allows users to select files, displays selected files, and handles file uploads.
+ *
+ * @slot file-select-button - [private] The button to open the file dialog
+ * @slot selected-file-list - [private] The list of selected files
+ *
+ * @customElement lion-input-file
+ */
 export class LionInputFile extends ScopedElementsMixin(LocalizeMixin(LionField)) {
   static get scopedElements() {
     return {
diff --git a/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js b/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js
index 0cffb57cf..45eeeae67 100644
--- a/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js
+++ b/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js
@@ -40,6 +40,8 @@ import { regionCodeToLocale } from './regionCodeToLocale.js';
  * possible. Also, it doesn't need to be a `FormControl`, because it's purely a helper element
  * to provide better UX: the modelValue (the text field) contains all needed info, since it's in
  * `e164` format that contains all info (both region code and national phone number).
+ *
+ * @customElement lion-input-tel-dropdown
  */
 export class LionInputTelDropdown extends LionInputTel {
   refs = {
diff --git a/packages/ui/components/input-tel/src/LionInputTel.js b/packages/ui/components/input-tel/src/LionInputTel.js
index adad7c182..70245c4b4 100644
--- a/packages/ui/components/input-tel/src/LionInputTel.js
+++ b/packages/ui/components/input-tel/src/LionInputTel.js
@@ -18,6 +18,9 @@ import { localizeNamespaceLoader } from './localizeNamespaceLoader.js';
  * @typedef {FormatOptions & {regionCode: RegionCode; formatStrategy: PhoneNumberFormat; formatCountryCodeStyle: string;}} FormatOptionsTel
  */
 
+/**
+ * @customElement lion-input-tel
+ */
 export class LionInputTel extends LocalizeMixin(LionInput) {
   /**
    * @configure LitElement
diff --git a/packages/ui/components/listbox/src/LionListbox.js b/packages/ui/components/listbox/src/LionListbox.js
index 85b619144..c6d30c4bd 100644
--- a/packages/ui/components/listbox/src/LionListbox.js
+++ b/packages/ui/components/listbox/src/LionListbox.js
@@ -7,6 +7,8 @@ import { ListboxMixin } from './ListboxMixin.js';
 /**
  * LionListbox: implements the wai-aria listbox design pattern and integrates it as a Lion
  * FormControl
+ *
+ * @customElement lion-listbox
  */
 export class LionListbox extends ListboxMixin(
   FocusMixin(InteractionStateMixin(ValidateMixin(LitElement))),
diff --git a/packages/ui/components/overlays/src/OverlayMixin.js b/packages/ui/components/overlays/src/OverlayMixin.js
index ba906f75b..116b09e84 100644
--- a/packages/ui/components/overlays/src/OverlayMixin.js
+++ b/packages/ui/components/overlays/src/OverlayMixin.js
@@ -9,6 +9,10 @@ import { isEqualConfig } from './utils/is-equal-config.js';
  */
 
 /**
+ * @slot backdrop - The backdrop element for the overlay
+ * @slot content - The content element for the overlay
+ * @slot invoker - The invoker element for the overlay
+ *
  * @type {OverlayMixin}
  * @param {import('@open-wc/dedupe-mixin').Constructor<import('lit').LitElement>} superclass
  */
diff --git a/packages/ui/components/progress-indicator/src/LionProgressIndicator.js b/packages/ui/components/progress-indicator/src/LionProgressIndicator.js
index 7929a562b..b272df4aa 100644
--- a/packages/ui/components/progress-indicator/src/LionProgressIndicator.js
+++ b/packages/ui/components/progress-indicator/src/LionProgressIndicator.js
@@ -5,6 +5,10 @@ import { getLocalizeManager, LocalizeMixin } from '@lion/ui/localize-no-side-eff
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
+
+/**
+ * @customElement lion-progress-indicator
+ */
 export class LionProgressIndicator extends LocalizeMixin(LitElement) {
   static get properties() {
     return {
diff --git a/packages/ui/components/radio-group/src/LionRadioGroup.js b/packages/ui/components/radio-group/src/LionRadioGroup.js
index cb25f9038..7dbc9c096 100644
--- a/packages/ui/components/radio-group/src/LionRadioGroup.js
+++ b/packages/ui/components/radio-group/src/LionRadioGroup.js
@@ -2,7 +2,9 @@ import { LitElement } from 'lit';
 import { ChoiceGroupMixin, FormGroupMixin } from '@lion/ui/form-core.js';
 
 /**
- * A wrapper around multiple radios.
+ * LionRadioGroup: A wrapper around multiple radios.
+ *
+ * @customElement lion-radio-group
  */
 export class LionRadioGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {
   connectedCallback() {
diff --git a/packages/ui/components/select-rich/src/LionSelectInvoker.js b/packages/ui/components/select-rich/src/LionSelectInvoker.js
index 70cd6cf1d..797212bf3 100644
--- a/packages/ui/components/select-rich/src/LionSelectInvoker.js
+++ b/packages/ui/components/select-rich/src/LionSelectInvoker.js
@@ -11,6 +11,8 @@ import { SlotMixin } from '@lion/ui/core.js';
 
 /**
  * LionSelectInvoker: invoker button consuming a selected element
+ *
+ * @customElement lion-select-invoker
  */
 export class LionSelectInvoker extends SlotMixin(LionButton) {
   static get styles() {
diff --git a/packages/ui/components/select-rich/src/LionSelectRich.js b/packages/ui/components/select-rich/src/LionSelectRich.js
index 9d806ae21..755380406 100644
--- a/packages/ui/components/select-rich/src/LionSelectRich.js
+++ b/packages/ui/components/select-rich/src/LionSelectRich.js
@@ -22,6 +22,8 @@ function detectInteractionMode() {
 
 /**
  * LionSelectRich: wraps the <lion-listbox> element
+ *
+ * @customElement lion-field-with-select
  */
 export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(LionListbox))) {
   static get scopedElements() {
diff --git a/packages/ui/components/select/src/LionSelect.js b/packages/ui/components/select/src/LionSelect.js
index 956c97e42..f26fa39ac 100644
--- a/packages/ui/components/select/src/LionSelect.js
+++ b/packages/ui/components/select/src/LionSelect.js
@@ -4,6 +4,10 @@ import { LionField } from '@lion/ui/form-core.js';
 /**
  * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatOptions
  */
+
+/**
+ * @customElement lion-field-with-select
+ */
 class LionFieldWithSelect extends LionField {
   /** @type {any} */
   static get properties() {
diff --git a/packages/ui/components/steps/src/LionStep.js b/packages/ui/components/steps/src/LionStep.js
index 7b9dac04c..5bf5a397a 100644
--- a/packages/ui/components/steps/src/LionStep.js
+++ b/packages/ui/components/steps/src/LionStep.js
@@ -8,7 +8,6 @@ import { css, html, LitElement } from 'lit';
  * `LionStep` is one of many in a LionSteps Controller
  *
  * @customElement lion-step
- * @extends {LitElement}
  */
 export class LionStep extends LitElement {
   static get properties() {
diff --git a/packages/ui/components/steps/src/LionSteps.js b/packages/ui/components/steps/src/LionSteps.js
index bb8f86e4f..55b2dbee3 100644
--- a/packages/ui/components/steps/src/LionSteps.js
+++ b/packages/ui/components/steps/src/LionSteps.js
@@ -8,7 +8,6 @@ import { css, html, LitElement } from 'lit';
  * `LionSteps` is a controller for a multi step system.
  *
  * @customElement lion-steps
- * @extends {LitElement}
  */
 export class LionSteps extends LitElement {
   static get styles() {
diff --git a/packages/ui/components/switch/src/LionSwitch.js b/packages/ui/components/switch/src/LionSwitch.js
index ff4c6e4c6..7705fa8d9 100644
--- a/packages/ui/components/switch/src/LionSwitch.js
+++ b/packages/ui/components/switch/src/LionSwitch.js
@@ -3,6 +3,9 @@ import { ChoiceInputMixin, LionField } from '@lion/ui/form-core.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
 import { LionSwitchButton } from './LionSwitchButton.js';
 
+/**
+ * @customElement lion-switch
+ */
 export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) {
   static get styles() {
     return [
diff --git a/packages/ui/components/switch/src/LionSwitchButton.js b/packages/ui/components/switch/src/LionSwitchButton.js
index 7175668a5..c8fa17c65 100644
--- a/packages/ui/components/switch/src/LionSwitchButton.js
+++ b/packages/ui/components/switch/src/LionSwitchButton.js
@@ -1,6 +1,11 @@
 import { html, css, LitElement } from 'lit';
 import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
 
+/**
+ * `LionSwitchButton` is a custom switch button component. It's a private component used within LionSwitch
+ *
+ * @customElement lion-switch-button
+ */
 export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
   static get properties() {
     return {
diff --git a/packages/ui/components/tabs/src/LionTabs.js b/packages/ui/components/tabs/src/LionTabs.js
index 41b763995..74ff94c47 100644
--- a/packages/ui/components/tabs/src/LionTabs.js
+++ b/packages/ui/components/tabs/src/LionTabs.js
@@ -109,6 +109,14 @@ function handleButtonKeydown(ev) {
   }
 }
 
+/**
+ * LionTabs: A tabbed interface component
+ *
+ * @slot tab - The tab elements for the tabs
+ * @slot panel - The panel elements for the tabs
+ *
+ * @customElement lion-tabs
+ */
 export class LionTabs extends LitElement {
   static get properties() {
     return {