@vaadin/accordion 25.0.0-rc1 → 25.0.0

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.
Files changed (7) hide show
  1. package/package.json +9 -9
  2. package/src/vaadin-accordion-heading.d.ts +15 -0
  3. package/src/vaadin-accordion-heading.js +15 -0
  4. package/src/vaadin-accordion.d.ts +5 -2
  5. package/src/vaadin-accordion.js +5 -2
  6. package/web-types.json +3 -3
  7. package/web-types.lit.json +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/accordion",
3
- "version": "25.0.0-rc1",
3
+ "version": "25.0.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -34,22 +34,22 @@
34
34
  ],
35
35
  "dependencies": {
36
36
  "@open-wc/dedupe-mixin": "^1.3.0",
37
- "@vaadin/a11y-base": "25.0.0-rc1",
38
- "@vaadin/component-base": "25.0.0-rc1",
39
- "@vaadin/details": "25.0.0-rc1",
40
- "@vaadin/vaadin-themable-mixin": "25.0.0-rc1",
37
+ "@vaadin/a11y-base": "~25.0.0",
38
+ "@vaadin/component-base": "~25.0.0",
39
+ "@vaadin/details": "~25.0.0",
40
+ "@vaadin/vaadin-themable-mixin": "~25.0.0",
41
41
  "lit": "^3.0.0"
42
42
  },
43
43
  "devDependencies": {
44
- "@vaadin/chai-plugins": "25.0.0-rc1",
45
- "@vaadin/test-runner-commands": "25.0.0-rc1",
44
+ "@vaadin/chai-plugins": "~25.0.0",
45
+ "@vaadin/test-runner-commands": "~25.0.0",
46
46
  "@vaadin/testing-helpers": "^2.0.0",
47
- "@vaadin/vaadin-lumo-styles": "25.0.0-rc1",
47
+ "@vaadin/vaadin-lumo-styles": "~25.0.0",
48
48
  "sinon": "^21.0.0"
49
49
  },
50
50
  "web-types": [
51
51
  "web-types.json",
52
52
  "web-types.lit.json"
53
53
  ],
54
- "gitHead": "cea5e86ad18824e5631b63c11150b4d7701869c5"
54
+ "gitHead": "c979f7ca278b6412095176ada230eb07eb4456bf"
55
55
  }
package/src/vaadin-accordion-heading.d.ts CHANGED
@@ -38,6 +38,21 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
38
38
  * `opened` | Set when the collapsible content is expanded and visible.
39
39
  * `disabled` | Set when the element is disabled.
40
40
  *
41
+ * The following custom CSS properties are available for styling:
42
+ *
43
+ * Custom CSS property |
44
+ * :--------------------------------------------|
45
+ * | `--vaadin-accordion-heading-background` |
46
+ * | `--vaadin-accordion-heading-border-color` |
47
+ * | `--vaadin-accordion-heading-border-radius` |
48
+ * | `--vaadin-accordion-heading-border-width` |
49
+ * | `--vaadin-accordion-heading-font-size` |
50
+ * | `--vaadin-accordion-heading-font-weight` |
51
+ * | `--vaadin-accordion-heading-gap` |
52
+ * | `--vaadin-accordion-heading-height` |
53
+ * | `--vaadin-accordion-heading-padding` |
54
+ * | `--vaadin-accordion-heading-text-color` |
55
+ *
41
56
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
42
57
  */
43
58
  declare class AccordionHeading extends ActiveMixin(DirMixin(ThemableMixin(HTMLElement))) {
package/src/vaadin-accordion-heading.js CHANGED
@@ -43,6 +43,21 @@ import { accordionHeading } from './styles/vaadin-accordion-heading-base-styles.
43
43
  * `opened` | Set when the collapsible content is expanded and visible.
44
44
  * `disabled` | Set when the element is disabled.
45
45
  *
46
+ * The following custom CSS properties are available for styling:
47
+ *
48
+ * Custom CSS property |
49
+ * :--------------------------------------------|
50
+ * | `--vaadin-accordion-heading-background` |
51
+ * | `--vaadin-accordion-heading-border-color` |
52
+ * | `--vaadin-accordion-heading-border-radius` |
53
+ * | `--vaadin-accordion-heading-border-width` |
54
+ * | `--vaadin-accordion-heading-font-size` |
55
+ * | `--vaadin-accordion-heading-font-weight` |
56
+ * | `--vaadin-accordion-heading-gap` |
57
+ * | `--vaadin-accordion-heading-height` |
58
+ * | `--vaadin-accordion-heading-padding` |
59
+ * | `--vaadin-accordion-heading-text-color` |
60
+ *
46
61
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
47
62
  *
48
63
  * @customElement
package/src/vaadin-accordion.d.ts CHANGED
@@ -53,8 +53,11 @@ export type AccordionEventMap = AccordionCustomEventMap & HTMLElementEventMap;
53
53
  *
54
54
  * ### Styling
55
55
  *
56
- * See the [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
57
- * documentation for the available state attributes and stylable shadow parts.
56
+ * Accordion does not have own stylable shadow parts or state attributes. Instead, apply styles to
57
+ * the following components:
58
+ *
59
+ * - [`<vaadin-accordion-heading>`](#/elements/vaadin-accordion-heading)
60
+ * - [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
58
61
  *
59
62
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
60
63
  *
package/src/vaadin-accordion.js CHANGED
@@ -38,8 +38,11 @@ import { AccordionMixin } from './vaadin-accordion-mixin.js';
38
38
  *
39
39
  * ### Styling
40
40
  *
41
- * See the [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
42
- * documentation for the available state attributes and stylable shadow parts.
41
+ * Accordion does not have own stylable shadow parts or state attributes. Instead, apply styles to
42
+ * the following components:
43
+ *
44
+ * - [`<vaadin-accordion-heading>`](#/elements/vaadin-accordion-heading)
45
+ * - [`<vaadin-accordion-panel>`](#/elements/vaadin-accordion-panel)
43
46
  *
44
47
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
45
48
  *
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": "25.0.0-rc1",
4
+ "version": "25.0.0",
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'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/styling-components) documentation.",
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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n| `--vaadin-accordion-heading-background` |\n| `--vaadin-accordion-heading-border-color` |\n| `--vaadin-accordion-heading-border-radius` |\n| `--vaadin-accordion-heading-border-width` |\n| `--vaadin-accordion-heading-font-size` |\n| `--vaadin-accordion-heading-font-weight` |\n| `--vaadin-accordion-heading-gap` |\n| `--vaadin-accordion-heading-height` |\n| `--vaadin-accordion-heading-padding` |\n| `--vaadin-accordion-heading-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "disabled",
@@ -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-rc1/#/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.",
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\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.0.0/#/elements/vaadin-accordion-heading)\n- [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0/#/elements/vaadin-accordion-panel)\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-rc1",
4
+ "version": "25.0.0",
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'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/styling-components) documentation.",
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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n| `--vaadin-accordion-heading-background` |\n| `--vaadin-accordion-heading-border-color` |\n| `--vaadin-accordion-heading-border-radius` |\n| `--vaadin-accordion-heading-border-width` |\n| `--vaadin-accordion-heading-font-size` |\n| `--vaadin-accordion-heading-font-weight` |\n| `--vaadin-accordion-heading-gap` |\n| `--vaadin-accordion-heading-height` |\n| `--vaadin-accordion-heading-padding` |\n| `--vaadin-accordion-heading-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
@@ -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-rc1/#/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.",
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\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.0.0/#/elements/vaadin-accordion-heading)\n- [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0/#/elements/vaadin-accordion-panel)\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
83
83
  "extension": true,
84
84
  "attributes": [
85
85
  {