@vaadin/accordion 25.2.7 → 25.3.0-alpha10

package/custom-elements.json

@@ -101,6 +101,13 @@
               },
               "description": "When true, the element is opened.",
               "fieldName": "opened"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
             }
           ],
           "mixins": [
@@ -154,6 +161,16 @@
           "description": "A mixin providing common accordion functionality.",
           "name": "AccordionMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "headingLevel",
+              "privacy": "public",
+              "type": {
+                "text": "number"
+              },
+              "description": "The ARIA heading level, used to set the `aria-level` attribute\non the `<vaadin-accordion-heading>` element of each panel.\n\nBy default, no `aria-level` is set and the headings are announced by\nscreen readers using their default level. Set this property to expose\nthe headings at the level that matches the surrounding page structure.",
+              "attribute": "heading-level"
+            },
             {
               "kind": "field",
               "name": "items",
@@ -177,6 +194,14 @@
             }
           ],
           "attributes": [
+            {
+              "name": "heading-level",
+              "type": {
+                "text": "number"
+              },
+              "description": "The ARIA heading level, used to set the `aria-level` attribute\non the `<vaadin-accordion-heading>` element of each panel.\n\nBy default, no `aria-level` is set and the headings are announced by\nscreen readers using their default level. Set this property to expose\nthe headings at the level that matches the surrounding page structure.",
+              "fieldName": "headingLevel"
+            },
             {
               "name": "opened",
               "type": {
@@ -425,30 +450,6 @@
               "name": "opened-changed"
             }
           ],
-          "mixins": [
-            {
-              "name": "AccordionPanelMixin",
-              "module": "src/vaadin-accordion-panel-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
-            },
-            {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
-            },
-            {
-              "name": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-accordion-panel",
-          "customElement": true,
           "attributes": [
             {
               "name": "autofocus",
@@ -497,8 +498,39 @@
                 "name": "AccordionPanelMixin",
                 "module": "src/vaadin-accordion-panel-mixin.js"
               }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "AccordionPanelMixin",
+              "module": "src/vaadin-accordion-panel-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-accordion-panel",
+          "customElement": true
         }
       ],
       "exports": [
@@ -521,6 +553,20 @@
           "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```html\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\nAccordion does not have own stylable shadow parts or state attributes. Instead, apply styles to\nthe following components:\n\n- [`<vaadin-accordion-heading>`](#/elements/vaadin-accordion-heading)\n- [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Accordion",
           "members": [
+            {
+              "kind": "field",
+              "name": "headingLevel",
+              "privacy": "public",
+              "type": {
+                "text": "number"
+              },
+              "description": "The ARIA heading level, used to set the `aria-level` attribute\non the `<vaadin-accordion-heading>` element of each panel.\n\nBy default, no `aria-level` is set and the headings are announced by\nscreen readers using their default level. Set this property to expose\nthe headings at the level that matches the surrounding page structure.",
+              "attribute": "heading-level",
+              "inheritedFrom": {
+                "name": "AccordionMixin",
+                "module": "src/vaadin-accordion-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "items",
@@ -567,6 +613,39 @@
               "name": "opened-changed"
             }
           ],
+          "attributes": [
+            {
+              "name": "heading-level",
+              "type": {
+                "text": "number"
+              },
+              "description": "The ARIA heading level, used to set the `aria-level` attribute\non the `<vaadin-accordion-heading>` element of each panel.\n\nBy default, no `aria-level` is set and the headings are announced by\nscreen readers using their default level. Set this property to expose\nthe headings at the level that matches the surrounding page structure.",
+              "fieldName": "headingLevel",
+              "inheritedFrom": {
+                "name": "AccordionMixin",
+                "module": "src/vaadin-accordion-mixin.js"
+              }
+            },
+            {
+              "name": "opened",
+              "type": {
+                "text": "number"
+              },
+              "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.",
+              "fieldName": "opened",
+              "inheritedFrom": {
+                "name": "AccordionMixin",
+                "module": "src/vaadin-accordion-mixin.js"
+              }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
+            }
+          ],
           "mixins": [
             {
               "name": "AccordionMixin",
@@ -590,21 +669,7 @@
             "package": "lit"
           },
           "tagName": "vaadin-accordion",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "opened",
-              "type": {
-                "text": "number"
-              },
-              "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.",
-              "fieldName": "opened",
-              "inheritedFrom": {
-                "name": "AccordionMixin",
-                "module": "src/vaadin-accordion-mixin.js"
-              }
-            }
-          ]
+          "customElement": true
         }
       ],
       "exports": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/accordion",
-  "version": "25.2.7",
+  "version": "25.3.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,18 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~25.2.7",
-    "@vaadin/component-base": "~25.2.7",
-    "@vaadin/details": "~25.2.7",
-    "@vaadin/vaadin-themable-mixin": "~25.2.7",
+    "@vaadin/a11y-base": "25.3.0-alpha10",
+    "@vaadin/component-base": "25.3.0-alpha10",
+    "@vaadin/details": "25.3.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "~25.2.7",
-    "@vaadin/chai-plugins": "~25.2.7",
-    "@vaadin/test-runner-commands": "~25.2.7",
+    "@vaadin/aura": "25.3.0-alpha10",
+    "@vaadin/chai-plugins": "25.3.0-alpha10",
+    "@vaadin/test-runner-commands": "25.3.0-alpha10",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.2.7",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "14be1af674f3968cce68c6eb4742340694c4a949"
+  "gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
 }

package/src/vaadin-accordion-heading.js

@@ -60,6 +60,7 @@ import { accordionHeading } from './styles/vaadin-accordion-heading-base-styles.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-accordion-heading
  * @extends HTMLElement
  */

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

@@ -21,6 +21,18 @@ export declare class AccordionMixinClass {
    */
   opened: number | null;
 
+  /**
+   * The ARIA heading level, used to set the `aria-level` attribute
+   * on the `<vaadin-accordion-heading>` element of each panel.
+   *
+   * By default, no `aria-level` is set and the headings are announced by
+   * screen readers using their default level. Set this property to expose
+   * the headings at the level that matches the surrounding page structure.
+   *
+   * @attr {number} heading-level
+   */
+  headingLevel: number | null | undefined;
+
   /**
    * The list of `<vaadin-accordion-panel>` child elements.
    * It is populated from the elements passed to the light DOM,

package/src/vaadin-accordion-mixin.js

@@ -26,6 +26,20 @@ export const AccordionMixin = (superClass) =>
           reflectToAttribute: true,
         },
 
+        /**
+         * The ARIA heading level, used to set the `aria-level` attribute
+         * on the `<vaadin-accordion-heading>` element of each panel.
+         *
+         * By default, no `aria-level` is set and the headings are announced by
+         * screen readers using their default level. Set this property to expose
+         * the headings at the level that matches the surrounding page structure.
+         *
+         * @attr {number} heading-level
+         */
+        headingLevel: {
+          type: Number,
+        },
+
         /**
          * The list of `<vaadin-accordion-panel>` child elements.
          * It is populated from the elements passed to the light DOM,
@@ -87,6 +101,17 @@ export const AccordionMixin = (superClass) =>
       });
     }
 
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('items') || props.has('headingLevel')) {
+        (this.items || []).forEach((item) => {
+          item._headingLevel = this.headingLevel;
+        });
+      }
+    }
+
     /**
      * Override method inherited from `KeyboardDirectionMixin`
      * to use the stored list of accordion panels as items.

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

@@ -5,6 +5,7 @@
  */
 import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
 import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
+import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.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';
@@ -24,6 +25,16 @@ export const AccordionPanelMixin = (superClass) =>
           type: String,
           observer: '_summaryChanged',
         },
+
+        /**
+         * The ARIA heading level for the panel heading, propagated from the
+         * `headingLevel` property of the parent `<vaadin-accordion>`.
+         *
+         * @protected
+         */
+        _headingLevel: {
+          type: Number,
+        },
       };
     }
 
@@ -32,7 +43,7 @@ export const AccordionPanelMixin = (superClass) =>
     }
 
     static get delegateProps() {
-      return ['disabled', 'opened', '_theme'];
+      return ['disabled', 'opened', '_theme', '_headingLevel'];
     }
 
     constructor() {
@@ -91,6 +102,11 @@ export const AccordionPanelMixin = (superClass) =>
         return;
       }
 
+      if (name === '_headingLevel') {
+        this._delegateAttribute('aria-level', value);
+        return;
+      }
+
       super._delegateProperty(name, value);
     }
 
@@ -120,11 +136,7 @@ export const AccordionPanelMixin = (superClass) =>
           node.setAttribute('aria-labelledby', focusElement.id);
         }
 
-        if (node?.id) {
-          focusElement.setAttribute('aria-controls', node.id);
-        } else {
-          focusElement.removeAttribute('aria-controls');
-        }
+        setOrRemoveAttribute(focusElement, 'aria-controls', node?.id);
       }
     }
   };

package/src/vaadin-accordion-panel.js

@@ -37,6 +37,7 @@ import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-accordion-panel
  * @extends HTMLElement
  */

package/src/vaadin-accordion.js

@@ -49,6 +49,7 @@ import { AccordionMixin } from './vaadin-accordion-mixin.js';
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-accordion
  * @extends HTMLElement
  */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "25.2.7",
+  "version": "25.3.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -33,9 +33,7 @@
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             }
@@ -109,9 +107,7 @@
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             }
@@ -165,8 +161,17 @@
         },
         {
           "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```html\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\nAccordion does not have own stylable shadow parts or state attributes. Instead, apply styles to\nthe following components:\n\n- [`<vaadin-accordion-heading>`](https://cdn.vaadin.com/vaadin-web-components/25.2.7/#/elements/vaadin-accordion-heading)\n- [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.2.7/#/elements/vaadin-accordion-panel)\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```html\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\nAccordion does not have own stylable shadow parts or state attributes. Instead, apply styles to\nthe following components:\n\n- [`<vaadin-accordion-heading>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-accordion-heading)\n- [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-accordion-panel)\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "heading-level",
+              "description": "The ARIA heading level, used to set the `aria-level` attribute\non the `<vaadin-accordion-heading>` element of each panel.\n\nBy default, no `aria-level` is set and the headings are announced by\nscreen readers using their default level. Set this property to expose\nthe headings at the level that matches the surrounding page structure.",
+              "value": {
+                "type": [
+                  "number"
+                ]
+              }
+            },
             {
               "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.",
@@ -181,15 +186,22 @@
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             }
           ],
           "js": {
             "properties": [
+              {
+                "name": "headingLevel",
+                "description": "The ARIA heading level, used to set the `aria-level` attribute\non the `<vaadin-accordion-heading>` element of each panel.\n\nBy default, no `aria-level` is set and the headings are announced by\nscreen readers using their default level. Set this property to expose\nthe headings at the level that matches the surrounding page structure.",
+                "value": {
+                  "type": [
+                    "number"
+                  ]
+                }
+              },
               {
                 "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": "25.2.7",
+  "version": "25.3.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -79,9 +79,16 @@
         },
         {
           "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```html\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\nAccordion does not have own stylable shadow parts or state attributes. Instead, apply styles to\nthe following components:\n\n- [`<vaadin-accordion-heading>`](https://cdn.vaadin.com/vaadin-web-components/25.2.7/#/elements/vaadin-accordion-heading)\n- [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.2.7/#/elements/vaadin-accordion-panel)\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```html\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\nAccordion does not have own stylable shadow parts or state attributes. Instead, apply styles to\nthe following components:\n\n- [`<vaadin-accordion-heading>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-accordion-heading)\n- [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0-alpha10/#/elements/vaadin-accordion-panel)\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": ".headingLevel",
+              "description": "The ARIA heading level, used to set the `aria-level` attribute\non the `<vaadin-accordion-heading>` element of each panel.\n\nBy default, no `aria-level` is set and the headings are announced by\nscreen readers using their default level. Set this property to expose\nthe headings at the level that matches the surrounding page structure.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "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.",