@vaadin/accordion 23.3.3 → 24.0.0-alpha10

package/README.md

@@ -10,11 +10,11 @@ A web component for displaying a vertically stacked set of expandable panels.
 ```html
 <vaadin-accordion>
   <vaadin-accordion-panel theme="filled">
-    <div slot="summary">Accordion Panel 1</div>
+    <vaadin-accordion-heading slot="summary">Accordion Panel 1</vaadin-accordion-heading>
     <div>Accordion is a set of expandable sections.</div>
   </vaadin-accordion-panel>
   <vaadin-accordion-panel theme="filled">
-    <div slot="summary">Accordion Panel 2</div>
+    <vaadin-accordion-heading slot="summary">Accordion Panel 2</vaadin-accordion-heading>
     <div>Only one accordion panel can be opened.</div>
   </vaadin-accordion-panel>
 </vaadin-accordion>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/accordion",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -36,11 +36,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "~23.3.3",
-    "@vaadin/details": "~23.3.3",
-    "@vaadin/vaadin-lumo-styles": "~23.3.3",
-    "@vaadin/vaadin-material-styles": "~23.3.3",
-    "@vaadin/vaadin-themable-mixin": "~23.3.3"
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/details": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1529ed623e053d28a3c1c66af55ebe402743ddd0"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * The accordion heading element.
+ *
+ * `vaadin-accordion-heading` is the element for the headings in the accordion.
+ * As recommended by the WAI ARIA Best Practices, each heading needs to wrap a
+ * `<button>`. This element puts that button in the Shadow DOM, as it is more
+ * convenient to use and doesn’t make styling of the heading more problematic.
+ *
+ * The WAI ARIA Best Practices also recommend setting `aria-level` depending
+ * on what level the headings are. It is hard to determine the level of a heading
+ * algorithmically, and setting it is not strictly required to have an accessible
+ * accordion. To keep things easier to use, this element does not set `aria-level`
+ * attribute but leaves that to the developer creating an accordion.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are exposed for styling:
+ *
+ * Part name  | Description
+ * -----------|-------------------
+ * `toggle`   | The icon element
+ * `content`  | The content wrapper
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------| -----------
+ * `active`     | Set when the element is pressed down, either with mouse, touch or the keyboard.
+ * `opened`     | Set when the collapsible content is expanded and visible.
+ * `disabled`   | Set when the element is disabled.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ *
+ * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ */
+declare class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(HTMLElement))) {
+  /**
+   * When true, the element is opened.
+   */
+  opened: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-accordion-heading': AccordionHeading;
+  }
+}
+
+export { AccordionHeading };

package/src/vaadin-accordion-heading.js

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 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';
+import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * The accordion heading element.
+ *
+ * `vaadin-accordion-heading` is the element for the headings in the accordion.
+ * As recommended by the WAI ARIA Best Practices, each heading needs to wrap a
+ * `<button>`. This element puts that button in the Shadow DOM, as it is more
+ * convenient to use and doesn’t make styling of the heading more problematic.
+ *
+ * The WAI ARIA Best Practices also recommend setting `aria-level` depending
+ * on what level the headings are. It is hard to determine the level of a heading
+ * algorithmically, and setting it is not strictly required to have an accessible
+ * accordion. To keep things easier to use, this element does not set `aria-level`
+ * attribute but leaves that to the developer creating an accordion.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are exposed for styling:
+ *
+ * Part name  | Description
+ * -----------|-------------------
+ * `toggle`   | The icon element
+ * `content`  | The content wrapper
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute    | Description
+ * -------------| -----------
+ * `active`     | Set when the element is pressed down, either with mouse, touch or the keyboard.
+ * `opened`     | Set when the collapsible content is expanded and visible.
+ * `disabled`   | Set when the element is disabled.
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ *
+ * @extends HTMLElement
+ * @mixes ActiveMixin
+ * @mixes DirMixin
+ * @mixes ThemableMixin
+ */
+class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolymerElement))) {
+  static get is() {
+    return 'vaadin-accordion-heading';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          outline: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          user-select: none;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        button {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          margin: 0;
+          padding: 0;
+          background-color: initial;
+          color: inherit;
+          border: initial;
+          outline: none;
+          font: inherit;
+          text-align: inherit;
+        }
+      </style>
+      <button id="button" part="content" disabled$="[[disabled]]" aria-expanded$="[[__updateAriaExpanded(opened)]]">
+        <span part="toggle" aria-hidden="true"></span>
+        <slot></slot>
+      </button>
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * When true, the element is opened.
+       */
+      opened: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  /**
+   * @param {DocumentFragment} dom
+   * @return {null}
+   * @protected
+   * @override
+   */
+  _attachDom(dom) {
+    const root = this.attachShadow({ mode: 'open', delegatesFocus: true });
+    root.appendChild(dom);
+    return root;
+  }
+
+  /** @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');
+    }
+  }
+
+  /** @private */
+  __updateAriaExpanded(opened) {
+    return opened ? 'true' : 'false';
+  }
+}
+
+customElements.define(AccordionHeading.is, AccordionHeading);
+
+export { AccordionHeading };

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

@@ -1,9 +1,12 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Details } from '@vaadin/details/src/vaadin-details.js';
+import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
+import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import { DetailsMixin } from '@vaadin/details/src/vaadin-details-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * Fired when the `opened` property changes.
@@ -25,9 +28,6 @@ export type AccordionPanelEventMap = AccordionPanelCustomEventMap & HTMLElementE
  *
  * Part name        | Description
  * -----------------|----------------
- * `summary`        | The element used to open and close collapsible content.
- * `toggle`         | The element used as indicator, can represent an icon.
- * `summary-content`| The wrapper for the slotted summary content.
  * `content`        | The wrapper for the collapsible panel content.
  *
  * The following attributes are exposed for styling:
@@ -43,7 +43,13 @@ export type AccordionPanelEventMap = AccordionPanelCustomEventMap & HTMLElementE
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class AccordionPanel extends Details {
+declare class AccordionPanel extends DetailsMixin(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;
+
   addEventListener<K extends keyof AccordionPanelEventMap>(
     type: K,
     listener: (this: AccordionPanel, ev: AccordionPanelEventMap[K]) => void,

package/src/vaadin-accordion-panel.js

@@ -1,9 +1,17 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Details } from '@vaadin/details/src/vaadin-details.js';
+import './vaadin-accordion-heading.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DelegateFocusMixin } from '@vaadin/component-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 { SummaryController } from '@vaadin/details/src/summary-controller.js';
+import { DetailsMixin } from '@vaadin/details/src/vaadin-details-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * The accordion panel element.
@@ -14,9 +22,6 @@ import { Details } from '@vaadin/details/src/vaadin-details.js';
  *
  * Part name        | Description
  * -----------------|----------------
- * `summary`        | The element used to open and close collapsible content.
- * `toggle`         | The element used as indicator, can represent an icon.
- * `summary-content`| The wrapper for the slotted summary content.
  * `content`        | The wrapper for the collapsible panel content.
  *
  * The following attributes are exposed for styling:
@@ -31,11 +36,136 @@ import { Details } from '@vaadin/details/src/vaadin-details.js';
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ *
+ * @extends HTMLElement
+ * @mixes ControllerMixin
+ * @mixes DetailsMixin
+ * @mixes DelegateFocusMixin
+ * @mixes DelegateStateMixin
+ * @mixes ThemableMixin
  */
-class AccordionPanel extends Details {
+class AccordionPanel extends DetailsMixin(
+  DelegateFocusMixin(DelegateStateMixin(ThemableMixin(ControllerMixin(PolymerElement)))),
+) {
   static get is() {
     return 'vaadin-accordion-panel';
   }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        [part='content'] {
+          display: none;
+          overflow: hidden;
+        }
+
+        :host([opened]) [part='content'] {
+          display: block;
+          overflow: visible;
+        }
+      </style>
+
+      <slot name="summary"></slot>
+
+      <div part="content">
+        <slot></slot>
+      </div>
+
+      <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');
+      }
+    }
+  }
 }
 
 customElements.define(AccordionPanel.is, AccordionPanel);

package/src/vaadin-accordion.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -41,12 +41,12 @@ export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;
  * ```
  * <vaadin-accordion>
  *   <vaadin-accordion-panel>
- *     <div slot="summary">Panel 1</div>
- *     This panel is opened, so the text is visible by default.
+ *     <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>
+ *     <div>This panel is opened, so the text is visible by default.</div>
  *   </vaadin-accordion-panel>
  *   <vaadin-accordion-panel>
- *     <div slot="summary">Panel 2</div>
- *     After opening this panel, the first one becomes closed.
+ *     <vaadin-accordion-heading slot="summary">Panel 2</vaadin-accordion-heading>
+ *     <div>After opening this panel, the first one becomes closed.</div>
  *   </vaadin-accordion-panel>
  * </vaadin-accordion>
  * ```

package/src/vaadin-accordion.js

@@ -1,11 +1,12 @@
 /**
  * @license
- * Copyright (c) 2019 - 2022 Vaadin Ltd.
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { isElementFocused } from '@vaadin/component-base/src/focus-utils.js';
 import { KeyboardDirectionMixin } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { AccordionPanel } from './vaadin-accordion-panel.js';
@@ -25,12 +26,12 @@ import { AccordionPanel } from './vaadin-accordion-panel.js';
  * ```
  * <vaadin-accordion>
  *   <vaadin-accordion-panel>
- *     <div slot="summary">Panel 1</div>
- *     This panel is opened, so the text is visible by default.
+ *     <vaadin-accordion-heading slot="summary">Panel 1</vaadin-accordion-heading>
+ *     <div>This panel is opened, so the text is visible by default.</div>
  *   </vaadin-accordion-panel>
  *   <vaadin-accordion-panel>
