@vaadin/accordion 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

package/README.md

@@ -2,7 +2,7 @@
 
 A web component for displaying a vertically stacked set of expandable panels.
 
-[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/accordion)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/accordion)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/accordion)](https://www.npmjs.com/package/@vaadin/accordion)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
@@ -20,7 +20,7 @@ A web component for displaying a vertically stacked set of expandable panels.
 </vaadin-accordion>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/accordion/screenshot.png" alt="Screenshot of vaadin-accordion" width="900">](https://vaadin.com/docs/latest/ds/components/accordion)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/accordion/screenshot.png" alt="Screenshot of vaadin-accordion" width="900">](https://vaadin.com/docs/latest/components/accordion)
 
 ## Installation
 
@@ -38,7 +38,7 @@ import '@vaadin/accordion';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
 The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/accordion/vaadin-accordion.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
@@ -61,7 +61,7 @@ import '@vaadin/accordion/src/vaadin-accordion.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/accordion",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -23,7 +23,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -34,16 +36,20 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/details": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/details": "23.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

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

@@ -28,7 +28,7 @@ import { Details } from '@vaadin/details/src/vaadin-details.js';
  * `focus-ring` | Set when the element is focused using the keyboard.
  * `focused`    | Set when the element is focused.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */

package/src/vaadin-accordion-panel.js

@@ -28,7 +28,7 @@ import { Details } from '@vaadin/details/src/vaadin-details.js';
  * `focus-ring` | Set when the element is focused using the keyboard.
  * `focused`    | Set when the element is focused.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */

package/src/vaadin-accordion.d.ts

@@ -4,8 +4,9 @@
  * 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';
+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';
+import type { AccordionPanel } from './vaadin-accordion-panel.js';
 
 /**
  * Fired when the `items` property changes.
@@ -23,7 +24,7 @@ export interface AccordionCustomEventMap {
   'opened-changed': AccordionOpenedChangedEvent;
 }
 
-export type AccordionEventMap = HTMLElementEventMap & AccordionCustomEventMap;
+export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;
 
 /**
  * `<vaadin-accordion>` is a Web Component implementing accordion widget —
@@ -64,12 +65,12 @@ export type AccordionEventMap = HTMLElementEventMap & AccordionCustomEventMap;
  * }
  * ```
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  */
-declare class Accordion extends ElementMixin(ThemableMixin(HTMLElement)) {
+declare class Accordion extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   /**
    * The index of currently opened panel. First panel is opened by
    * default. Only one panel can be opened at the same time.
@@ -87,13 +88,13 @@ declare class Accordion extends ElementMixin(ThemableMixin(HTMLElement)) {
   addEventListener<K extends keyof AccordionEventMap>(
     type: K,
     listener: (this: Accordion, ev: AccordionEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions,
+    options?: AddEventListenerOptions | boolean,
   ): void;
 
   removeEventListener<K extends keyof AccordionEventMap>(
     type: K,
     listener: (this: Accordion, ev: AccordionEventMap[K]) => void,
-    options?: boolean | EventListenerOptions,
+    options?: EventListenerOptions | boolean,
   ): void;
 }
 

package/src/vaadin-accordion.js

@@ -6,6 +6,7 @@
 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 { 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';
 
@@ -48,16 +49,17 @@ import { AccordionPanel } from './vaadin-accordion-panel.js';
  * }
  * ```
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @fires {CustomEvent} items-changed - Fired when the `items` property changes.
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  *
  * @extends HTMLElement
  * @mixes ElementMixin
+ * @mixes KeyboardDirectionMixin
  * @mixes ThemableMixin
  */
-class Accordion extends ThemableMixin(ElementMixin(PolymerElement)) {
+class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -115,35 +117,21 @@ class Accordion extends ThemableMixin(ElementMixin(PolymerElement)) {
     this._boundUpdateOpened = this._updateOpened.bind(this);
   }
 
-  /**
-   * @return {Element | null}
-   * @protected
-   */
-  get focused() {
-    return this.getRootNode().activeElement;
-  }
-
   /**
    * @protected
+   * @override
    */
   focus() {
     if (this._observer) {
       this._observer.flush();
     }
-    if (Array.isArray(this.items)) {
-      const idx = this._getAvailableIndex(0);
-      if (idx >= 0) {
-        this.items[idx].focus();
-      }
-    }
+    super.focus();
   }
 
   /** @protected */
   ready() {
     super.ready();
 
-    this.addEventListener('keydown', (e) => this._onKeydown(e));
-
     this._observer = new FlattenedNodesObserver(this, (info) => {
       this._setItems(this._filterItems(Array.from(this.children)));
 
@@ -153,6 +141,18 @@ class Accordion extends ThemableMixin(ElementMixin(PolymerElement)) {
     });
   }
 
+  /**
+   * Override method inherited from `KeyboardDirectionMixin`
+   * to use the stored list of accordion panels as items.
+   *
+   * @return {Element[]}
+   * @protected
+   * @override
+   */
+  _getItems() {
+    return this.items;
+  }
+
   /**
    * @param {!Array<!Element>} array
    * @return {!Array<!AccordionPanel>}
@@ -173,71 +173,21 @@ class Accordion extends ThemableMixin(ElementMixin(PolymerElement)) {
   }
 
   /**
+   * Override an event listener from `KeyboardMixin`
+   * to only handle details toggle buttons events.
+   *
    * @param {!KeyboardEvent} event
    * @protected
+   * @override
    */
-  _onKeydown(event) {
+  _onKeyDown(event) {
     // Only check keyboard events on details toggle buttons
     const item = event.composedPath()[0];
     if (!this.items.some((el) => el.focusElement === item)) {
       return;
     }
 
-    const currentIdx = this.items.indexOf(this.focused);
-    let idx;
-    let increment;
-
-    switch (event.key) {
-      case 'ArrowUp':
-        increment = -1;
-        idx = currentIdx - 1;
-        break;
-      case 'ArrowDown':
-        increment = 1;
-        idx = currentIdx + 1;
-        break;
-      case 'Home':
-        increment = 1;
-        idx = 0;
-        break;
-      case 'End':
-        increment = -1;
-        idx = this.items.length - 1;
-        break;
-      default:
-      // Do nothing.
-    }
-
-    idx = this._getAvailableIndex(idx, increment);
-    if (idx >= 0) {
-      this.items[idx].focus();
-      this.items[idx].setAttribute('focus-ring', '');
-      event.preventDefault();
-    }
-  }
-
-  /**
-   * @param {number} index
-   * @param {number} increment
-   * @return {number}
-   * @protected
-   */
-  _getAvailableIndex(index, increment) {
-    const totalItems = this.items.length;
-    let idx = index;
-    for (let i = 0; typeof idx === 'number' && i < totalItems; i++, idx += increment || 1) {
-      if (idx < 0) {
-        idx = totalItems - 1;
-      } else if (idx >= totalItems) {
-        idx = 0;
-      }
-
-      const item = this.items[idx];
-      if (!item.disabled) {
-        return idx;
-      }
-    }
-    return -1;
+    super._onKeyDown(event);
   }
 
   /** @private */

package/web-types.json

@@ -0,0 +1,150 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/accordion",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "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.",
+          "attributes": [
+            {
+              "name": "disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "opened",
+              "description": "If true, the details content is visible.",
+              "value": {
+                "type": [
+                  "boolean"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "disabled",
+                "description": "If true, the user cannot interact with this element.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "autofocus",
+                "description": "Specify that this control should have input focus when the page loads.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "opened",
+                "description": "If true, the details content is visible.",
+                "value": {
+                  "type": [
+                    "boolean"
+                  ]
+                }
+              }
+            ],
+            "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    <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.0-alpha1/#/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.",
+                "value": {
+                  "type": [
+                    "number"
+                  ]
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "opened-changed",
+                "description": "Fired when the `opened` property changes."
+              },
+              {
+                "name": "items-changed",
+                "description": "Fired when the `items` property changes."
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/accordion",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "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.",
+          "extension": true,
+          "attributes": [
+            {
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?autofocus",
+              "description": "Specify that this control should have input focus when the page loads.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?opened",
+              "description": "If true, the details content is visible.",
+              "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    <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.0-alpha1/#/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.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@opened-changed",
+              "description": "Fired when the `opened` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "@items-changed",
+              "description": "Fired when the `items` property changes.",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}