fix: add @slot and @customElement for better ce-manifest output

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() {

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() {

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() {

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 {
   /**

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();

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() {

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 [

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() {

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} */

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() {

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 {

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.

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}
  */

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.
  *

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();

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() {

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 {

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 = {

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

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))),

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
  */

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 {

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() {

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() {

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() {

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() {

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() {

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() {

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 [

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 {

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 {