- *     <div slot="summary">Panel 2</div>
- *     After opening this panel, the first one becomes closed.
+ *     <vaadin-accordion-heading slot="summary">Panel 2</vaadin-accordion-heading>
+ *     <div>After opening this panel, the first one becomes closed.</div>
  *   </vaadin-accordion-panel>
  * </vaadin-accordion>
  * ```
@@ -117,6 +118,18 @@ class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(Polyme
     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
@@ -182,8 +195,7 @@ class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(Polyme
    */
   _onKeyDown(event) {
     // Only check keyboard events on details toggle buttons
-    const item = event.composedPath()[0];
-    if (!this.items.some((el) => el.focusElement === item)) {
+    if (!this.items.some((item) => item.focusElement === event.target)) {
       return;
     }
 

package/theme/lumo/vaadin-accordion-heading-styles.js

@@ -0,0 +1,14 @@
+import { detailsSummary } from '@vaadin/details/theme/lumo/vaadin-details-summary-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const accordionHeading = css`
+  :host {
+    padding: 0;
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-s) 0;
+  }
+`;
+
+registerStyles('vaadin-accordion-heading', [detailsSummary, accordionHeading], { moduleId: 'lumo-accordion-heading' });

package/theme/lumo/vaadin-accordion-panel.js

@@ -1,2 +1,3 @@
+import './vaadin-accordion-heading-styles.js';
 import './vaadin-accordion-panel-styles.js';
 import '../../src/vaadin-accordion-panel.js';

package/theme/material/vaadin-accordion-heading-styles.js

@@ -0,0 +1,44 @@
+import '@vaadin/vaadin-material-styles/color.js';
+import { detailsSummary } from '@vaadin/details/theme/material/vaadin-details-summary-styles.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+const accordionHeading = css`
+  :host(:not([opened]))::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 1px;
+    opacity: 1;
+    z-index: 1;
+    background-color: var(--material-divider-color);
+  }
+
+  :host([opened])::before {
+    opacity: 0;
+  }
+
+  [part='content'] {
+    font-weight: normal;
+  }
+
+  [part='content'] ::slotted(*) {
+    display: flex;
+    margin-right: 16px;
+    color: var(--material-body-text-color);
+  }
+
+  [part='content'] ::slotted([theme='primary']) {
+    flex-basis: 33.33%;
+    flex-shrink: 0;
+  }
+
+  [part='content'] ::slotted([theme='secondary']) {
+    color: var(--material-secondary-text-color);
+  }
+`;
+
+registerStyles('vaadin-accordion-heading', [detailsSummary, accordionHeading], {
+  moduleId: 'material-accordion-heading',
+});

package/theme/material/vaadin-accordion-panel-styles.js

@@ -3,22 +3,6 @@ import { details } from '@vaadin/details/theme/material/vaadin-details-styles.js
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const accordionPanel = css`
-  :host(:not([opened])) [part='summary']::after {
-    content: '';
-    position: absolute;
-    bottom: -1px;
-    left: 0;
-    right: 0;
-    height: 1px;
-    opacity: 1;
-    z-index: 1;
-    background-color: var(--material-divider-color);
-  }
-
-  :host([opened]) [part='summary']::before {
-    opacity: 0;
-  }
-
   :host([opened]:not(:first-child)) {
     margin-top: 16px;
   }
@@ -26,27 +10,6 @@ const accordionPanel = css`
   :host([opened]:not(:last-child)) {
     margin-bottom: 16px;
   }
-
-  [part='summary-content'] {
-    display: flex;
-    width: 100%;
-    font-weight: normal;
-  }
-
-  [part='summary-content'] ::slotted(*) {
-    display: flex;
-    margin-right: 16px;
-    color: var(--material-body-text-color);
-  }
-
-  [part='summary-content'] ::slotted([theme='primary']) {
-    flex-basis: 33.33%;
-    flex-shrink: 0;
-  }
-
-  [part='summary-content'] ::slotted([theme='secondary']) {
-    color: var(--material-secondary-text-color);
-  }
 `;
 
 registerStyles('vaadin-accordion-panel', [details, accordionPanel], {

package/theme/material/vaadin-accordion-panel.js

@@ -1,2 +1,3 @@
+import './vaadin-accordion-heading-styles.js';
 import './vaadin-accordion-panel-styles.js';
 import '../../src/vaadin-accordion-panel.js';

package/web-types.json

@@ -1,15 +1,68 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "23.3.3",
+  "version": "24.0.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
+        {
+          "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/custom-theme/styling-components) documentation.",
+          "attributes": [
+            {
+              "name": "opened",
+              "description": "When true, the element is opened.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "opened",
+                "description": "When true, the element is opened.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "vaadin-accordion-panel",
-          "description": "The accordion panel element.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name        | Description\n-----------------|----------------\n`summary`        | The element used to open and close collapsible content.\n`toggle`         | The element used as indicator, can represent an icon.\n`summary-content`| The wrapper for the slotted summary content.\n`content`        | The wrapper for the collapsible panel content.\n\nThe following attributes are exposed for styling:\n\nAttribute    | Description\n-------------| -----------\n`opened`     | Set when the collapsible content is expanded and visible.\n`disabled`   | Set when the element is disabled.\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused`    | Set when the element is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "The accordion panel element.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name        | Description\n-----------------|----------------\n`content`        | The wrapper for the collapsible panel content.\n\nThe following attributes are exposed for styling:\n\nAttribute    | Description\n-------------| -----------\n`opened`     | Set when the collapsible content is expanded and visible.\n`disabled`   | Set when the element is disabled.\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused`    | Set when the element is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "opened",
+              "description": "If true, the collapsible content is visible.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
             {
               "name": "disabled",
               "description": "If true, the user cannot interact with this element.",
@@ -33,11 +86,13 @@
               }
             },
             {
-              "name": "opened",
-              "description": "If true, the details content is visible.",
+              "name": "summary",
+              "description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
               "value": {
                 "type": [
-                  "boolean"
+                  "string",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -55,6 +110,15 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "opened",
+                "description": "If true, the collapsible content is visible.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              },
               {
                 "name": "disabled",
                 "description": "If true, the user cannot interact with this element.",
@@ -78,11 +142,13 @@
                 }
               },
               {
-                "name": "opened",
-                "description": "If true, the details content is visible.",
+                "name": "summary",
+                "description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
                 "value": {
                   "type": [
-                    "boolean"
+                    "string",
+                    "null",
+                    "undefined"
                   ]
                 }
               }
@@ -97,7 +163,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    <div slot=\"summary\">Panel 1</div>\n    This panel is opened, so the text is visible by default.\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <div slot=\"summary\">Panel 2</div>\n    After opening this panel, the first one becomes closed.\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/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/custom-theme/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.0.0-alpha10/#/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/custom-theme/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": "23.3.3",
+  "version": "24.0.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -14,11 +14,32 @@
   "contributions": {
     "html": {
       "elements": [
+        {
+          "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/custom-theme/styling-components) documentation.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?opened",
+              "description": "When true, the element is opened.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
         {
           "name": "vaadin-accordion-panel",
-          "description": "The accordion panel element.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name        | Description\n-----------------|----------------\n`summary`        | The element used to open and close collapsible content.\n`toggle`         | The element used as indicator, can represent an icon.\n`summary-content`| The wrapper for the slotted summary content.\n`content`        | The wrapper for the collapsible panel content.\n\nThe following attributes are exposed for styling:\n\nAttribute    | Description\n-------------| -----------\n`opened`     | Set when the collapsible content is expanded and visible.\n`disabled`   | Set when the element is disabled.\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused`    | Set when the element is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "The accordion panel element.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name        | Description\n-----------------|----------------\n`content`        | The wrapper for the collapsible panel content.\n\nThe following attributes are exposed for styling:\n\nAttribute    | Description\n-------------| -----------\n`opened`     | Set when the collapsible content is expanded and visible.\n`disabled`   | Set when the element is disabled.\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused`    | Set when the element is focused.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": "?opened",
+              "description": "If true, the collapsible content is visible.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?disabled",
               "description": "If true, the user cannot interact with this element.",
@@ -34,8 +55,8 @@
               }
             },
             {
-              "name": "?opened",
-              "description": "If true, the details content is visible.",
+              "name": ".summary",
+              "description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
               "value": {
                 "kind": "expression"
               }
@@ -51,7 +72,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    <div slot=\"summary\">Panel 1</div>\n    This panel is opened, so the text is visible by default.\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <div slot=\"summary\">Panel 2</div>\n    After opening this panel, the first one becomes closed.\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/23.3.3/#/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/custom-theme/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.0.0-alpha10/#/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/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {