@vaadin/accordion 25.0.0-alpha8 → 25.0.0-beta1
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 +10 -13
- package/src/vaadin-accordion-heading.js +1 -1
- package/src/vaadin-accordion-mixin.js +3 -2
- package/src/vaadin-accordion-panel.d.ts +8 -7
- package/src/vaadin-accordion-panel.js +9 -8
- package/vaadin-accordion-heading.js +1 -1
- package/vaadin-accordion-panel.js +1 -1
- package/vaadin-accordion.js +1 -1
- package/web-types.json +3 -3
- package/web-types.lit.json +3 -3
- package/src/styles/vaadin-accordion-heading-core-styles.d.ts +0 -8
- package/src/styles/vaadin-accordion-heading-core-styles.js +0 -34
- package/src/styles/vaadin-accordion-panel-core-styles.d.ts +0 -8
- package/src/styles/vaadin-accordion-panel-core-styles.js +0 -26
- package/theme/lumo/vaadin-accordion-heading-styles.d.ts +0 -1
- package/theme/lumo/vaadin-accordion-heading-styles.js +0 -19
- package/theme/lumo/vaadin-accordion-heading.d.ts +0 -2
- package/theme/lumo/vaadin-accordion-heading.js +0 -2
- package/theme/lumo/vaadin-accordion-panel-styles.d.ts +0 -2
- package/theme/lumo/vaadin-accordion-panel-styles.js +0 -25
- package/theme/lumo/vaadin-accordion-panel.d.ts +0 -3
- package/theme/lumo/vaadin-accordion-panel.js +0 -3
- package/theme/lumo/vaadin-accordion.d.ts +0 -2
- package/theme/lumo/vaadin-accordion.js +0 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/accordion",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-beta1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -21,9 +21,6 @@
|
|
|
21
21
|
"type": "module",
|
|
22
22
|
"files": [
|
|
23
23
|
"src",
|
|
24
|
-
"!src/styles/*-base-styles.d.ts",
|
|
25
|
-
"!src/styles/*-base-styles.js",
|
|
26
|
-
"theme",
|
|
27
24
|
"vaadin-*.d.ts",
|
|
28
25
|
"vaadin-*.js",
|
|
29
26
|
"web-types.json",
|
|
@@ -37,22 +34,22 @@
|
|
|
37
34
|
],
|
|
38
35
|
"dependencies": {
|
|
39
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
41
|
-
"@vaadin/component-base": "25.0.0-
|
|
42
|
-
"@vaadin/details": "25.0.0-
|
|
43
|
-
"@vaadin/vaadin-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
|
|
37
|
+
"@vaadin/a11y-base": "25.0.0-beta1",
|
|
38
|
+
"@vaadin/component-base": "25.0.0-beta1",
|
|
39
|
+
"@vaadin/details": "25.0.0-beta1",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
|
|
45
41
|
"lit": "^3.0.0"
|
|
46
42
|
},
|
|
47
43
|
"devDependencies": {
|
|
48
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
44
|
+
"@vaadin/chai-plugins": "25.0.0-beta1",
|
|
45
|
+
"@vaadin/test-runner-commands": "25.0.0-beta1",
|
|
50
46
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
|
-
"
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
|
|
48
|
+
"sinon": "^21.0.0"
|
|
52
49
|
},
|
|
53
50
|
"web-types": [
|
|
54
51
|
"web-types.json",
|
|
55
52
|
"web-types.lit.json"
|
|
56
53
|
],
|
|
57
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
|
|
58
55
|
}
|
|
@@ -10,7 +10,7 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
|
|
|
10
10
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
11
11
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
12
12
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
13
|
-
import { accordionHeading } from './styles/vaadin-accordion-heading-
|
|
13
|
+
import { accordionHeading } from './styles/vaadin-accordion-heading-base-styles.js';
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
16
|
* The accordion heading element.
|
|
@@ -66,14 +66,15 @@ export const AccordionMixin = (superClass) =>
|
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
/**
|
|
69
|
+
* @param {FocusOptions=} options
|
|
69
70
|
* @protected
|
|
70
71
|
* @override
|
|
71
72
|
*/
|
|
72
|
-
focus() {
|
|
73
|
+
focus(options) {
|
|
73
74
|
if (this._observer) {
|
|
74
75
|
this._observer.flush();
|
|
75
76
|
}
|
|
76
|
-
super.focus();
|
|
77
|
+
super.focus(options);
|
|
77
78
|
}
|
|
78
79
|
|
|
79
80
|
/** @protected */
|
|
@@ -28,14 +28,15 @@ export type AccordionPanelEventMap = AccordionPanelCustomEventMap & HTMLElementE
|
|
|
28
28
|
* -----------------|----------------
|
|
29
29
|
* `content` | The wrapper for the collapsible panel content.
|
|
30
30
|
*
|
|
31
|
-
* The following attributes are
|
|
31
|
+
* The following state attributes are available for styling:
|
|
32
32
|
*
|
|
33
|
-
* Attribute
|
|
34
|
-
*
|
|
35
|
-
* `opened`
|
|
36
|
-
* `disabled`
|
|
37
|
-
* `focus-ring`
|
|
38
|
-
* `focused`
|
|
33
|
+
* Attribute | Description
|
|
34
|
+
* ---------------|------------
|
|
35
|
+
* `opened` | Set when the collapsible content is expanded and visible
|
|
36
|
+
* `disabled` | Set when the element is disabled
|
|
37
|
+
* `focus-ring` | Set when the element is focused using the keyboard
|
|
38
|
+
* `focused` | Set when the element is focused
|
|
39
|
+
* `has-tooltip` | Set when the element has a slotted tooltip
|
|
39
40
|
*
|
|
40
41
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
41
42
|
*
|
|
@@ -9,7 +9,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
|
9
9
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
10
10
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
11
11
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
12
|
-
import { accordionPanel } from './styles/vaadin-accordion-panel-
|
|
12
|
+
import { accordionPanel } from './styles/vaadin-accordion-panel-base-styles.js';
|
|
13
13
|
import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
|
|
14
14
|
|
|
15
15
|
/**
|
|
@@ -23,14 +23,15 @@ import { AccordionPanelMixin } from './vaadin-accordion-panel-mixin.js';
|
|
|
23
23
|
* -----------------|----------------
|
|
24
24
|
* `content` | The wrapper for the collapsible panel content.
|
|
25
25
|
*
|
|
26
|
-
* The following attributes are
|
|
26
|
+
* The following state attributes are available for styling:
|
|
27
27
|
*
|
|
28
|
-
* Attribute
|
|
29
|
-
*
|
|
30
|
-
* `opened`
|
|
31
|
-
* `disabled`
|
|
32
|
-
* `focus-ring`
|
|
33
|
-
* `focused`
|
|
28
|
+
* Attribute | Description
|
|
29
|
+
* ---------------|------------
|
|
30
|
+
* `opened` | Set when the collapsible content is expanded and visible
|
|
31
|
+
* `disabled` | Set when the element is disabled
|
|
32
|
+
* `focus-ring` | Set when the element is focused using the keyboard
|
|
33
|
+
* `focused` | Set when the element is focused
|
|
34
|
+
* `has-tooltip` | Set when the element has a slotted tooltip
|
|
34
35
|
*
|
|
35
36
|
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
|
|
36
37
|
*
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-accordion-heading.js';
|
|
2
2
|
export * from './src/vaadin-accordion-heading.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-accordion-panel.js';
|
|
2
2
|
export * from './src/vaadin-accordion-panel.js';
|
package/vaadin-accordion.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './src/vaadin-accordion.js';
|
|
2
2
|
export * from './src/vaadin-accordion.js';
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/accordion",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
"name": "vaadin-accordion-panel",
|
|
77
|
-
"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
|
|
77
|
+
"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 state attributes are available 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`has-tooltip` | Set when the element has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
78
78
|
"attributes": [
|
|
79
79
|
{
|
|
80
80
|
"name": "opened",
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
},
|
|
186
186
|
{
|
|
187
187
|
"name": "vaadin-accordion",
|
|
188
|
-
"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\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
188
|
+
"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\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
189
189
|
"attributes": [
|
|
190
190
|
{
|
|
191
191
|
"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": "25.0.0-
|
|
4
|
+
"version": "25.0.0-beta1",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
"name": "vaadin-accordion-panel",
|
|
40
|
-
"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
|
|
40
|
+
"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 state attributes are available 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`has-tooltip` | Set when the element has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
41
41
|
"extension": true,
|
|
42
42
|
"attributes": [
|
|
43
43
|
{
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
},
|
|
80
80
|
{
|
|
81
81
|
"name": "vaadin-accordion",
|
|
82
|
-
"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\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-
|
|
82
|
+
"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\nSee the [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-beta1/#/elements/vaadin-accordion-panel)\ndocumentation for the available state attributes and stylable shadow parts.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
83
83
|
"extension": true,
|
|
84
84
|
"attributes": [
|
|
85
85
|
{
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2019 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const accordionHeading = css`
|
|
9
|
-
:host {
|
|
10
|
-
display: block;
|
|
11
|
-
outline: none;
|
|
12
|
-
-webkit-user-select: none;
|
|
13
|
-
user-select: none;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
:host([hidden]) {
|
|
17
|
-
display: none !important;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
button {
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
justify-content: inherit;
|
|
24
|
-
width: 100%;
|
|
25
|
-
margin: 0;
|
|
26
|
-
padding: 0;
|
|
27
|
-
background-color: initial;
|
|
28
|
-
color: inherit;
|
|
29
|
-
border: initial;
|
|
30
|
-
outline: none;
|
|
31
|
-
font: inherit;
|
|
32
|
-
text-align: inherit;
|
|
33
|
-
}
|
|
34
|
-
`;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright (c) 2019 - 2025 Vaadin Ltd.
|
|
4
|
-
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
|
|
5
|
-
*/
|
|
6
|
-
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
export const accordionPanel = css`
|
|
9
|
-
:host {
|
|
10
|
-
display: block;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([hidden]) {
|
|
14
|
-
display: none !important;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
[part='content'] {
|
|
18
|
-
display: none;
|
|
19
|
-
overflow: hidden;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
:host([opened]) [part='content'] {
|
|
23
|
-
display: block;
|
|
24
|
-
overflow: visible;
|
|
25
|
-
}
|
|
26
|
-
`;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { detailsSummary } from '@vaadin/details/theme/lumo/vaadin-details-summary-styles.js';
|
|
2
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
3
|
-
|
|
4
|
-
const accordionHeading = css`
|
|
5
|
-
:host {
|
|
6
|
-
padding: 0;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
[part='content'] {
|
|
10
|
-
padding: var(--lumo-space-s) 0;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
:host([theme~='filled']) {
|
|
14
|
-
padding-top: 0;
|
|
15
|
-
padding-bottom: 0;
|
|
16
|
-
}
|
|
17
|
-
`;
|
|
18
|
-
|
|
19
|
-
registerStyles('vaadin-accordion-heading', [detailsSummary, accordionHeading], { moduleId: 'lumo-accordion-heading' });
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import '@vaadin/vaadin-lumo-styles/color.js';
|
|
2
|
-
import '@vaadin/vaadin-lumo-styles/spacing.js';
|
|
3
|
-
import { details } from '@vaadin/details/theme/lumo/vaadin-details-styles.js';
|
|
4
|
-
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
5
|
-
|
|
6
|
-
const accordionPanel = css`
|
|
7
|
-
:host {
|
|
8
|
-
margin: 0;
|
|
9
|
-
border-bottom: solid 1px var(--lumo-contrast-10pct);
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
:host(:last-child) {
|
|
13
|
-
border-bottom: none;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
:host([theme~='filled']) {
|
|
17
|
-
border-bottom: none;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
:host([theme~='filled']:not(:last-child)) {
|
|
21
|
-
margin-bottom: 2px;
|
|
22
|
-
}
|
|
23
|
-
`;
|
|
24
|
-
|
|
25
|
-
registerStyles('vaadin-accordion-panel', [details, accordionPanel], { moduleId: 'lumo-accordion-panel' });
|