@lion/ui 0.12.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} */
@@ -502,6 +507,10 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     if (this._selectionDisplayNode) {
       this._selectionDisplayNode.comboboxElement = this;
     }
+
+    if (this.disabled || this.readOnly) {
+      this.__setComboboxDisabledAndReadOnly();
+    }
   }
 
   /**
@@ -657,9 +666,11 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     const alwaysHideOn = ['Tab', 'Escape'];
     const notMultipleChoiceHideOn = ['Enter'];
     if (
-      lastKey &&
-      (alwaysHideOn.includes(lastKey) ||
-        (!this.multipleChoice && notMultipleChoiceHideOn.includes(lastKey)))
+      this.disabled ||
+      this.readOnly ||
+      (lastKey &&
+        (alwaysHideOn.includes(lastKey) ||
+          (!this.multipleChoice && notMultipleChoiceHideOn.includes(lastKey))))
     ) {
       return false;
     }
@@ -1174,9 +1185,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   // eslint-disable-next-line no-unused-vars
   _syncToTextboxCondition(modelValue, oldModelValue, { phase } = {}) {
-    return (
-      this.autocomplete === 'inline' || this.autocomplete === 'both' || phase === 'overlay-close'
-    );
+    return this.autocomplete === 'both' || this.autocomplete === 'inline' || !this.focused;
   }
 
   /**
@@ -1213,8 +1222,22 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
    */
   __setComboboxDisabledAndReadOnly() {
     if (this._comboboxNode) {
-      this._comboboxNode.setAttribute('disabled', `${this.disabled}`);
-      this._comboboxNode.setAttribute('readonly', `${this.readOnly}`);
+      // Since `._comboboxNode` can either be `<div "role=combobox">` or `<input>`,
+      // we need to cater for both scenarios (aria for semantics, "native attr" for operability)
+      this._comboboxNode.toggleAttribute('disabled', this.disabled);
+      this._comboboxNode.setAttribute('aria-disabled', `${this.disabled}`);
+      this._comboboxNode.toggleAttribute('readonly', this.readOnly);
+      this._comboboxNode.setAttribute('aria-readonly', `${this.readOnly}`);
+    }
+
+    if (this._inputNode) {
+      // N.B. in case ._inputNode === ._comboboxNode (we have <input role="combobox">)
+      // this value has already been set above. This is fine, as a toggle with boolean flag is idempotent.
+      this._inputNode.toggleAttribute('disabled', this.disabled);
+      this._inputNode.toggleAttribute('readOnly', this.readOnly);
+
+      this._inputNode.setAttribute('aria-readonly', `${this.readOnly}`);
+      this._inputNode.tabIndex = this.disabled ? -1 : 0;
     }
   }
 

package/components/combobox/test/lion-combobox.test.js

@@ -24,12 +24,12 @@ import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
  */
 
 /**
- * @param {{ autocomplete?:'none'|'list'|'both', matchMode?:'begin'|'all' }} config
+ * @param {{ autocomplete?:'none'|'list'|'both', matchMode?:'begin'|'all', disabled?: boolean, readonly?: boolean }} config
  */
-async function fruitFixture({ autocomplete, matchMode } = {}) {
+async function fruitFixture({ autocomplete, matchMode, disabled, readonly } = {}) {
   const el = /** @type {LionCombobox} */ (
     await fixture(html`
-      <lion-combobox name="foo">
+      <lion-combobox label="Search" name="foo">
         <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
         <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
         <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
@@ -43,6 +43,12 @@ async function fruitFixture({ autocomplete, matchMode } = {}) {
   if (matchMode) {
     el.matchMode = matchMode;
   }
+  if (disabled) {
+    el.disabled = disabled;
+  }
+  if (readonly) {
+    el.readOnly = readonly;
+  }
   await el.updateComplete;
   return [el, el.formElements];
 }
@@ -634,38 +640,39 @@ describe('lion-combobox', () => {
     });
 
     it('syncs textbox to modelValue', async () => {
-      const el = /** @type {LionCombobox} */ (
-        await fixture(html`
-          <lion-combobox name="foo" show-all-on-empty>
-            <lion-option .choiceValue="${'Aha'}" checked>Aha</lion-option>
-            <lion-option .choiceValue="${'Bhb'}">Bhb</lion-option>
-          </lion-combobox>
-        `)
-      );
-      const { _inputNode } = getComboboxMembers(el);
+      for (const autocompleteMode of ['none', 'list', 'inline', 'both']) {
+        const el = /** @type {LionCombobox} */ (
+          await fixture(html`
+            <lion-combobox name="foo" show-all-on-empty .autocomplete="${autocompleteMode}">
+              <lion-option .choiceValue="${'Aa'}" checked>Aa</lion-option>
+              <lion-option .choiceValue="${'Bb'}">Bb</lion-option>
+            </lion-combobox>
+          `)
+        );
+        const { _inputNode } = getComboboxMembers(el);
+
+        expect(_inputNode.value).to.equal('Aa', `autocompleteMode is ${autocompleteMode}`);
 
-      /** @param {string} autocompleteMode */
-      async function performChecks(autocompleteMode) {
         el.formElements[0].click();
         await el.updateComplete;
 
-        // FIXME: fix properly for Webkit
-        // expect(_inputNode.value).to.equal('Aha', `autocompleteMode is ${autocompleteMode}`);
+        expect(_inputNode.value).to.equal('Aa', `autocompleteMode is ${autocompleteMode}`);
         expect(el.checkedIndex).to.equal(0, `autocompleteMode is ${autocompleteMode}`);
 
-        await mimicUserTyping(el, 'Ah');
+        await mimicUserTyping(el, 'B');
         await el.updateComplete;
-        expect(_inputNode.value).to.equal('Ah', `autocompleteMode is ${autocompleteMode}`);
-
-        await el.updateComplete;
-        expect(el.checkedIndex).to.equal(-1, `autocompleteMode is ${autocompleteMode}`);
+        if (autocompleteMode === 'none' || autocompleteMode === 'list') {
+          expect(el.modelValue).to.deep.equal(
+            { type: 'unparseable', viewValue: 'B' },
+            `autocompleteMode is ${autocompleteMode}`,
+          );
+          await el.updateComplete;
+          expect(el.checkedIndex).to.equal(-1, `autocompleteMode is ${autocompleteMode}`);
+        } else {
+          expect(el.modelValue).to.equal('Bb', `autocompleteMode is ${autocompleteMode}`);
+          expect(el.checkedIndex).to.equal(1, `autocompleteMode is ${autocompleteMode}`);
+        }
       }
-
-      el.autocomplete = 'none';
-      await performChecks('none');
-
-      el.autocomplete = 'list';
-      await performChecks('list');
     });
 
     it('works with Required validator', async () => {
@@ -986,6 +993,27 @@ describe('lion-combobox', () => {
       expect(el.modelValue).to.eql(['Art']);
     });
 
+    it('allows prefilling the combobox', async () => {
+      const autocompleteValues = ['inline', 'none', 'both', 'list'];
+
+      for (const autocompleteValue of autocompleteValues) {
+        const el = /** @type {LionCombobox} */ (
+          await fixture(html`
+            <lion-combobox autocomplete="${autocompleteValue}" .modelValue="${'Chard'}" name="foo">
+              <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+              <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+              <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+              <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+            </lion-combobox>
+          `)
+        );
+
+        expect(el.modelValue).to.equal('Chard');
+        // @ts-expect-error
+        expect(el._inputNode.value).to.equal('Chard');
+      }
+    });
+
     it('submits form on [Enter] when listbox is closed', async () => {
       const submitSpy = sinon.spy(e => e.preventDefault());
       const el = /** @type {HTMLFormElement}  */ (
@@ -2312,8 +2340,7 @@ describe('lion-combobox', () => {
           </${tag}>
         `)
         );
-        // This ensures autocomplete would be off originally
-        el.autocomplete = 'list';
+
         await mimicUserTypingAdvanced(el, ['v', 'i']); // so we have options ['Victoria Plum']
         await el.updateComplete;
         expect(el.checkedIndex).to.equal(3);
@@ -2440,23 +2467,26 @@ describe('lion-combobox', () => {
       expect(_inputNode.value).to.equal('');
 
       el.setCheckedIndex(-1);
-      el.autocomplete = 'none';
-      el.setCheckedIndex(0);
-      expect(_inputNode.value).to.equal('');
+      el.autocomplete = 'list';
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
+      expect(_inputNode.value).to.equal('art');
 
       el.setCheckedIndex(-1);
-      el.autocomplete = 'list';
-      el.setCheckedIndex(0);
-      expect(_inputNode.value).to.equal('');
+      el.value = '';
+      el.autocomplete = 'none';
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
+      expect(_inputNode.value).to.equal('art');
 
       el.setCheckedIndex(-1);
+      el.value = '';
       el.autocomplete = 'inline';
-      el.setCheckedIndex(0);
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
 
       el.setCheckedIndex(-1);
+      el.value = '';
       el.autocomplete = 'both';
-      el.setCheckedIndex(0);
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
     });
 
@@ -2476,30 +2506,28 @@ describe('lion-combobox', () => {
       expect(_inputNode.value).to.eql('');
 
       el.setCheckedIndex(-1);
-      el.autocomplete = 'none';
-      el.setCheckedIndex([0]);
-      el.setCheckedIndex([1]);
-      expect(_inputNode.value).to.equal('');
-
       el.setCheckedIndex(-1);
       el.autocomplete = 'list';
-      el.setCheckedIndex([0]);
-      el.setCheckedIndex([1]);
-      expect(_inputNode.value).to.equal('');
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
+      expect(_inputNode.value).to.equal('art');
+
+      el.setCheckedIndex(-1);
+      el.value = '';
+      el.autocomplete = 'none';
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
+      expect(_inputNode.value).to.equal('art');
 
       el.setCheckedIndex(-1);
+      el.value = '';
       el.autocomplete = 'inline';
-      el.setCheckedIndex([0]);
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
-      el.setCheckedIndex([1]);
-      expect(_inputNode.value).to.equal('Chard');
 
       el.setCheckedIndex(-1);
+      el.value = '';
       el.autocomplete = 'both';
-      el.setCheckedIndex([0]);
+      await mimicUserTypingAdvanced(el, ['a', 'r', 't']);
       expect(_inputNode.value).to.equal('Artichoke');
-      el.setCheckedIndex([1]);
-      expect(_inputNode.value).to.equal('Chard');
     });
 
     describe('Subclassers', () => {
@@ -2748,12 +2776,6 @@ describe('lion-combobox', () => {
           async function performChecks(autocompleteMode) {
             await el.updateComplete;
 
-            el.formElements[0].click();
-
-            // FIXME: fix properly for Webkit
-            // expect(_inputNode.value).to.equal('Aha', autocompleteMode);
-            expect(el.checkedIndex).to.equal(0, autocompleteMode);
-
             await mimicUserTypingAdvanced(el, ['A', 'r', 't', 'i']);
             await el.updateComplete;
             expect(_inputNode.value).to.equal('Arti', `autocompleteMode is ${autocompleteMode}`);
@@ -3431,4 +3453,131 @@ describe('lion-combobox', () => {
       });
     });
   });
+
+  describe('Disabled state', () => {
+    it('does not open overlay or allow input when disabled', async () => {
+      const [el] = await fruitFixture({ disabled: true });
+      expect(el.disabled).to.equal(true);
+
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+
+      expect(el.disabled).to.be.true;
+      expect(_inputNode.disabled).to.be.true;
+
+      // Try to open overlay by clicking input
+      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      await el.updateComplete;
+      expect(el.opened).to.be.false;
+    });
+
+    it('does open overlay or allow input when disabled state is removed after it was previously disabled', async () => {
+      const [el] = await fruitFixture({ disabled: true });
+      expect(el.disabled).to.equal(true);
+
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+
+      expect(el.disabled).to.be.true;
+      expect(_inputNode.disabled).to.be.true;
+
+      // Try to open overlay by clicking input
+      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      await el.updateComplete;
+      expect(el.opened).to.be.false;
+
+      el.disabled = false;
+      await el.updateComplete;
+
+      expect(el.disabled).to.be.false;
+      expect(_inputNode.disabled).to.be.false;
+
+      // Try to open overlay by clicking input
+      async function open() {
+        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+        return el.updateComplete;
+      }
+
+      await open();
+      expect(el.opened).to.be.true;
+    });
+
+    it('sets aria-disabled and disables focus when combobox is disabled', async () => {
+      const [el] = await fruitFixture({ disabled: true });
+      const { _comboboxNode, _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+
+      // input should not be focusable
+      expect(_comboboxNode.tabIndex).to.equal(-1);
+      expect(_inputNode.tabIndex).to.equal(-1);
+
+      // aria-disabled should be set
+      expect(el.getAttribute('aria-disabled')).to.equal('true');
+
+      // aria-disabled should be set
+      expect(_inputNode.getAttribute('aria-disabled')).to.equal('true');
+
+      await expect(el).to.be.accessible();
+    });
+
+    it('ensure focus when combobox is readonly', async () => {
+      const [el] = await fruitFixture({ readonly: true });
+      const { _comboboxNode, _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+
+      // input should be focusable
+      expect(_inputNode.tabIndex).to.equal(0);
+
+      // aria-disabled should be set
+      expect(_comboboxNode.getAttribute('aria-readonly')).to.equal('true');
+
+      // aria-disabled should be set
+      expect(_inputNode.getAttribute('aria-readonly')).to.equal('true');
+
+      await expect(el).to.be.accessible();
+    });
+  });
+
+  describe('Readonly state', () => {
+    it('does not open overlay or allow input when readonly', async () => {
+      const [el] = await fruitFixture({ readonly: true });
+
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+      expect(el.readOnly).to.equal(true);
+
+      expect(el.readOnly).to.be.true;
+      expect(_inputNode.readOnly).to.be.true;
+
+      // Try to open overlay by clicking input
+      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      await el.updateComplete;
+      expect(el.opened).to.be.false;
+    });
+
+    it('does open overlay or allow input when readonly state is removed after it was previously set', async () => {
+      const [el] = await fruitFixture({ readonly: true });
+      expect(el.readOnly).to.equal(true);
+
+      const { _inputNode } = getComboboxMembers(/** @type {LionCombobox} */ (el));
+
+      expect(el.readOnly).to.be.true;
+      expect(_inputNode.readOnly).to.be.true;
+
+      // Try to open overlay by clicking input
+      _inputNode.dispatchEvent(new Event('click', { bubbles: true, composed: true }));
+      await el.updateComplete;
+      expect(el.opened).to.be.false;
+
+      el.readOnly = false;
+      await el.updateComplete;
+
+      expect(el.readOnly).to.be.false;
+      expect(_inputNode.readOnly).to.be.false;
+
+      // Try to open overlay by clicking input
+      async function open() {
+        await mimicUserTyping(/** @type {LionCombobox} */ (el), 'ch');
+        return el.updateComplete;
+      }
+
+      await open();
+      expect(el.opened).to.be.true;
+    });
+  });
 });

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/FocusMixin.js

@@ -198,6 +198,7 @@ const FocusMixinImplementation = superclass =>
      * @private
      */
     __teardownEventsForFocusMixin() {
+      if (!this._focusableNode) return;
       this._focusableNode?.removeEventListener(
         'focus',
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocus),