@lion/ui 0.13.0 → 0.13.1

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

package/components/button/src/LionButton.js

@@ -1,9 +1,11 @@
 import { html, LitElement, css } from 'lit';
-import { browserDetection, DisabledWithTabIndexMixin, uuid } from '@lion/ui/core.js';
+import { DisabledWithTabIndexMixin } from '@lion/ui/core.js';
 
 const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ' || e.key === 'Enter';
 const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ';
 
+// TODO: simplify html structure, as we got rid of the wrapper element for IE11
+
 /**
  * @typedef {import('lit').TemplateResult} TemplateResult
  */
@@ -25,6 +27,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() {
@@ -35,7 +39,7 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
   }
 
   render() {
-    return html` <div class="button-content" id="${this._buttonId}"><slot></slot></div> `;
+    return html` <div class="button-content"><slot></slot></div> `;
   }
 
   static get styles() {
@@ -124,14 +128,6 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
     this.type = 'button';
     this.active = false;
 
-    this._buttonId = uuid('button');
-    if (browserDetection.isIE11) {
-      this.updateComplete.then(() => {
-        if (!this.hasAttribute('aria-labelledby')) {
-          this.setAttribute('aria-labelledby', this._buttonId);
-        }
-      });
-    }
     this.__setupEvents();
   }
 

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

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

package/components/button/test-suites/LionButton.suite.js

@@ -203,20 +203,6 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
         expect(el.getAttribute('tabindex')).to.equal('5');
       });
 
-      it('has an aria-labelledby and wrapper element in IE11', async () => {
-        const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true);
-        const el = /** @type {LionButton} */ (
-          await fixture(html`<${tagButton}>foo</${tagButton}>`)
-        );
-        expect(el.hasAttribute('aria-labelledby')).to.be.true;
-        const wrapperId = el.getAttribute('aria-labelledby');
-        expect(/** @type {ShadowRoot} */ (el.shadowRoot).querySelector(`#${wrapperId}`)).to.exist;
-        expect(
-          /** @type {ShadowRoot} */ (el.shadowRoot).querySelector(`#${wrapperId}`),
-        ).dom.to.equal(`<div class="button-content" id="${wrapperId}"><slot></slot></div>`);
-        browserDetectionStub.restore();
-      });
-
       it('does not override aria-labelledby when provided by user', async () => {
         const browserDetectionStub = sinon.stub(browserDetection, 'isIE11').value(true);
         const el = /** @type {LionButton} */ (

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

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

package/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 [

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

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

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

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

package/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.

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

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

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

package/components/form-core/src/validate/LionValidationFeedback.js

@@ -48,6 +48,14 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
     ];
   }
 
+  constructor() {
+    super();
+    /**
+     * @type {FeedbackMessage[] | undefined}
+     */
+    this.feedbackData = undefined;
+  }
+
   /**
    * @overridable
    * @param {Object} opts
@@ -69,16 +77,6 @@ export class LionValidationFeedback extends LocalizeMixin(LitElement) {
     if (this.feedbackData && this.feedbackData[0]) {
       this.setAttribute('type', this.feedbackData[0].type);
       this.currentType = this.feedbackData[0].type;
-      window.clearTimeout(this.removeMessage);
-      // TODO: this logic should be in ValidateMixin, so that [show-feedback-for] is in sync,
-      // plus duration should be configurable
-      if (this.currentType === 'success') {
-        this.removeMessage = window.setTimeout(() => {
-          this.removeAttribute('type');
-          /** @type {FeedbackMessage[]} */
-          this.feedbackData = [];
-        }, 3000);
-      }
     } else if (this.currentType !== 'success') {
       this.removeAttribute('type');
     }

package/components/form-core/src/validate/ValidateMixin.js

@@ -590,7 +590,7 @@ export const ValidateMixinImplementation = superclass =>
         return [];
       }
 
-      // If empty, do not show the ResulValidation message (e.g. Correct!)
+      // If empty, do not show the ResultValidation message (e.g. Correct!)
       if (this._isEmpty(this.modelValue)) {
         this.__prevShownValidationResult = [];
         return [];
@@ -619,7 +619,7 @@ export const ValidateMixinImplementation = superclass =>
      * - on sync validation
      * - on async validation (can depend on server response)
      *
-     * This method inishes a pass by adding the properties to the instance:
+     * This method finishes a pass by adding the properties to the instance:
      * - validationStates
      * - hasFeedbackFor
      *
@@ -763,6 +763,7 @@ export const ValidateMixinImplementation = superclass =>
      * @property {string} type will be 'error' for messages from default Validators. Could be
      * 'warning', 'info' etc. for Validators with custom types. Needed as a directive for
      * feedbackNode how to render a message of a certain type
+     * @property {number} visibilityDuration duration in ms for how long the message should be shown
      * @property {Validator} [validator] when the message is directly coupled to a Validator
      * (in most cases), this property is filled. When a message is not coupled to a Validator
      * (in case of success feedback which is based on a diff or current and previous validation
@@ -788,7 +789,12 @@ export const ValidateMixinImplementation = superclass =>
             fieldName,
             outcome,
           });
-          return { message, type: validator.type, validator };
+          return {
+            message,
+            type: validator.type,
+            validator,
+            visibilityDuration: validator.config?.visibilityDuration || 3000,
+          };
         }),
       );
     }
