@vaadin/accordion 24.3.2 → 24.4.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/accordion",
-  "version": "24.3.2",
+  "version": "24.4.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -24,6 +24,8 @@
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
+    "!vaadin-lit-*.d.ts",
+    "!vaadin-lit-*.js",
     "web-types.json",
     "web-types.lit.json"
   ],
@@ -35,13 +37,14 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.3.2",
-    "@vaadin/component-base": "~24.3.2",
-    "@vaadin/details": "~24.3.2",
-    "@vaadin/vaadin-lumo-styles": "~24.3.2",
-    "@vaadin/vaadin-material-styles": "~24.3.2",
-    "@vaadin/vaadin-themable-mixin": "~24.3.2",
+    "@vaadin/a11y-base": "24.4.0-alpha2",
+    "@vaadin/component-base": "24.4.0-alpha2",
+    "@vaadin/details": "24.4.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.4.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
@@ -53,5 +56,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "615ee9dd4611f52db90445b0db13dcbb91ca74d4"
+  "gitHead": "f303ead58d27e15d81a55db0559611fb77c0e421"
 }

package/src/vaadin-accordion-heading-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { CSSResult } from 'lit';

package/src/vaadin-accordion-heading-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';

package/src/vaadin-accordion-heading.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';

package/src/vaadin-accordion-heading.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';

package/src/vaadin-accordion-mixin.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { KeyboardDirectionMixinClass } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+
+/**
+ * A mixin providing common accordion functionality.
+ */
+export declare function AccordionMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<AccordionMixinClass> & Constructor<KeyboardDirectionMixinClass> & T;
+
+export declare class AccordionMixinClass {
+  /**
+   * The index of currently opened panel. First panel is opened by
+   * default. Only one panel can be opened at the same time.
+   * Setting null or undefined closes all the accordion panels.
+   */
+  opened: number | null;
+
+  /**
+   * The list of `<vaadin-accordion-panel>` child elements.
+   * It is populated from the elements passed to the light DOM,
+   * and updated dynamically when adding or removing panels.
+   */
+  readonly items: HTMLElement[];
+}

package/src/vaadin-accordion-mixin.js

@@ -0,0 +1,155 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
+import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
+
+/**
+ * A mixin providing common accordion functionality.
+ *
+ * @polymerMixin
+ * @mixes KeyboardDirectionMixin
+ */
+export const AccordionMixin = (superClass) =>
+  class AccordionMixinClass extends KeyboardDirectionMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * The index of currently opened panel. First panel is opened by
+         * default. Only one panel can be opened at the same time.
+         * Setting null or undefined closes all the accordion panels.
+         * @type {number}
+         */
+        opened: {
+          type: Number,
+          value: 0,
+          notify: true,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * The list of `<vaadin-accordion-panel>` child elements.
+         * It is populated from the elements passed to the light DOM,
+         * and updated dynamically when adding or removing panels.
+         * @type {!Array<!AccordionPanel>}
+         */
+        items: {
+          type: Array,
+          readOnly: true,
+          notify: true,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['_updateItems(items, opened)'];
+    }
+
+    constructor() {
+      super();
+      this._boundUpdateOpened = this._updateOpened.bind(this);
+    }
+
+    /**
+     * Override getter from `KeyboardDirectionMixin`
+     * to check if the heading element has focus.
+     *
+     * @return {Element | null}
+     * @protected
+     * @override
+     */
+    get focused() {
+      return (this._getItems() || []).find((item) => isElementFocused(item.focusElement));
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    focus() {
+      if (this._observer) {
+        this._observer.flush();
+      }
+      super.focus();
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      const slot = this.shadowRoot.querySelector('slot');
+      this._observer = new SlotObserver(slot, (info) => {
+        this._setItems(this._filterItems(Array.from(this.children)));
+
+        this._filterItems(info.addedNodes).forEach((el) => {
+          el.addEventListener('opened-changed', this._boundUpdateOpened);
+        });
+      });
+    }
+
+    /**
+     * Override method inherited from `KeyboardDirectionMixin`
+     * to use the stored list of accordion panels as items.
+     *
+     * @return {Element[]}
+     * @protected
+     * @override
+     */
+    _getItems() {
+      return this.items;
+    }
+
+    /**
+     * @param {!Array<!Element>} array
+     * @return {!Array<!AccordionPanel>}
+     * @protected
+     */
+    _filterItems(array) {
+      return array.filter((el) => el instanceof customElements.get('vaadin-accordion-panel'));
+    }
+
+    /** @private */
+    _updateItems(items, opened) {
+      if (items) {
+        const itemToOpen = items[opened];
+        items.forEach((item) => {
+          item.opened = item === itemToOpen;
+        });
+      }
+    }
+
+    /**
+     * Override an event listener from `KeyboardMixin`
+     * to only handle details toggle buttons events.
+     *
+     * @param {!KeyboardEvent} event
+     * @protected
+     * @override
+     */
+    _onKeyDown(event) {
+      // Only check keyboard events on details toggle buttons
+      if (!this.items.some((item) => item.focusElement === event.target)) {
+        return;
+      }
+
+      super._onKeyDown(event);
+    }
+
+    /** @private */
+    _updateOpened(e) {
+      const target = this._filterItems(e.composedPath())[0];
+      const idx = this.items.indexOf(target);
+      if (e.detail.value) {
+        if (target.disabled || idx === -1) {
+          return;
+        }
+
+        this.opened = idx;
+      } else if (!this.items.some((item) => item.opened)) {
+        this.opened = null;
+      }
+    }
+  };

package/src/vaadin-accordion-panel-mixin.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { DelegateFocusMixinClass } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { TabindexMixinClass } from '@vaadin/a11y-base/src/tabindex-mixin.js';
+import type { DelegateStateMixinClass } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import type { CollapsibleMixinClass } from '@vaadin/details/src/collapsible-mixin.js';
+
+/**
+ * A mixin providing common accordion panel functionality.
+ */
+export declare function AccordionPanelMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<AccordionPanelMixinClass> &
+  Constructor<CollapsibleMixinClass> &
+  Constructor<DelegateFocusMixinClass> &
+  Constructor<DelegateStateMixinClass> &
+  Constructor<DisabledMixinClass> &
+  Constructor<FocusMixinClass> &
+  Constructor<TabindexMixinClass> &
+  T;
+
+export declare class AccordionPanelMixinClass {
+  /**
+   * A text that is displayed in the heading, if no
+   * element is assigned to the `summary` slot.
+   */
+  summary: string | null | undefined;
+}

package/src/vaadin-accordion-panel-mixin.js

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
+import { CollapsibleMixin } from '@vaadin/details/src/collapsible-mixin.js';
+import { SummaryController } from '@vaadin/details/src/summary-controller.js';
+
+/**
+ * A mixin providing common accordion panel functionality.
+ *
+ * @polymerMixin
+ * @mixes CollapsibleMixin
+ * @mixes DelegateFocusMixin
+ * @mixes DelegateStateMixin
+ */
+export const AccordionPanelMixin = (superClass) =>
+  class AccordionPanelMixinClass extends CollapsibleMixin(DelegateFocusMixin(DelegateStateMixin(superClass))) {
+    static get properties() {
+      return {
+        /**
+         * A text that is displayed in the heading, if no
+         * element is assigned to the `summary` slot.
+         */
+        summary: {
+          type: String,
+          observer: '_summaryChanged',
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__updateAriaAttributes(focusElement, _contentElements)'];
+    }
+
+    static get delegateAttrs() {
+      return ['theme'];
+    }
+
+    static get delegateProps() {
+      return ['disabled', 'opened'];
+    }
+
+    constructor() {
+      super();
+
+      this._summaryController = new SummaryController(this, 'vaadin-accordion-heading');
+      this._summaryController.addEventListener('slot-content-changed', (event) => {
+        const { node } = event.target;
+
+        this._setFocusElement(node);
+        this.stateTarget = node;
+
+        this._tooltipController.setTarget(node);
+      });
+
+      this._tooltipController = new TooltipController(this);
+      this._tooltipController.setPosition('bottom-start');
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.addController(this._summaryController);
+      this.addController(this._tooltipController);
+    }
+
+    /**
+     * Override method inherited from `DisabledMixin`
+     * to not set `aria-disabled` on the host element.
+     *
+     * @protected
+     * @override
+     */
+    _setAriaDisabled() {
+      // The `aria-disabled` is set on the details summary.
+    }
+
+    /** @private */
+    _summaryChanged(summary) {
+      this._summaryController.setSummary(summary);
+    }
+
+    /** @private */
+    __updateAriaAttributes(focusElement, contentElements) {
+      if (focusElement && contentElements) {
+        const node = contentElements[0];
+
+        if (node) {
+          node.setAttribute('role', 'region');
+          node.setAttribute('aria-labelledby', focusElement.id);
+        }
+
+        if (node && node.id) {
+          focusElement.setAttribute('aria-controls', node.id);
+        } else {
+          focusElement.removeAttribute('aria-controls');
+        }
+      }
+    }
+  };

package/src/vaadin-accordion-panel-styles.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { CSSResult } from 'lit';

package/src/vaadin-accordion-panel-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { css } from 'lit';

package/src/vaadin-accordion-panel.d.ts

@@ -1,12 +1,10 @@
 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
-import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
-import { CollapsibleMixin } from '@vaadin/details/src/collapsible-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
 
 /**
  * Fired when the `opened` property changes.
@@ -43,15 +41,7 @@ export type AccordionPanelEventMap = AccordionPanelCustomEventMap & HTMLElementE
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class AccordionPanel extends CollapsibleMixin(
-  DelegateFocusMixin(DelegateStateMixin(ThemableMixin(HTMLElement))),
-) {
-  /**
-   * A text that is displayed in the heading, if no
-   * element is assigned to the `summary` slot.
-   */
-  summary: string | null | undefined;
-
+declare class AccordionPanel extends AccordionPanelMixin(ThemableMixin(HTMLElement)) {
   addEventListener<K extends keyof AccordionPanelEventMap>(
     type: K,
     listener: (this: AccordionPanel, ev: AccordionPanelEventMap[K]) => void,

package/src/vaadin-accordion-panel.js

@@ -1,18 +1,14 @@
 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-accordion-heading.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
-import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
-import { CollapsibleMixin } from '@vaadin/details/src/collapsible-mixin.js';
-import { SummaryController } from '@vaadin/details/src/summary-controller.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
 import { accordionPanel } from './vaadin-accordion-panel-styles.js';
 
 registerStyles('vaadin-accordion-panel', accordionPanel, { moduleId: 'vaadin-accordion-panel-styles' });
@@ -43,15 +39,11 @@ registerStyles('vaadin-accordion-panel', accordionPanel, { moduleId: 'vaadin-acc
  *
  * @customElement
  * @extends HTMLElement
- * @mixes CollapsibleMixin
+ * @mixes AccordionPanelMixin
  * @mixes ControllerMixin
- * @mixes DelegateFocusMixin
- * @mixes DelegateStateMixin
  * @mixes ThemableMixin
  */
-class AccordionPanel extends CollapsibleMixin(
-  DelegateFocusMixin(DelegateStateMixin(ThemableMixin(ControllerMixin(PolymerElement)))),
-) {
+class AccordionPanel extends AccordionPanelMixin(ThemableMixin(ControllerMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-accordion-panel';
   }
@@ -67,90 +59,6 @@ class AccordionPanel extends CollapsibleMixin(
       <slot name="tooltip"></slot>
     `;
   }
-
-  static get properties() {
-    return {
-      /**
-       * A text that is displayed in the heading, if no
-       * element is assigned to the `summary` slot.
-       */
-      summary: {
-        type: String,
-        observer: '_summaryChanged',
-      },
-    };
-  }
-
-  static get observers() {
-    return ['__updateAriaAttributes(focusElement, _contentElements)'];
-  }
-
-  static get delegateAttrs() {
-    return ['theme'];
-  }
-
-  static get delegateProps() {
-    return ['disabled', 'opened'];
-  }
-
-  constructor() {
-    super();
-
-    this._summaryController = new SummaryController(this, 'vaadin-accordion-heading');
-    this._summaryController.addEventListener('slot-content-changed', (event) => {
-      const { node } = event.target;
-
-      this._setFocusElement(node);
-      this.stateTarget = node;
-
-      this._tooltipController.setTarget(node);
-    });
-
-    this._tooltipController = new TooltipController(this);
-    this._tooltipController.setPosition('bottom-start');
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this.addController(this._summaryController);
-    this.addController(this._tooltipController);
-  }
-
-  /**
-   * Override method inherited from `DisabledMixin`
-   * to not set `aria-disabled` on the host element.
-   *
-   * @protected
-   * @override
-   */
-  _setAriaDisabled() {
-    // The `aria-disabled` is set on the details summary.
-  }
-
-  /** @private */
-  _summaryChanged(summary) {
-    this._summaryController.setSummary(summary);
-  }
-
-  /** @private */
-  __updateAriaAttributes(focusElement, contentElements) {
-    if (focusElement && contentElements) {
-      const node = contentElements[0];
-
-      if (node) {
-        node.setAttribute('role', 'region');
-        node.setAttribute('aria-labelledby', focusElement.id);
-      }
-
-      if (node && node.id) {
-        focusElement.setAttribute('aria-controls', node.id);
-      } else {
-        focusElement.removeAttribute('aria-controls');
-      }
-    }
-  }
 }
 
 defineCustomElement(AccordionPanel);

package/src/vaadin-accordion.d.ts

@@ -1,11 +1,11 @@
 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { AccordionMixin } from './vaadin-accordion-mixin.js';
 import type { AccordionPanel } from './vaadin-accordion-panel.js';
 
 /**
@@ -70,21 +70,7 @@ export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class Accordion extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(HTMLElement))) {
-  /**
-   * The index of currently opened panel. First panel is opened by
-   * default. Only one panel can be opened at the same time.
-   * Setting null or undefined closes all the accordion panels.
-   */
-  opened: number | null;
-
-  /**
-   * The list of `<vaadin-accordion-panel>` child elements.
-   * It is populated from the elements passed to the light DOM,
-   * and updated dynamically when adding or removing panels.
-   */
-  readonly items: AccordionPanel[];
-
+declare class Accordion extends AccordionMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof AccordionEventMap>(
     type: K,
     listener: (this: Accordion, ev: AccordionEventMap[K]) => void,

package/src/vaadin-accordion.js

@@ -1,16 +1,14 @@
 /**
  * @license
- * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-accordion-panel.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { isElementFocused } from '@vaadin/a11y-base/src/focus-utils.js';
-import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { AccordionPanel } from './vaadin-accordion-panel.js';
+import { AccordionMixin } from './vaadin-accordion-mixin.js';
 
 /**
  * `<vaadin-accordion>` is a Web Component implementing accordion widget:
@@ -58,11 +56,11 @@ import { AccordionPanel } from './vaadin-accordion-panel.js';
  *
  * @customElement
  * @extends HTMLElement
+ * @mixes AccordionMixin
  * @mixes ElementMixin
- * @mixes KeyboardDirectionMixin
  * @mixes ThemableMixin
  */
-class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(PolymerElement))) {
+class Accordion extends AccordionMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -81,144 +79,6 @@ class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(Polyme
   static get is() {
     return 'vaadin-accordion';
   }
-
-  static get properties() {
-    return {
-      /**
-       * The index of currently opened panel. First panel is opened by
-       * default. Only one panel can be opened at the same time.
-       * Setting null or undefined closes all the accordion panels.
-       * @type {number}
-       */
-      opened: {
-        type: Number,
-        value: 0,
-        notify: true,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * The list of `<vaadin-accordion-panel>` child elements.
-       * It is populated from the elements passed to the light DOM,
-       * and updated dynamically when adding or removing panels.
-       * @type {!Array<!AccordionPanel>}
-       */
-      items: {
-        type: Array,
-        readOnly: true,
-        notify: true,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['_updateItems(items, opened)'];
-  }
-
-  constructor() {
-    super();
-    this._boundUpdateOpened = this._updateOpened.bind(this);
-  }
-
-  /**
-   * Override getter from `KeyboardDirectionMixin`
-   * to check if the heading element has focus.
-   *
-   * @return {Element | null}
-   * @protected
-   * @override
-   */
-  get focused() {
-    return (this._getItems() || []).find((item) => isElementFocused(item.focusElement));
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  focus() {
-    if (this._observer) {
-      this._observer.flush();
-    }
-    super.focus();
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    const slot = this.shadowRoot.querySelector('slot');
-    this._observer = new SlotObserver(slot, (info) => {
-      this._setItems(this._filterItems(Array.from(this.children)));
-
-      this._filterItems(info.addedNodes).forEach((el) => {
-        el.addEventListener('opened-changed', this._boundUpdateOpened);
-      });
-    });
-  }
-
-  /**
-   * Override method inherited from `KeyboardDirectionMixin`
-   * to use the stored list of accordion panels as items.
-   *
-   * @return {Element[]}
-   * @protected
-   * @override
-   */
-  _getItems() {
-    return this.items;
-  }
-
-  /**
-   * @param {!Array<!Element>} array
-   * @return {!Array<!AccordionPanel>}
-   * @protected
-   */
-  _filterItems(array) {
-    return array.filter((el) => el instanceof AccordionPanel);
-  }
-
-  /** @private */
-  _updateItems(items, opened) {
-    if (items) {
-      const itemToOpen = items[opened];
-      items.forEach((item) => {
-        item.opened = item === itemToOpen;
-      });
-    }
-  }
-
-  /**
-   * Override an event listener from `KeyboardMixin`
-   * to only handle details toggle buttons events.
-   *
-   * @param {!KeyboardEvent} event
-   * @protected
-   * @override
-   */
-  _onKeyDown(event) {
-    // Only check keyboard events on details toggle buttons
-    if (!this.items.some((item) => item.focusElement === event.target)) {
-      return;
-    }
-
-    super._onKeyDown(event);
-  }
-
-  /** @private */
-  _updateOpened(e) {
-    const target = this._filterItems(e.composedPath())[0];
-    const idx = this.items.indexOf(target);
-    if (e.detail.value) {
-      if (target.disabled || idx === -1) {
-        return;
-      }
-
-      this.opened = idx;
-    } else if (!this.items.some((item) => item.opened)) {
-      this.opened = null;
-    }
-  }
 }
 
 defineCustomElement(Accordion);

package/src/vaadin-lit-accordion-heading.d.ts

@@ -0,0 +1 @@
+export * from './vaadin-accordion-heading.js';

package/src/vaadin-lit-accordion-heading.js

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { accordionHeading } from './vaadin-accordion-heading-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-accordion-heading>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-accordion-heading';
+  }
+
+  static get shadowRootOptions() {
+    return { ...LitElement.shadowRootOptions, delegatesFocus: true };
+  }
+
+  static get styles() {
+    return accordionHeading;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * When true, the element is opened.
+       */
+      opened: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <button id="button" part="content" ?disabled="${this.disabled}" aria-expanded="${this.opened ? 'true' : 'false'}">
+        <span part="toggle" aria-hidden="true"></span>
+        <slot></slot>
+      </button>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // By default, if the user hasn't provided a custom role,
+    // the role attribute is set to "heading".
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'heading');
+    }
+  }
+}
+
+defineCustomElement(AccordionHeading);
+
+export { AccordionHeading };

package/src/vaadin-lit-accordion-panel.d.ts

@@ -0,0 +1 @@
+export * from './vaadin-accordion-panel.js';

package/src/vaadin-lit-accordion-panel.js

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-accordion-heading.js';
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
+import { accordionPanel } from './vaadin-accordion-panel-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-accordion-panel>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class AccordionPanel extends AccordionPanelMixin(ThemableMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-accordion-panel';
+  }
+
+  static get styles() {
+    return accordionPanel;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <slot name="summary"></slot>
+
+      <div part="content">
+        <slot></slot>
+      </div>
+
+      <slot name="tooltip"></slot>
+    `;
+  }
+}
+
+defineCustomElement(AccordionPanel);
+
+export { AccordionPanel };

package/src/vaadin-lit-accordion.d.ts

@@ -0,0 +1 @@
+export * from './vaadin-accordion.js';

package/src/vaadin-lit-accordion.js

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-accordion-panel.js';
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { AccordionMixin } from './vaadin-accordion-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-accordion>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class Accordion extends AccordionMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-accordion';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+defineCustomElement(Accordion);
+
+export { Accordion };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "24.3.2",
+  "version": "24.4.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -10,6 +10,17 @@
           "name": "vaadin-accordion-heading",
           "description": "The accordion heading element.\n\n`vaadin-accordion-heading` is the element for the headings in the accordion.\nAs recommended by the WAI ARIA Best Practices, each heading needs to wrap a\n`<button>`. This element puts that button in the Shadow DOM, as it is more\nconvenient to use and doesn't make styling of the heading more problematic.\n\nThe WAI ARIA Best Practices also recommend setting `aria-level` depending\non what level the headings are. It is hard to determine the level of a heading\nalgorithmically, and setting it is not strictly required to have an accessible\naccordion. To keep things easier to use, this element does not set `aria-level`\nattribute but leaves that to the developer creating an accordion.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name  | Description\n-----------|-------------------\n`toggle`   | The icon element\n`content`  | The content wrapper\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------| -----------\n`active`     | Set when the element is pressed down, either with mouse, touch or the keyboard.\n`opened`     | Set when the collapsible content is expanded and visible.\n`disabled`   | Set when the element is disabled.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "opened",
               "description": "When true, the element is opened.",
@@ -35,6 +46,17 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "opened",
                 "description": "When true, the element is opened.",
@@ -163,7 +185,7 @@
         },
         {
           "name": "vaadin-accordion",
-          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.3.2/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha2/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "opened",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "24.3.2",
+  "version": "24.4.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -19,6 +19,13 @@
           "description": "The accordion heading element.\n\n`vaadin-accordion-heading` is the element for the headings in the accordion.\nAs recommended by the WAI ARIA Best Practices, each heading needs to wrap a\n`<button>`. This element puts that button in the Shadow DOM, as it is more\nconvenient to use and doesn't make styling of the heading more problematic.\n\nThe WAI ARIA Best Practices also recommend setting `aria-level` depending\non what level the headings are. It is hard to determine the level of a heading\nalgorithmically, and setting it is not strictly required to have an accessible\naccordion. To keep things easier to use, this element does not set `aria-level`\nattribute but leaves that to the developer creating an accordion.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name  | Description\n-----------|-------------------\n`toggle`   | The icon element\n`content`  | The content wrapper\n\nThe following state attributes are available for styling:\n\nAttribute    | Description\n-------------| -----------\n`active`     | Set when the element is pressed down, either with mouse, touch or the keyboard.\n`opened`     | Set when the collapsible content is expanded and visible.\n`disabled`   | Set when the element is disabled.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?opened",
               "description": "When true, the element is opened.",
@@ -72,7 +79,7 @@
         },
         {
           "name": "vaadin-accordion",
-          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.3.2/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha2/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {