@vaadin/accordion 24.8.0-alpha9 → 24.8.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/accordion",
-  "version": "24.8.0-alpha9",
+  "version": "24.8.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,10 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-accordion-heading-base-styles.d.ts",
+    "!src/vaadin-accordion-heading-base-styles.js",
+    "!src/vaadin-accordion-panel-base-styles.d.ts",
+    "!src/vaadin-accordion-panel-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -37,17 +41,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/details": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/a11y-base": "24.8.0-rc1",
+    "@vaadin/component-base": "24.8.0-rc1",
+    "@vaadin/details": "24.8.0-rc1",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-rc1",
+    "@vaadin/vaadin-material-styles": "24.8.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
+    "@vaadin/chai-plugins": "24.8.0-rc1",
+    "@vaadin/test-runner-commands": "24.8.0-rc1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "901d3eb9224983fd81e222e2fa5c7c207f9a6e46"
 }

package/src/vaadin-accordion-heading.js

@@ -8,7 +8,7 @@ import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { accordionHeading } from './vaadin-accordion-heading-styles.js';
+import { accordionHeading } from './vaadin-accordion-heading-core-styles.js';
 
 registerStyles('vaadin-accordion-heading', accordionHeading, { moduleId: 'vaadin-accordion-heading-styles' });
 

package/src/vaadin-accordion-mixin.js

@@ -114,10 +114,12 @@ export const AccordionMixin = (superClass) =>
     /** @private */
     _updateItems(items, opened) {
       if (items) {
+        this.__itemsSync = true;
         const itemToOpen = items[opened];
         items.forEach((item) => {
           item.opened = item === itemToOpen;
         });
+        this.__itemsSync = false;
       }
     }
 
@@ -140,6 +142,11 @@ export const AccordionMixin = (superClass) =>
 
     /** @private */
     _updateOpened(e) {
+      // Item sync applies the current opened index to each item, in which
+      // case we don't need to update the opened index again.
+      if (this.__itemsSync) {
+        return;
+      }
       const target = this._filterItems(e.composedPath())[0];
       const idx = this.items.indexOf(target);
       if (e.detail.value) {

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

@@ -57,6 +57,21 @@ export const AccordionPanelMixin = (superClass) =>
       this._tooltipController.setPosition('bottom-start');
     }
 
+    /**
+     * @protected
+     * @override
+     */
+    __forwardTabIndex(tabindex) {
+      super.__forwardTabIndex(tabindex);
+      if (tabindex !== undefined && this.focusElement) {
+        // Forward the tabIndex to the button inside the heading
+        // instead of the heading itself
+        this.focusElement.$.button.tabIndex = tabindex;
+        // Revert the tabIndex value of the heading
+        this.focusElement.tabIndex = -1;
+      }
+    }
+
     /** @protected */
     ready() {
       super.ready();

package/src/vaadin-accordion-panel.js

@@ -8,8 +8,8 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { accordionPanel } from './vaadin-accordion-panel-core-styles.js';
 import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
-import { accordionPanel } from './vaadin-accordion-panel-styles.js';
 
 registerStyles('vaadin-accordion-panel', accordionPanel, { moduleId: 'vaadin-accordion-panel-styles' });
 

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

@@ -9,7 +9,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { accordionHeading } from './vaadin-accordion-heading-styles.js';
+import { accordionHeading } from './vaadin-accordion-heading-core-styles.js';
 
 /**
  * LitElement based version of `<vaadin-accordion-heading>` web component.

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

@@ -8,8 +8,8 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { accordionPanel } from './vaadin-accordion-panel-core-styles.js';
 import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
-import { accordionPanel } from './vaadin-accordion-panel-styles.js';
 
 /**
  * LitElement based version of `<vaadin-accordion-panel>` web component.

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "24.8.0-alpha9",
+  "version": "24.8.0-rc1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -185,7 +185,7 @@
         },
         {
           "name": "vaadin-accordion",
-          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "opened",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/accordion",
-  "version": "24.8.0-alpha9",
+  "version": "24.8.0-rc1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -79,7 +79,7 @@
         },
         {
           "name": "vaadin-accordion",
-          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha9/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```\n<vaadin-accordion>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n    <div>This panel is opened, so the text is visible by default.</div>\n  </vaadin-accordion-panel>\n  <vaadin-accordion-panel>\n    <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n    <div>After opening this panel, the first one becomes closed.</div>\n  </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-rc1/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\n**Note:** You can apply the theme to `<vaadin-accordion>` component itself,\nespecially by using the following CSS selector:\n\n```\n:host ::slotted(vaadin-accordion-panel) {\n  margin-bottom: 5px;\n}\n```\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {

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

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

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

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

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

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