@@ -809,6 +815,8 @@ export const ValidateMixinImplementation = superclass =>
      * @protected
      */
     _updateFeedbackComponent() {
+      window.clearTimeout(this.removeMessage);
+
       const { _feedbackNode } = this;
       if (!_feedbackNode) {
         return;
@@ -840,6 +848,18 @@ export const ValidateMixinImplementation = superclass =>
 
           const messageMap = await this.__getFeedbackMessages(this.__prioritizedResult);
           _feedbackNode.feedbackData = messageMap || [];
+
+          if (
+            messageMap?.[0] &&
+            messageMap[0].type === 'success' &&
+            messageMap[0].visibilityDuration !== Infinity
+          ) {
+            this.removeMessage = window.setTimeout(() => {
+              _feedbackNode.removeAttribute('type');
+              /** @type {FeedbackMessage[]} */
+              _feedbackNode.feedbackData = [];
+            }, messageMap[0].visibilityDuration);
+          }
         });
       } else {
         this.__feedbackQueue.add(async () => {

package/components/form-core/test/validate/lion-validation-feedback.test.js

@@ -33,28 +33,6 @@ describe('lion-validation-feedback', () => {
     expect(el.getAttribute('type')).to.equal('warning');
   });
 
-  it('success message clears after 3s', async () => {
-    const el = /** @type {LionValidationFeedback} */ (
-      await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)
-    );
-
-    const clock = sinon.useFakeTimers();
-
-    el.feedbackData = [{ message: 'hello', type: 'success', validator: new AlwaysValid() }];
-    await el.updateComplete;
-    expect(el.getAttribute('type')).to.equal('success');
-
-    clock.tick(2900);
-
-    expect(el.getAttribute('type')).to.equal('success');
-
-    clock.tick(200);
-
-    expect(el).to.not.have.attribute('type');
-
-    clock.restore();
-  });
-
   it('does not clear error messages', async () => {
     const el = /** @type {LionValidationFeedback} */ (
       await fixture(html`<lion-validation-feedback></lion-validation-feedback>`)

package/components/form-core/test-suites/ValidateMixinFeedbackPart.suite.js

@@ -349,6 +349,125 @@ export function runValidateMixinFeedbackPart() {
       expect(_feedbackNode.feedbackData?.[0].message).to.equal('Nachricht für MinLength');
     });
 
+    it('shows success message and clears after 3s', async () => {
+      class ValidateElementCustomTypes extends ValidateMixin(LitElement) {
+        static get validationTypes() {
+          return ['error', 'success'];
+        }
+      }
+      const clock = sinon.useFakeTimers();
+      const elTagString = defineCE(ValidateElementCustomTypes);
+      const elTag = unsafeStatic(elTagString);
+      const el = /** @type {ValidateElementCustomTypes} */ (
+        await fixture(html`
+        <${elTag}
+          .submitted=${true}
+          .validators=${[
+            new MinLength(3),
+            new DefaultSuccess(null, { getMessage: () => 'This is a success message' }),
+          ]}
+        >${lightDom}</${elTag}>
+      `)
+      );
+      const { _feedbackNode } = getFormControlMembers(el);
+
+      el.modelValue = 'a';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('Message for MinLength');
+
+      el.modelValue = 'abcd';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(2900);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(200);
+      expect(_feedbackNode.feedbackData).to.be.empty;
+    });
+
+    it('shows success message and clears after configured time', async () => {
+      class ValidateElementCustomTypes extends ValidateMixin(LitElement) {
+        static get validationTypes() {
+          return ['error', 'success'];
+        }
+      }
+      const clock = sinon.useFakeTimers();
+      const elTagString = defineCE(ValidateElementCustomTypes);
+      const elTag = unsafeStatic(elTagString);
+      const el = /** @type {ValidateElementCustomTypes} */ (
+        await fixture(html`
+        <${elTag}
+          .submitted=${true}
+          .validators=${[
+            new MinLength(3),
+            new DefaultSuccess(null, {
+              getMessage: () => 'This is a success message',
+              visibilityDuration: 6000,
+            }),
+          ]}
+        >${lightDom}</${elTag}>
+      `)
+      );
+      const { _feedbackNode } = getFormControlMembers(el);
+
+      el.modelValue = 'a';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('Message for MinLength');
+
+      el.modelValue = 'abcd';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(5900);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(200);
+      expect(_feedbackNode.feedbackData).to.be.empty;
+    });
+
+    it('shows success message and stays persistent', async () => {
+      class ValidateElementCustomTypes extends ValidateMixin(LitElement) {
+        static get validationTypes() {
+          return ['error', 'success'];
+        }
+      }
+      const clock = sinon.useFakeTimers();
+      const elTagString = defineCE(ValidateElementCustomTypes);
+      const elTag = unsafeStatic(elTagString);
+      const el = /** @type {ValidateElementCustomTypes} */ (
+        await fixture(html`
+        <${elTag}
+          .submitted=${true}
+          .validators=${[
+            new MinLength(3),
+            new DefaultSuccess(null, {
+              getMessage: () => 'This is a success message',
+              visibilityDuration: Infinity,
+            }),
+          ]}
+        >${lightDom}</${elTag}>
+      `)
+      );
+      const { _feedbackNode } = getFormControlMembers(el);
+
+      el.modelValue = 'a';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('Message for MinLength');
+
+      el.modelValue = 'abcd';
+      await el.updateComplete;
+      await el.feedbackComplete;
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(2900);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(200);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+      clock.tick(20000);
+      expect(_feedbackNode.feedbackData?.[0].message).to.equal('This is a success message');
+    });
+
     it('shows success message after fixing an error', async () => {
       class ValidateElementCustomTypes extends ValidateMixin(LitElement) {
         static get validationTypes() {

package/components/form-core/types/validate/validate.ts

@@ -31,6 +31,7 @@ export type ValidatorConfig = {
   type?: ValidationType;
   node?: FormControlHost;
   fieldName?: string | Promise<string>;
+  visibilityDuration?: number;
 };
 
 /**

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

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

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

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

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

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

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

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

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

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

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

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

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

package/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 [