@vaadin/accordion 24.0.0-alpha7 → 24.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/accordion",
-  "version": "24.0.0-alpha7",
+  "version": "24.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -36,11 +36,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.0.0-alpha7",
-    "@vaadin/details": "24.0.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha7",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha7"
+    "@vaadin/component-base": "24.0.0-alpha8",
+    "@vaadin/details": "24.0.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha8",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha8"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -51,5 +51,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "aeb4535336813636736759e0a5de148b26bfc3b6"
+  "gitHead": "476752249bb12295c500980d98a3256ad3b22b73"
 }

package/src/vaadin-accordion-heading.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 { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';

package/src/vaadin-accordion-heading.js

@@ -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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
@@ -80,7 +80,7 @@ class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolymerElement
           text-align: inherit;
         }
       </style>
-      <button id="button" part="content" disabled$="[[disabled]]">
+      <button id="button" part="content" disabled$="[[disabled]]" aria-expanded$="[[__updateAriaExpanded(opened)]]">
         <span part="toggle" aria-hidden="true"></span>
         <slot></slot>
       </button>
@@ -121,6 +121,11 @@ class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(PolymerElement
       this.setAttribute('role', 'heading');
     }
   }
+
+  /** @private */
+  __updateAriaExpanded(opened) {
+    return opened ? 'true' : 'false';
+  }
 }
 
 customElements.define(AccordionHeading.is, AccordionHeading);

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

@@ -1,11 +1,11 @@
 /**
  * @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 { 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 { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { DelegateStateMixin } from '@vaadin/field-base/src/delegate-state-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -44,6 +44,12 @@ export type AccordionPanelEventMap = AccordionPanelCustomEventMap & HTMLElementE
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
 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,49 +1,18 @@
 /**
  * @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 './vaadin-accordion-heading.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { SlotObserveController } from '@vaadin/component-base/src/slot-observe-controller.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 { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
-import { DelegateStateMixin } from '@vaadin/field-base/src/delegate-state-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-class SummaryController extends SlotObserveController {
-  constructor(host) {
-    super(host, 'summary', 'vaadin-accordion-heading', {
-      initializer: (node, host) => {
-        host._setFocusElement(node);
-        host.stateTarget = node;
-      },
-    });
-  }
-}
-
-class ContentController extends SlotObserveController {
-  /**
-   * Override method from `SlotController` to change
-   * the ID prefix for the default slot content.
-   *
-   * @param {HTMLElement} host
-   * @return {string}
-   * @protected
-   * @override
-   */
-  static generateId(host) {
-    return super.generateId(host, 'content');
-  }
-
-  constructor(host) {
-    super(host, '', null, { multiple: true });
-  }
-}
-
 /**
  * The accordion panel element.
  *
@@ -67,6 +36,13 @@ class ContentController extends SlotObserveController {
  * 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 DetailsMixin(
   DelegateFocusMixin(DelegateStateMixin(ThemableMixin(ControllerMixin(PolymerElement)))),
@@ -110,16 +86,20 @@ class AccordionPanel extends DetailsMixin(
   static get properties() {
     return {
       /**
-       * A content element.
-       *
-       * @protected
+       * A text that is displayed in the heading, if no
+       * element is assigned to the `summary` slot.
        */
-      _collapsible: {
-        type: Object,
+      summary: {
+        type: String,
+        observer: '_summaryChanged',
       },
     };
   }
 
+  static get observers() {
+    return ['__updateAriaAttributes(focusElement, _contentElements)'];
+  }
+
   static get delegateAttrs() {
     return ['theme'];
   }
@@ -128,13 +108,29 @@ class AccordionPanel extends DetailsMixin(
     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._initSummary();
-    this._initContent();
-    this._initTooltip();
+    this.addController(this._summaryController);
+    this.addController(this._tooltipController);
   }
 
   /**
@@ -149,47 +145,26 @@ class AccordionPanel extends DetailsMixin(
   }
 
   /** @private */
-  _initSummary() {
-    this._summaryController = new SummaryController(this);
-    this.addController(this._summaryController);
-
-    // Wait for heading element render to complete
-    afterNextRender(this, () => {
-      this._toggleElement = this.focusElement.$.button;
-    });
+  _summaryChanged(summary) {
+    this._summaryController.setSummary(summary);
   }
 
   /** @private */
-  _initContent() {
-    this._contentController = new ContentController(this);
-    this._contentController.addEventListener('slot-content-changed', (event) => {
-      // Store nodes to toggle `aria-hidden` attribute
-      const content = event.target.nodes || [];
-      this._contentElements = content;
-
-      // See https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
-      const node = content[0];
+  __updateAriaAttributes(focusElement, contentElements) {
+    if (focusElement && contentElements) {
+      const node = contentElements[0];
+
       if (node) {
         node.setAttribute('role', 'region');
-        node.setAttribute('aria-labelledby', this.focusElement.id);
+        node.setAttribute('aria-labelledby', focusElement.id);
       }
 
-      if (node && node.parentNode === this && node.id) {
-        this.focusElement.setAttribute('aria-controls', node.id);
+      if (node && node.id) {
+        focusElement.setAttribute('aria-controls', node.id);
       } else {
-        this.focusElement.removeAttribute('aria-controls');
+        focusElement.removeAttribute('aria-controls');
       }
-    });
-    this.addController(this._contentController);
-  }
-
-  /** @private */
-  _initTooltip() {
-    this._tooltipController = new TooltipController(this);
-    this.addController(this._tooltipController);
-
-    this._tooltipController.setTarget(this.focusElement);
-    this._tooltipController.setPosition('bottom-start');
+    }
   }
 }
 

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';

package/src/vaadin-accordion.js

@@ -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 { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
@@ -151,7 +151,7 @@ class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(Polyme
    * @override
    */
   get focused() {
-    return (this._getItems() || []).find((item) => isElementFocused(item._toggleElement));
+    return (this._getItems() || []).find((item) => isElementFocused(item.focusElement));
   }
 
   /**
@@ -195,9 +195,7 @@ class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(Polyme
    */
   _onKeyDown(event) {
     // Only check keyboard events on details toggle buttons
-    const target = event.composedPath()[0];
-
-    if (!this.items.some((item) => item._toggleElement === target)) {
+    if (!this.items.some((item) => item.focusElement === event.target)) {
       return;
     }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "24.0.0-alpha7",
+  "version": "24.0.0-alpha8",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -55,32 +55,44 @@
           "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": "theme",
-              "description": "The theme variants to apply to the component.",
+              "name": "opened",
+              "description": "If true, the collapsible content is visible.",
               "value": {
                 "type": [
-                  "string",
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
                   "null",
                   "undefined"
                 ]
               }
-            }
-          ],
-          "js": {
-            "properties": [],
-            "events": []
-          }
-        },
-        {
-          "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.0.0-alpha7/#/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",
-              "description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",
+              "name": "autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
               "value": {
                 "type": [
-                  "number"
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "summary",
+              "description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
                 ]
               }
             },
@@ -99,43 +111,83 @@
           "js": {
             "properties": [
               {
-                "name": "rootPath",
-                "description": "",
+                "name": "opened",
+                "description": "If true, the collapsible content is visible.",
                 "value": {
                   "type": [
-                    "string"
+                    "boolean"
                   ]
                 }
               },
               {
-                "name": "importPath",
-                "description": "",
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
                 "value": {
                   "type": [
-                    "string"
+                    "boolean",
+                    "null",
+                    "undefined"
                   ]
                 }
               },
               {
-                "name": "root",
-                "description": "",
+                "name": "autofocus",
+                "description": "Specify that this control should have input focus when the page loads.",
                 "value": {
                   "type": [
-                    "StampedTemplate",
-                    "HTMLElement",
-                    "ShadowRoot"
+                    "boolean",
+                    "null",
+                    "undefined"
                   ]
                 }
               },
               {
-                "name": "$",
-                "description": "",
+                "name": "summary",
+                "description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
                 "value": {
                   "type": [
-                    "Object.<string, Element>"
+                    "string",
+                    "null",
+                    "undefined"
                   ]
                 }
-              },
+              }
+            ],
+            "events": [
+              {
+                "name": "opened-changed",
+                "description": "Fired when the `opened` property changes."
+              }
+            ]
+          }
+        },
+        {
+          "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.0.0-alpha8/#/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",
+              "description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",
+              "value": {
+                "type": [
+                  "number"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
               {
                 "name": "opened",
                 "description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "24.0.0-alpha7",
+  "version": "24.0.0-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -32,41 +32,49 @@
           "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`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": "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.0.0-alpha7/#/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": [
             {
-              "name": ".rootPath",
-              "description": "",
+              "name": "?opened",
+              "description": "If true, the collapsible content is visible.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".importPath",
-              "description": "",
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".root",
-              "description": "",
+              "name": "?autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".$",
-              "description": "",
+              "name": ".summary",
+              "description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
               "value": {
                 "kind": "expression"
               }
             },
+            {
+              "name": "@opened-changed",
+              "description": "Fired when the `opened` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        },
+        {
+          "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.0.0-alpha8/#/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": [
             {
               "name": ".opened",
               "description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",