@vaadin/accordion 24.0.0-alpha9 → 24.0.0-beta2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +8 -8
- package/src/vaadin-accordion-heading.d.ts +1 -3
- package/src/vaadin-accordion-heading.js +1 -1
- package/src/vaadin-accordion-panel.d.ts +4 -2
- package/src/vaadin-accordion-panel.js +3 -3
- package/src/vaadin-accordion.d.ts +1 -1
- package/src/vaadin-accordion.js +13 -13
- package/web-types.json +3 -3
- package/web-types.lit.json +3 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/accordion",
|
|
3
|
-
"version": "24.0.0-
|
|
3
|
+
"version": "24.0.0-beta2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -36,20 +36,20 @@
|
|
|
36
36
|
],
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@polymer/polymer": "^3.0.0",
|
|
39
|
-
"@vaadin/component-base": "24.0.0-
|
|
40
|
-
"@vaadin/details": "24.0.0-
|
|
41
|
-
"@vaadin/vaadin-lumo-styles": "24.0.0-
|
|
42
|
-
"@vaadin/vaadin-material-styles": "24.0.0-
|
|
43
|
-
"@vaadin/vaadin-themable-mixin": "24.0.0-
|
|
39
|
+
"@vaadin/component-base": "24.0.0-beta2",
|
|
40
|
+
"@vaadin/details": "24.0.0-beta2",
|
|
41
|
+
"@vaadin/vaadin-lumo-styles": "24.0.0-beta2",
|
|
42
|
+
"@vaadin/vaadin-material-styles": "24.0.0-beta2",
|
|
43
|
+
"@vaadin/vaadin-themable-mixin": "24.0.0-beta2"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@esm-bundle/chai": "^4.3.4",
|
|
47
|
-
"@vaadin/testing-helpers": "^0.
|
|
47
|
+
"@vaadin/testing-helpers": "^0.4.0",
|
|
48
48
|
"sinon": "^13.0.2"
|
|
49
49
|
},
|
|
50
50
|
"web-types": [
|
|
51
51
|
"web-types.json",
|
|
52
52
|
"web-types.lit.json"
|
|
53
53
|
],
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "00086f1f6d487f042f189c9b9ecd7ba736960888"
|
|
55
55
|
}
|
|
@@ -13,7 +13,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
13
13
|
* `vaadin-accordion-heading` is the element for the headings in the accordion.
|
|
14
14
|
* As recommended by the WAI ARIA Best Practices, each heading needs to wrap a
|
|
15
15
|
* `<button>`. This element puts that button in the Shadow DOM, as it is more
|
|
16
|
-
* convenient to use and doesn
|
|
16
|
+
* convenient to use and doesn't make styling of the heading more problematic.
|
|
17
17
|
*
|
|
18
18
|
* The WAI ARIA Best Practices also recommend setting `aria-level` depending
|
|
19
19
|
* on what level the headings are. It is hard to determine the level of a heading
|
|
@@ -39,8 +39,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
39
39
|
* `disabled` | Set when the element is disabled.
|
|
40
40
|
*
|
|
41
41
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
|
|
42
|
-
*
|
|
43
|
-
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
44
42
|
*/
|
|
45
43
|
declare class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(HTMLElement))) {
|
|
46
44
|
/**
|
|
@@ -14,7 +14,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
14
14
|
* `vaadin-accordion-heading` is the element for the headings in the accordion.
|
|
15
15
|
* As recommended by the WAI ARIA Best Practices, each heading needs to wrap a
|
|
16
16
|
* `<button>`. This element puts that button in the Shadow DOM, as it is more
|
|
17
|
-
* convenient to use and doesn
|
|
17
|
+
* convenient to use and doesn't make styling of the heading more problematic.
|
|
18
18
|
*
|
|
19
19
|
* The WAI ARIA Best Practices also recommend setting `aria-level` depending
|
|
20
20
|
* on what level the headings are. It is hard to determine the level of a heading
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
|
|
7
7
|
import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
8
|
-
import {
|
|
8
|
+
import { CollapsibleMixin } from '@vaadin/details/src/collapsible-mixin.js';
|
|
9
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
10
10
|
|
|
11
11
|
/**
|
|
@@ -43,7 +43,9 @@ export type AccordionPanelEventMap = AccordionPanelCustomEventMap & HTMLElementE
|
|
|
43
43
|
*
|
|
44
44
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
45
45
|
*/
|
|
46
|
-
declare class AccordionPanel extends
|
|
46
|
+
declare class AccordionPanel extends CollapsibleMixin(
|
|
47
|
+
DelegateFocusMixin(DelegateStateMixin(ThemableMixin(HTMLElement))),
|
|
48
|
+
) {
|
|
47
49
|
/**
|
|
48
50
|
* A text that is displayed in the heading, if no
|
|
49
51
|
* element is assigned to the `summary` slot.
|
|
@@ -9,8 +9,8 @@ import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'
|
|
|
9
9
|
import { DelegateFocusMixin } from '@vaadin/component-base/src/delegate-focus-mixin.js';
|
|
10
10
|
import { DelegateStateMixin } from '@vaadin/component-base/src/delegate-state-mixin.js';
|
|
11
11
|
import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
|
|
12
|
+
import { CollapsibleMixin } from '@vaadin/details/src/collapsible-mixin.js';
|
|
12
13
|
import { SummaryController } from '@vaadin/details/src/summary-controller.js';
|
|
13
|
-
import { DetailsMixin } from '@vaadin/details/src/vaadin-details-mixin.js';
|
|
14
14
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
15
15
|
|
|
16
16
|
/**
|
|
@@ -38,13 +38,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
38
38
|
* @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
|
|
39
39
|
*
|
|
40
40
|
* @extends HTMLElement
|
|
41
|
+
* @mixes CollapsibleMixin
|
|
41
42
|
* @mixes ControllerMixin
|
|
42
|
-
* @mixes DetailsMixin
|
|
43
43
|
* @mixes DelegateFocusMixin
|
|
44
44
|
* @mixes DelegateStateMixin
|
|
45
45
|
* @mixes ThemableMixin
|
|
46
46
|
*/
|
|
47
|
-
class AccordionPanel extends
|
|
47
|
+
class AccordionPanel extends CollapsibleMixin(
|
|
48
48
|
DelegateFocusMixin(DelegateStateMixin(ThemableMixin(ControllerMixin(PolymerElement)))),
|
|
49
49
|
) {
|
|
50
50
|
static get is() {
|
|
@@ -27,7 +27,7 @@ export interface AccordionCustomEventMap {
|
|
|
27
27
|
export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;
|
|
28
28
|
|
|
29
29
|
/**
|
|
30
|
-
* `<vaadin-accordion>` is a Web Component implementing accordion widget
|
|
30
|
+
* `<vaadin-accordion>` is a Web Component implementing accordion widget:
|
|
31
31
|
* a vertically stacked set of expandable panels. The component should be
|
|
32
32
|
* used as a wrapper for two or more `<vaadin-accordion-panel>` components.
|
|
33
33
|
*
|
package/src/vaadin-accordion.js
CHANGED
|
@@ -12,7 +12,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
|
|
|
12
12
|
import { AccordionPanel } from './vaadin-accordion-panel.js';
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
|
-
* `<vaadin-accordion>` is a Web Component implementing accordion widget
|
|
15
|
+
* `<vaadin-accordion>` is a Web Component implementing accordion widget:
|
|
16
16
|
* a vertically stacked set of expandable panels. The component should be
|
|
17
17
|
* used as a wrapper for two or more `<vaadin-accordion-panel>` components.
|
|
18
18
|
*
|
|
@@ -118,6 +118,18 @@ class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(Polyme
|
|
|
118
118
|
this._boundUpdateOpened = this._updateOpened.bind(this);
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
+
/**
|
|
122
|
+
* Override getter from `KeyboardDirectionMixin`
|
|
123
|
+
* to check if the heading element has focus.
|
|
124
|
+
*
|
|
125
|
+
* @return {Element | null}
|
|
126
|
+
* @protected
|
|
127
|
+
* @override
|
|
128
|
+
*/
|
|
129
|
+
get focused() {
|
|
130
|
+
return (this._getItems() || []).find((item) => isElementFocused(item.focusElement));
|
|
131
|
+
}
|
|
132
|
+
|
|
121
133
|
/**
|
|
122
134
|
* @protected
|
|
123
135
|
* @override
|
|
@@ -142,18 +154,6 @@ class Accordion extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(Polyme
|
|
|
142
154
|
});
|
|
143
155
|
}
|
|
144
156
|
|
|
145
|
-
/**
|
|
146
|
-
* Override getter from `KeyboardDirectionMixin`
|
|
147
|
-
* to check if the heading element has focus.
|
|
148
|
-
*
|
|
149
|
-
* @return {Element | null}
|
|
150
|
-
* @protected
|
|
151
|
-
* @override
|
|
152
|
-
*/
|
|
153
|
-
get focused() {
|
|
154
|
-
return (this._getItems() || []).find((item) => isElementFocused(item.focusElement));
|
|
155
|
-
}
|
|
156
|
-
|
|
157
157
|
/**
|
|
158
158
|
* Override method inherited from `KeyboardDirectionMixin`
|
|
159
159
|
* to use the stored list of accordion panels as items.
|
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/accordion",
|
|
4
|
-
"version": "24.0.0-
|
|
4
|
+
"version": "24.0.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-accordion-heading",
|
|
11
|
-
"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
|
|
11
|
+
"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.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "opened",
|
|
@@ -163,7 +163,7 @@
|
|
|
163
163
|
},
|
|
164
164
|
{
|
|
165
165
|
"name": "vaadin-accordion",
|
|
166
|
-
"description": "`<vaadin-accordion>` is a Web Component implementing accordion widget
|
|
166
|
+
"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-beta2/#/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.",
|
|
167
167
|
"attributes": [
|
|
168
168
|
{
|
|
169
169
|
"name": "opened",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/accordion",
|
|
4
|
-
"version": "24.0.0-
|
|
4
|
+
"version": "24.0.0-beta2",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-accordion-heading",
|
|
19
|
-
"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
|
|
19
|
+
"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.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
},
|
|
73
73
|
{
|
|
74
74
|
"name": "vaadin-accordion",
|
|
75
|
-
"description": "`<vaadin-accordion>` is a Web Component implementing accordion widget
|
|
75
|
+
"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-beta2/#/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.",
|
|
76
76
|
"extension": true,
|
|
77
77
|
"attributes": [
|
|
78
78
|
{
|